One of the buzz terms of 2012 when it comes to web design is “Responsive Web Design“, this means a website which adapts and evolves depending on the device/screen size it is being viewed on. This for many is far better than having user agents detect a mobile browser and show a completely alternative version of your website because it maintains consistency, and can offer all of the same features your main website software offers.
We have been experimenting with responsive web design for a while now and have seen some fantastic examples of how it can be used to cover all bases with your web and mobile marketing strategy.
Some of the best examples of how to alter the sites css for smaller devices are to move the sidebars below the content and reorganize how they are laid out. This makes it far easier for someone to read the content of an article as this area can increase to fit the page width. Another is to make images always decrease with the change, or in some cases have the logo size increase to fill the header and move any content that was along side the header move below. Lately I have seen a few people change their websites menu into a drop down selection box for smaller screens such as phones.
The ideal setup for this is to have 3 tipping points, We start with the original look and size for normal screens such as desktops and laptops, then one for tablets when used in portrait mode (landscape mode will display the website as a desktop or laptop screen does, then two for smaller devices such as an iPhone or Android handset, one for portrait viewing and one for landscape. Elements within the container will continue to decrease as the browser gets smaller.
There are several tools you can use to test the responsiveness of a website such as The Responsinator, however you should be able to load a site in your browser hit restore down and then drag and drop the width of the window smaller and you should see the tipping points adapt live.
If you want a responsive website then get in touch and let us know your criteria and requirements for a no obligations quote.
For further reading about Responsive Web Design and some useful tools on the subject see Responsive Design Tools and Resources.