Learn

Billions of people now own a smartphone and they are constantly accessing the Internet for general information, social purposes and to buy goods etc. The increased usage of smartphones and tablets has made mobile optimisation and marketing a must for many online businesses. Therefore, if you own a website and you are wondering whether or not you should have a mobile friendly website (responsive website) well now’s the time you should think twice.

Mobile optimisation is the process which ensures that when a visitor accesses your website from a mobile device such as a smartphone or tablet they have the best experience possible – both practically and visually. Mobile optimisation also provides better brand engagement, more mobile traffic, increased conversions and reduced bounce rate.

If you have already got a mobile friendly website (responsive website) then there are only a handful of factors which you need to take into consideration when thinking about optimising for mobile.

Page Speed

Page speed has a huge impact on your audience user experience – especially if they’re not on Wi-Fi and it also impacts your websites ranking. Over the years our experts have noticed a general trend… a page which has a slow load time typically has a high bounce rate and low average time on page. Try and make sure that you use compressed style sheets as well as scalable imagery and graphics etc. to allow a faster load time. Are you wondering what your page speed is? You could analyse your Google Analytics data (that’s if your website has the tracking code installed on it) or you could use PageSpeed Insights.

Site Design for Mobile

The end goal is to design a website that warrants the device window, with the content readable from the outset. You shouldn’t have to pinch, zoom in and out of the screen regardless of the smartphone or tablet type. You should also think about

• Design for fat fingers (like mine ha): make sure that i.e. buttons arent too big, too small or in the way of a finger which is trying to scroll the page as accidental clicks can happen
• Flashy effects: use HTML5 to create special effects as not all smartphones adapt to Flash / plugins i.e. iPhones
• Don’t use pop ups: avoid using pop ups as it can be frustrating trying to close them on a mobile device.

SEO

If you want to rank well in mobile SERPS, be as accurate as possible when creating URLs, title tags and meta description tags. However, do not scarify the quality of the content. Remember google shows only

• 45 characters of a title tag to mobile users
• 100 characters in a meta description tag to mobile users.

Don’t block CSS, Javascript or images

These days almost all smartphones can handle all three elements so make sure that the webmasters haven’t blocked them. These elements help Google understand if you have a responsive website or a different mobile solution.

Local Optimisation

When optimising for mobile you should take into account content for local search. This usually includes standardising your company name and location in the site’s meta tags.

Mobile Site Configuration

If you haven’t got a mobile friendly website then the first thing you need to decide is whether you want to use a responsive, dynamic serving or separate site configuration. Google supports all three however, favours responsive design more.

Below is a diagram which highlights some of the pros and cons about the three configurations.

Responsive design
A responsively designed website delivers the same content to a desktop user and a mobile user on a single URL for each page using a fluid grid and a flexible design to which fits the size of the user’s mobile device. It gives a user the optimal viewing experience regardless of the device used. Be it a PC, tablet or a smartphone, the user interface automatically adapts to the screen on which it’s being viewed by using media queries.

We would use the following CSS code to instruct browsers how to display content for a screen that’s 420 or fewer pixels wide:

@media screen and (max-width: 420px) {
.class {
[styles for this class here]
}
}

And to link it to a separate stylesheet, the following HTML code would be entered between the <head> tag:

<link href=”mobile.css” type=”text/css” media=”screen and (max-device-width: 480px)” rel=”stylesheet”/>

Separate Mobile Website

You can have a separate mobile website on which is hosted on separate URLs, such as a mobile sub-domain (m.example.com), in a sub folder or a completely separate mobile domain (example.mobile).

Dynamic serving

Dynamic Serving allows you to serve different HTML and CSS on one URL depending on what type of device your visitor is using. The code used to is Vary HTTP header, which looks like this:

GET /page-1 HTTP/1.1
Host: www.example.com
(…rest of HTTP request headers…)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(… rest of HTTP response headers…)