Earlier this year Frédéric Harper wrote a good blog article about responsive webdesign that I thought I would share here.
A lot of webdevelopers don’t seem to be aware of the simplicity and support CSS can give when developing for 1 website for multiple devices. Just as it keeps surprising me that in 2012 a large part of both consumers and developers of websites are not familiar with a print stylesheet and keep making special print only pages.
I’m not going to repeat Harper’s article. I just hope this will point others in the right direction (i.e. his blog) when looking for a good solution designing one single website that will look well on all types of devices. Unless you want to do something really special you don’t need separate mobile webpages anymore. Just use different CSS files that will shape your HTML for the correct device based on resolution.
You could even use this to tailor your website for different resolutions on a PC. Keeping in mind those outdated office PC’s some company you have to design a website for is still using, or laptops with lower resolutions.
Harper’s example should give you enough information
<link href="mobile.css" rel="stylesheet"
media="screen and (max-width:480px)“
<link href="netbook.css" rel="stylesheet“
media="screen and (min-width:481px) and
max-width: 1024px)“ type="text/css" />
<link href="laptop.css" rel="stylesheet"
media="screen and (min-width:1025px)“
So rush over to his blog right now…