Principles of Adaptive Design
“What’s under the Christmas tree in two years? That’s what we’re designing for today.”
- Brad Frost
Ubiquity
“The things we don’t know are more important than the things we do know. Design for the future.”
Flexibility
- Embrace diversity as an opportunity
- The web on mobile devices is not the ‘web light’
- Give people what they want! Don’t give them stupid error messages or limit access to certain devices
- Responsive web design is only the tip of the iceberg and there’s much more to it
Performance
- 71% of mobile users expect sites to be as fast as their desktop counterparts and 74% will abandon a site after 5 sec
- 2min and 46 secs is too long for a site to load ;)
- Test your mobile sites on MobiTest
- You can’t design performance in Photoshop – Performance is invisible
- Good Performance is good design
Enhancement
- Go mobile first, assume less and build up from there. Progressive enhancement FTW
- Don’t build for, but start at the lowest common denominator.
- There is a difference between support and optimisation.
- Today’s landscape is the boot camp for tomorrows insanity.
- Get to the meat and give users what they want. And they want to reach your content. Fast.
- Navigation should be like a good friend. Be there when you need it, but not bother you all the time.
- In case of large navigation structures, prioritise search and make it visible to users.
- 79% of smartphone users use their phone while shopping to help with their decisions.
- About Carousels: Make sure you really need one. Only load what you need when you need it.
- Treat touch as an enhancement. Include a (carousel) navigation as fallback for less capable phones.
- Loading social buttons (Twitter, Facebook, Google+) can use up to 19 requests and up to 264Kb.
- Ask questions: Why, how and what does the user want?
- When we scroll on mobile we scroll through a single content type.
- Progressive disclosure saves users from endless scrolling and limits load time. Give it to them when you need it.
- Include a back to top link for easy and fast navigation.
