Statistics are to be taken with a pinch of salt. This one is innocent enough, revealing the phenomenon of mobile communication:
Every day across the world 371’124 babies are born and 377’900 iPhones sold! (February 2012)
Moreover, in 2013, between 30% and 50%* of users access the web via mobile.
*depending on the data source
And as of 2015, the mobile trend continues as can be seen in this chart, by ComScore and Morgan Stanley Research.
Every day, mobile devices, mobile usage, and mobile purchases continue to pick up speed – a trend website owners and marketing professionals need to be aware of.
This article covers 3 points:
1. Understand how your customers currently interact with your site.
2. Take a first step towards adjusting your existing site for mobiles.
3. As you develop your online presence, consider three distinct mobile design options.
empty line
The Business Scenario
Helen sells beauty creams to teenagers. Recently, she’s read an article about constant connectivity and multi-screen behaviour. In other words, consumers are going online on many different mobile devices throughout the day. The article includes headlines such as these:
-
Mobile is critical to massive future growth.
-
Billions of dollars are being spent in mobile transactions.
-
In order to survive, your business must embrace mobile.
Sales are doing fine and Helen is not obsessed by website analytics. And yet, the article she just read made her realise that she needed to understand her teenage clients better. For example: how much traffic comes from mobiles? Do mobile users remain on the site, or do they drop off more quickly than desktop users? Which pages are successful, which are not?
Helen is right to ask herself these questions, because mobile-designed websites and business success are ever more interlinked.
empty line
The Solution
1. Understand how your customers currently interact with your site.
Helen decides to set aside a couple of hours to access Google Analytics, a (free) service that generates detailed statistics about website traffic. Indeed, this is one of two highly recommended and immediate steps a business owner or marketing manager should take:
1st step: Use web software such as Google Analytics or, indeed, an alternative web traffic analysis service to learn more about traffic and visitors to your site.
2nd step: Talk directly to your customers. Ask questions about the kind of devices they own and how they use them. Ask them for feedback about your site’s ease of use.
empty line
Use the technique of Customer Personas to get it right.
The information you collect is invaluable and needs to be integrated into existing business processes and website design. The specific goal is to tailor and rearrange content such that both desktop and mobile users enjoy the interaction with your website. Update your Customer Persona(s) with a description of their multi-screen behaviour. You may want to check out my Customer Personas article which provides a useful summary of this customer-centric technique.
empty line
The mobile-first philosophy.
The importance of presenting valuable content with mobile users in mind, is undeniable. Given the observed mobile revolution, new websites should ideally be (re)designed with mobile access as a priority (as opposed to desktop-priority).
empty line
Constant connectivity is here to stay.
Constant connectivity means that people are going online on many different devices throughout the day, either sequentially or simultaneously. A typical scenario may be someone who’s using her PC at work, her tablet in the evening on the couch and her smartphone during commute hours.
empty line
2. Take first steps towards adjusting your existing site for mobiles.
No business can afford to ignore the fact that more than a billion people primarily access the web with mobile devices. Even if you’re not ready to rebuild your site for optimal display on such machines, take one of the following two steps today:
Step 1 – Simplify your existing site’s design.
Loading speed matters! Test your website with Google Page Speed Insights. You’ll probably see the need for simple design changes right away. Discuss these with your web services provider.
To display well on mobile, ask for simpler page designs, large font sizes. Position your value proposition and other critical information at the top where it is immediately visible, and make data entry forms “fat-finger-proof”, i.e. bigger data entry boxes and buttons to press. Deliver key information by putting your name, phone number and a link to a map at the top left of your home page where it is easy to find.
Extract from a presentation by Janine Warner – Multiple Strategies for Multiple Screens
Step 2 – Create a mobile version of your site.
As an alternative to editing your existing website, you can create a parallel version, using mobile-site-design services, many of which are free or low cost. Check out Ginwiz, for example. But before you go for this solution, please read the next chapter for a review of mobile web design options.
empty line
3. As you develop your online presence, consider 3 distinct mobile design options.
These 3 approaches are commonly used to create a mobile website for multi-device users.
1. Responsive Web Design (RWD)
2. Adaptive Web Design (AWD)
3. Separate mobile websites with their own URL
1. Responsive web design (RWD).
Responsive web design is a concept whereby you build your website once and the system – in the background* – auto-adjusts to display content properly on all devices (except the oldest cell phones).
*using CSS media queries and fluid grids.
The Boston Globe newspaper is a good example of successful responsive web design. Click on this link – enter the URL given on the picture – and view the resulting display on different devices.
The advantages of responsive web design:
- Maintenance is less costly because there’s only one repository of content. No need to worry about updating parallel web pages or web sites.
- Optimised SEO. No duplication of content across parallel web pages or web sites with different URL’s. Needless to say, responsive web design is Google’s preferred solution.
- Using one single URL for a piece of content makes it easier for your users to interact with, share, and link to your content.
The disadvantage of responsive web design:
- Considerable effort and resources are needed to adjust an existing website for responsive design. Best (and cheapest) is to start redesigning a website from scratch, applying the mobile-first philosophy.
- Using this method, your website will often appear to “adjust” itself as you resize your browser. You may find that it doesn’t quite cater for all your clients’ needs. Hence the importance of identifying your clients’ mobile behaviour and expectations. Use Customer Personas to do so.
2. Adaptive web design (AWD).
When a customer visits your website, it’s possible for your web server to detect and identify the user’s device. It then delivers a customised* web page, made to match the device’s capabilities. There need to be as many such customised web pages as there are devices that are likely to access the web site: cell phones, smart phones, tablets, desktop computers and even Smart TVs.
*Using a predefined template with fixed layout sizes.
Adaptive design is labour intensive and hence expensive. It is at the high end of website design. It’s often used by big companies that have a big budget and important online business objectives.
The advantages of adaptive web design:
- Just like responsive design, there’s only one repository of content.
- Sharing the same URL means optimised SEO.
The disadvantage of adaptive web design:
- This approach isn’t for the faint-hearted. It requires highly skilled web developers. Multiple predefined templates need to be managed and maintained, which raises ongoing maintenance cost.
3. Create separate mobile websites, with separate URL’s.
With this option, you create a separate web site for mobile traffic, independent of your original desktop site. The browser detects if a visitor is on a mobile device and redirects him to the mobile-optimised version of your site.
Many web developers opt for a mobile version that sits on a subdomain of the main website. For example, if a desktop version is on www.swisscom.com, the mobile version might be on m.swisscom.com. A dedicated mobile site allows you to tailor the site specifically for mobile users and is often independently built and hosted.
For example IM Creator is an excellent mobile site builder.
The advantages of a mobile site with a separate URL:
- Quick and easier (hence cheaper) implementation.
- Comes in handy as a temporary solution. Allows testing and experimenting with mobile content.
- The ability to offer mobile-specific services, for example mobile coupons or QR codes – services that are not relevant to desktop users.
The disadvantage of a mobile site with a separate URL:
- As a parallel to your main site, it’ll need updating. Duplicate content on the web requires tricky technical gymnastics, so as not to confuse SEO and Google.
- More difficult for users to interact with, share, and link to your content.
- Google tolerates separate mobile sites and hence separate URL’s – but prefers solutions that only require one URL.
The option you choose will depend on your individual circumstances.
Each of the above 3 solutions allows you to create device-specific web content. But in the end, what matters most is how content on a page is arranged and delivered to the user, based on the device being used to access it.
If the end-user enjoys the experience and gets what he needs, our business objectives are more likely to be met.
Now it’s your turn!
1. Evaluate your current website with a tool such as Google Page Speed Insights, discuss the results with your web service provider and consider implementing a few basic changes, such as bigger sign-up forms and buttons.
2. Ask friends and trusted clients to connect to your website with a mobile device and give you (honest) feedback about how mobile-friendly your site is.
3. Review existing content and make it more device-specific.
empty line
Video | A review of 3 important mobile design options.
empty line
The world goes mobile – Recommended resources.
Mobile First – by Luke Woblewski, highly recommended!
How to approach multi-device sites for your Business – a Google perspective.
Mobile responsive design 101 – an excellent article from Copyblogger.
Three reasons why responsive web design is the best option for your mobile SEO strategy – by Searchenginewatch
Multiple strategies for multiple screens – an informative slide presentation, deposited on Slide Share.
Photocredits
Header image kindly provided by Thomas Hawk, Flickr