Yaroslav's Blog

These days the number of web designers rises continuously. Every second person wants to be a web designer; maybe it’s not his a full time job at the moment, but he is very passionate about it and has dreams and plans for the future. Some of them are home-learners; some of them start their developing or designing career in a garage. However there is something in common between them.

When I first time tried to set up apache and create my first website, it was 4 years ago, I messed up and gave everything up. Maybe it wasn’t right time for it. Then after some time, when so-called info-business just started to grow in my country, I tried to create a landing page for an info-product of one friend of mine. Since that my first webpage was ready and published on the Internet. As I remember it was quite ugly, I didn’t realize that there are some special rules and technic and that everything has its own sense, when you are building your website.

My first page consisted of huge number of extra tags and inline styles. I didn’t know anything about div elements and why and what is more important where I should use them. When one friend of mine told me that he uses liquid and fixed layouts I realized that this web design isn’t limited by those poor knowledge I had. My first attempts of learning started from same info-products. Guy on the example of his landing page was explaining how you should use HTML and CSS.

First time when I heard about “Ruby on Rails” I thought; is it a train or restaurant? However only after I started to study in the University of Greenwich I could realize how much I need to learn. Learning stuff that you like is a real joy and, despite of sleepless nights and mornings in rush I still believe that there is no better craft then web design.

So, lets think what rules can be applied to web and how we can benefit on them.

About grids

Before I started this course I heard a couple of times about 960 pixels grid system, probably I read somewhere by mistake. However I never paid much attention to this subject, because it seemed not important for me. I don’t have a graphic designer degree in the past and my knowledge in web design is quite limited. That’s why when I made a research for the project I was amazed. I read a book written by Khoi Vinh “Ordering disordered” where on the example of an online magazine website he explains why he is putting element in this particular order and not in other. He says that there is a force, which guides web design process and everything is under its control. This force is called grid.

The idea of grids is not that complicated. It is alignment. This technic came to web from graphic design, but even before it was widely used in architecture and other types of design.

Despite the figures illustrated on this image are all rectangles the first image instantly seems more ordered. We know that the most common resolution for the majority of users is 1024×768 pixels. Three-column layout is the most popular among web designers these days, but it is not that easy to divide 1024  by three.

For instance, lets take a 1,000-pixel wide container and you want to split it up into three columns, that’s 333 and 1/3 pixel per column (not exactly a nice whole number). Further, columns broken up like this would crash into each other, so a margin must be added on each side. If we add a 10-pixel margin to each side of every column, we must also subtract 20 pixels from the width of each column. This gives us 3 columns roughly 313 pixels wide each with a margin of 10 pixels on each side (even then you’re at 999px and not 1,000px).

Want 4 columns in a row below that? Then you have to start the process over and subtract 80px of margin from 1,000px for a total of 920px and divide that by 4 to get a column width of 230px.

Finally, if you want to add a sidebar that’s a third of the total width of the page, you have to create a column that’s 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one 730px column and one 230px column. It is not that real science, but it is complicated to use on web designer’s daily bases.

The solution? Find someone else to figure out all these crazy column widths, throw them into a CSS document, and let you download it free. (That person happens to be Nathan Smith, creator of the 960 Grid System).

Tools

I believe that the very first tool every web designer should use is his brain. It is important to read a task carefully to avoid misunderstanding and extra work or even help not to remake all the work, which was already done. However to complete this task only a human brain is not enough. You need a tool which does all the work of building grids for you, other wise significant time will be spend on it and a designer will lose a chance to be more creative or just to finish a job on time. That’s why I made some research and found useful instrument that, I believe, every web designer should have in his web toolset.

GuideGuide is a fantastic extension for Adobe Photoshop CS5/CS5.5 created by Cameron McEfee. As he said – “Dealing with grids in Photoshop is a pain for web designers”, so with GuideGuide this work can be done with fun. If you’re a Mac user you’ll have to download an Extension manager software, you can do it from author’s website, and install GuideGuide.

Here you can see the interface of the extension. It is easy to use, but if you face any problem you can go to author’s website and read documentation. What I did is I opened a website in a browser window and made a snapshot. If you’re a mac user, just press ⌘ + ñ + 4 and select the area you want to save using coordinates if you want to be precise.

Basically you need to set left and right margin, number of columns and column gutters using user-friendly interface. When the dimensions are set you can press “GG” and Photoshop will build a grid system for you.

The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is included as well for those that really need extra control). In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels. So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.

To understand how this grid tool works we simply open a new page in Photoshop with 1200 pixels wide.

(120 x 2 left and right margins) + (20 x 11 gutters) + (60 x 12 columns) + 20(margin between left and right red areas and main width) = 1200 pixels

or

(120 x 2 left and right margins) + (20 x 11 gutters) + (40 x 16 columns) + 20(margin between left and right red areas and main width) = 1200 pixels

or

(120 x 2 left and right margins) + (20 x 11 gutters) + (20 x 24 columns) + 20(margin between left and right red areas and main width) = 1200 pixels.

I wander why the author of GuideGuide decided to leave space between very last left and right columns and red areas.

Apply for the design

The website I am reviewing in this essay is Groupon. You can find their website if you click on this link http://www.groupon.co.uk/deals/london. The reason why I chose this topic is that I quite interested in e-Commerce and the idea is just brilliant.  For a business owners this website offers advertisement service. Basically Groupon has a database of client’s emails, which were asked to be entered on a subscription form when a person visited the website first time. The subscription email is designed as html file with the interface similar to the home page of Groupon website. If a client buys an offer on the website he receives significant discount.

Lets have a look on their website from the web designer’s point of view.

First you see when you enter Groupon’s website is a huge green button “Buy it Now” which corresponds to call to action technic. Then I start to search for what exactly I should pay. First level heading gives small explanation of what the product is. As an amount of the discount you get is crucial for a customer I believe that it should be more highlighted than it is. So next step, which draws my attention after I decided that I’m pleased with this discount is countdown timer. These ticking clocks say that it is only 10 hours 21 minutes and 05 seconds left till this offer expires. Harry up!

What I found today is that this offer never expires. Look at the countdown timer it was reset and those people who missed the deal still can get one. Also I think because of the London huge distances the address should be shown clearer. Here the address is illustrated just as bold text with lack of line-height between lines.

Actually a mobile version of the website has a better design and usability. If you use a mobile device visiting this website you’ll see that content is minimized to fit into small resolution of the screen.

The fanny thing about Groupon is that it is very popular especially among women. One friend of mine he is a hairdresser, he said that he knows some women those morning starts from checking new offers on Groupon.  Also he said if you are wise enough you won’t make a deal with them, because they don’t do anything just advertise in their database and charge you big money. Probably he thinks that it’s not worth money because he has his own client database and he can advertise himself exactly in the same way.

960 GS

Next I decided to check if this website build on 960 pixels grid system.

First of all I decided to apply 12-column grid system. Using some mathematic calculations I found out that a column wide is 60 pixels and gutter is 20 pixels.

(20 x 11 gutters) + (60 x 12 columns) + 20(margin between left and right red areas and main width) = 960 pixels.

Despite main content div suits quite nice and sidebar is just a bit fat, other elements are guided by some kind of a chaotic movement. I found no elements, which would be aligned to grids.

As you can see non 16-column grid system, nor 24-column grid system give us a clue of what web designer thought about building this website. However some kind of order is taking place. In a search of the solution I decided to apply a grid system after every 10 pixels.

Voila. Seems like no 960px grid system is used on this website. Probably because when this website was created this 960 GS wasn’t that popular in web design community and web designers didn’t bother to struggle aligning all elements.

Break into pieces

Actually I had a little suspicious about this website in the beginning. It would’ve been obvious that no 960px-grid rules are applied here If I’d look at the code.

• maincontent div = 953 px
• content div = 702 px
• sidebar div = 235px

Seems like no one of these numbers look like one from 960 GS and it’s definitely hard to divide these numbers by columns.

If we look on the page some issues appear. I highlight them using red frames. Because no calculations were applied and no order exists all these elements are dancing their own dances. Interestingly enough, before I heard about grids I didn’t know that some order could exist on the web page.

The text under the image with a girl and fruits doesn’t belong to anything and not aligned with a grid, nor with the bullet points.

Columns

The most common grid system on majority of websites on the Internet is 3-column grid system. However I believe that here information is contained in four columns of slightly different size. Which is acceptable because of contents reasons.

Although if you scroll down home page you can see that 4-column grid system is not applicable here anymore. Information is collected and stored in three columns of different size. First one is for a text area on the left. The second one contains map and some additional information. The last column, as in the previous example, is used for sidebar.

Without grids this website looses its order, which is really confusing.

Baseline grid

For the good designer it is very important to choose right type font. Type fonts they are using on this website are Arial, Helvetica and sans-serif. The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.

You can see that text is aligned. Every line of the text sits on the base line whether it is 12 pixels text with 18 pixels line-height or it is 36 pixels with 36 pixels line-height.

So even if I removed guidelines text still looks accurate and nicely arranged.

First thing we have to do is to set a line-height for our grid. Body font size on this website is 12 pixels. I don’t use “em” dimension because I’m not familiar with these calculations.  I set the line-height at 18 pixels, as it is the most popular height between lines for this font size. Using the same toolkit GuideGuide I set the baseline. As it was expected no rules were implemented while making this website. However logo sits on the baseline very good, probably it happened by mistake.

Good example

On the example of Groupon’s website we could see how websites look where there is no any particular order. Some web designers will argue that grids kill creativity and imagination, but I doubt. I would like to give another example, which we can compare with previous example. Lets consider some websites which are build on 960 GS.

This is Topbots website. You can purchase some applications for you iPhone or iPod such as a weigher, a calculator and a currency converter. In fact what is really interesting that almost all elements are aligned. Logo, logo description, menu and all images have proper dimensions. Big image consists of 12 columns size; small images with robots have 4 columns size each. All together it is 12 columns.

It is obvious with elements, but what about text.

We can see that texts are aligned as well, which gives some kind of intuitive order and don’t confuse you.

Header of the left container is not aligned because text is centered, but the right column is perfect. I found that there is a blog page on this website. Well it can’t be perfectly aligned because of the massive amount of elements and information there.

I was wrong. It is perfectly aligned as well. What is the secret? I suppose that there is no anything mysterious here. Text is just an element inside div element, which can be easily designed and aligned.

Conclusion

I considered Groupon website as a business idea, which seems to be very successful. Company offers different services, products and activities across the world, has a huge amount of deals and clients across the world. However the company doesn’t pay enough attention to their website which was build already three years ago. For such a famous and massive company that how their website looks gives quite unprofessional impression.

This company should consider hiring a user interface web designer to fix their design and use last web technology to convert their website into something more pleasantly looking.

In contrast, Tapbots have a team of only two members. Developer who is responsible for back-end design has 15 years experience in programming software for Mac and user interface designer who spent last 10 years of his life learning creative stuff. They understand that you can be noticed on this huge market only if you have something special.

Groupon has its own unique business which probably doesn’t need to have a remarkable website. Where as, Tapbots are professionals in design and development. Their website is an example of minimalism and high technology, which is built according to new ideas in web design and development.

What I’ve learnt from this essay?

Grids give us an order and restrict our unlimited imagination in the way to suit it into lost of rules. Some web designers that claim that web design is a flight of imagination, which shouldn’t be limited by some strange instructions, don’t support this idea. I suppose that grids are an incredible instrument to start with and then based on this foundation you can create everything you like.

I am definitely going to learn this technic, which is designed to make web designer’s life relatively easier and bring order in disordered imagination.

Used links

1. http://www.groupon.co.uk/ – Groupon. Company, which provides huge number of services, products and activities with a massive discount. The website I’m reviewing in this essay.
2. http://tapbots.com/company/#contact – Topbots. Company, which specializes in developing beautiful iPhone and iPod applications. The website I’m comparing with the previous one.
3. http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ – Some useful links about grids.
4. http://www.alistapart.com/articles/settingtypeontheweb – useful link about baseline grid.
5. My past experience. One of the most useful source to link to.