Comes with grid?

Very (geeky) interesting site here. Analog's website, a web design co-operative, comes pre-gridded, which is nice of them! A lovely site too, they've made the American Typewriter font look good.

Just press alt+g (or opt+g) while on their website and the grid shows up! Check it out for yourself.

The 960 Grid System: Grids, but for the web.

This year I have been getting into using grids for my print work. Naturally, when I started designing for web I wanted to use a grid for that too. I began confusing myself at first over what to do with regards to screen size. We have been told in our web workshops at college to design for the lowest common denominator of 800x600px but I found such a small resolution constricting, and quite frankly, ridiculous. It's 2009 and if your still rocking 800x600 then you need a new monitor, and/or possibly a new computer. The rise of HD video has meant that even the smallest of netbooks come with at least a 720p (1280x720px) screen. In fact the only devices I can think of that come with screen resolutions that small are smartphones and they tend to have optimised mobile browsers to deal with today's content-rich web that will shrink a website to fit and allow a user to zoom in specific parts, such as Safari on the iPhone.

I decided I was going to use a higher resolution but the problem of what that should be still remained. After some digging about on the internet I found out about the 960 Grid System, a grid designed exactly because of this issue. It is based on a width of 960 pixels and comes in 12 or 16 column flavours. The reason behind 960px is explained on their website:

"All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with."

 It turns out there are a few sites that use this grid, or at least to which the grid can be applied.

Engadget is technology and gadget website. They have recently gone through a redesign, and a very nice one at that. Lots of neat typography and layout, I'd recommend you look at it anyway. However, the site is definitely based on a 960px width as can be seen above with the 960 Grid laid ontop of it. You can also start to pick out the column width used too. It is shown on a 32 column variant.

To learn more about the 960.gs head over to their website!

Typography & The Web

As a designer who is interested in typography, one of the most frustrating problems I have ran into this year now I have started to learn about web design is the issue of typeface choice for websites. Transitioning from mainly print-based work which has had been printed on a stock chosen by the designer and exists rather statically in front of it's audience, I know have to take into account the diverse ways may work may be seen under such as differing screen resolutions. Fonts also fall under this category as different computers, running different operating systems of varying ages all have a different selection of fonts available to them. If you choose to use a certain typeface for a website and the viewer does not have that specific typeface on their computer, the website will be displayed differently or perhaps, not at all.

Reading up on this I found about web-safe fonts which can be chosen to minimise design inconsistencies through a selection of commonly available fonts. What's interesting though is there is a way round this using a feature supported in CSS (Cascading Style Sheets), a coding language used to style web pages. The @font-face rule. This allows the designer to specify a certain font, and then upload and link to that font on the server so that the viewer's web browser can request to download the font if it isn't available on that computer.

Alas though, this solution to the problem isn't without criticism, particularly from type foundries that often have license agreements that prohibit you to upload this typefaces to a server. There is an interesting article over on Ars Technica that talks about this issue.

To see what all of this has the (beautiful) potential to do, make sure you have the latest version of Safari, Firefox or Opera and head on over here.