Creating Mobile version of your website using CSS3

CSS3 continues to both excite and hamper website designers and developers. We are proud about the chances that CSS3 brings, and the problems it will provide solutions to, but also annoyed by the shortage of support in Net Explorer eight. This newsletter will demonstrate a strategy that utilises part of CSS3 that's also unsupported by Internet Explorer eight.

But it is of no consequence as one of the most helpful places for this module is somewhere that does have a large amount of support tiny devices eg the iPhone, and Android devices. In this post I can explain how, with 1 or 2 CSS rules, you can create an iPhone version of your website using CSS3 , that may work now. We'll check out a particularly easy example and I should also chat about the process of adding a tiny screen device stylesheet to my very own site to show how simply we are able to add stylesheets for mobile devices to existing websites.

If you've ever made a print stylesheet for an internet site then you'll be acquainted with the concept of making a particular stylesheet to become active in certain circumstances in the case of a print stylesheet when the page is outlined. This functionality was enabled in CSS2 by media types. Media Types let you stipulate a kind of media to target, so you might target print, handheld and so on.

Sadly these media types never gained a large amount of support by devices and, aside from the print media type, you may seldom see them in use. The Media Questions in CSS3 take this idea and extend it. Instead of looking out for a kind of device they glance at the capacity of the gizmo and you may use them to test for all types of things. For instance :

* width and height (of the browser window)
* device width and height
* alignment as an example is a telephone in landscape or portrait mode?
* resolution If the user has a browser that supports media questions then we will be able to write CSS specially for certain eventualities.

As an example, spotting the user has a little device like a smart telephone of some outline and giving them a particular layout. To see an instance of this in practice, the UK web meeting dConstruct has launched recently their site for the 2010 meeting and this uses media queries to excellent effect.