/CSS/ Coding flexible layouts
06/10/2008 | Filed under Develop > CSS
Craig Grannell explores how to create flexible CSS-based layouts, based on an underlying grid and gutter structure, for information-heavy sites that are packed with content
Recently, there’s been a new trend in the way web designers approach creating certain types of website. Nowadays a screen resolution of 1,024x768 can be considered ‘standard’, thereby providing more space, particularly in terms of width, for site designs. This is also a time where we’re continually hammered with information, and clients regularly demand that you simultaneously show about 40 billion different things on the websites you’re creating for them.
Increasingly, conventions such as whopping site content online in a linear fashion are becoming irrelevant and archaic. As screen sizes expand along with client demands, designers need to take a more flexible approach that provides more scope for information provision and visual interest.
As last year’s Times Online revamp showed, it’s beneficial to work with a strict underlying grid system – it keeps everything nice and tight in the design, and tends to lead to a professional result. However, such designs should always allow for a certain amount of flexibility within, to accommodate different types of content and ensure the page is visually interesting.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Biscuit Sainsbury’s oatmeal and raisin cookies. Yum
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Ahmed Ghd / 08/10/2008 / 13:55 / http://www.zbsh-gd.com
Thats a good way of working, the issue for many will be changing the way they format / use content to make use of that grid....
GmBlRs / 13/10/2008 / 15:19 / http://gmblrs.wordpress.com
The proportion and grid style are very important. It makes it easier and more pleasant for the eye to scan the objects on the page. Designs that do not use a grid system often look 'unprofessional'.
Martijn / 09/02/2009 / 00:08
Thanks for this article.
I found out that the fixed height for columns in grids-extras.html causes text to overflow when the text size is enlarged via the browser. Guess that's why I have to read the 'Switch site styles with ease' tutorial!? ;)
