In 2014, no web designer can afford to ignore the mobile market. Depending on which stats you believe, mobile web browsing now represents somewhere between 20% and 25% of all web browsing. Even back in 2012, Pew Internet research showed that 31% of cell phone owners only browsed the web on those devices. With the rise in smartphone and tablet ownership, that figure should soon be even higher.

Google’s research shows that it’s a multi-screen world, where mobile devices are key for finding information, social sharing and completing purchases. Recent Google guidelines for search engine optimization (SEO) include the need to make the main content of websites load in under one second to cater to this growing audience. That has major implications for web design.

 

Deprecated mobile web design practices

One of the practices that is now deprecated is the creation of separate, less functional sites for mobile users that are accessible either by redirection or via a mobile sub-domain. Not only is that bad for SEO, which designers must also consider, but it also delivers a poor user experience (UX) and makes it difficult to track interactions across an entire site.

 

What Google recommends

The good news for designers of mobile websites is that Google now recommends a single website with a single URL which makes it easier for web search engine spiders to crawl, and leads to a better, more consistent user experience. It also means that there’s no dilution when it comes to SEO.

And when it comes to design, Google’s favoured option is using responsive web design to create websites that work no matter what size screen or web browsing platform people are using. Responsive web design means that designers use the same core HTML code for the website, while changing how people view the site by using CSS. A detailed explanation of CSS media queries is available on the Mozilla website. There’s also more on responsive web design on this site.

 

Mobile first web design

As well as using responsive design, it’s now good practice for web designers to think mobile first. Instead of designing websites with desktop users in mind and limiting functionality for mobile device users, they must start with the essential elements that work on small mobile screens and add layers, if needed, for large monitors.

Putting mobile device needs at the centre of the web design process leads to sites that are simpler, faster, more usable and – sometimes – more accessible. Accessibility is now a legal requirement in many countries, so that sites don’t discriminate against web users with auditory, cognitive and visual impairments. Our article on The Importance of Accessible for Websites gives more guidance on this.

 

Trends for mobile web designers

When designing websites for mobile web users, designers have to consider a number of issues. These include speed, image size, navigation, typography, layout and usability. These are the same issues they have always had to think about, but there are several design trends that cater explicitly to mobile users.

 

Speed

With Google favouring sub-1 second page load for SEO, designers have to focus on speed as a key goal of their designs. That’s perhaps why many sites are switching to a flat design, with large 2D instead of skeuomorphic icons, single blocks of colour and streamlined images. This kind of design loads quickly and also works well for the touch interfaces common on mobile devices. Microsoft used flat design in Windows 8 and its line of Surface tablets and now it’s on the website, too.

 

Navigation

Navigating content is a major consideration on small screens, and many web designers have addressed this with options like:

  • A fixed menu bar that’s accessible everywhere (see Mailchimp).
  • Navigation that’s hidden till you need it – usually indicated by three horizontal lines. You can also see this on many desktop sites, such as Slate.
  • For content navigation, another popular technique is the infinite scroll, where content continues to load as people move down the page. Forbes is an example of this. This doesn’t work well for all sites, as Nielsen Norman Group warns.

 

Typography

Type has always been a good way to show the visual hierarchy of page elements, but readability is also important. It’s now good practice to make text easily visible on small screens. Many sites now use larger font sizes as standard (see, for example, the Forbes site) and are also using a wide range of web fonts.

 

Layout

A desire to cater to mobile users has led to several layout trends, including:

  • Pinterest-style card or grid based layouts where the content shifts to accommodate the screen size, displaying a single card or multiple cards as required. You can also see something similar on Google+.
  • Layouts with content at the centre , where other page elements shift or disappear for smaller screens, as on The Next Web.
  • Parallax scrolling where different page elements (for example text and images) appear at different times, giving a sophisticated effect.
  • Single page layouts, as for example on My Provence.

 

Usability

Another imperative for web designers is usability, which brings all of the elements above together. Designers must consider:

  • how much content is viewable on a small screen
  • whether users can easily use gestures, taps and swipes to navigate
  • how users without touchscreens (who may be using a phone with a trackball) can navigate
  • the ease of form filling
  • how to take advantage of built-in smartphone features in web design (for example, using click to call).

Designers who look after speed, navigation, typography, layout and usability as part of a mobile first design will be ahead of the game as this space continues to evolve. Mobile users are no longer second-class citizens; they may soon be the main people that look at your website. That makes a device-agnostic, responsive design the best way to future proof any website while complying with Google’s ever-changing rules for web and mobile web optimization.