Hack 16. Use Media Queries to Build Responsive Design

Your web page can look just as great on a mobile phone as it does on the desktop. The secret to achieving this feat is called responsive design, and media queries are the key to making your pages responsive.

Mobile is all the rage these days. And with HTML5, the mobile web is even hotter. The industry decided pretty early on that it wasn’t a good idea to design different websites for different types of visitors. You don’t want to have one website for your mobile phone users, another for your desktop users, and a third for your tablet users. Instead, it makes sense to develop one website that can “respond” to the type of interface you’re using and provide an experience suitable for that device. This is what we call responsive design.