An Event Apart Chicago Notes: Tuesday, August 28th

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

• Covers Markup, css, javascript
• The three layers of separation are the mark up, presentation, and the behavior
• Separation is key to have a robust website and one that can adapt to
• You begin with the content, then you add structure (paragraph,list, headline) then presentation, the behaviour
• the beauty of this aproach is you can strip the layers and still have well structured content
• CSS p{ } is the same as Javascript document.getElementsByTagName(“p”);
• CSS #foo { } is the same as Javascript DOM document.getElementByID(“foo”);
• CSS #foo p{ } document.gerElementByID(“foo”).getElementsByTagName(“p”);
• Write down what you want to do in English and then Translate to Javascript
• be vigilant Resist inline styles, resist adding behaviour
• No! <a href="javascript:..." <a href="#" onclick="..."
• First think semantically
• Aaron gufstuson
• Recommended Book Advanced DOM scripting
• Be careful about recreating mark up
• redeparede.com is like a Brazilian Craigslist
• Use optgroup to make subcategories and make content grouped together
• BEHAVE
• AJAX can make people throw separation out the window.
• His definition of ajax is communication with the server without refreshing the whole page.
• This can be done discretely and is often overused by people
• xmlhttprequest is what we use for AJAX
• When you are using AJAX you can still use progressive enhancement = hijax
• build a non ajax site then build an AJAX from that
• Instead of reloading a page after a form submit, you hijack the information and use xmlhttprequest to shuttle the info instead
• Don’t make a browser require javascript to use a site.
• A shopping cart is a great example of using AJAX to update a shopping cart
• this.elements (gets all elements in a form)
• You have to fork your code for different browsers
• The challenges of AJAX don’t lie in the code.
• The challenges lie in the design challenges and you’re responsible for making the page work.
• BEYOND THE BROWSER (What’s Happening? what happened?)
• Indicate something is happening.
• think about bookmarking and the back button
• If you’re taking the browser out of the situation your messing with the history stack
• If users want to click a back button and can’t… you’re probably doing too much
• User testing will tell you if something is too much, when people are scared, upset, and what they really want.
• CSS psuedo classes are actually a beahviour and is better suited for Javascript
• There are more protocols besides get and post like put and delete

• Forms really matter
• Forms make money (maximize sales and enable purchasing)
• Forms stand in the way of someone joining your community.
• Forms give Access (User: Enables participation, Business: Increase sales)
• Minimize the pain with smart defaults, inline validation, forgiving inputs
• Illuminate path to completeion
• Consider the context (familiar vs foreign) & (frequently used VS rarely used)
• Ensure Consistent Communication (Errors, Help, Success) Make it seem like you are talking to a person and not a bunch of stake holders
• Use Multiple data sources to define what works like Usability testing, Research,
• Design Patterns: Information + Interaction + Feedback
• Information (layout label positioning and content groupings)
• top aligned labels: When data collecting is familiar and minimizes time to completion. they require more vertical space and require more spacing
• Right aligned labels ( clear association and require less vertical space, more difficult to scan but have flast completion times
• left aligned labels( good for unfamiliar info and is slower, less clear association, better for things where you only change one or two things)
• Use left align to slow people down
• top align is much quicker based on eye tracking information
• right vs left aligned labels: right is twice as quick but top aligned is the quickest
• Asterisk means Required
• Indicating what is optional is most useful when only a few things are optional.
• Indicating what is required is most useful when only a few things are required.
• Use text as Required instead of required if possible
• If everything is required don’t say it just
• Get rid of stuff on your form… and it’ll make a huge impact.
• Avoid optional field
• Field lengths provide good info about the field
• people think about size of forms…
• Use field length as affordance
• Otherwise consider a consistent length
• Group form elements so they are easier to scan
• Remove visual elements from the page and use a subtle, less noisy grouping (thin rule)
• label groupings so they are easier to figure out and scan
• use relavant groupings to organize forms
• Not all forms are equal
• Reset, cancel and go back are secondary actions: rarley need to be used (if at all)
• Primary actions are dominant and secondary should be somewhat different
• People appreciate differences and slow them down so they don’t make an error.
• The continue button on the far right of the form is actually a bad test. 6 out of 23 failed a form with testing.
• Illuminate a path to completion.
• Set up heat maps on your forms
• etre.com has eye tracking
• Make a visual distriction between primary and secondary actions
• Help + tips ( useful when asking for data they don’t understand, when they want to know why, when recommending a ways to provide data)
• Help + tips can quickly become overused… so focus on answering with labels or with the layout of the form
• If every field has help text, something is wrong with your form most likely.
• Type in field the help shows as you go through
• User activated inline exposure onClick or onRollover with JavaScript or
• Dynamic help layers can perform fairly well
• Make labels clear
• Best way to show help is actually on the form if you can fit it… otherwise come up with a more clever way to reduce noise.
• Path to completion (Every input requires consideration)
• Accept the 5 different ways to enter a phone number
• Visually also make a clear path to completion
• Don’t ask for marketing info, just let them buy
• Remove everything that is unnessecary
• Let people see progress and save those things
• Remember your tabbing behaviour and think about it when building
• Use tabbing index
• Exposing options only when you need them
• Place advanced stuff on a different page for editing more complex stuff
• Give multiple ways to complete a form
• Gradual engagement (ask for contact info and account info after the user is engaged ) 5 milltion profiles in 5 months
• Sliders can give you a results right away
• Most effective when user initiated
• Maintain a consistent approach for progressive exposure
• Exposing Dependent Inputs
• Maintain clear relationship between initial selection options
• Feedback (what they are doing and how they are doing)
• Validate inline: How secure is your password, picking a username, offer valid input suggestions, charcter limits
• Communicate limits
• ERRORS ( anticipate errors, Prominent an error happened, bold where the error is and change to red)
• You can use a short message on a short form, but on a bigger form you need to help them more so they can scan quickly.
• Make them high visual contrast and similar to the primary message and double language where error occured
• disable a submit button to let them know things are happening to avoid duplicate submissions
• Succes is the most important part of a form
• But your success info in context
• Indicate where the change happened if you change pages.
• Avoid change inputs provided by users
• Use label tags and tabindex
• Consider fieldset to group elements
• wufoo & iceberg are form creation tools you can use.

• His blog/sites are boxofchocolates.ca and ironfeathers.ca
• Noes can be found at icanhaz.com/accessibility
• We fall into Checklist syndrome (These are the things you need to do to make your site accessible)
• Compliance, Quality Assurance (at the end of a process), impersonal
• The words “search terms” are in the input box itself which is bad cause you’ll often have searches for “search terms”
• Accessibility not as a checklist but as a user experience
• What is a minor usability for us can be a major issue for some users
• Look at interplay between XHTML/CSS/JS
• The problem with custom widgets is that they don’t do anything
• kml will track GPS positioning?
• Google map doesn’t have controls for keyboard or anything that isn’t a mouse
• You still have a way to do it if you re-implement google maps
• Custom widgets are great but we need to choose code that is most appropriate and remember keyboard/non-mouse interaction
• Inline editing is a big trend these days
• Example: Basecamp To-do list
• The problem is that the edit,trash,move options only show up when you use a mouse (not keyboard)
• You could do something like expose all controls
• Inline editing improves accessibility if handled properly
• Changing on the fly we maintain context and comprehensibility
• Add a go into edit mode along with inline editing to provide an alternative
• LIVE UPDATES
• Issues with characters are available… should be after the field
• Requires fewer page refreshed
• How doe we indicate that the page is updated?
• How do we let the screen reader know there is new content?
• Absence of alt text screen readers read the source of the image
• Include labels for inputs or screen readers will label with the text entered
• There are no trees in HTML
• Trees in an OS announces a tree as such and tells you that there are children
• Problem with tool tip is that it only shows up on demand
• Title attribute is not read by default in screen readers and if it is it replaces the link itself
• Error/Advisory Information ( each field has a label, some fields have additional information-assosciate with the field, info needs to be near the control to

• <div>
      <label for"uname">
          Username
          <em>most not contain spaces</em>
      </label>
      <input id="uname" ... />
  </div>

• If you have developers who aren’t using labels they must start now!
• Build advisory information inside the label IMPORTANT
• FORM LINEARIZATION
• Don’t translate visual layout into the code
• Reconsider code to take into account intent and design
• Submit buttons should be last in your structure / markup
• SEARCH RESULTS
• Results are often below the fold
• Repetition of the form can confuse people that have a limited view of page
• Use a hash to jump the person so a screen reader user gets right to the results or a link at the top to the results. this helps people get where they want.
• TRANSLATING VISUAL LANGUAGE
• Designers are smart and create rhythm, flow, balance, contrast
• We need to translate the visual language to something that sounds the same
• Think about: What do color and position tell us?
• Color communicates selection, position, grouping, importance and we need to find a way to communicate that to everybody.
• Nest items that are secondary
• Remove items that aren’t related
• Create an embedded label, structural label for screen users or definition for users who can’t support CSS or style
• Think about the goal of the project and what we’re trying to do
• Scale everything with ems in CSS to make things flexible
• Provide visual feedback to tell users where something is happening
• Fieldset with a legend is a good use
• Use an ordered list if the order matters

• The 80lb Gorilla, Internet Explorer, is awake as Internet Explorer 7
• Look at your server logs for an idea if you should drop a specific browser or not.
• Advances in Standards (fixed positioning, min-width, max-width, min-height, max-height, attribute selectors, child selector, adjacent sibling selector, :first-child, chained classes and pseudo-classes, arbitrary-element : hover, Full background-attachment: fixed, abbr tag, alpha channel in PNG
• PositionIsEverything.net is a very useful site for IE 6 issues and how to fix them.
• Comments sat on the side bar using fixed so you could post a comment at any time.
• Children of elements allow you to select specific elements
• You can view the head elements
• First child is applied to the element its attached to. so if its a child of an element and its first.
• CSS 2.1
• [attr] – [href]
• [attr=”val”] – [href=”http://google.com”]
• [attr_{=”val”] – [class}=”example”]
• [attr|=”val”] – [lang|=”en”]
• CSS 3
• [attr=”val”] – [href=”.org”] finds ”.org” in it anywhere
• [attr^{=”val”] – [href}=”https”] begins with
• [attr$=”val”] – [href$=”.pdf”] ends with
• This helps for form styling
• input[type=”text”] <- selects all input elements with type that equals text
• You can look at links to add icons with CSS by looking at the filename [attr$=”val”] – [href$=”.pdf”]
• Is this a version of progressive enhancement but could be handled in a different way for IE6 users and they wouldn’t get the content.
• If its important include it as an IMG and not with CSS
• You can use this to do Secure link styling very easy
• Selecting Table Cells with Scope th[scope=”col”] or th[scope=”row”] or th[scope=”row”] + td
• Highlighting Images by Type img[src$=”gif”]
• Diagnostic styles: div[id] or img or img[alt] you can do some simple checking on your site to make sure all divs have IDs and all images have alt tags
• Dean Edwards IE7 Script
• The idea was to associate this script with your page with IE6 so that it works like IE 7
• Eric Meyer really recommends this.
• Its about 25kb to download for IE6
• Dead Bugs
• Peekaboo bug, Guillotine bug, 3-pixel text jog, width:atuo,
• Killed parsing bugs like * html, html>body, head+body, _height, overiding !important
• New bugs +html , mystery element before the HTML element *+html #example{ }
• Conditional Comments he prefer to be a little easier
• CSS-wise, IE7 is right up there with other current browsers (it has quirks but what browser doesn’t)
• Enhancing IE6 with the IE7 script brings it nicely up to date
• Hacking will still be necessary (whatever form your hacking takes)

• He got into the web so he could work in his underwear joke
• David Siegel & Lynda popularized design on the web
• Before flash there was a static HTML splash page
• Get outside the cubicle (many of us are introverted and are happy with just working on the computer)
• In this field we have to have strong work and a big portfolio and develop these skills (except hermits)
• Its the relationship, Stupid
• “The only way to do great work is to have great clients.” – Lou Dorfsman
• You have to make them great clients
• You bring em a great ad, the kill it, you bring em three great ads, and they kill em… eventually they have to buy something.
• Endless scope, one way to sell great work is to never stop working on the same job! This is a good way to die
• Respect flows both ways (We need to respect them, and try to understand their point of view even when the don’t respect yours… that will most likely persuade them to see your points.
• The client is not and idiot. (They know a lot about things you don’t, same as they don’t know a lot about your job)
• Don’t choose idiots for clients.
• Its hard to shake peoples perspective of you.
• Avoid Bad Clients
• Learn to smell Trouble ( Bad assignments pack paperwork, listen for bad date vibes )
• They pre-qualify themselves – by explaining their job
• As a developer you want the client to completely define the back-end and what technology to use.
• If you get too much information and too much direction (EX: 37 page RFP or proposal along with 14 pages of wireframes) Not Good!
• He tends to respond in a professional but playful way, if they respond negatively to a playful message he decides to pass on the project
• “Your emergency is not my problem” if someone has a rush that means that they couldn’t get there stuff together… and everything else on the job is going to go that way. “Don’t go into house that is on fire”
• That if a client is in a rush and is panic stricken, thats not a very good client.
• BUILD TRUST
• The non-webby client lack of web experience doesn’t make them a dummy
• their proposal was to create a page that explains everything about what they do and they tailor it for them.
• Show them examples of their worst fears being solved well
• This helps the client to allow them to do what they do.
• How-To: Have a process. Be calm and methodical.
• Some business people feel creative people are weird flakes heh
• You have that stuff so they know they are dealing with professionals
• Wireframes build relationships, not just user flows.
• Talk before hand to pick up on what people say, listen and can try translate it. Then to understand what their problems are.
• The ALZHEIMERS’S method (Keep reminding them of what you just recently talked about and what they agreed to, because they’re very busy and have to deal with a lot of other stuff.)
• You start by building trust, and do a lot of wire-framing… and then discuss what you’re working.
• As in any relationship, Learn to translate… think about from their perspective to find their problem.
• “Everybody UNDERSTANDS design.” – Hillman Curtis
• You don’t have to explain design, because people react to it. You don’t have to tell a person what they are looking it… but we do because Design is somewhat an abstrct thing.
• Our job is to convey the meaning of design.
• We should convey meaning with design.
• ASK A CLIENT: What’s the one thing that you need your site to do and what job isn’t it doing currently. This will help you focus on the idea of the project from the clients perspective
• Sell ideas, not pixels! like IMPACT or NEWS CHANNEL or HUMAN not the orange one, the green one or the blue one.
• Kansas City Chiefs Sales ideas: “Like No Other” (the don’t seem to be about marketing) or “Heritage” (nostalgic, everything is somewhat old fashioned) or “Big Boys” (you’re a big team just like everyone else, gained respect)
• YORK Industries Sales Ideas: “Personal Touch” (family vibe, warmhearted feel, Human) or “Product Focus” (like an ad campaign) or “HYBRID” (do a little of both)
• think about them somewhat like ad campaigns
• AIGA Sales Ideas: “Consumer” (reach out an be more lifestylish) or ELITE (they are cold hearted bastards, no color, very designy) or INSPIRATIONAL (we’re not who you think we are,)
• Talked with them to determine their problems and gave visual solutions
• Respond to criticism: “That color is ugly.” ask what color makes them uncomfortable about the color and there is something they aren’t communicating. or Push back a little bit and use research and decisions you’ve used.
• Respond to criticism: “That button is too big.” Use research.. and things you’ve learned about their site and so on.
• If you’re doing something just because it looks nice then ‘they have every reason to critique it.
• Recommended Book: “Communicating Design” by Dan Brown
• So what do you do?
• 1) Push back a little
• 2) Tell them you’ll look into it (and actually look into it)
• 3) Shock them and agree

• He works for and is President of a small creative design firm called Coudal Partners
• Design names and identities for products and services, Package design, etc.
• Grab the fire and passion into the client work to make you happier and the project more successful.
• All the things we learn from Client projects we put into our personal projects.
• We learn things from personal projects, which can also benefit our day to day work.
• If you ask them what got them where they are.. its because they’re pretty curious.
• Communication broke down between art and science around 1959…
• A similar thing is distance between client and creators or designers and developers.
• Its the discovery… not being married which keeps things moving and you learning.
• When you keep discovering new things you keep the love new.
• Recommended Film: Days of Heaven
• Stop talking things to death and start acting on them!
• PLAN OF ACTION: Basic concept research, get together, argue, then get other stuff out of the way.
• Not big into mediums, or things they have to follow.
• They do try to follow certain procedures, though.
• Everything they’ve done started with “Wouldn’t it be cool if…”
• Showed their short film I have a few
• They do the research early on and get up to speed really quickly.
• Most beneficial skill with them (not typography or designer) is that you can get up to speed and learn quickly.
• Get together 12 ideas and have a long meeting of varied ideas… and plumbing them of their interpretations of the work. Do this to get rid of most of them and to find one.
• Get clients out of the conference room and show your work in everyday usage. Billboards, shirt, etc.
• The most interesting ideas get the most light.
• Setup a project so that the client is in the boat when you leave the harbor, so the client helped make every decision with you. Making it a collaborate approach.
• Rip off designs – Designers need to have taste and have the ability to look at two different things which is better.
• You have to investigate why something is good and remake something… you are then. in essence, talking directly to the person who made it and learning why and understanding it in a much better way.
• Process: many people in their firms work by themselves. The power of adult conversation is great. Go to a bar and talk about ideas… and don’t get stuck on your own.
• Don’t talk it to death! Do the work!
• It’s important when they evaluate a job, that if the RFP is more than two pages, they don’t respond.
• When they look at a project the evaluate – Are we going to be able to make money? – Are we going to be proud of the work? – Are we going to learn a little something new along the way? (this is however somewhat loose and depends)
• You can use your own personal projects to learn about your corporate jobs.
• Another chasm is one that comes between people who write the words and the people who design the site.
• Showed their short film Copy Goes Here
• Showed their short film Viral Infection