It's all about the grid yo!

Fluid Grid Layout!!!

While doing the exercise I found the thing I needed to wrap my head around was the layout. Some of us are used to using fixed pixels so that we can program pictures and content containers to fit in exactly where we want them to. I know at one stage we have all had that frustrating moment when you are chasing a container around your screen because it won't stay in the center of the page...hate that.  Since being considerate is the new buzz word we need to start allowing our sites to shape to whatever screen or device they find themselves on. We need to stop being so darn inconsiderate!

Adobe Dreamweaver CS6 contributors found inspiration from Ethan Marcotte (this guy must be awesome amazing socks because he was mentioned in our textbook too) and Joni Korpi when dealing with arranging the columns into a fluid grid layout.

*See Marcotte’s article, Responsive Web Design, and skip down to the Media Queries paragraph to see the thought process behind media queries.

*Check out Korpi’s Golden Grid System, which uses meticulous calculations to respond to the biggest and smallest screen sizes. This article also gives you html, css and javascript examples to download which has comments as well so you understand as you go along. 

For those who have Dreamweaver CS6 (lucky bums) they have templates set out for fluid grid layouts. I advise you to just skim over those layouts if you are completely lost and see how they did it there. You should invest in downloading Dreamweaver for a month’s trial run if you have not already, dude...like seriously...

Get the trial version of Dreamweaver CS6 or buy it if your wallet allows. Price being $485 - excluding tax. Then check out the tutorial video. The first video is from the Adobe site (the nasal sounding guy, I think his name is James) and the second one I found on YouTube (the ponytail guy) is more basic. Both of the videos are very helpful.