responsive sites skill boosters

more and more on demand, adaptive websites use a lotta tricks

you think your website is mobile ready just because? wanna figure how to provide both low and high-res pictures? read this!

1.  media queries

when building responsive sites, media queries are the backbone of the process. they match the media type of your device and display the css you have declare. for example:

body { text-color:#000000; }@media only screen and (min-width:1200px) {body { text-color:#ff0000; }}

the code above traps screen resolutions at 1200px or higher and applies the colour red to all body text on the page. if the screen size is less than 1200px it will display black body text.

so far, so simple – but we know that this process can soon get cumbersome as you struggle to please all of the people all of the time. use a css framework like amazium. it replaces the need to write a billion different media queries with simple, semantic classes

2. a heavier choice

if a more heavyweight framework is required then twitter’s bootstrap or zurb’s foundation might do the trick.

3. turn things off

when making responsive sites, you don’t really want users to be able to double tap and zoom, as all your content should be visible. to do this you will need to add some code that disables user zooming and scaling.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

this code will also enable ios device to display sites more elegantly when the ipad or iphone is rotated.