Most, if not all, of the Fortune 500 companies have it figured out already. Most of theFortune 1000 companies also have it figured out. There are still hold-outs in the corporate world, however, when it comes to responsive website design. A few corporations simply haven’t gotten the message yet that the online world has changed profoundly due to the introduction of a plethora of connected mobile devices. If they don’t make the switch to a responsive design solution soon, these corporations are going to get left behind when it comes to making the most of their websites for online marketing, social media and eCommerce.

Old Excuses Don’t Work Anymore

Up until a few years ago, companies that hadn’t yet incorporated a responsive or adaptive element to their websites might have been able to explain their inaction by claiming that their customers or clients simply weren’t using mobile enough to justify the expense of a major website overhaul. Those old excuses no longer work. Here’s why:

The overwhelming switch to Internet-capable smartphones is old news. Nearly two-thirds of the 94 percent of Americans who own a cell phone own a smartphone (Source:ClickZ.com). In other nations, including Australia, the United Kingdom, South Korea, China and Italy, the percentage of smartphone usage is even higher than it is in theUnited States. In China, which is the most populous nation on Earth, 66 percent of cell phone users own smartphones (Source: Change-Corp.com).

What do people do with smartphones once they have one? Using a website browser accounts for 20 percent of the total time a smartphone user spends on his or her phone. While 20 percent might seem to be a small percentage compared to the 80 percent of time smartphone users spend on apps, 20 percent still means that one out of every five minutes is spent looking at a website (Source: SmartInsights.com). Furthermore, 82 percent of American smartphone owners state that they use the device to browse the Web at least sometimes (Source: Change-Corp.com).

A significant proportion of mobile device owners are becoming “mobile-only” users. Pew Internet, a subgroup of the Pew Research Center, discovered back in 2012 that more than a third of Americans accessed the Internet primarily through mobile devices rather than desktop computers. The percentage of mobile-only Internet users climbs even higher for certain demographics; 50 percent or more of people in the 18 to 29 range,African Americans, Hispanics and low-income adults report that they mostly use mobile devices for accessing the Internet (Source: PewInternet.org).

The data above explains why most major corporations redesigned their sites to adapt to mobile devices at least a year or two ago. For those businesses that haven’t yet incorporated a mobile or responsive website design, consider the remainder of this article to be a responsive design primer.

Taking the First Steps: What is Responsive Design?

Responsive website design, or RWD in the vernacular of website designers, is a technique used by website designers in which the way the website is displayed automatically adjusts according to what kind of device the viewer is using.

Great Corporate and Non-Profit Organization Examples of RWD

Who’s doing a good job with responsive website design? Take a look at some of the following examples on a tablet or a mobile phone:

 

What is Adaptive Design?

Adaptive design can be considered to be a subset of responsive design. “True” responsive design is fluid; it automatically adjusts things like text columns on the homepage by detecting the size of the device. Adaptive design also responds to the size of the device but is not quite the same as a fluid responsive design. Adaptive design displays the website according to certain predefined layouts for different devices and different screen widths. For example, the website will display according to one layout if it detects a screen of 300 pixels, according to another layout if it detects a screen of 600 pixels and yet another way if it detects a screen size of 1000 pixels.

The advantages of adaptive design are:

  • Page-load time is generally faster
  • User experience is, broadly speaking, usually better than true responsive design
  • Sites can take advantage of device-specific features by creating templates customized for certain devices, such as the iPhone
  • Depending upon the way the site was designed, users can still choose to opt-out and use the desktop version of the site

The disadvantages of adaptive design fall into three main categories:

  1. It’s not future-proof. The more mobile devices that emerge, the more variety there will be when it comes to mobile screen sizes. An adaptive design for a screen that’s 300 pixels wide might look great on most smartphones today, but what will happen to the website on a 500 pixel display when the next breakpoint doesn’t take over until 700 pixels? Adaptive design requires a tweaked layout for each screen width, making keeping up with new devices a losing battle given the rate of growth in the mobile device industry.
  2. If a viewer isn’t using one of the devices the adaptive design is targeting, he or she may have a less-than-optimal viewing experience. A web developer might use site traffic statistics to figure out the top three types of mobile devices visitors use and design an adaptive site around these three devices. What will happen to all the other users who don’t use one of those three devices? Adaptive design will often leave these users in the cold.
  3. It requires more work up-front. To borrow from Lord of the Rings, true responsive web design creates “one website to rule them all.” In other words, designers only need to create one layout, which will then automatically adjust itself to fit every device. Adaptive website development requires customizing several site layouts to suit different devices.

Another Major Disadvantage of Adaptive Design

Not all corporations rely upon high quantities of search engine traffic to make their websites productive but many do. When marketing departments deliberate between an adaptive site and a truly responsive site, there’s one post from Google’s official blog that they should definitely keep in mind:

“When building a website that targets smartphones, Google supports three different configurations:

  1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
  2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
  3. Sites that have a separate mobile and desktop sites.” (Source: Google Webmaster Central Blog)

In other words, as far as Google is concerned, indexing pages for searches is easier when companies use true responsive design. The second option is an example of adaptive design; the third option is the old-fashioned, out-dated way of creating separate mobile and desktop sites. Therefore, from an Internet marketing and SEO point of view, true responsive design is widely considered to be superior over adaptive design.

However, the choice between adaptive and responsive website design comes down to the individual corporation’s needs. There certainly may be situations in which SEO is not a priority for a company’s website, and there are also certainly good reasons to choose an adaptive strategy over a true responsive strategy.

The Next Step: Planning the Responsive Website

Along those lines, before choosing between adaptive and true responsive website options, it’s important to think about the end user of the website. There is not a single design option or mobile device design philosophy that works for every corporate site. Consider asking and answering the following questions:

Do website statistics show that visitors interact with the site in a significantly different way when they are mobile compared to when they are using a desktop? When analytics data is analyzed, what does it reveal about mobile users? Businesses might find that their mobile users are looking for one or two specific types of information. When that’s the case, creating two very different website layouts, one that emphasizes the content mobile users want and one that emphasizes content for desktop users, makes sense. In other words, pursuing an adaptive design might be preferable to pursuing a responsive design in this situation.

What is the primary age range of average customer? Adaptive sites are faster and sometimes more user-friendly. When dealing with an older customer base, providing the simpler, faster design of the alternative mobile site might be the best responsive solution.

What is the average customer’s income level? Upper middle-class and upper class customers are different from working class customers in two important ways when it comes to mobile website design: First, upper middle-class customers are generally more likely to have better, faster smartphones. Second, as the data referenced above mentions, low-income adults are more likely to access the Internet via their mobile devices than are their wealthier peers. Both of these facts suggest that a true responsive design might be the better choice for the customer base that is primarily upper middle-class, whereas an adaptive design might be the better choice for the working class customer base. The latest-generation smartphone, tablet and desktop computers of the upper middle class will mitigate the disadvantage of the slower speed of the true responsive design while also taking advantage of responsive design’s ability to deliver a website that looks and feels like the regular desktop version that those visitors are used to.

Are a vast majority of mobile users clustered on two or three devices? When website analytics show that a high percentage of mobile users tend to use one of just a few devices, then making an adaptive website that caters to those devices is not a bad idea. On the other hand, the opposite is true if visitors are using wide variety of mobile devices. This situation indicates that a responsive design would be a better choice.

Is website content designed for sharing? Blogs, some news sites and even some eCommerce sites have content that is designed for customers to share with friends. This type of content favors true responsive design because the content is always prepared to handle an influx of users who break the mold of the typical website visitor. If the website project otherwise seems to indicate that an adaptive site would be preferable, a separate domain name might be advisable for a blog site.

Is the website design budget a big issue? Time is money, and it takes considerably less of each to design a truly responsive website. Creating the multiple layouts of the adaptive site, by comparison, require much more time and therefore much more money.

The New “Mobile-First Design” Principle

Only a few short years ago, website designers created designs for desktop browsers first. After they had a solid site for regular desktop browsers, and if there was still money left in the design budget, they then turned their attention to the mobile site design. These days, the new phrase “mobile-first design” is starting to crop up in the web design industry. In a nutshell, the phrase means that websites should be designed first for mobile devices and only then for desktop browsers.

The reason behind this new design philosophy is reflected in the statistics cited above. As time goes on, there is a good possibility that many website users across many demographics will only be interacting with the site from a mobile device.

From a design point of view, the first “mobile sites” were designed as bare bones versions of the “regular” site. The user could usually still find the information that he or she wanted, but the full experience of the site was negated. As the server detected smaller and smaller screen sizes, the mobile design cut out more and more of the site. This approach to mobile website design was called “graceful degradation.”

By comparison, the paradigm of “mobile first” aims to give users the very best experience possible given the smallest screen size available. As the screen size gets bigger, other elements are added to take advantage of the bigger screen. Called “progressive enhancement,” it sounds almost the same as graceful degradation, but there is an important difference: The process of graceful degradation leads to a mobile website that is often watered-down, increasingly boring and increasingly bland. Designing for mobile first ensures that the small-scale version of the site puts the company’s best foot forward on a very small screen and ensures an excellent mobile user experience. The progressive enhancements then make the site “even better.” By comparison, designing for the desktop first sometimes means having to make hard decisions about what content to cut from the mobile version of the site. For websites whose users are more and more mobile, mobile-first design is the right website development strategy.

When “Desktop-First Design” is Still the Right Choice

As with the decision between adaptive sites and true responsive sites, there is no “right answer” for the debate between designing for the mobile device first or for the desktop computer first. Once again, the final decision should be based upon the company’s understanding of its customer base of today and its best predictions about the customer base of the future. When website traffic stats reveal that 85 percent of new visitors are using desktop computers, it’s not time to move to a mobile-first philosophy.

An example of a company that does need to embrace mobile-first design would be an eCommerce clothing retailer whose primary customer base consists of 18 to 29 year-old African Americans on the lower end of the socioeconomic scale. As statistics above point out, young people, certain minority groups and low-income adults are all more likely than other Americans to access websites through mobile devices.

Companies should also be aware that many designers, especially veterans who have been in the industry since the dawn of the Web, are reluctant to make the switch to mobile-first design. They’ve built their careers around designing for screens that kept getting bigger and bigger; the sudden switch in emphasis from big, flatscreen monitors to three-inch monitors is a switch that many of them have still not adjusted to. When speaking to potential website designers, companies should feel out the designers’ various approaches to mobile website design, especially if the company’s marketing executives suspect that a mobile-first approach is in order.

The Third Step: Building the Site and Design Considerations

Once a marketing department has decided on a mobile responsive site strategy and a general design look and feel, it’s time to think about specific design elements. In particular, marketers need to think about how site navigation will differ from device to device, how content should adapt to different browser sizes and how the site provides a responsive experience to the user rather than just a responsive design.

Site Navigation for Smaller Devices

Sites that haven’t been designed with mobile in mind can be incredibly frustrating to navigate from a tablet or smartphone browser. Sometimes, navigation buttons are cut off completely; other times, users must scroll horizontally to find them on the site. The other extreme of the equation includes modified navigation menus that don’t give users easy access the content that’s on the desktop version of the site.

The most common way that companies have solved the mobile navigation bar problem is to consolidate all the navigation options into one drop down menu that can be accessed from a single button labeled “Menu.” A similar option, as demonstrated on Disney.com, is a small, square button on the left-hand side of the screen that leads to a slide-out menu with various navigation options.

When creating site navigation for smaller screens, keep these points in mind:

People will be using fingers and thumbs. Almost every smartphone owner knows the experience of trying to click a link or a button and pressing something else instead by accident. Apple’s own recommendation is to make buttons at least 44 x 44 pixels to allow people to press the button they actually intended to press.
It might be better to move navigation to the bottom of the page. One possible menu solution is to turn off the navigation at the top of the page when the screen size reaches a certain break point. The user can instead press a button at the top that takes them to footer navigation at the bottom of the site. This prevents space-hogging menus at the top of the page, requires less coding and forces the website visitor to spend some time on the landing page before making a decision about where to go next.
There’s no need to reinvent the wheel. There are plenty of plugins, many of them free, that will create responsive navigation menus. Most of them are jQuery based with a little bit of extra CSS coding to add. There are a variety of these plugins already available, giving developers the chance to choose the responsive navigation method that will work best for their site.

Thinking About Content and Layout for Small Screens

Making sure that the site’s most important content is mobile-ready is one of the strongest arguments for mobile-first design, especially when eCommerce is involved. Eye-tracking studies from six and seven years ago revealed that website visitors read websites in an F-shaped pattern. First, they look at the top line horizontally, reading from left to right. Then, they skim the second line from left to right, but they often don’t scan as far to the right as they did on the line above. If the user doesn’t hit the back button at that point, he or she then skims down the page, creating the stem of the capital F (Source:NNGroup.com).

What happens to that F-shaped pattern when a user’s vision is confined to a 3 or 4-inch screen? Marketers should expect that the F-pattern shifts into an I-shaped pattern. That is, there’s only one direction for a user to skim on a mobile phone: down.

In traditional eCommerce website design, designers place the “Buy Now” or similar call-to-action button either at the top right corner of the page, such as Amazon.com’s desktop site, or at the bottom of a product description. Marketers should rethink the placement of their call-to-action buttons for mobile devices, however.

An image followed by a product description and then a “Buy Now” button makes perfect sense on a desktop device. When the browser width shrinks, though, the narrowed column containing the product description suddenly becomes quite long. Finding the call-to-action button then requires a great deal of downward scrolling. Given that many website visitors rarely make it to content located below the fold, there’s a good chance the call-to-action will be lost.

Instead, follow Amazon.com’s lead. When products are viewed on a smartphone, Amazon displays an image of the product, a one-sentence description and immediately places a “Purchase options” box with large, easy to press buttons. Other products display with an even simpler format, placing the “Buy Now” button well-above the fold.

eCommerce on Smartphones is Growing Rapidly

Amazon, whose business has always been online, already understands what many eCommerce sites fail to grasp: Retail sales are moving to smartphones and tablets in the same way they once moved onto the Web in general. To get a better picture for the intersection between online sales and mobile devices, take a look at the following statistics:

  • 67 percent of consumers who use mobile phones for online shopping are more likely to buy from a site they consider to be “mobile friendly” (Source: Google Mobile Ads Blog)
  • 52 percent of mobile shoppers state that a bad mobile experience makes them less likely to engage with the company in the future (Source: Google Mobile Ads Blog)
  • Online commerce using mobile devices shot up 81 percent in 2012; by 2016, experts expect 24 percent of all online commerce to be conducted on mobile devices (Source: eMarketer.com)
  • During the 2012 holiday season, 70 percent of shoppers used their mobile phones while in retail stores to help them with their purchase decisions (Source:MobileCommerceDaily.com)

Creating a Responsive Experience Rather Than a Responsive Website

In a July 2013 article for WIRED Magazine, author Joelle Kaufman argues that developers need to start thinking beyond responsive websites to responsive experiences. A responsive website, at its root, merely shrinks the size of the site to fit on a user’s mobile device. That approach to mobile design, she says, does not go far enough to ensure a positive user experience with the site. Just as Amazon has done for years, mobile sites should be able to suggest products based upon customers’ previous visits, making the site easier to navigate and easier to use when visiting from a smartphone that’s much slower than a desktop computer. Technology is robust enough to provide a user’s location, shopping history, browsing history and so forth; why shouldn’t corporate sites take advantage of this data to provide the best mobile experience for each individual user?

Furthermore, it’s not good enough for the site itself to learn about consumer behavior on its mobile version if the humans behind those sites aren’t also learning and improving. Look for key indicators that the mobile version of the site needs improving and implement tweaks from there. For example, do users spend as long on the site when they are browsing from a smartphone as they do when browsing on a desktop machine? If they don’t, it might be because they are having a frustrating experience. Are bounce rates higher for mobile devices? Again, it might be because the site takes too long to load on a smartphone or because they cannot find the information they need. Along the same lines, is page load time significantly slower on mobile versions of the site? If it is, it will affect both user experience and SEO. To create a responsive experience for the user, all these questions should be addressed and monitored over time.

Conclusion: Now Is the Time to Revisit Responsive Website Design

The future of the Web is a future of multiple devices and multiple browser sizes. With products like Google Glass on their way, design for mobile devices will only get more complicated. While it might be tempting to slap a website into a truly responsive template, a “one site to rule them all” template, and be done with it, such a hasty move might not be the best choice for the company. Instead, corporate marketing departments need to spend longer than they ever have before researching mobile design considerations and responsive website options before committing to a course of action. Companies that have already created some type of mobile site alternative may need to face the unpleasant reality that their existing mobile site design does not meet the challenges presented by today’s mobile users.

Proper planning pays off, though. For evidence of wise and ever-improving mobile website experience, look no further than Amazon. Almost 60 percent of all mobile department store visits belong to Amazon. The online retail giant didn’t get to where it’s at today by accident; assessing and reassessing the needs of its mobile shoppers has led Amazon to a responsive website design that puts the user first and boosts mobile sales. Other corporations should take heed of Amazon’s example, let go of old excuses and plan a website that responds to the future.

Hassan Bawab, founder and CEO of Magic Logix, integrated marketing agency, is a leader in cutting edge technology and an innovative keynote speaker/writer and an author of “How to Work with a Digital Marketing Agency“. @HassanBawab