The Responsive Web is More than Just Layout

Thinking mobile-first goes beyond just building layouts for small displays.

When it comes to building websites, being Mobile-First means using an approach with a fundamental understanding of how people access your content. We already do this for the myriad of browsers and user capabilities; but designing for mobile devices presents a whole new set of challenges because mobile devices have many more constraints than just screen size. These include processor speed, limited browser capabilities, slow bandwidth, user attention, and metered access.

The reasons for making mobile a priority are already obvious. Mobile is a major component in e-commerce. Amazon had over $1 billion in sales transactions over mobile devices. eBay’s global mobile transactions are in the billions year after year. Mobile growth is far outpacing standard desktop computers in ownership, searches, email, social sharing, and music streaming. Building a site to work for mobile is a higher priority than for desktop.

With Responsive Web Design (RWD) as opposed to mobile-only design, we are able to give users the same access to content across all devices. Even users with several devices can have the same experience through RWD because the sites they access are the same regardless of device, browser, or OS platform.

To achieve RWD for all users, our strategy utilizes more than screen sizes for today’s popular smartphones. Screen sizes for mobile devices today are too numerous to count. Therefore our layouts must be flexible to adjust the content to fit the user’s device–whatever it may be.

We also must address the fact that not all phones have reasonable internet access. While many people enjoy 3G and 4G access, connectivity quality varies across networks and most of the world’s users mobile access is metered. A mobile user’s time is precious.

We have to ensure that they get information from our sites quickly without burdening the phone with unnecessary HTTP requests or redirects. Our servers must have everything cached and ready before users even ask for it. We do that by taking advantage of fast content delivery networks, industry standard data compression methods, and ensure only essential assets to our users do we make an effective and optimized user experience.

HTML5 can make building Mobile-First sites even more powerful and give users a better experience through input validation, CSS3, web fonts, SVG, canvas, client-side storage, GeoLocation API, Voice Input API, and the Camera API. While not all devices support all of these features, Mobile-First methods ensure a baseline of access for everyone and progressive enhancement leverages these capabilities as they are available.

Beyond layout, Mobile-First design addresses not only access, but readability, reducing the distance between users and content, giving users predictable, guessable interfaces, with reduced visuals that are not content. Mobile-First websites should not be a strain on the mobile device CPUs. Battery power is limited and can be depleted quickly with intense designs, animations, or unnecessary scripting.

Making a Mobile-First site with these strategies in mind is the most effective and most proven approach for success. This is our belief and our approach to any website we build.