Responsive Mobile Site Design

  • Consumers are going mobile. In 2013, sales of smartphones outpaced basic cell phones worldwide, shifting the world to a “mobile first” attitude.
  • Brands have different options to be mobile friendly, including creating apps, but responsively designed sites—or sites that convert and form to fit the device on which they are being accessed—are pulling ahead as the top choice for web experience optimization.
  • When creating a responsive site, you have to remember the devices consumers will be using—smartphones, tablets, laptops and desktops—as well as acknowledge how often consumers are using your site and for what purpose.

It’s 2014—how much of your traffic is mobile? How do consumers using mobile devices experience your website? Imagine if you never had any desktop traffic at all—how would consumers interact with you?

A lot of bandwidth has been used describing the importance of mobile optimization for brands. Since the advent of the iPhone in 2007, consumers have made a tremendous shift toward mobile technologies, which vastly accelerated and become more complex with the iPad’s debut in 2010. Fast on the heels of the invention of Apple’s iOS, Google released the Android mobile operating system—and then gave it away for free. Every major computer and phone manufacturer, and even Amazon, started producing devices for mobile: big smartphones, truly huge ‘phablet’ phones, and tablets in variety of sizes.

In 2013, sales of smartphones outpaced basic cell phones worldwide, meaning the trend toward mobile usage by consumers is a truly global phenomenon. Tracking firms estimate mobile devices to account for nearly a third of all web traffic, and some sites, Yelp and ESPN among them, report more than 50% of all their traffic is now from mobile devices. Ericsson shows an 80% increase in mobile data use year after year, with a 10% uptick each quarter. Compare this to the drop in laptop and desktop computer sales.

Before your very eyes, you can see the consumer trend that is either “also mobile” or “mobile first.” The World Wide Web might have started as desktop only, but those days are consigned to memories of Seattle grunge rock and President Bill Clinton. It’s 2014—and if you sell beauty products or provide online beauty content, you have to provide a fully mobile optimized brand and shopping experience, or you’ll lose roughly half of your audience. By 2015, this might be more than 70% of your online audience.

The Race to Catch Up

As the trend to mobile has exploded in the past seven years, brands have adapted. The late 2000s created a huge rush for brands to create apps and “m dot” websites—dumbed down, very narrow, mobile-optimized websites that usually start with “mobile.yourbrand” or “m.yourbrand.” Web servers can detect what type of device is asking it for content and then can serve a special, usually very basic, alternate website of your brand to a user’s smartphone. It requires creating an entirely new version of your website. Updated your desktop homepage? Don’t forget to maintain your mobile site too! As simple as this sounds, it’s an added layer of complexity to struggle with.

Beyond these little “mobile-friendly” sitelets, the only other recourse for brands is to also release apps on the Apple and Google stores, which naturally use completely different coding languages and require a huge amount of expense to build—twice—and then distribute. This has worked brilliantly for a handful of gaming apps, social media giants like Twitter and others, but as an industry-wide trend, it sets the bar high for mostly offline brands. You either have to create four different mobile experiences—an Android app, an iPhone app, a separate smartphone site and even a separate tablet site for real go-getters—or you risk losing a huge chunk of your audience, which are invariably young and trendy. If you want to catch people at the start of their brand affinity process for lifelong value, you need to get them young, and young is mobile.

Creating all these websites and apps is expensive to design, expensive to build and a huge pain to maintain. It’s great news for digital agencies that bill by the hour, but it’s a mess to manage.

Things Started to Change

By 2012, a new practice had emerged—responsive web design—which grew in popularity in 2013, with the Grey Goose and Barack Obama websites as early examples. Now, responsiveness has become, arguably, the new standard, even as its various technologies and techniques are very young and continually evolving.

Responsive web design, or just being “responsive,” means that you can now create a single website at a single URL that automatically adapts to whatever device the consumer uses. No more “m.” anything. You don’t even need an app. A well-crafted responsive site reformats itself for a narrow iPhone that uses touch and has a super high-res retina display, an Android phone lacking retina, a 7" mini tablet, a 10" regular tablet and a desktop computer using a mouse. All the same website. It’s flexible, easy and “responsive” to the device at hand.

I’ve seen responsive sites programmed to support five different displays—don’t forget about portrait versus landscape modes as you turn a tablet. Generally, most responsive sites account for four display widths: phone, small tablet, big tablet (or a landscaped smaller tablet) and desktop. And as the method progresses, I imagine you’ll see up to seven “breakpoints,” or width optimizations emerge, especially as more device styles proliferate in the fast-paced mobile device market. If consumers start using really small 3" phones and really huge 14" tablets, being responsive will make it easy to keep up with them.

How Does It Work?

Responsiveness is enabled by a blend of web technologies, design and coding techniques that enable flexibility for how wide or narrow a webpage displays. It utilizes flexible images that can resize themselves based on the width of the page, as well as fluid columns that collapse as the device narrows and expand as a device widens. Check out the latest version of www.nytimes.com on your phone and laptop to see an example of columns changing in action.

Crafting a responsive website requires much more time and energy than banging out a beautiful desktop site with a mobile afterthought tacked on. You have to code four websites at once. Web designers have to start with a specific screen size and then adapt the visual design three or four times.

After visually designing these various sizes of the website and ensuring the experience looks right, you then need an experienced front-end web coder to create these variations in code. This person or team will work with the designer to make sure the various breakpoints look right—breakpoints are the moments at which the site transitions to different screen sizes. My advice is to focus on four widths: smart phone, small tablet, big tablet and desktop.

There’s also a lot of talk in the digital agency world about the right process for creating a responsive site. Do you craft them iteratively, with design and coding happening at nearly the same time using pieces of reusable code? Or do you employ a more traditional waterfall approach where the designer designs the site first and then the coder takes over, with only minimal iterations towards the end of the process?

Either way, by late 2014, the trend is all major websites will be responsive—or at least those sites that want to maintain relevance to consumers. The methodology for creating these sites will refine and evolve since this is still a very nascent development method. The important thing is to catch up to the consumer and get started now with your responsive project.

Zachary Thacher in the principal of Thacher Interactive, an award-winning full service digital agency based in New York. Thacher develops web marketing strategies, responsive websites and social media campaigns for B2C and B2B brands across multiple industries. Follow Thacher on Twitter @zthacher and on Facebook at facebook.com/thacherinteractive. For more information, visit thacherinteractive.com or contact Thacher directly at [email protected].

More in Launches & Claims