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!

Yeahmate - Contextualisation

When i started designing the Yeahmate website, I quickly came to a dead end with the project. I thought as a bit of a geek, I would find it easy designing a website; after all I'm on them all the time! It was not however. I simply wasn't looking at what made up a website, just looking at them from an audience point of view. I began to research some blogs and website that were after the same audience as mine: techy, IT professionals with a slant towards computer networking.

Ryan Block

Ryan Block is a technology journalist and used to write for engadget. He is an internet celebrity, if you will but used to be a network engineer. This is is personal website where he keeps a blog and information about himself that serve to promote him should any potential job opportunities.

His website is fairly minimal, white background with black helvetica and a touch of red for headings and links. It looks professional, while not remaining boring, but also appeals to the trendy types that make up his audience who expect a high level of design.

Packet Life

Packet Life is a networking blog, something network engineers would look at to our ilovetypography. It serves a distinct purpose and is based around an industry. It contains news articles as well as a wiki which serves as a share knowledge pool like wikipedia. This is similar content to what will be found in the blog section of Yeahmate.

The design of the website isn't bad, but it is fairly dull. It is designed around a 2 column layout. The logo isn't great and colour choices are fairly standard. As this is a website targeting people working in the industry, it seems as if the authors are more concerned about content than style. The authors writing this blog are also more than likely fulltime, this being their main job so the website doesn't need the level of professional feel that say, maybe Ryan Block's does.

Firewall.cx

Firewall.cx is a huge resource for networking professionals - it is even recommended by the Cisco Networking Academy (THE networking people). However, it is an abomination from a design perspective. Horrible logo, horrible top banner (Star Wars/sci-fi come computer components?) and an inconsistent layout. The website is also mainly black, which if you're going to do, I'm a person who believes it needs be done well.

This website again, is clearly one aimed at people who have careers in networking or who are wanting to get into networking. It is aimed at information, not design, but I wonder how much is lost through bad design, wether it be people who refuse to you the site (or is it just designers, or even me, that do that?) or just not being able to navigate/see what you want to be looking at.

Arden Packeer

Now this is a website done right. I have chosen to show this because it seems very similar to what Yeahmate will be. Ardeen Packeer runs this website and it contains information about himself but with a big focus on his blog that focuses on passing various qualifications a network engineer would need. It is a nice, clean design that is attractive enough you want to read it.

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.