scaling a website for devices using css3

it has always been a challenge for web developers and designers to create a website that works on both desktop and mobile. Although the current day mobile devices have left their ancestors way behind them in may ways it is still a fact that the screens are smaller and the input devices are different. How do we solve that issue in one website?

I know mobile compatible websites are not new. Know setups like redirecting mobile traffic to a sub domain that has a mobile optimized website is fairly common. But you still have to maintain two sets of HTML, two sets of css and two set’s of javascript. What if we could make a website that is optimized for mobile and desktop without switching to another physical website to do it!?

I recently discovered a way to do this with CSS’ media queries! The CSS3 media queries specifications shows that beyond the standard media query print and screen from CSS2 it can also do: “… presentations can be tailored to a specific range of output devices without changing the content itself.”. So using CSS you can create a website that is UI wise suited for a mobile device.

general approach

I’m not going to talk about how to get your CSS ready for a handhold devices (a whole other blog post!). But I can bump you in the right direction. The general idea would be to create specific deviations from a central styling. It is all about properly structuring your CSS in different files that correspond to the different scales you use. Currently it can be advised to build a 3 way system where you provide for desktop, touch pads and smart-phones. as not to duplicate all your code it is a good idea to keep your central styling in a separate file that can be used in combination with your device specific style.

the separate files will be loaded with their own set of requirements. the basic will use the all query, but the a 3 stage set could have the following queries:

all and (max-width:480px)
all and (min-width: 481px) and (max-width:960px)
all and (min-width:961px)

These three should cover everything that is 480 pixels and smaller, between 480 pixels and 960 pixels and above 960 pixels. you can move the boundaries a bit to your liking but the basics stay the same.

where to put it

Although the practice of putting all the styling into one CSS file suggested by the HTML5 boilerplate is a nice idea. It will not work in this case. currently the browsers do not correctly support media queries for @import yet. currently they do not seem to work in another CSS file in this way. Tactic would be to place them as separate link elements with media queries attached to them. The problem seems to be exclusive to the width and height features. I think it has so do with where the query obtains its data.

<link href="handheld.css" media="all and (max-width:480px)" rel="stylesheet"/>

you could also go for a style definition in the page and import all the files there. This does look cleaner and seems to be more maintainable in my opinion.

Other tricks

There is actually a lot more to get from the CSS3 media queries specification. There are several other that can be useful. Other then looking at width. you could also look at height for side scrolling websites (they exist and are mostly a lot of fun!). There is a feature to evaluate aspect ratio, might be useful if you create specific designs for every type of device. Talking about the device… Both dimensions and aspect ratio are also working on device level. Do remember with this that on desktops a window width and a device with can be two completely different things. Another one of my favorites for the handheld device is the orientation feature. Could be useful if you use HTML and CSS as your app interface code! Last I would like to point out the color and monochrome feature. These allow you to also account for older mobile phone browsers that had less fancy screens. Although I think supporting this is a niche that you might not want to serve.

Conclusion

Media queries are interesting stuff and we (the developers) have a new toy to play with and that we can try to hack to get it to do strange and interesting things.

Ow, and I got you something to play with if you have a modern browser ;-).

Advertisements

, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: