Having already developed my own fixed-width adaptive system for use in my WordPress template, Modular-A, I never felt compelled to apply that in my work. I did, however, research and deconstruct it, along with other fixed-width frameworks, whilst developing my understanding of how it worked.

I was always impressed by the minimal nature of his frameworks, that strip away all the other design features, to focus on the layout structure of grids and their gutters. This was preferential for my own purposes, as I have developed my own guidelines for handling many common elements throughout sites (the typography, input, tables etc…). But when Joni released GGS I already had a nice simple website lined up – a web version of my resume.

It took me an evening to throw together the site, and I was quite happy with with the end product. Here are my impressions.

Noticeable benefits

• Rapid prototyping: The built-in JavaScript-based grid overlay allowed for rapid prototyping in all screen widths and especially for the typographic elements.
• Great foundation for you to make a site that is both balanced and usable.
• Up to 16 grids (or 18 if you include the margins) can be used, but any variation in-between was very easy to set and test with. I ended up going with 8 and turned off the wider variations (don’t have a wide enough monitor to test with currently).
• Simple semantic class names.
• The minimalist nature of what it provides. Joni described it as more “a guideline than a framework” and that is very much the case. Apart from removing his typographic presets, it was able to instantly integrate with my own presets.
• It integrated with the HTML5 BoilerPlate 2.0 without a single hassle.

Other Impressions

• There were a few small bugs in the version of the code I originally copied from Github (these might have already been fixed by my time of writing).
• Once I let GGS loose on my site, some of the page edge gutters did not work as intended and required some fiddling.
• This particular project did not require a contrasting colour between the body and main content area, but it looks as though I will have to fiddle with some of the layout elements when I do.
• While I appreciate the minimalist nature, I do think it could do with out-of-the-box classes already dealing with the various column-width variations.
• I don’t entirely agree with the minimalist approach he took with older versions of Internet Explorer. While I agree that we should encourage more users to upgrade, I work on too many projects where the client still wants a similar (or close) experience for users from all the popular browsers.

I haven’t yet tried images with GGS, so I can’t comment there. I hope to soon though, as I have plans to test how this will work in an updated version of Modular-A with an eCommerce site.

Additional Links

My resume using GGS

My partner in this project was not looking to steal design cues – we already have a strong foundation to the graphical side of the site and Modular-A will power it. Rather, as someone without a background in web design, he wanted to see examples of grid-based design in existing online fashion stores.

So rather than keep this small, but useful trove of examples to ourselves, I would like to share it with other designers. Hopefully you too can find some ideas from these.

Evisu Jeans

Redbubble

Full Bleed

Threadless

Ugmonk

The Affair

Faebric

I’ve saved the best until last. Whilst not an Online Store per se, it is a fashion site and is an impressive example of minimalist grid-design.

Faebric also has built-in small-screen device “responsive” transitions, which are perfect for grid-based design. In fact, it can move from a 7-column 1280 screen to a 3-column 480 pixel screen with ease. Enjoy.

My initial interest in developing a grid was first perked back in 2008 when I saw a conference presentation by Andy Clarke. He talked about how web design could and should be looking at some of the layout patterns used in the print world. The particular focus of his speech was comic book layouts. It was a simple but intelligent discussion of the parraells we could draw form comics in using grids to help tell the narrative of our content.

I spent a while playing with the basics of grids, even going as far to experiment with it specifically in the graphic design field, before looking at what it meant with screen resolution, pixel-depth, different devices and the unique demands of reading/scanning on a digital screen.

Modular-A first began in another project back at the beginning of 2010, was redeveloped in proceeding projects before I brought it all back together in May 2011 into a complete template for WordPress, using the HTML5 Boiler Plate and the Hyrbid Core frameworks.

Modular-A’s grid system

Currently version 1.0 is designed for full desktop layout, with responsive device modfications coming in 1.1, with this in mind it is designed to:

• A 960 pixel width.
• To keep every grid square working towards 960 pixels (and 480 in the future)
• Everything is designed to against a 12 pixel ratio (gutters, fonts, line heights, cells, except for the column)
• Gutters are 24 pixels, provided by em distances.
• Columns are 140 pixels
• It’s based off a 6 column grid.

Advantages

• Provides clarity and logic for considering the weight and worth of competing content.
• With the structure already determined by the CSS, I can quickly provide mock-ups of client requests/changes.
• Rapidly increases the speed of my workflow. With a strong foundation, half the work for all new projects is already done.
• The standardised system allows for a better workflow when collaborating with other designers.
• Is best suited to Responsive Web Design.
• Allows me to rapidly test different usability ideas.
• Can be easily integrated with a range of usability patterns.
• Of all the methodologies I have used in web design this system lends itself most to Typography.
• With the correct CSS3/HTML5 behind it, it allows you to design web accessible sites automatically. I don’t believe I have to set aside time for accessibility in regards to the layout anymore as it is already done. As long as my code and colour theory is prepared, then this system is accessibility ready!

Lasting Questions

• If the content is in a container with a section, that has a contrasting colour with the background colour, should we design a different grid with that in mind? The basic grid goes to the edge, but you need additional gutters when there is contrast between the content background colour and body background colour.
• Should we set up a few different grids? Is one over simplified and standardised?
• How far should we go with box ratios? Should box elements on the homepage always be in exact ratios to the columns?

Resources

• Modular-A: A grid-based WordPress theme
• Designing Faster with a Baseline
• Using Grid-based Design
• Yahoo’s Page Grids
• Opera’s Grids for Web Design
• Modular Grid Pattern Tool

In my opinion consideration must be given for the required ‘theme’ at the beginning of the creative design process. As once you can conceptualise the ‘theme’ it will ensure consistently throughout the design decisions for your intended UX. In effect this idea then becomes the philosophy that helps inform your design.

There are a plethora of ways you can achieve any particular UX as a designer. The ‘theme’ is what allows you to decide how to achieve this. For example, a website I worked on was for a restaurant that has a young clientele and is based in an area with a large number of young professionals.

With this in mind I aimed to give the website a ‘cartoon’ feel, to show that the restaurant was young in mind and that it was ‘easy-going’. I wanted evoke the feeling of a classic Loony Tunes cartoon – Speedy Gonzales. It’s within the age-group of the clientele, whilst the simple colours and rounded corners work well on the web. This idea was realised through the graphics, colours and typography used in the UX.

To better illustrate this

How UX was achieved
The UX was achieved a few ways, with particular focus placed on typography selection. A popular font within academic publications is Times Roman, and in user surveys of ANZAM members, it was the font identified as the most familiar. That particular font, however, does not translate especially well to monitor reading (as it was developed well before computers, in 1931).

Two typefaces that were developed as monitor-friendly versions of Times Roman are Cambria and Georgia. Their advantage over Times Roman was their extra x-height (which makes them slimmer) and larger size at each pixel range. However, because they are an extension of Times Roman they give the same appearance, and help develop the feel of a scholarly text that I was aiming for.

I chose Cambria as the lead type over Georgia, as it is slightly slimmer. This allowed the size to be larger, which is better for screen-reading purposes, without leading to a ‘heavy-text’ feel that can result from thick typefaces.

To further underline this experience of a ‘scholarly text’ to the user, I made the titles on the secondary pages very large, with entire bars dedicated to them. With a light background behind it and large degree of space, it not only provides a strong signal to the user about where they are within the site, but also continues the theme of a Times Roman-style typeface. It is this sort of reinforcement of a theme in multiple areas of a site that help maintain the UX.

An additional UX decision that was used to further reinforce the ‘scholarly’ theme was minimalism. Scholarly texts are simple, text-heavy and notable for their columns and sparse use of simple lines to separate elements. Hence the site is largely white, with subtle variations of a grey gradient used as a contrast. This helps support the perception of white space, which in turns supports both the readability of the site and the navigation elements.