Build a Basic Responsive Site with CSS

Everyone’s talking about responsive web design. But does everyone understand what it’s for? Jason Michael is not sure. Many web designers and developers seem to him to have misunderstood the problem it’s trying to solve. Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes. In this tutorial he’ll look at the principles behind responsive web design in detail, so you’re sure to understand the concepts correctly. Once Jason Michael has got that out of the way, he’ll walk you through building a website that scales perfectly on both large and small screens.

The key element of flexibility in responsive design is a fluid layout width. All you need to do is create a wrapper, content, and column widths that will adapt to different device widths. It’s nothing new, but is now more important than ever. To keep things simple, Jason Michael is going to show you how to create a fluid page consisting of navigation, feature image and two-column, which takes into consideration the layout on various sized devices. You’ll notice he has included respond.min.js, which is a lightweight polyfill that enables media queries to work in IE6-8. When it comes to the CSS, setting a max-width is a good idea in order to stop the site scaling across enormous screens – and this won’t withhold the page from shrinking.