Most Popular in:

Technology

Email This Item! Print This Item!

Responsive Mobile Site Design

By: Zachary Thacher
Posted: March 24, 2014, from the April 2014 issue of GCI Magazine.
  • 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.