An Event Apart Chicago Notes: Monday, August 27th

The following are notes from my attendance at An Event Apart : Chicago on August 27th and 28th. I hope to share my experiences/knowledge gained and focus on points/topics I feel are most important and eye opening.

UPDATE: I’ve posted my notes from Tuesday, August 28th in a separate blog post.

• Overview Turning Table into a bar Graph
• Use display table-layout to layout things other than table.
• Use can use padding on things other than text like images
• Images do and can have a background color.
• CSS doesn’t care what you think about, It can and will override HTML defaults if you want it to.
• You can’t completely divorce the style from html structure.
• Inset & Outset on Table Borders – don’t leave it up to the browser (don’t give them the chance to mess it up) Set it yourself!
• Its important to know what a CSS spec doesn’t say as well as what it does.
• Percentage values can have decimal points.
• Relative positioning doesn’t remove the space its taking up. You must adjust for that space if you move it.
• Using percentages allows you to change the container size and have everything follow its lead.
• Reset styles – Use these to block out and reset all elements on a page for all browsers.
• Zero everything out using reset styles to create your own foundation to build from.
• Reset styles help minimize cross browser conflicts.
• the HTML element is the only one that applies upwards and ascends to the canvas, everything else desecnds(cascades).

• All the interface is done with the arrangement with words.
• Its hyperText not hyper-Images!
• The most popular sites are the ones that keep updating content and stay “fresh”.
• Sites that have Bad I.A. or Design… are overshadowed by “freshness”.
• Language is the main interface on most sites (without words its hard to know how to interact).
• Flickr’s entire interface is words!
• Get a writing budget and hire a Copy Czar.
• If no budget is available, what do we do? Make words work!
• Be Humane! Design to help people read less.
• When people read less because of too many words, every word counts less.
• The web is a narrative experience engages the user, and that the user creates.
• Copy is often the cheapest part of your site to fix and is a brand opportunity.
• Guide copy is copy that allows people to interact with your site’s content.
• It should be clear, brief, audience-appropriate and brand appropriate.
• Guide Copy Example: “To continue reading this article, you must be a subscriber to TimesSelect.”
• If something is required then enable the user to meet the requirement. (link, login, form, etc.)
• Let the design set the tone and keep the content neutral.
• Don’t be overly redundant.
• Example: “Write a special note, and send away” What does send away mean!?
• Basecamp Sign in Screen: A great example of a branding opportunity.
• Welcome Text Reads: “Please login first and then we’ll send you right along”
• SIMPLE & FRIENDLY: “Please” = polite, “login first” = says you’ll do something after, “we’ll send you right along” = there is something after this is complete
• Project managers are the most un-respected job.
• Explain why someone should click a link as part of the link. “Take a tour and we’ll prove it.” This is good text linking.
• Copy Must be brand appropriate. EX: Flickr “Buddy Icon” not “Avatar”
• You have to sell Geeks and sell to everyone else… while appearing to be easy to use. (by using language)
• It’s not dumbed down or condescending… but simple.
• “Copy” copy = stuff that isn’t URLS or other items that aren’t important.
• “Copy” Copy needs to have the right attitude or feeling… being relaxed in presentation.
• “Brand” Copy Example : “The Leukemia Letters” – “My experiences with leukemia, blindness, and life in general”
• Brand copy tells people quickly and simply what your company is about, so be explicit and absolutely clear.
• Brand copy is near your logo and at the top of the page (For search engines, etc.)
• Brand Copy Example for A List Apart: “For People Who Make Websites”
• Make a brief introduction and header for pages and Brand appropriate FAQ’s worded for audience.
• LULU does this poorly – You can get stuff on amazon make books, CDs, etc. Their about text was 4 paragraphs long.
• About pages are important (Who & what) If someone likes iyour site, they’ll likely want to know who and what.
• Friendly approach for navigation “Who we are”, “What we do”, “How we work together” are similar to how you would talk to a friend.
• Speaking URLS “www.alistapart.com/topics/design” or “www.haveamint/requirements” You can say the url and it makes sense. This helps users connect.
• HOW WORDS WORK ONLINE: Users are often in in “find” mode, so they scan, even when people read they scan online.
• For most, english is a second language and vocab and education levels vary.
• Use frequent subheads, chunk text, use mostly 8th grade vocab and short declarative sentences.
• You can salvage junk text dumped on you into something better.
• Break into informational lists and paragraphs instead of 4 paragraphs.
• Recommended reading: Attack of the Zombie Copy and Your About Page is a Robot
• This approach is great for SEO because it uses headings for the right words, and keeps work rank high because word use is leaner.
• Lump these topics under usability because more people think that is important and that is really what it’s about.
• “How to determine what the brand is and keeping up front”. ASK What non web materials has been produced? Ask stake holders, who is audience? Ask real users and compare your results.

• There is a bigger element in design: all little details add up to a design and can either create success or cripple your project.
• Any good design process starts with a Discovery phase. Its focused on what message is be conveyed.
• Discovery should be done in a place where you feel creative.
• Sketchbooks are place where you can discover and be creative and capture ideas. (you can go back and get the flood of ideas again)
• Printed Materials inspire his design (Old sheet music was an example.)
• Keep digital morgue Files. iPhoto is good for organizing inspirational material! (good one) Its visual and very easy to search by title and taging.
• Research Phase (find what the client wants)
• Go sit in on everday sessions in the office and experience the client’s ways. You’ll learn the ways of their community.
• Learn the history of the design and traditions.
• Take the info you’ve gained and your connection and draft up the first design.
• Intimacy by close cropped photos (use of traditional colors to give an updated feel)
• Look to other mediums to find successful approaches of your goals.
• Create a goal for site (EX: custom image for every article, something someone can sit down and read” are goals).
• Most people have a really hard time designing for themselves and how to express themselves visually.
• Use your “About text” to be your navigation… It describes and navigates. EXAMPLE: HappyCog.com
• PROCESS PHASE: Iterative Design – Get close to mark on the first design (then 2 rounds of revisions)
• Grey box comp: Sit down and speak the message and its given effectively (not color or type choices) before diving into PhotoShop.
• Look to give your client a decent place to leap from before iterations. You want a good starting place.
• Initially Paint Broad Strokes, don’t frankenstein the designs or cross streams.
• Ask for one design idea to be moved forward with.
• Second round of design is where you dig into details (link colors, where links, body copy, typeface)
• Third Round (flow, navigation, logo bigger!, fine fine details)
• Everything starts from a grey box layout… before you design.
• Give interesting options for text layout, Photos, by giving room and space.
• BRAND VS LOGO
• “A brand is a person’s gut feeling about a product, service or company” – Marty Neumeier, The Brand Gap
• A brand shouldn’t piggy back on others and should inform the user, create a timeless feel.
• “A logo derives its meaning from the quality of the thing it symbolizes, not the other way around.” – Paul Rand
• DESIGNING A LOGO
• What does the company allow people to do, or have? Get into your sketch book with this idea.
• Start polishing your ideas loosely, making loose associations.
• “If design can be refined without disturbing its image, it seems reasonable to do so. A logo, after all, is an instrument of pride and should be shown at its best.” – Paul Rand
• Nurture a re-design… don’t abandon people and make them question the change.
• Don’t kill associations.
• LAYOUT – Grid-work: framing your content with this. Creating a framework so people understand where things are when they use your site.
• People aren’t going to stick around and learn the language you’ve designed on your site. (create and find common language people understand)
• Start with a 12 column grid so you can break it up into many separate columns, if that works.
• PLAN FOR PLACEMENT (so a client will know how to update their site)
• A grid is something you can always build upon. (don’t build a house with a roof first)
• WHITESPACE
• Whitespace is such a powerful tool and is rarely used.
• Hierarchy and focal point: “Left to right, top to bottom, big and small.” – Winter Sorbeck
• Hierarchy and focal point are some of the most powerful tools.
• Use Restraint.
• DETAILS
• Sweat the small stuff at the end.
• Black on white text can be somewhat disturbing to read. Soften it up to make it a bit more readable.
• TYPOGRAPHIC INTERLUDE
• Who Care’s : Same care should go into type just what you put into semantics and CSS. Use proper quotes no inch marks or foot marks.
• Every detail makes the site that much stronger.
• Book Recommendations: “Thinking With Type” by Ellen Lupton
• His preference on Centered layouts VS left-aligned websites (Depends on the Content)
• His thoughts on Fluid layouts – Its really hard and tough. Lots of different content can be problematic.

• He is the Co-Father of Modern Information Architecture
• He is going to review Search Analytics for your search on your site.
• Every organization has log info that you can search which can help you define your users.
• Adjust for misspellings and use spell check or find common misspellings and correct for them.
• Zipf Curve: a few unique queries comprise a large majority of searches on a website.
• Keep your searches in proportion when grouping them and focus on the searches at the top of list.
• If you want people to have a better experience using your search, focus on the top ranking searches.
• Focus on your top 5 and next month focus on top 20 and then on and on…
• This approach can also help prioritize other areas of your site that need improvement.
• Pay attention to topical patterns and seasonal changes in searches.
• Focus losely on what types of topics they are searching for.
• Three major ways of capturing these queries (huge search log files, capture them in your own database, search for keywords your commercial search solution captures like google or reinvigorate)
• QUESTIONS TO GET YOU STARTED
• 1) What are the most frequent queries?
• 2) Are frequent queries retrieving quality results?
• 3) Click-through rates per frequent query?
• 4) Most frequently clicked result per query?
• 5) Which frequent queries retrieve zero results?
• 6) What are the referrer pages for frequent queries?
• 7) What queries retrieve popular documents?
• 8) What interesting patterns emerge in general?
• TUNE YOUR QUESTIONS
• Netflix asks: Which movies most frequently searched? Which of them most frequently clicked through? Which of them least frequently added to queue?
• This starts to get you to the Whys! and past the Whats.
• When we think we know what we want, we are likely wrong. So be sure.
• People would go through a print catalog (which is often easier) and then go to the website and search a SKU number which isn’t provided on site. People prefer the tangible.
• Look at common searches within the same session to find what someone might be getting at.
• Learn pages that people initiate searches from to determine what types of search they might want.
• Try tracking users based on guessing what type of user they are (logged in or not) (new or old users) to send them to a different type of search result group.
• Best bet search results (human decided search results so that people get what they want based on a topic) BBC – search “Iraq” called “Best Link”
• FAILED QUERIES
• Bad Meta Data, not being indexed by your search, Does the content exist, if not why not?
• www.behaviortracking.com
• BBC removes navigation pages from search results to streamline the search process.
• Compliment what a robot comes up with by serving human selected content based on most common searches.
• Track Click throughs to determine which results should rise to the top.
• INTERFACE DESIGN
• Give assistance at dead end points like 0 results and 2000 results (at that point give them advanced search results instead at the start)
• Track which advanced search features are used so you can make them more prominent.
• Look at which result in a list is clicked the most, on a specific search, and what makes it different from other results.
• HOW TO SORT RESULTS
• One site found that users were entering dates in their queries so they added a Date search.
• WHAT TO CHANGE TO IMPROVE SEARCHES
• Add functionality (spell check).
• Retrieval algorithm modifications.
• Request better budget for search engine overhaul.
• Build an A-Z index automatically based on frequent queries.
• LOOK INTO WHERE SEARCHES FAIL? (What do they search? are there other issues that cause a “dead end” like tagging and titling problems? Do user studies?)
• How do searchers express their needs (“cancer” VS “oncology” or “lorry” VS “truck” or acronyms)
• Uncover hierarchy and identify (mobile vs cell or genre and content types)
• Thesaurus development and clustering is a way to group similar items.
• Reverse Engineer performance problems (text “best” results, determine why they aren’t found or clicked through and demonstrate problem and solution to content providers
• Review your searches and create content based off your searches for which you don’t have content.
• Benefits are non-intrusive, inexpensive, large amount of real data, represents actual usage patterns.
• Drawbacks are it provides an incomplete picture of usage.
• Problems tend to focus on lack of time, there are a few useful tools for parsing logs and making reports, conflicts between content creators and Search analysts.
• The goal is to just improve and go from there… make more improvements as you go. Refine and refine.
• Hitwise and comsource with allow you to pay to see their data.

• It’s much easier to look at rules and harder to follow guidelines.
• Check out: Yahoo Pattern Library
• Navigation should be consistent Its good to bend this rule!
• People can understand larger context of info by looking at a smaller part.
• How do we act on the internet: Need -> Interpret -> Navigate -> React
• People need to familiar and can predict navigation.
• There is a magic number seven plus or minus two. It always depends.
• Broad and shallow navigation structures are easier to navigate for people.
• Users must get to all parts of the site all the time. WRONG! Users should be able to get everywhere from everywhere.
• If it’s a closed site then its okay to make available all points since people aren’t coming in from the web.
• An Example: 75% of people are coming from outside the site – Need to not think about them as sole experiences, but something people can jump into at any point in the site.
• Users must know where they are at all times. Not true, they need related content and to be able find their way to the next thing.
• Daylife actually tries to get users to get lost.
• People just want to move to the next thing without concern of where they are.
• The user experience must be seamless The designer must design beautiful seams.
• HIG Guidelines: People refer to the Guidelines but still create something different but similar.
• Find the things that will be important and what things you can let go.
• Miranda July Example: Website has near 29 clicks before the buy button.
• Shorter isn’t always better, sometimes longer is better too.
• Information architects do information architecture… and so should developers, designers, writers, clients, and users.
• All of us need to do information architecture.
• How do we break conventions? By looking at behaviors people are already doing and create a better opportunity. Instead of first paving pathways, Leave the grass and let people walk on the grass killing it, thus create pathways in the dirt. Then pave where people left their own walkways.
• You can create your own research and create your own results to prove your ideas.

• He runs SimpleBits
• We’re jugglers as interface designers, much like clowns.
• You start with one thing at a time, then add two then three… and so on.
• Your not juggling until you are successfully keeping them all in the air.
• COLOR: its difficult and hard… its also emotional.
• Bad client design comments: “I hate that green. It reminds me of my ex-girlfriends quilt.”
• Bad client design comments: “More WOW please.”
• Color Palette Generator Tool
• Color Jack Color palette generator can be very helpful.
• Choose color palettes from nature photos.
• Pixelate > Mosaic on photos to pull colors from it.
• Color inspiration: sites like flickr from photos that have “two colors of less”
• Drawn website is a great illustration & cartoon blog http://drawn.ca
• Yogi Bear cartoon background color: blending all the objects in the background blends the background objects so they don’t compete for attention.
• Texture is important with color on the web.
• ManiacalRage site has a noisy grain to it which can be nicer than a flat color.
• Once you have a color palette in mind its important to stick to that palette and not sway from it.
• Take a color from a logo and reuse it in many ways.
• From that palette and take different hues from that.
• Link color carries weight on the page and is important and can become an important design element.
• Typography – its text on the web primarily which is the focus of the discussion.
• Great typography is invisible to those who aren’t typography geeks.
• Web Design is 95% Typography.
• Problems are there are two few fonts to work with, BUT in the past some of the best designs were done with a single font.
• We can do a great job with what we have.
• Georgia for headings (maybe primary content) and verdana for everything else is something he uses frequently.
• You can use the same font for a drastically different appearance, small caps, letter-spacing, ALL CAPS, etc.
• Recommended Book: The elements of Typographic Style
• In heads in title use the best available Ampersand on your computer.
• Good resource:http://Webtypography.net
• Harmonize type set in graphics so images share a common typeface.
• Discover typefaces!
• Subscribe to as many font foundries as you can.
• “MyFonts.com’:http://myfonts.com has a great newsletter, interviews and history.
• Favicons : The most important design element of a site.
• subtraction.com : Favicons for visual elements for the site.
• Creating a Favicon is either Really easy or Really difficult.
• Options can be (scale down, choose a fragment of the mark, or choose something unique/part of the brand)
• Example site toupeepal.com for a favicon.
• Flickr uses something which is similar to their brand for their favicon.
• Iconographer is what he uses to create his favicon.
• Inspiration can be found from “delta tango bravo” website : he collects favicons
• Smashing magazine collects favicons as well.
• Suggest the box on a web page. Style portions of the box with minimal background images for simple markup and future proofing.
• Add one rounded corner as its simple to add with minimal markup.
• Know your CSS limitations when designing.
• Reuse/Recycle: simplify design and process by reusing themes, color, graphics.
• Reuse/Recycle: This method also helps to tie elements together too.
• MICROFORMATS
• They help with juggling mark up.
• Microformats are something that need to be explained better.
• A simple description of microformats is “I’m going to mark up a contact like this” and someone else says “I’ll do it that way as well!”.
• Writing classes that define a specific part of data and is also useable by CSS which is a benefit for designers.
• Microformats use what works today. Instead of waiting around for standards to be made.
• hCard : Contact Information
• For a good place to start Use the Microforamt code creator so you can see how it works.
• Technorati looks at the page and grabs the hCard based on what is already on the page and delivers to the address book.
• Microformats work now!
• Corkd.com used hReview and also rel-tag and hCard since people have already worked hard to figure out this mark up.
• Its all about planting seeds… then cool stuff did happen. This is kinda “Oblivious Development”
• sparql.org : Spits out microformats queries his friend built… but he had no ideas what he was talking about initally.
• Scrugy… scraped Cork’d for search reviews.
• Microformats are somewhat of an accidental API
• >http://allinthehead.com/retro/301/can-your-website-be-your-api is a cool presentation.
• Microformats work together.
• XFN, hCard, hReview, hResume, rel-tag… all start to work together.
• http://simplebits.com/publications/speak/juggling
• Turn CSS off. Is your site still easily readable?
• Embrace Felxibility and prepare for worst case secarios.
• Turn Images off and test.
• Increase text size and see what happens, can you make things better when font sizes are bigger.
• Validate markup and stylesheets – especially during the design deisng process.

UPDATE Read my notes from Tuesday, August 28th in a separate blog post.