January 31, 2012
January 31, 2012
Larger screens means we have more room to work with.
Jan-Dec 2011, Canada (http://gs.statcounter.com/#resolution-CA-monthly-201101-201112-bar)
About 16% show 1000px wide or less
Forget about users on small screens!
... is what would be nice, but we can't!
The answer? Responsive design
Responsive Design is the creation of a website that reacts to the current screen size and delivers an optimal experience for that specific screen.
Most people think responsive web design is just for mobile devices, its not!
Let's take a look at a few examples
A long time ago, users on the web were adverse to scrolling, today things have changed.
"The fold" is very hard to define anymore, we already looked at all the different screen sizes
We have the scroll wheel on most mice, all Apple products have inertial scrolling which gets you to the end of the page in 1 flick
Very smart man who has done his research with data to back it up.
"Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold." - Jakob Nielson
You should always put your most important content at the top of the page
This is especially true for sales and conversion pages
Not as true when users are familiar with your site/app
Whitespace that promotes ease of use/understanding is just as powerful
Don't ruin the design or experience just to cram pixels above a line!
hint: people that use old browsers are used to a crappy experience
Unfortunately, we don't always use these features because not all browsers support them.
We need to use Progressive Enhancement to improve the experience for those using the latest browsers
Users with older browsers will fall back to a default, regular experience.
An attribute that you append to an input to allow Google Chrome's speech-to-text
Drag & Drop API
Ability to drag and drop files into an upload area. Older users get an upload button.
CSS3 rounded corners + other fancy effects
Provides a more visually attractive interface. Older users see square boxes with no transitions
By using progressive enhancement, you'll deliver the best possible experience to your more technical users, which they expect.
Since the button does not click in and it takes 1-2 seconds for it to beep and spit the transfer out, the user pushes it until something happens.
This is well known in the physical world, thats why all ATMS beep when you press a button
The same rules apply in the online world, let your users know when they should wait by giving them visual cues.
Don't take my word for it, test with everything from eyeball tracking to heatmaps to my mom.
Iterate on your designs and experience. Lessons learned are very valuable.
Know your user and cater the experience towards them.
@wesbos / LinkedIn