A Site is either mobile-friendly or obsolete; an introduction to Responsive Design
Aidan Foster -- responsive design expert, creator of ResponsiveDesign.ca and owner of Foster Interactive -- brings some web design insight to the Volacci blog. Follow @ResponsivDesign on twitter, or join the LinkedIn Group
A New Relationship Between People & The Mobile Web
People have become extremely connected to their mobile devices. There’s this lasting stereotype that mobile surfing happens when traveling to and from work but usage statistics show a very different story. C-level executives and C-level high school students have something in common: They’re addicted to their mobile devices and they’re increasingly using them to socialize, shop, and for casual entertainment at all hours of the day. By 2015 half the traffic on the Internet is expected to be on mobile devices.
Mobile Matters Right Now – A Few Telling facts.
66% of US smartphone owners use their phone to aid shopping
If your site is B2C, then your customers are both shopping online and using their phones when they’re in physical stores to look up facts, read reviews, and do price comparisons. If your site doesn’t work well for these shoppers, you lose the opportunity to influence their purchasing decision, or to build loyalty by providing a great customer experience.
78% of C-level executives under the age of 40 are “comfortable making business-related purchases on a mobile device.”
From the top down, business has embraced mobile web. Executives own multiple kinds of devices and they’re using them to help guide their strategic decisions both during the work day and after hours.
Most Websites Have Terrible Usability on Mobile Devices.
Jakob Nielsen published a study on how well people are able to perform specific tasks on the web. For example, “You're in a store considering purchasing a Kodak Z-1000 for $200. See if there’s a better price online at deals.com” On the desktop 84% of people succeeded in this task, but for people using smartphones visiting “desktop only” designed sites, they only succeeded 58% of the time. If you’re offering the same camera for $170, you may have just lost a sale.
“Pinch and Zoom” functionality makes desktop websites usable on a smartphone – but just barely. If your audience is motivated, they can probably find the information they’re looking for but that doesn’t make for a good experience and they might not appreciate you “making them work for it.”
“Mobile Friendly” is Both a Challenge and an Opportunity.
Forward thinking businesses are presented with an opportunity to fill the void of mobile-friendly sites in their markets. We tend to avoid slow and cluttered websites on our desktops because there are many easier and faster alternatives. On the mobile web our desire for simplicity and ease of use is no different – It’s just that there’s not many mobile-friendly sites out there. Look at the examples of industries who universally provided “experts only” products like the early PC market. Then look at companies who provided “easy to use” alternatives like Apple. Whose shoes would you like to wear?
Want a Great Mobile Experience? – Use Responsive Web Design
Responsive Web Design (RWD) is a way of making a single site highly functional on every kind of device-- from desktops to smartphones to tablets. It uses universally supported technology common to all modern mobile & desktop web browsers, and there are simple techniques supporting older browsers as well.
Different Layouts for Different Sized Screens.
A responsive website is able to shift its layout to fit different sized screens. You present the same basic text content to all devices, but use “media queries” to send different CSS to a specific device based on the screen size. This allows you to optimize the layout for a broad category of devices like smartphones, tablets, and desktops. Images, video, and other media scale so they can fit in these various layouts.
Here’s how one of our pages appears on 3 different devices -- Desktop, a Blackberry Playbook, and the iPhone
On the desktop layout there’s a sub-menu on the left, and 2 columns of resource links on the right.
On the smaller screen of the Playbook, the menu is compressed horizontally. Notice how the text for some buttons is now on 2 lines. The resource links appear in a single tall column.
On the iPhone, the resources links remain in a single column, but the sub-menu has now moved from the left side to the top of the layout.
Play around with Responsive Design on one of the below websites. Try it on both your iPhone and computer.
Stay tuned for Volacci's new website, which will be designed in Responsive Design in Drupal, of course. It will be launched in summer 2012. We'll keep you updated!