Mobile Know-How: Responsive Web Design

ImageEvery day, more than 1.3 million Android devices are activated globally — far more than the number of babies born each day. By 2016, there will be 1 billion smartphone users on the planet, with 257 million mobile phones and 126 million tablets used in the U.S. alone. And before the end of the year, more internet-connected mobile devices will roam the earth than people. Users are leaving their desktops behind, with more than half of all website traffic coming from handhelds now, and many users, especially in the Third World, have only their phones to connect to the Internet. [Sources: Cicso and Forrester Research as analyzed by TheNextWeb]

So, the better your website looks and functions on a small device, the more future-proof it will be. And especially if your company caters to women, think mobile first: a recent survey found that more women use smartphones than men (58% vs. 42%).

Successful brands have revamped their online presence to work on any device, be it desktop, tablet or mobile. We all crave communications that work everywhere — and we want to shop anywhere on the go. Web design is changing in the mobile age and adopting full tablet and mobile functionality. But why stop there? Since users want clean, simple, smart and scaled-down interfaces on their handhelds that load content quickly — why would they want anything different when returning to their desktops? Less is more on all platforms — and good content always matters.

mobileThere are two approaches in mobile web design:

  • One solution is creating a separate mobile site: the user is redirected once the browser detects the device. Both sites, however, need to be updated separately and have different URLs, which could affect SEO.
  • The new buzzword of mobile design (and the one favored by most designers), is “Responsive Web Design” (RWD): the whole page is delivered to the device browser and a fluid “elastic” grid with flexible images reorganizes page elements automatically and adjusts the content to the screen size and orientation of the device (widescreen desktop monitor, smaller desktop/laptop, tablet and mobile). CSS3, HTML5 and JavaScript code snippets detect the minimum/maximum screen width (using “media queries”) and adjust content flow accordingly. There is only one URL and one site to maintain. RWD is officially endorsed by Google.

The key design elements of RWD:

  • Don’t just reformat your website, rethink it! Mobile is not just another platform; it triggers a different set of user expectations and behaviors: quick, on the go, immediate information at the users’ fingertips. Literally. Think mobile first when designing your site. Prioritize content for efficiency and speed.
  • Keep your messages, taglines and call to actions short with minimal steps involved; create an interactive dialogue with customers.
  • You define which site elements will be stacked where, once the screen is resized. Assess what a user will need on the go (contact info, business hours, directions etc.) and what content she wants to read on her desktop. Place contact info and call to action up front. Because on a smaller screen, only the top elements will be visible before scrolling.
  • Scale down visual elements (images, logos); get rid of Flash (which iOS-based devices can’t process) and eliminate banner ads. Stick with HTML5. Less is more!
  • Use visible links and large, flat navigation buttons (no drop shadows) that are widely spaced with ample white space; use large, clean fonts and clear color contrasts.
  • Make content easy to read: 73% of adults read longer articles on their tablets at least sometimes, including 19% who do so daily. Fully 61% of smartphone news consumers read longer stories, 11% of them regularly (Pew Research). Don’t strain their eyes — or they will go someplace else.
  • Keep forms to be filled out and logins to a minimum — if you must use them at all.
  • Implement location-based services, making use of the user phone’s GPS and maps, and incorporate social media and apps.

 

Further reading:

Tools to help create mobile platforms: Mobify; Wirenode; Mippin Mobilizer; Winksite; MobilePress; MoFuse; Gridless; Get Skeleton; Adapt.js; Interface Ketch

Nobledesktop offers free seminars on responsive web design: http://www.nobledesktop.com/mobile-responsive-web-design/

Readwrite has an infographic on responsive web design.

Is your current site mobile-friendly? Find out: http://mattkersley.com/responsive/ and http://www.studiopress.com/responsive/

A must read for the geeks among us: http://alistapart.com/article/responsive-web-design (written in 2010 by Ethan Marcote, who coined the term RWD)

Beautiful example of a RWD site with extensive resources: http://bradfrost.github.io/this-is-responsive/


Also published on Medium.

Published by

Tekla Szymanski

Tekla is a New-York based independent content strategist and front-end web developer, a multilingual journalist, writer and editor (both offline and online).

Leave a Reply

Your email address will not be published. Required fields are marked *