How to Make Your Websites Work on Tablets and Smart Phones

There are 3 different techniques that can be used to turn your website into a modern and up to date mobile friendly website.

A well coded website

The first technique is to make sure that your website code (HTML and CSS) is clean and tidy, validates to W3C standards and doesn’t contain any flash. W3C have a nice tool that allows you to check if your website validates. If your website is coded nicely, then the rest is left up to the device itself to display the website correctly.

Since tablets and smart phones have web browsers that are cleverly designed, the chances are that your website will display or render well as long as it was ‘well coded’.

This technique has been around for a while and is by far the simplest technique. The main downside to this technique is that a lot of mobile devices scale the website to a mini version of the full site. This then forces the user to zoom in on the text they want to read. Take our website for example The website appears great on any mobile device, but what you will see is a scaled down version of our site and you will have to zoom in to read an article.

A mobile website

In the past a lot of companies have created a specific mobile website designed around a smart phone size browser. When a user visits the website, behind the scenes the website will check what type of device they are visiting from and redirect them to separate mobile version of the website. Whilst this is great for people on smart phones, there are a number of downsides to this technique.

Firstly, from a business and cost point of view, you have to develop and manage two separate websites. Secondly, with the popularity of the iPad and many other tablets on the market how do you scale this technique? Do you create a new website for each size of device that comes on the market? The newest technique in this area solves all of these issues and even caters for a broader range of devices.

Responsive web design

A responsive website is one that adapts to the size of the screen that it’s being displayed on. This clever technique is fairly new to the market but really plugs a gap in website design for smart phones and tablets. A good example of this technique is the website. Give it a try, open up this website and expand and shrink the size of the window. Can you see it changing?

This technique is so adaptive that you can design the website for any size and it’ll automatically adapt to the users screen size. It also future proofs it so that when different sized devices come out on the market, very few changes will need to be made for your website to look great on them. It also means that you only have to manage one website. The advantages of responsive website design are already huge and yet this is still a relatively new technique. The possibilities of this new style are wonderful to anyone with a website.

If you want more information on how to make your website responsive please get in touch, as we are having so much fun making websites that are smart phone, tablet and future proof using this technique.

By now, you’re probably thinking – well why haven’t you made your own website responsive. Keep posted to our blog or visit our website again soon. It’s definitely in the pipeline but of course serving our customers always comes first.

Read some more interesting stuff.