Experimenting with Responsive Web Design
This is a demonstration of how Grid Systems can be used alongside @media rules in CSS to make a single web site design display differently, based upon the dimensions of the browser. This helps prevent different code being used to display the same content based on the device used to view it.
960 Grid System
Grid Systems are used to provide a for laying out elements of sites both quickly and easily, using a series of CSS classes to help lay the content out. Whilst I'm a big fan of the 960 Grid System personally, there are plenty of other Grid Systems out there. A few of the more common and popular ones include:
These grids, however, are either fixed in width or expand to fill a certain amount of space on the screen. This is perfectly fine the majority of the time, but what happens when you want to take a different approach? What am I talking about? Responsive Web Design. I'm quite liking the idea of styling a single page differently depending on the size of the browser it's viewed in seems like a pretty clever idea. After all, the ultimately important element of the site is your content. The point of your site is lost if the design of the site loses the content.
So responsive web design is a way you can lay out the content of your site depending on the browser size, which is pretty sweet. But here's the thing, if content becomes too wide content becomes difficult to read. Typically a line width of between 15 and 20 words is a pretty much perfect width for readable content. I don't want to mess with that when I'm making my site wider... and the same is true when I'm making the site narrower. I don't want my sidebar taking up too little or, for that matter, too much space. This is an example of it in practice. Try resizing your browser. Check it out on your iPhone. If you're an Android user it should work. Unfortunately I don't have a handset to check myself.