Mobile Friendly Web Design For Moray: Latest Google Annoucement

Advertisements
Latest announcement from Google confirms that mobile-friendly websites will be given preferential treatment in Google web results from April 2015. Be responsible – get ‘responsive’.

Well, we have been speculating about this for a while now, but it seems that ‘mobile-friendliness’ is going to be an increasingly major factor in how websites are going to be ranked.

We should have known this was going to be the case when Google started introducing all manner of mobile testing tools in their Webmaster accounts. So come April 21st 2015 when Google rolls out its new ranking algorithm, you really ought to have your site well and truly adapted for mobile or you may lose ground in the Google results.

You can check out Google announcement yourself over at Google Webmaster Central.

The statement reads:

“This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

Okay. So what is a ‘mobile-friendly design’?

Well, it can be as complex or as simple as you like, but the principle is the same: the site must be easy to read, easy to navigate and also look good on mobile and tablet devices. This usually means producing fluid or elastic designs; layouts that basically flex, adapt or ‘respond’ to whatever screen-size they appear on. So if your web designer used fixed pixel widths to format a table, rows or columns, then that is going to be a problem. If they didn’t set the initial ‘viewport’ size then that is also going to be an issue. Font or typeset that is too small? You’re going to have to upsize it. But these are just some of the more superficial concerns.

Mobile and tablet users often have very different expectations of how your website should be behave. It an era still defined by the limitations of 3G, speed matters, so you need a way of instructing your website to substitute those large, slow to load images with smaller ones or ditch them altogether from a mobile-friendly perspective. Adapting the format and functionality should also be important, so those wonderful slide-galleries you had your designer install? Best left for your desk-top version. That call to action you had at the bottom of the page? Best serving it at the top to be truly mobile friendly. That navigation bar you have down the left hand-side of your web page? Best served at the top, preferably in a top-fixed fashion, and preferably using a touch sensitive menu icon, so that it can be accessed on demand even when the user scrolls down the page.

Remember: Google is not talking about mobile-versions of your website, it is talking about responsive, fluid designs that can serve the same content in a way that best suits the device they are on. So those old (and very basic) mobile-versions of your website? Forget them and move on. This is the era of responsive web design: its fluid, more natural , more adaptable and more easy to manage.

With the right tuning your website can know what device the user is using to access your website and can respond by serving a friendlier, more adaptable version to it.

You can use Google’s Mobile-Friendly Website link to test a page yourself or head over to Google’s Page Speed test to see how fast your page is loading.

Here are some of the major issues you should address:

  1. Font-Size. Google insists on a font-size of 16 pixels or more (or their equivalent).
  2. Above the fold content. This is harder to understand. Above the fold is where all the important stuff is included like navigation, your page headers, your logo and your message. Typically, anything beyond 600 pixels deep doesn’t get read as much as the top area of your website, so Google insists that all those elements should load and render (display) first. Often this means placing all your additional plug-in support and all that render-blocking javascript at the bottom of the page (unless it supports something within the top 600 pixels). Render this ‘above the fold’ area first. Produce style-sheets for this area in isolation, perhaps. Get this area rendered as quickly as possible so the user is not waiting for the top half to display just because it is waiting on a substantial pay-load going on further down the page. This is a complex, thorny area that is best left to a professional.
  3. Optimise your images. As a rule, don’t serve anything larger than 150kb to a desk-top computer and use media queries in your style-sheets to serve a smaller, more optimised version of the image for mobile and tablet devices. Failing that, try using media queries to instruct the device NOT to download the image.
  4. Avoid using Flash, Silverlight, and Java. Most mobile devices do not support plugins of this kind, and plug-ins are a leading cause of hangs, crashes, and security incidents in browsers.
  5. Minify everything. And I mean everything. Compress images, html, css and javascript. This will improve site performance all devices, not just mobile.

To talk about getting your website Mobile Friendly just use the email below.

It really doesn’t have to cost the earth. You can either develop a new mobile-friendly version of your website, or do something called a ‘retro-fit’. A retro-fit just takes all your existing page elements and makes them comply with mobile-friendly standards. Either way, if you are based in Moray, Aberdeenshire and the Highlands I can help. In fact, even you are not based in any of these places I can help, so let’s talk.

About the author

The author has covered all aspects of web development and internet marketing. Work conducted on behalf of Art Empire Industries, GBEye, Sheffield City Council. The author’s mission is to provide an ethical web service to small & medium sized businesses throughout the North East of Scotland and ensure a fair and reasonable trade-off between the money they invest and any subsequent business growth. Works at the Pixel Surgery in Moray.

Email: alan.sarjeant@gmail.com

Advertisements