Websites for Mobile Devices

Mobile Website DesignModern websites have got a tough job ahead of them. Not only do they have to do your marketing and selling, but they now have to do this across loads of different devices. More and more people are using smart phones, tablet computers, e-book readers, netbooks, and so on to access the Internet. All of these devices have different capabilities and different screen sizes and your website has to make sure that it gets your message and products in front of everyone.

Designing websites for mobile devices is already important and is going to become increasingly so as more and more people move away from their traditional desktop PC.

So how does your website manage to cope with this diverse range of machines?

There are three main routes you can take to solve this problem.

1. Ignore the Problem

If you've used a modern smart phone or tablet to browse the web you'll have seen that they do a pretty good job of displaying websites. Most will resize the webpage so it fits on the screen and will then allow you to zoom in and out to find the information you want. It's a bit of a hassle to have to zoom in and pan around and you can't always read what the website says until you zoom in but at least people can get to the website and see it as you've designed it.

So why bother doing anything special?

It's that bit of a hassle aspect that you need to worry about. Especially on smaller screens such as a smart phone you can't really read the website until you've zoomed in. Once you've zoomed in it's harder to move around the webpage and see the other information. If your columns of text are quite wide people end up having to scroll across to read the start and end of each line.

All of this just makes it harder to use your website. People have an incredibly low attention span when browsing the Internet and there are thousands of other websites they can go to instead. If they find it difficult to use a website they'll simply go elsewhere.

You Need to Do Something

Mobile website design is still fairly new to a lot of companies and most haven't yet looked into the problem. The majority of people still use laptops and desktop PCs but all the indications are that the move is towards mobile devices. I'm sure if you ask around friends and family you'll find quite a few will pull out their iPad or smartphone rather than walking off to the desktop PC and waiting for five minutes as it boots up.

There are two main techniques to providing a good mobile website experience.

2. Design a Specialist Mobile Website

Most tablets and smart phones not only have a smaller screen size but are also driven by touch rather than a mouse. To take full advantage of this you could build a specialist Mobile website. When someone visits your webpage it automatically detects that they are on a mobile system and then redirects them to your mobile website. Once there you can tailor your webpages for mobile access.

This approach can give your visitor the best experience. You can tailor the look and feel of your pages to act more like an 'App' rather than a website to give that natural mobile feel.

However, you do then have to have two websites. They may be driven by the same back-end software but any changes you make to the structure and layout will need to be reflected across both versions.

You also have to consider if you need more than two versions of your website. The constant stream of new mobile devices means there is a vast array of screen sizes and capabilities your website needs to cope with. If you optimise your mobile website for one particular device you'll probably find it doesn't look as good on another device.

For example if you size your website to be used on an iPhone then it won't quite be the same experience for somebody using an Android phone as the screen dimensions won't quite match. If they then pull out their iPad or other tablet yet again there is a different screen size and you're nice 'App' style interface will start to fall apart.

3. Responsive Website Design

What you really need is a whole range of websites that are each designed for a set of screen sizes. As different people arrive at your website using different devices it will detect which version of the site is best for them.

Creating separate sites for each screen size would be a complete pain, and that's ignoring the cost involved. It would be much better if you could build one website that could respond to the screen size and capabilities of the mobile device and then rearrange the webpage to suit.

This is the essence of responsive website design.

Here you have a single website which you maintain and update as normal. You've only got to worry about one content management system and one set of pages.

Your website designer is the one who has to do the hard work. There are special bits of code that you insert into your webpages that allow it to detect the capabilities of the machine the person is using to view the website. Once it has detected these parameters the code is then able to make choices about what is displayed and how it is displayed.

In general you will set the website up to respond to ranges of screen width. For example you may design one layout for people with very large screens, perhaps wider than 1200 pixels. You may then design a version for desktop PCs and laptops with screen sizes between 768 pixels and 1200 pixels. You then have a version sized for tablet PCs covering screens widths from 480 pixels to 768 pixels. And then a final version for smart phones narrower than 480 pixels.

(The figures above are not chosen at random, they do match with specific devices)

All of these designs will use the same information but just display it in a different way on the screen. For example your main desktop PC version may have three columns of information. When someone views it on an iPad it may switch to a two column layout dropping the third column down below the other two. When someone else views it with a smart phone it transforms into a single column with the three original columns stacked one above the other.

Have a go with this site to see what I mean. Just drag the side of the browser window to make it wider or narrower and watch the content adjust to fit. Notice how the right hand column changes proportion to make sure the content fits and you can read it, and then drops down below as the screen gets too narrow.

There are a whole range of ways in which you can get your website to transform and respond to mobile devices. You may want to change your menu layout to make it more touch friendly, you may want to resize images so they fit on screen properly, etc, etc.

Responsive website design offers you complete flexibility in targeting a wide range of viewing devices. It's a bit harder to set up in the beginning but in terms of ease of use for people visiting the website, and ease of maintaining the website on your part, it can't be beaten.

I'm Here to Help

If you feel your website isn't giving the best experience for mobile users then make sure you give us a call. We are gradually moving all our customers towards responsive website designs so they can take full advantage of the booming mobile Internet market.

comments powered by Disqus

share this page

my web design blog

click here for blog homepage
Keeping Your WordPress Site Secure
WordPress plug-ins let you easily expand your website. But who actually wrote them? Did they programme them correctly? Is your site secure from hacking? Find out more by reading this blog article.
Finding the right theme words for your webpages
To get your pages ranked you need to think past single search phrases and start to use themed phrases to write your content. Find out what this means in this blog post.
Top 5 tips to beat the search engines
We all want to be number 1 in Google. Here are my top 5 tips to get your website to the top of the search engine rankings.

follow me on twitter

Use themed content to boost your rankings. Find out what that means in my latest blog post. via @granttech
7 Nov 2013
Want to get to the top of the search engines? Read my latest blog post. via @granttech
10 Oct 2013
What Would Happen If You Lost Your Broadband via @granttech
27 Sep 2013

visit me on facebook

© 2015 G.E.T. Internet Services, Beech House, Mountbatten Drive, Ringstead, Northamptonshire, NN14 4TX. t:01933 623987
home | search | contact me
G.E.T. Internet Services

search my site