Mobile First Strategies

What’s your strategy for optimizing your page, getting to the top of the search rankings, and being prepared for the future? Are you ready to design your site for a mobile-first world?

The Future is in Your Hands

Recently, Google announced that the usability of a website will be a major ranking factor in search results. And of course, where Google leads, the other search engines follow. While it’s been common for a while for website to have improved accessibility, for example by having appropriate alternative text for images so visually impaired users can still access the content, actual on-screen usability has sometimes been left lacking. How many times have you visited a website that looks perfectly fine on a desktop machine, but seems to have half the page missing on a mobile device? Does the menu system not work on your iPad? Are the pictures too large for your screen?

Usability is all about how functional and, obviously, usable a site is. Text in a small font may be perfectly legible on a large monitor, but fades into tiny dots on a tablet screen. A fancy JavaScript menu might do the business on a laptop, but doesn’t even open on an Android device.

Go back as little as ten years, and this was a minor inconvenience. In case of problems, everybody would revert to the “real” computer they had, and access the content there. But as phones and tablets have become more and more advanced, there’s less and less need to use a “real” computer, and websites that have issues are more likely than not abandoned by the user to find one that does work. Some statistics show that almost 90% of internet traffic is now from mobile devices — you’ve got to ask yourself, why would you want a site that only 10% of internet users could see and access successfully?

Speed is of the essence

Not only is usability an important factor, the speed at which a page loads needs to be considered too. Dial-up happened a long time ago, and if it takes more than a few seconds for a site to load, the user won’t hang around to see what’s happening. The “back” button is the emergency escape route, and there’s nothing you can do to stop it.

So with that in mind, you must make sure your pages load as fast as possible — use compression, use a fast server, use minimal external calls, use fewer graphics, use caching to your advantage, do everything you can to make the site load blindingly quickly.

But what if you think your page already loads as fast as it can? Unless you’ve done something exceptional, you might be quite surprised at how fast it should be able to load. So how do you find out?

How to test the speed of your site

Google want you to make your sites work with a mobile-first philosophy, and so provide a tool to help you. You can find it by visiting the following URL:

https://developers.google.com/speed/pagespeed/insights/

By visiting this site and entering your own URL to test, a report will be generated telling you what you can (and need) to do to improve the speed and usability of your page. It will also notify you as to what optimizations have already been used, and if any settings may need changing.

Responsive Websites

You don’t necessarily have to redesign your website from scratch — you may already be nearly there on the usability front, and it’s just the speed you need to contend with. For example, if you run a site hosted on WordPress and have installed a “responsive” theme, it will take care of the majority of the problems for you. Text will be the right size on mobile devices, images, will scale in size, text will reflow from a horizontal layout to a vertical layout allowing users to scroll down and not require them to scroll across, alternative styles may be applied to help with legibility, and so on. Server speed and image optimization may still be issues you need to look into as well, but using a responsive theme will give you a head start.

Similarly, prewritten CSS files are available to download from many sites, meaning if you don’t use a platform like WordPress you can still benefit from using a responsive design.

Some well-known sites — Facebook, for example — use an alternative codebase to display their sites on mobile devices. You may be familiar with m.facebook.com, which is a cut-down version of the full Facebook site. In most cases, you won’t need to take the same route, and using a responsive design is much easier to implement.

Other methods to improve page speed

CDNs, or Content Distribution Networks, can be leveraged to improve the speed of your site. A CDN like Cloudflare will ask to take control of your DNS settings, and will divert traffic from your original host to their own servers, which are optimized and high speed, and have high level caching included. The speed gains from using a service like this can be tremendous.

WordPress offers a similar solution with their JetPack plugin, which stores optimized copies of your images on their own servers. For an even greater speed boost, JetPack and a CDN can be combined, along with a local caching plugin within WordPress itself.

The alternative is to take a minimalist route, in which you use no images, and very few styles of text. While this will work in some instances, it doesn’t look

Give the Users What they Want

All in all, this is of great benefit to the users of your website. They want a site that works well and loads quickly — and there’s no good reason why they shouldn’t expect that, and there’s no good reason why you can’t give it to them. Gone are the days of just throwing up a website and hoping it works — if you don’t get this right, then your rankings will suffer.responsive photo

Reply