Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I'm a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid, that I mentioned before, is not just about increasing the page width, but to loosen the gutter space so users can read it more comfortably. Today, I would like to write a follow up post to further ellaborate on some of the points I brought up initially.
For several years now the 960px grid system (960.gs) has been designers' favorite pick to help structure and design web layouts. As screens and resolutions have gotten bigger, I've found that the 960 grid system does not always fit my needs. 20px gutters and only a 940px content area is a bit too small for the modern web. While designing Themify, I found a new grid layout that works quite well for designing in this day and age. If you've never heard of 960 I've detailed both it and this newer gird system below.
Follow up post: The Simpler Grid
First, I would like to thank everybody for reading Web Designer Wall and following me (@nickla) on Twitter. Today, I have iPhone stickers to give out to my followers only. I will be giving out 20 iPhone stickers (sponsored by Sticker Mule) with my illustration printed on it . All you have to do is tweet a message to me. For example: "@nickla, I like the Koi or Peacock or Phoenix sticker. #wdw_stickers". Winners will be selected randomly on Aug 27, 2010 and contacted by Twitter's Direct Message.
Flashloaded offers Flash components that help you to build cool Flash stuffs without having to code any Actionscript. The components are very easy to use and customize. Just drop the component on the stage, customize it via the parameter palette, and you are all set. In this contest, Flashloaded will be giving out 5 components. To participate, enter a comment along with the component that you like before Aug 27, 2010.
Update: the winners are 5, 43, 47, 57, 82, and 105
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
I will be speaking at Frontend 2010 conference along with a big list of famous designers. The event will take place in Oslo, Norway on September 1st & 2nd, 2010. I have a last minute free conference ticket to give away. Enter a comment in this post before Aug 24, 2010 for your chance to win a free ticket. If you are buying the conference tickets, enter "WDW" coupon code to save 10% discount.
Update: the winner is #58.
You may probably notice that I haven't been updating Web Designer Wall for a while. I've been working very hard on a new project called Themify, a premium WordPress theme shop. It is a collaboration with Darcy Clarke, who is an amazing developer. Each theme is packed a framework and bunch of custom widgets. With the framework, you can apply theme settings, style everything, apply skins, and import/export the setting data. Let me know what your thoughts. Also, don't forget to follow us on Twitter @themify.