By 2014 mobile usage ‘should’ over take desktop internet usage. If you’re not yet considering the mobile experience of your website, you might want to begin now. If you would like to see a lot more data on the subject take a look at our post on why you need a mobile website/mobile marketing strategy.
But, it’s not just the possibility of a mobile world that is forcing companies everywhere to consider a mobile friendly user experience, it’s also the fact that Google has begun to penalize the rankings of those sites that are not mobile friendly. A mobile website is now an important part of a company’s SEO strategy.
Take the following example or scenario from the Google Webmaster Central Blog: you have a website that serves content perfectly well to desktop users, that is, it looks good, it’s optimised for desktop viewing/search and it works well on desktops and laptops. But, when a mobile user finds your site on a mobile device, you display a 404 error page. For Google, this is a big ‘don’t enter and do demote‘ sign. When it comes to mobile SEO, this is a no-no and actions like this will affect your ranking in Google’s mobile search result pages. In this instance, it’s far better to serve the desktop version of your site, rather than nothing at all.
If you’re at all au-fait with the latest web terminology, you’ll know that when it comes to mobile web design, you’ve got a few options.
You can either have:
- A responsive web design
- An adaptive web design
- A mobile web design
- A mobile app
There are pros and cons to each of these formats so if your head is already spinning, don’t worry, we’ll walk you through them. Once you’ve got a better understanding of each type of mobile web design, you can then choose the format that is right for you. If you’d like to read more in-depth information on any of these topics, do let us know. Leave a comment below and we’ll see what we can do to meet your request.
Responsive vs. adaptive vs. mobile vs. mobile app
Responsive Web Design
Responsive website design is the approach that most companies take to optimizing for mobile devices. These sites are coded in a way that allows them to figure out important information about the user’s device and environment in order that they can display the website content in a layout that is optimized to suit the user’s environment (screen size). Unlike adaptive web design, responsive design allows all elements on the page to load. A responsive web design often requires a complete site rebuild and creates challenges for online businesses: how do you handle images, how to you optimize performance/page load time? Often these sites are built from the ground up, focusing on first optimizing for the least capable devices (sites running Windows 95, etc) and then adding more sophisticated features based on screen size, bandwidth, etc. This is known as Progressive Enhancement. An example of a responsive website is: The Boston Globe. Have a play with it, re-sizing your browser to see how the site responds.
Adaptive Web Design
Adaptive web design is fairly similar to responsive web design in that it also incorporates code on the page that allows either the browser (client-side adaptive) or the server (server-side adaptive) to detect the size of the device the user is browsing from. However, unlike a responsively designed website, an adaptive site only loads the required elements of the page, whereas responsive websites load all the elements of the desktop page. While the latter may slow load times, adaptive web design also has a drawback in that it limits what the user can see.
If you do decide to take an adaptive approach to your website, you don’t have to rebuild the entire site as you would with a responsive design. In fact, adaptive design means that you can pick and choose which of the content you display for each device (bear in mind you’ll have to keep adding code whenever a device with a new screen size hits the market). This is a particularly good option if you’re a company like Mobify with 95% of its mobile traffic coming via iPhones. In this instance, Mobify will focus on loading content to suit an iPhone rather than any other device. A couple of sites that take the adaptive approach include Threadless (client-side) and Etsy (server-side).
Mobile Web Design (AKA Mobilized Web Design)
A mobile website is a website designed specifically for mobile devices – particularly for smartphones. While a mobile website may share some of its content with the desktop version, it will have a lot of its own code and its own URL.
A mobile website is a good option when it may be too expensive to redesign your whole site (in the case of responsive web design) but there are quite a few cons:
- With a mobile site you are required to have a different domain. Many companies choose to differentiate their site with ‘m.domain.com’. This can affect your organic traffic and can make managing the website a whole lot harder as you will have two separate places to upload content to.
- Mobile websites are not as good for SEO because links that are shared from a mobile browser will not count as search link equity toward the primary website
In July 2012, Google published information to help businesses decide between a separate mobile site and a responsive website.
A mobile website was better than a responsive site in the following areas:
- Ability to design for a mobile user’s needs (ecommerce, directions, phone calls, app downloads, etc)
- Quick site build time
- An affordable option
- Great DIY options
A responsive website was better than a mobile site in the following areas:
- Ease of updating site
- Optimized for search engines
- Adding conversion and redirect codes
And, in Google’s words:
“Responsive design can definitely minimize long term maintenance of your site, but many businesses can effectively connect with their customers with a separate mobile-friendly site. If you have the technical resources and a clear business need, then responsive design is a more advanced way to make your site mobile-friendly. No matter how you go about it, you need to ensure you are designing for mobile first, and engaging your customers when they’re using their mobile phones to search for your business.”
Mobile App Design
A mobile app ‘lives’ on a user’s smartphone or tablet. It does not require the internet to run, though it may require access to perform some tasks. The best use for a mobile app is as a productivity tool or piece of software. If your goal simply wants to display content, you’d be better off going with a mobilized website or a responsive/adaptive site. According to Michael Freeman of ShoreTel Sky, “Most people don’t want to install an app just to get static information”.
If you’re not sure of how you will differentiate a mobile app from your website, at this stage, it’s probably not the right option for you. But, this really depends on your goals. If you’re trying to build a game, or a tool or a type of software that users can interact with, an app might just be your thing. But, if you’re simply jumping on the ‘mobile bandwagon’ – go down the route of a mobile website or, if you have the money to spare, a responsive website.
So, which one should you choose?
If we’re to go by what Google says, responsive web design is the winner. Not only do responsive sites make maintaining single, shared sites easier on webmasters, but they also preserve canonical URLs, avoid complicated redirects and simplify the sharing of web addresses. This makes them a better option for SEO too and in the long term, a much better return on your investment. After all, you never know what next year’s device will require. Better to make sure you’ve got a site that can adapt to whatever the next technology company produces.
However, if you’re not yet ready to rebuild your website or to pay the cost associated with a responsive site, you might start out with a mobile website. From there, as your business grows and as the marketplace changes, you can adapt your mobile strategy and perhaps move onto an adaptive web design and then a responsive website design.
