Latest Tweets:

Designers and grids.

I know nothing about UI design.  I don’t even know where to start.  I was hoping I could find some CSS and stick a <style> tag on my site and call it a day.  Ok I knew it wasn’t that simple, but at least that’s what I was hoping for.

I got a suggestion that it would be easier to start with a template, like  You’d think grids are simple, but that led to a plethora of alternative grids.  And then I found another, and another, and yet another.

I ended up reading various articles on grid design, and adaptive grids.  A few things struck me as interesting:

  • There seem to be a lot of designers in the UK who like to talk about grids.
  • I always lumped designers into the “creative types” bucket, but I find it kind of sad how the vast majority of them are using 960 pixel wide, center aligned websites.  Sure, it’s tried and true, but desktop resolutions have long since moved past 1024x768.
  • fluid/adaptive/elastic/responsive (I haven’t figured out the difference yet) web pages have always seemed like a necessity to me, but seems to be a source of debate.  I suspect typography designers with a print background don’t like it.
  • A lot of chatter is focused on web sites.  Surprisingly little (unless I haven’t found it yet) on web applications.

Back to grids.  I can definitely see a benefit of building elements on a page, assigning them CSS classes indicating how wide they should be (in grid columns), and have them automatically flow as the window is resized.

One fault I see is that the majority of the existing grid generators generate static CSS with a set number of columns.  I experimented with 1140 grid, it does a good job when scaling down, taking side-by-side columns and stacking them as the screen width shrank.  However, as I moved up past 1140 and up to 1920, I only got extra blank space.

I suppose this is fine for print designers who are mostly interested in laying out pages of text.  As an application developer trying to present data to the user, this just strikes me as a waste of screen real estate.  Windowed desktop applications tend to handle resizing fairly well.  On the desktop world, this means there’s a bunch of subwindows that scale along with the master window, and scroll bars appear when necessary.  Google seems to have copied this behavior with the latest Gmail redesign.  It works well, because it’s familiar.

A potential idea is to use Javascript to regenerate new CSS grids based on the window size.  This way more columns can be added on wider screens.  I don’t know if this has already been attempted, but I don’t see any practical implementations yet.  The Semantic Grid seems to use some of these concepts with LESS, a language that uses a Javascript compiler to generate actual CSS. 

I think there’s interesting possibilities in a fluid grid based layout for applications.  Perhaps it’s a bad idea, and that’s why it hasn’t been done on the desktop to this day.  But I almost think that we’re moving towards there.  Microsoft’s Metro UI seems to be an early example of the move away from resizing subwindows. 

  1. eatdev posted this