Web site to mobile conversions


At some point, you have probably browsed to a web site on a mobile phone, and found that the text is microscopic. So you zoom in, and now most of the page is missing and you need to drag left and right just to read a line of text. Annoying, but it creates another problem which you might not be aware of – search engines don’t like sites which work poorly on small screens. Put simply, if your site does not work properly on all platforms, your search engine rankings will decline.

It makes sense to have a mobile-friendly site, given that more people now access the internet through a phone or tablet than an ‘traditional’ PC. With an older web site, it might just be time to call it a day and have a new one built, but if you are happy with your existing site, then it is often quite easy to change the site ‘styles’ to make text more readable, and to make things ‘move around’ to fit better on a small screen in portrait layout (that’s taller-than-wide, how you normally hold a phone). So here’s a quick guide on what needs to be changed on a typical web site, to make it work properly on a mobile phone:

Font sizes

Older web sites often use fixed-size fonts, and fixed spacings around the text. The units used are ‘px’, or pixels, where one ‘px’ equals one pixel on screen. This does not work with mobile devices, because they use a scaling factor which the ‘px’ unit ignores. The solution is to switch to ’em’ or ‘rem’ units, which are relative sizes and can be scaled up internally by the browser, to give a better reading experience. Pixel spacings are still used elsewhere in the site, but all the font sizes should be changed.

Layout

A portrait display on a phone or small tablet should be single column, and that’s probably not what your old site has. Here, modern web standards help – fixed columns (usually in HTML tables) can be changed to dynamic flex-box layouts, so they will still go side-by-side if the screen is wide enough, but drop underneath each other on narrow displays.

Pictures

If these are too large, then they can be scaled to fit the screen width on small displays. If this is not done, then usually you have only half a picture, and when you scroll across you lose most of the banner, which looks awful.

Banners

For a mobile device, a simplified banner is usually better, with a phone number that the user can tap to launch the dialling app.

Menu

This is the most tricky part, because the old menu will most likely fill the screen vertically or just show a couple of tabs then go off into hidden space horizontally. You will need a new menu wrapper, which will re-style the old menu so it is vertical, put it in a suitable sized box with scroll buttons if needed, and overlay this on the screen when the user taps a button. I prefer the button to be always visible, because some people can’t always find it if the button scrolls up and down with the page. The button should have some animation to show the change from open to closed.
If this is done properly, future changes to the original menu will just be carried over to the mobile version automatically.

Here is an example of a desktop and mobile – converted web site. If you use a PC, try starting with a large browser window and gradually make it narrower to see the layout changes happen.

How much does this cost?

The exact cost is dependent on how complex your site is, and in some instances it may be better to move the entire site to another platform (like WordPress) with a ‘responsive’ menu system which already works on mobile devices. But generally expect to pay £100 to £200. More, and it may be better to re-design the site.

Please telephone, email, or click the ‘quote’ link below if you would like to get a price for a mobile-conversion of your own web site.

Get a quote

Alternative approaches

Obviously, the old web site can be replaced with a new one. Most templates now are mobile-friendly, but if you are shopping around, do check the mobile function of the site template you are going to use before purchasing, and make sure that any developer you use can supply a fully-functional mobile version of the web site, not a cut-down one.
There are some specialist services which claim to be able to build a mobile version of your site or even an app, pretty much without human intervention. But the problem with this is you then have a second web site to maintain, which means you are paying twice to update your web site, and the mobile site will be built on a standard template so your site will just look like all the others done with the same system. These services are not usually scams in themselves, but you will find yourself locked in to high maintenance costs and your mobile site will not match your existing one properly. Avoid this, and go for an independent web-developer instead!