HTML5 and CSS based mobile website

Question

I am creating a mobile website using HTML5 and CSS. How do I adjust to different devices? Either based on the device type(android/ios/windows/bb using navigator.userAgent) or based on screen width (using media queries).

Which practice is best and will be efficient?

I need to run my website on devices as follows:

• BB 6.0 and above,
• IOS 4.0 and above,
• Windows 8
• Android 4.0 and above.

Which is the best method?

Answer 1

Current best practice is a strategy called responsive design. It adjusts the website to match the width of your browser.

See Links

• State of Responsive Design | Smashing Magazine
• Adapting to Responsive Design | Smashing Mazine
• Responsive Web Design Guidelines and Tutorials | Smashing Magazine