AEA San Francisco 2011 Notes (Day 2)

Day 1 Notes
  1. Using Flexible Boxes

    Eric Meyer

    Flexible Boxes

    • How to use flexible box layout right now
    • Take into account limitations and inconsistencies
    • Make sure to account for browsers blind to flexboxes
    • 2009 Flexible Box specification (which is what browsers currently support)

    Current Method

    • Floated elements
    • overflow: hidden;
    • Background image hacks to make boxes the same height

    Flex Box Method

    • Parent element gets display: box;
    • Parent element can also have box-orient: horizontal; (horizontal is the default value)
    • box-pack: center; centers the child elements when the box is larger than the cumulative size of the children. Currently not supported by Gecko.
    • Vendor prefixes for browser support
    • Child elements will match each others height similar to table cells
    • box-flex: 1; on child elements makes them flexible (default value is 0)

    Overflowing (Gecko), Scaling (Webkit) & Breaking (IE10)

    • Overflowing margins don’t cause a break, but you can still use child + child {margin-left: 10px;} to be safe.
    • In Webkit, if the width of the children is greater than the width of the parent, the children will shrink as much as necessary to fit them all. (seems like the right behavior according to the spec).
    • If the width of the children is less than the width of the parent, and they have box-flex: 1;, the leftover space is divided by the number of children and added to their width
    • Using different flex values causes extra space to be divided according to the flex value of each child.
    • box-lines: multiple; (Only works in IE10 right now)

    Sorting

    • Parent element - box-direction: reverse; flips the ordering of children (sibling selectors still work according to the markup)
    • Child elements - box-ordinal-group: 2; allows you to order children based on their ordinal group (value needs to be a number)
    • These properties let you organize content however you want without changing the markup.

    Columns

    • Parent - display: box; box-orient: horizontal; box-pack: left;
    • Setting box-flex: 1; on some child elements, but not all of them lets you have some fixed width columns and some flexible columns.
    • Put padding and margins on the flexible column
    • Using flex box allows you easily reverse the direction of columns. You can also sort the columns, but it may be more tricky depending on padding and margins.

    Vertical Flex Boxes

    • Parent - display: box; box-orient: vertical;
    • Causes child elements to stretch to fill the height of the parent
    • box-ordinal-group allows you to make a post “sticky”
    • Can also be used on things like content, nav, and footer by setting the whole page to display: box;

    Browser Fallbacks

    • Float - Screws everything up in Webkit
    • You can use CSS hacks to override the Float for Webkit/Gecko

    2009 Flex Box vs. 2011 Flex Box

    • All of this is based on the 2009 Flex Box spec.
    • There’s a new Flex Box model that is completely different.
    • The 2009 version and the 2011 version are essentially two different things that happen to share a name.
    • The 2009 version will be supported for a long time.

    Q&A

    Does vertical-align work within vertically oriented flex boxes?
    Yes, but you use box-pack instead of vertical-align.
    Can Modernizr detect flex box support?
    Yes, it may not now, but it will soon.
  2. Our Best Practices are Killing Us

    Nicole Sullivan

    Problems with the Alexa Top 1000 Websites

    • !important - Used 518 times on one site
    • float - 733 floated elements on one site, 56% of sites had more than 10 floated elements.
    • font-size - Used 889 times on one site
    Insanity is doing the same thing over and over again and expecting different results.

    Stop Pointing Fingers

    • Almost all sites have this problem.
    • We need to look at our duplication of CSS and clean it up.

    Myth: Pixel-Based Font Sizes are Naughty

    • We stopped using px because IE6 wouldn’t resize it.
    • Percentages and ems are effected by nesting.
    • Would be interesting to hear Nicole’s view on rem

    Myth: Don’t Add Any Extra Markup

    • It’s not worth it to remove markup if it’s going to cause bugs.
    • Solve one problem at a time.
    • Add markup carefully. More markup slows down JavaScript.

    Myth: The More Semantic the Better

    • Semantics can be taken too far; especially when it comes to class names.
    • Class names and IDs are not read by search engines, users (other than developers), etc.
    • Class names are, however, read for Microformats.
    • Use class names that work for us.
    • With CSS more is not always better.

    Myth: Classitis

    • Specificity is concatenated - inline, ID, class (including pseudo classes), element (including pseudo elements).
    • The * selector has a specificity of 0.

    Descendent Selector: Best Practice or Myth?

    • Classes are more flexible and reusable.
    • Use classes instead of descendent selectors. I.E. instead of #sidebar h3, use .class
    • Lets you use the semantically correct element while still applying the style you want.
    • This will allow for different styles of the same element with the same parent.
    • No need for specificity to increase for each different style.
    • Otherwise, specificity will grow over time and it will be hard to tell which rule will prevail.
  3. From Idea to Interface

    Aarron Walter

    Independent Thinking

    • Independent projects can help us to stay creative and think independently.
    • Ask yourself &ldquoWhat would happen if…”
    • Have an idea and try it out. If you put it on the shelf, that’s fine.
    • Get into the habit of having ideas and creating things.

    How to Flip the Creative Switch

    • Ideate - Some up with ideas, don’t judge them, just let them flow.
    • Incubate - Stop thinking about the problem. A lot of ideas come when you’re sleeping.
    • Evaluate - Look at the possible solutions and judge them. Which is simplest? Don’t tell people a half-baked idea. Get feedback once you have the idea fleshed out.

    Design

    • Don’t micro-focus on the details. Look at the big picture.
    • What are you solving?
    • Sketchboarding
    • Sketchboards help you ideate quickly, they help you incubate on your walls, and they help you evaluate with colleagues.

    Prototyping

    • Can be the best way to work through problems.
    • Helps you to stop looking at the little details of the design.
    • Use it while you design it.

    Patterns

    • Patterns make it so that your users aren’t required to learn in order to use your interface.
    • Being consistent lowers the learning curve for users.
    • Patterns can also help us to write less code.
    • Design and build faster

    Personality

    • Think about the personality of the interface and the brand at the beginning of the project.
    • Who is your audience and how should your interface communicate with that audience.
    • Your interface is like a window between you and the users.
  4. Smoke Gets In Your Eyes

    Andy Clarke

    CSS3 Transitions

    • .lamp {transition-property: opacity;}
    • .lamp {transition-property: opacity, color;}
    • .lamp {transition-property: all;}
    • .lamp {transition-duration: 0.15s;}
    • .lamp {transition-delay: 0.1s;}
    • .lamp {transition-timing-function: linear;}
    • .lamp {transition: opacity 0.15s 0.1s linear;} - the second numerical value is the delay.

    Keyframe Animation

    • Transitions only have a start and end point. Keyframes allow you to add multiple states for animations.
    • .lamp {animation-name: lamp;}
    • .lamp {animation-duration: 10s;}
    • .lamp {animation-delay: 5s;}
    • .lamp {animation-iteration-count: 1;}
    • .lamp {animation-timing-function: linear;}
    • .lamp {animation-direction: normal;} - or alternate

    Transforms

    • Translate
    • Rotate
    • Scale
    • Skew
    • Transform Origin - lets you control where an element is transformed from. Default is 50% 50% or left top.

    Problems

    • Browser support
    • Abuse of markup and semantics. A lot of animations are built with tons of non-semantic divs.
    • Animations can be seen as an ordered list of scenes.
    • We can then describe each scene using semantic markup.
    • Use Modernizr to test for css animation support. Append the necessary elements to the corresponding scenes for browsers that support animation.
    • Create a fallback script with previews of the scenes for less capable browsers.
  5. A Content Strategy Roadmap

    Kristina Halvorson

    What is content strategy?

    • Content First is not Copy First.
    • Content strategy plans for the creation, delivery, and governance of useful, usable content.

    Content Components

    • Substance
    • Structure
    • What kinds of content do we need?
    • What messages does the content need to communicate?

    People Components

    • What processes, tools, and people are required to deliver the content.
    • How do we make key decisions about content and content strategy? When and how does change happen?

    Q&A

    How do you craft content so that it will scale for responsive designs?
    Get the idea of content on the page out of your head. Don’t slap a bunch of crap on the desktop version of the site just because it would be nice to have.
  6. The Secret Lives of Links

    Jared Spool

    Links are Everywhere

    • We have links everywhere, but we never talk about them.
    • Without links, we wouldn’t be able to access content as easily.
    • Links live to deliver the content that the user wants.

    The Scent of Information

    • Links should emit the “scent” of the content that they link to.
    • Good scent encourages users to click links.

    Fitts’s Law

    • The speed that a user can acquire a target is directly proportional to the size of the target and indirectly proportional to the distance from the target.
    • When marketing people win, Fitts’s law is broken.
    • The links that attract the most traffic take up a tiny percentage of screen space and are in poor locations.

    Deliver Users to Their Desired Objective

    • Use good wording
    • Make links promenant
    • Trigger words - a word or phrase that matches the user’s goals and signals where to click.
    • Trigger words are the essence of good scent.
    • Users only find what they want 42% of the time.

    Predicting Failures of Scent

    • Use of the back button
    • Pogo-sticking
    • Use of search

    Back Button Predicts Failure

    • The back button is the button of doom.
    • You don’t want users to click the back button.
    • The more times the back button is clicked, the lower the percentage of success.
    • The back button doesn’t help because users are still attracted to the link they clicked in the first place since it has a strong scent. Users won’t find a link with better scent.

    Pogo-Sticking

    • When the user jumps up and down between levels of the site’s hierarchy.
    • It’s like Goldilocks - users go to one page and it’s not what they're looking for, so they go back and try another page until they find what they want.
    • Clickstreams with no pogo-sticking have success a rate of 55%. Pogo-sticking has an 11% success rate.
    • 66% of e-commerce purchases have no pogo-sticking.

    Use of Search

    • Users scan links for trigger words. If they don’t find a trigger word, they search for the trigger word.
    • Search boxes should be called B.Y.O.L. - Bring your own link.
    • Users resort to search because you didn’t give the user what they were looking for.
    • Pro tip: search logs are filled with trigger words.
    • When search isn’t used, 53% of users are successful. When they use search, they have a 30% success rate.

    Missing Trigger Words

    • No trigger words forces pogo-sticking.
    • Providing descriptions and trigger words helps to make a choice.
    • Descriptions and trigger words need to give enough information to help users differentiate between choices.
    • Links that say “Learn More” don’t tell a user anything. The only thing worse is “Click Here”.
    • Links stand out and users eyes go straight to them. They skip over the content around the links.

    Good Design is Invisible

    • We don’t notice when something like design is done well.

    Links need to look like links

    • Links don’t need to be blue and underlined.
    • Link styles need to be consistent across the site so users can tell what is a link and what isn’t.
    • Look good while still looking like links.

    Links want to do what the user expects

    • Users don’t move their mouse until they have made a decision.
    • Drop-down menus and mega-menus make users have to pogo-stick.
    • Fly-out menus are hard for users to use since they disappear on mouse-out.
    • Don’t distract users.
    • Don’t hide links.