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.
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.
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.
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.
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.
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.
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.
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.