Designing for the Web: Templates and Grid Systems

Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website.


In this article, we will cover some important issues and introduce some tools for you to use when designing a website. Just keep in mind that as in the print sphere, the web sphere contains a multitude of choices for design as well as development. This is only one method and we are attempting to come from more of a designer angle rather than a developer one.

From the previous article, we chose to design for a desktop screen resolution of 1024 x 768. We will use the desktop as our main example and will cover tablets and phones later in the article.

However, we need to look at the available space we can use to design a site. This available space is called the ‘viewport’. The definition of the viewport is a bit varied – depending on the source, but in basic terms, it is the area in the browser where the website is displayed.

We will need to work out a standardised size to design our website so we can ensure that we can account for the viewport of most all browsers as the size of this space may vary from browser to browser and operating system to operating system.

Many designers have been using a width from 950 to 999 pixels to design to. However, as graphic designers, we like to work with standards as it simplifies design and production.

960 Grid System

As we do in print publications such as newspapers and magazines, we can use a grid system to aid us in layout – in particular, there is ‘the 960 grid system’. This will enable us to create a website layout a little more quickly. There are various other grid systems to choose from and all are valid and have varying reasons for existence. While it may seem like they are in competition, it should not be viewed as such. The objective is to ensure that your design is engaging, effective and legible for the given project.

We have chosen to use the 960 grid system for the fact that it has become a strong de-facto standard.

Note: For more information on the various grid systems out there, visit 960.gs and 978.gs. The latter link covers many other grid systems of various resolutions. There is also www.thegridsystem.org.

The Template: An Overview

Using a template is a good way to speed up any process including designing a website. Creating a template that accounts for the above factors will speed up the process of design and give a little more freedom to your creative mind. I have provided a template for you as an example – feel free to use it or take ideas that you like from it.

Download Desktop Template

This is a template that I have built to use as a design base for projects. The reason for the use of Illustrator is that it is a great layout tool for print and is transferable for web. However, many designers do prefer Photoshop to create their web designs – something to look into if you work in Photoshop a lot.

The Artboard

In the example template, the artboard is 1920px x 2160px. The height of the artboard is about three scrolls of the screen height – which is about the number of scrolls that the average user with an average amount of interest will scroll.

The width of the artboard is quite wide and gives plenty of room to design a more lush background if desired – if you find the width of the artboard way too wide, you can always resize it.

Fixed Layout

If you are just starting out on designing a website, you will learn about fixed width layouts and fluid or liquid layouts. A fixed layout will cause no movement in size or shape of a website if a browser window is resized. A liquid layout is one that may ‘grow’ or ‘shrink’ if a browser window is being resized.

While the templates are made for fixed layouts, it is possible to use them to create liquid layouts as those particular issues can be solved in the coding. The important element for a designer is to explain how a site shrinks or grows and the minimum and maximum widths and heights needed.

In order to maintain some design control, it might be better to create a fixed layout first.

The Viewable Area (or Viewport)

View the template in Illustrator or view the images in this article to follow along.

The pink square is an area that most browsers in most operating systems display and is generally the starting point for designing a website and this area can be considered the Viewport of a maximised browser with a screen resolution of 1024 x 768 pixels. This average viewable area also represents the part of the website that is initially seen by the user or the content above ‘the fold‘.

The Fold

The Fold is a term that is borrowed from print and represents the line of the fold of the newspaper. The space above the fold is seen on the newsstand.This term has been adopted for web design and represents the line where you would need to start scrolling to view more of the page (generally the home page). So, the top 615 pixels, or so, of your site would be above the fold. The idea is that you would put the most relevant information above the fold. The relevance of the fold is debatable and there are plenty of articles on the subject. However, it is relevant for tablet and phone designs as you may want to create a layout that avoids scrolling as much as possible unless displaying a written work.


Grid systems for web design

Within the layers, you will find 3 layers for the 960 grid system. Each vary in columns and therefore column width and a designer might use these singularly, or together to work out the grid of a page. Using the 12 column grid seems to offer a more simple design process and going up to 24 columns offers the designer more scope for more complex grids. You may want to choose a happy medium of 16 columns, the choice is up to you – suffice to say, you may use the three in tandem or one over the other for different applications.

Tablet and Phone Templates

Tablet Template | Phone Template

The templates are very similar to the desktop one – with some differences and these differences are specifically for the design challenges of each of the device types.

The tablet template

In the tablet template, we have done away with the background all together. As the actual screen is much smaller than a monitor and involves using touch, we will need to ensure better visibility and usability for this design. While the template still includes the 960 grid, elements might need to be a little more ‘chunky’.

The phone template

The phone template is in a portrait orientation and is 320 pixels wide and a 300 grid is included in this template. As with the tablet layout, we need to ensure that our design is easily viewable as this layout will be used on phones and other small handheld devices.

Why are we creating three site designs?

The main reason for having a specific layout for desktop, tablet and phone is so that the content of the site is effectively communicated to the viewer in each situation. The end result is that the correct layout should be displayed on the correct device type. There are different ways to approach this for a developer and is beyond the scope of this particular article.

Making your own Templates

Comfort and intuitiveness in your tools is very important while designing. The templates that I have provided are only a guide for designing your own – ensure they work the way you want them to. For example, the desktop template might be too wide for most designers. Spending a bit of time on backgrounds (as 86% of desktop users can see some background) adds a richness or depth to a site design – but that is designer preference.

In the next article, we are going to talk general site elements in a site design and blocks!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Ruben

    The 960 grid system is not the de-facto standard – HTML5 + CSS3 is.
    Grid frameworks make the HTML of a site wrongly focus on its design. HTML should reflect the semantic structure of the underlying content, not the structure of the “upper-lying” layout.
    Designers: don’t be lazy. Write semantic HTML. Then code CSS as needed.

    • Felix Mak

      Hi Ruben,

      While I do not agree that the de facto standard for grid systems is html5 and css3, for the fact that it is not a grid system, I do own a turquoise T-Shirt with HTML5 on it! Black was sold out..

      I wish the world worked perfectly as well. How many clients can be steered away from “I want to have FLASH with a moving banner and FLAMES! FLAMES that will grab the user’s attention.” Oops… sorry, I was channelling a client then. How many clients can be steered away from the design of the site to talk about content? In most cases, a client will be pushing for what they want – which is what they can see. They don’t care too much about SEO and correct markup – that is the job of the coder.

      I do agree with the greater focus issue. Designers need to know what content a site will contain in all levels and design a site for it.

      I feel that the ‘lazy’ comment is harsh. While I am guessing that you are a great coder AND great designer, not all designers are coders and not all coders are designers.

      What I believe is that a large number of websites have become standardised (utilitarian design is boring and drab) and there needs to be a wider input from more designers who are not held back by their lack of markup knowledge.

      Let graphic designers be just that – graphic designers. Once they understand the ‘how’, the ‘what’ and the ‘why’, designers will design FOR that given content.

      Designers need this knowledge now. They need to know about viewports and how to use sidebars, footers, galleries, jQuery capabilities, blocks and more – especially when Adobe launches their visual design software next year.

      You must understand and help arm graphic designers with the right kind of knowledge NOW.

      Join me Ruben!

      Thanks for your comment.

      • http://www.byhisdesign.biz Cindy Edwards

        In my experience I’ve repeatedly seen that a Coder is not necessarily a Designer and vice verse… Designing for the web is definitely different than designing for print, and Designers do need to be equipped with practical knowledge of the use, function and variables of designing for the web. I personally prefer the HTML+CSS approach over grids. But that said, the best results usually come from a team with varied approaches & strengths.

    • Paul

      In reply to Ruben’s
      “The 960 grid system is not the de-​​facto standard – HTML5 + CSS3 is.”

      The grid has nothing to do with HTML5 or CSS3, the grid is just a layout structure, so it doesn’t make sense to compare grid with markup language and the style specifications.

      Designers who use grid are not lazy, they are smart, it’s like an engineer building a house with layout laid down first. ( those who don’t use grid are like the one who build a house without layout laid down first. )

      The problem with using grid in the design is not the grid itself, it’s HOW they use it.

    • http://mimoymima.com Brent Lagerman

      I see both points of view. a design usually comes before coding but then you should start over from scratch and try to forget the design when you write your HTML, then get back to the design when you step back into the CSS for layout. So what Ruben is saying is right, you should put the content on a level above the layout but in reality the layout is usually locked before you code… so it’s a chicken and egg scenario…

  • David

    Fold? There is no such thing…

    http://iampaddy.com/lifebelow600/

    • Felix Mak

      Hi David,

      Thanks for the link! Sorry David, but I believe in the fold!

      The question is of its level of relevance, The link you posted is a great article and makes a good point. However, the article layout is specifically designed to create an impulse to scroll through engagement.

      Nothing is going to stop a user from scrolling, but we can shave a few seconds of their time through putting the most important or newsworthy or decorative content above the fold. In the end, you and your client will determine what that content is.

      Thanks for your comment!

  • Rick

    Great article. We treat websites as living things and market them as such. Using heat area analytics we are able to see an immediate change in user click behavior, which is ultimately our goal to engage the user.

    If an adjustment to the fold results in a higher return for the client, that’s what works. If it makes no significant difference we then look to see if the user experience suffers and make further adjustments. So this is why we treat sites as living things, ever evolving.

    Thanks for reading this “below the fold” :)

  • http://www.cloudmedia.co.nz Raj Sandhu

    The 960 Grid is good, however it is better to make fluid or responsive webiste where the pages can adopt the style according to device and size of screen.

    • Felix Mak

      Hi Raj,

      While that may be true, the reason for using a fixed design is just to give a little more control at the outset. I hope to revisit this particular subject.

      Thanks for your comment!

    • http://adrifolio.com adri

      There are flexible grids that can be used for this purpose. One that I’m familiar with is intuitcss http://csswizardry.com/inuitcss/. This is a simple grid framework that will adjust to any screen size. This in addition to media queries will give you a ground base to work with when dealing with responsive layouts.

  • Paul

    “Felix Mak, a graphic designer for 20 or so years [...] and has more recently been delving into the art of web design and development”

    Well, that’s why the author mentions “The Fold” and explicitly use the term “viewable area” in the article. This will confuse and misguide a lot of web development folks who are new to this and also the clients looking for web solution too.

    Would you please correct it ?
    ( or at least explain in the update )

    • Felix Mak

      Hi Paul,

      Fair point.

      Thanks for your input. Will look at this soon.

  • http://headjam.com.au Dan

    What a fascinating array of comments.
    Grid systems do not equal html/css and the person that tried to claim that it was one or the other is a fool.
    A grid system is very useful when designing a site. If you cant take a gd’s design and translate it into valid code, then you are not doing your job right!

    Also html5+css3 IS NOT THE CURRENT STANDARD!!!
    Sorry to burst your bubble but its still html4.01/xhtml1.1/css2.1. Html5 hasnt even reached candidate recommendation stage yet…not that you cant use it, but it aint a standard…yet.

    Disregard the “fold” at your own peril…

    960gs has been around for a long time, and feels dated, and slightly odd to be discussing it now, but this topic is based on fixed layouts, flexible approaches such as responsive web design are the way to go really, but from experience it is hard to explain that to a gd and they actually “get it”…

  • http://webnicer.com Jacek Ciolek

    Hi Felix et al,

    Happy New Year, guys!

    Nice writeup, I really like your illustrations. I agree with you regarding the fixed layouts, I tend to use them myself. I imagine that trying to find the ultimate solution between fluid and fixed approach to creating layouts can take some time. I don’t know if you like RPG games but it seems like comparing an elf to a dwarf. Either has advantages and disadvantages. I imagine it’s a war that nobody can win.

    I respect the guys who created 960. They did really good and inspiring job. I agree that their grid system is a bit dated however, and I find it slightly rough around the edges. Some of its boundaries can be easily mitigated, for example arbitrarily chosen width, number of columns and special classes for first and last columns. I am wondering if you had a chance to look at UGrid? It has a friendly tool for creating your own gird and a nice download bundle with a few HTML templates and a Photoshop grid. Here’s the link:

    http://webnicer.com/ugrid/creator.html

    I would be very interested to hear what you think.

    Cheers,
    Jacek

    • http://www.glaciersoft.com Frederik Krautwald

      UGrid is a really cool webapp — very useful. Thank you bringing the attention towards it.

      • http://webnicer.com Jacek Ciolek

        Hey, thanks a lot, Frederik! I am planning a few nice additions to it. If you would like the updates stay tuned on https://twitter.com/webnicer.

        Cheers,
        Jacek

  • Alex

    I feel like the time of the 960 grid has passed. 4 or 5 years ago screen sizes were quite homogenized — there were a few 800X600px, a few handful of people rocking larger than 1280, but probably 90%+ of users were viewing at 1024 -1280.

    960gs makes perfect sense in that world.

    We now have screens numbers exploding at either end of that bell curve. A lot of people use 1440px up to 2000px+ monitor, but also carry a phone browser pushing closer to the old 640×480.

    The iPhone/Android/iPad audience is too important to say ‘oh, let them pinch ond zoom’ so you need to create a new layout there. And if you’re adjusting for small layouts it makes no sense to pretend big monitors aren’t there.

  • Ally

    Thanks Felix, this is the best explanation of 960 I’ve read. I personally don’t use a grid system but I design in Illustrator so I’ll give your templates a go.