Frameworks

Frameworks are a good idea. Why reinvent the wheel? Why write all your markup from scratch when other people have already put in the time, effort and testing?

Frameworks, templates, boilerplates and resets make for a very speedy production of prototypes and can help create complex and cross-compatible layouts requiring minimal prior knowledge.

Grids

Grids are, on the simplest level, a pattern of horizontal and vertical lines used to structure content through aligning its elements to fit alongside, or between, the lines. Grids give us a structure system that provides visual order, harmony and a continuity in the presentation of content.

They’re particularly useful in web design as they create a consistency of structure which makes the accompanying CSS minimal and reusable across templates.

Grids, their baselines and columns, are created to display content. Therefore it makes sense to design your grid around the optimum display of your content. Does your content feature elements in sets of three? (Such as text chunks or thumbnail images?) Maybe a three column grid is for you… Does it have a combination of sets of two and sets of three? Maybe then a six column grid is for you, as it can accommodate layouts with either two or three columns.

Grid Frameworks

Using a predefined grid makes as much sense as using a predefined colour scheme.
—Jeremy Keith

Grid frameworks provide you with preset columns and baselines (or allow you to choose your own values) and then spew out some of the ugliest HTML and CSS you’ve ever seen to give you a quick layout for your site.

It’s designed to be hard to break, so as many use-cases as possible are accommodated. This means a lot of bloated markup.

Grid frameworks by their very nature are not built around content, they force content to fit around them. With no separation of structure and style, you’re also failing the most basic principles of CSS layouts and progressive enhancement.

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

Grid frameworks are not semantic

The ugliness of the grid framework markup is mostly in its lack of semantics.

<div class="grid_12">
  <p>
    940
  </p>
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_1">
  <p>
    60
  </p>
</div>
<!-- end .grid_1 -->

With markup written to fit a visual design (not to describe the content itself) you lose the hierarchy which is significant to search engines and machine-readability, but most importantly, accessibility. As this fantastic talk from Artur Ortega at Web Expo Guildford showed, semantic elements as basic as lists, headings and links are vital to those browsing the web with accessibility aids.

Do you know what you’re using?

If you return to a framework-based site a couple of months later and need to make a few changes, would you know what you’re doing? HTML and CSS littered with meaningless classes means having to decipher the markup, it isn’t human-readable. If there’s a problem with the markup, the situation is even worse. It’s much easier to debug something when you understand it fully, but when it’s unreadable markup written by somebody else, it’s a lot more difficult. The time taken to fix problems caused by unfamiliar markup could even make up for the amount of time saved by implementing the framework in the first place.

Generated markup is not craft

Of course, many frameworks will claim they are only designed for prototyping, or the creators say they expect the developers to use it with care, making it semantic and accessible for themselves.

Unfortunately, many developers value speed and something already working cross-browser over craft. If you are smart enough to be creating these fantastic tools, you should be responsible enough to provide warnings to those who may be none the wiser about accessibility and other potential pitfalls. You’d warn developers if your code wasn’t likely to work in major browser, so why not warn them about something that can affect so many more users?

Speed and efficiency vs craft

If it works, and your project was quick and easy, does the quality of your markup matter? Yes it does. There’s something to be said about crafting your markup; truly understanding it. Only those that understand what they’re doing are capable of doing truly innovative work.

And it isn’t just about writing clean markup, it’s about accessibility. If you don’t care about accessibility, you shouldn’t be working on the web.