Mobile first

You’re headed for your appointment and you can’t remember where the building is located! You whip out your smartphone and search for their Web site. Horror of horrors, their Web site isn’t responsive; it shows you exactly what you’d see on a computer only teeny weeny so the whole page fits on your smartphone screen.

The home page takes forever to load and you realize it’s because the Web site has a rotating banner with a dozen big pictures and an embedded video that’s set to start playing as soon as the page loads. Just how much is this going to cost you in data transfer?

You pinch and spread the screen trying to find the link to their ‘contact us’ page. Finally you find the link and wait for the page to load. You scroll down the page and see they’ve helpfully included an interactive map! If you were on a desktop computer this would be awesome! But you’re not on a desktop computer, you’re on a smart phone, and that awesome interactive map is now taking up your whole screen and when you try to scroll past it you, instead, scroll forever inside of the interactive map.

Can you feel the frustration?

If you don’t consider mobile first, this frustration is what mobile visitors to your site feel and chances are, they won’t try visiting your site from a mobile device again.

So, why would you care? Your Web site looks perfectly fine on a desktop and it works reasonably well on a tablet. Who cares about the odd person who might want to access your Web site via a smart phone or other device smaller than the average tablet?

Because more and more consumers access the Internet with a mobile device and this is a trend that is not going to slow down or reverse.

89% of smartphone users have looked for local information and 88% have taken action as a result!

71% of smartphone users that see TV, press, or advertising that interests them will immediately do a mobile search.

Your Web site cannot afford to ignore mobile visitors or how they experience your Web site! This isn’t something to ponder for the future; visitors are already trying to access your Web site with mobile devices!

Say, “hello” to responsive design.

Responsive design is an approach to Web design and development that takes into account the screen sizes of different devices and adjusts layout, navigation, and styles to deliver an optimal viewing experience.

If responsive design had been applied to the Web site in our example:

  • The home page layout would have changed to eliminate horizontal scrolling
  • The menu and other navigational elements would have been altered to deliver a more mobile-standard look and behaviour
  • Elements on the home page may have been hidden, such as the video or the rotating banners
  • The interactive map on the contact us page would have had generous margins around it so there would be a place to touch and scroll the page

That’s much better. At least a visitor on a smartphone could easily navigate to the contact us page and find a location.

But, is that enough?

Responsive design is a good first step but these days it is the minimum your Web site should offer visitors.

Say, “hello!” to the mobile first approach.

Mobile first design/development means you start your process off by designing with a mobile device in mind. Considering the needs of a mobile device first, will force you to decide what is really important and necessary and what the site needs to focus on.

You’ll find you stop thinking of things to remove for a mobile view and, instead, you’ll find yourself thinking of things you can add to enhance the user experience on a desktop; enhancement instead of degradation.

Using our example this is how a visitor’s experience on the Web site might have looked if it had been designed with mobile first in mind:

You’re headed for your appointment and you can’t remember where the building is located! You whip out your smartphone and search for their Web site. Because the Web site was designed with mobile devices in mind, it’s fully responsive and looks great on your smartphone!

The front page loads quickly thanks to a mobile first approach, which eliminated a lot of the data-heavy elements such as the rotating banner and embedded video in the mobile view. What you can’t see is the optimized images, minified code, and server-side delivery of only those resources required for the mobile view that helps the page load quickly and use a minimal amount of bandwidth.

Navigation to the contact us page is easy; thanks to a responsive menu that offers a drop-down list and custom menu links for mobile view.

The contact us page has a link that will launch a map app on the phone with the location of the business marked. Now you can see where you are in relation to the building and easily find your way to your appointment!

Can you feel the lack of frustration?

If you were to go to the Web site on your desktop computer the site would have everything from our first example; the rotating banner, the embedded video, the interactive map; or maybe you wouldn’t. It would depend on what you now consider important for a desktop visitor.

Don’t think of your mobile view as being less than your desktop view. What has happened is you have tailored your device view to the needs of a visitor using that device. This is the essence of a mobile first strategy and this is what your Web site needs to embrace if it’s going to perform in 2014 and beyond.