First of all, brace yourself for a variety of metaphors – both mixed and mangled.
Web design is no longer one-size-fits-all. That “size” is responsive. Of course, sometimes building a separate website or application is the best option. If you have a captive audience (e.g., intranet or portal) and know which device(s) they will be using, you can design to those specifications. But for the majority of sites built today, responsive design is the Holy Grail.
Wait … What’s Responsive Design?
“Responsive Web Design is a collection of techniques that allow a website to flex and adapt to the size of screen it’s being viewed on.” – Webstars
See exhibit A:
So batten down the hatches and make sure your horses are held (hey, I did warn you!) as we explore all of the reasons for the wave of responsive design.
6 Reasons Why Responsive Design Rules
Checked your analytics recently? Like most, you’ve probably seen the upward trend of mobile access. All signs point to this trend continuing until it surpasses desktop viewing. In other words, mobile users matter. So does responsive design.
Here’s why:
- Readability. Don’t make your users zoom in and out and all around a page just to read a snippet, lose it and then zoom some more. Responsive design presents text in a readable size and format. other touch targets larger when the viewport is smaller.
- Pressing buttons. A responsive site will scale buttons and other touch targets larger when the viewport is smaller.
- Consistent experience. Providing the same content on a desktop and mobile device not only limits confusion, it also increases conversions. After all, an unchanging experience boosts trust. Trust leads to conversions.
- Complete experience. Separate mobile sites usually have a fraction of the content available via desktop. Providing a link to see the full website can be a helpful workaround, but then your users go back to zooming.
- Better SEO. The fact that Google recommends it should be reason enough, but in case you need a few more:
- Crawling one URL for a website is better than multiples.
- Bounce rates are lower because people don’t navigate to your site and then leave immediately when they can’t read something.
- Shared expectations are met when a desktop user sends a URL to a friend viewing on a mobile device. Ever sent a link to co-workers only to learn they can’t see the content you referenced? It’s frustrating.
- More cost effective. While the architecture and building of the site take more effort up front, the site will have a longer lifespan.
Sold? Great, but let’s throw one more monkey into the wrench. (Again, I did warn you about the mixed metaphors.)
Another Variable: Large-Scale Displays
As the creators of websites, we consistently design for desktops and mobile devices these days. But what about large-scale displays? Ginormous monitors are no longer reserved for the techie sitting in the dungeon. Even my parents use their 60” TV to surf.
According to Smashing Magazine, “Approximately three-quarters of e-commerce sales still happen on PCs, not mobile devices (see here, here and here).” And about one third of those users visit on screens wider than 1350 pixels.*
Is it time to start building sites that don’t just accommodate different screen sizes, but are optimized for each of them? Do we draw the line at four generalized sizes; phone, tablet, desktop and ginormous? Just thinking about it can be overwhelming.
So … Where Do You Start?
Here’s my recommendation: optimize wherever there is an obvious opportunity to make an impact. All websites should be responsive, but we only have to tailor the experience where there is a substantial benefit for the viewer.
Even if you aren’t customizing the entire large-screen experience, swing for the low-hanging fruit:
- Spell out abbreviations. If you have the space, why not use it?
- Make your calls-to-action even bigger. Huge buttons do not go unnoticed and they aren’t usually confused with page content, so users can still scan pages without interruption.
- Make your thumbnails immense. I’m a fan of white space. Absolutely keep the white space. But why make a user click an image to really see it if you have space to show it in the first place?
- Take those tiny comparison tables with wrapping text and spread them out. Ahhh, that’s better.
And if you’re looking for additional ideas, Smashing Magazine has more great suggestions, from the small details to the big picture.
*Note: We do take into account that screen size and browser width are not equal and that the browser width is lower. Check out your analytics to see what browser sizes your users have.
