Fluid Grids (Part 2)

As promised, I’ve pulled in scans from the paper diagrams and notes for the layout of the theme I’m working on. Realize that these are raw notes, brain dump on paper. You can read the previous post here.

Layout Snapping

Golden Grid Layout


Designing interaction like this for a site is really similar to the way someone might put keyframes into an animation. The frames you see are the key transition points, even if there may be more in between as the site scales from large to small. As I was brainstorming on paper, I decided the site needed to hit the following key stages:

A) This is the tallest and most minimal your site will ever be. Your user is most likely on a mobile device, a small screen, or is just tinkering with your site. Regardless, these are the key points:

  • Header and footer span the screen. Always.
  • Content has a small horizontal margin. Even on a small screen you don’t want to lose ALL your space and make it feel cramped. Your goal is to make it readable.
  • Ever section, subsection, aside, and floated items are all in order, in line.
  • Navigation is vertical.
  • If the theme were to have ads, this would be the time to hide / remove all but the lightest weight and least intrusive.

B) This is slightly wider. Your content has more whitespace along the sides, the content is wider. You may be on a tablet, or possibly a phone in landscape. You don’t know.

  • Header and footer span
  • Content has a slightly wider margin
  • Most sections and subsections, asides, etc are still in order
  • Navigation is probably still vertical (this will depend on how many items you have)
  • The sidebar, which was stacked vertically in A, is now floated into two columns of items

C) Similar to the same pattern, Your content has slightly more whitespace along the sides, and the content is wider. A good percentage of your desktop browsers will be hitting your site at this stage, along with tablets, smartphones are probably not this wide.

  • The sidebar, is now 4 columns instead of 3
  • Asides are probably floated
  • Navigation is probably horizontal

D) At this point, the sidebar flips up and is now alongside your content. Most of your content is at its largest width and you probably don’t want your paragraphs growing much wider than they are right now since long lines makes reading difficult. This transition from C to D was interesting since originally I had the content area scale until the sidebar had room, and then it snapped down to be narrower than before. To avoid that, Between C and D I fixed and centered the main content area, and when the sidebar could be moved up alongside the content, I made the switch, and allowed the content to grow from then on until C.

E) Finally the width of the site is maxed out and centered. All your content is stretched out as wide as it can be, this’ll usually be someone with a wide-screen monitor with the browser maximized. Usually.

Conclusion: One of the key benefits to designing a fluid theme is the instantly correct look you get when you open the site. Its not something people will or should consciously expect, it should simply BE the correct size the instant it appears, regardless of size, screen, or orientation. (Censored discriminatory jokes about size and orientation here). Its like walking into a store. A well designed store is easy to navigate, spacious, and consistent across all the stores you visit regardless of its size. You don’t ever think about it because you’re not there to analyze the layout of the store. Your there to buy groceries. Anything that gets in the way or makes it hard to find what you’re looking for will stick out, and if it’s bad enough, you’ll go somewhere else. Its the same way with a site or blog. Users are there for a reason: For information, or to read, or to consume whatever content your serving up. They’re not there to analyze your site and how it’s designed, but if there’s any difficulty in getting to what they want in the form they want it, 5 seconds later they’ll be somewhere else.

It’s important to be intentional about the decisions your making and how they will affect the final layout of the site. The more you reduce the complexity of the interactions, and the better defined the interactions are, the better the final end result will be. Use what you design. Do what your users do. You’ll know best what you do and don’t like and what feels right. Go with it, but don’t be afraid to stop, backtrack, or even completely scrap good ideas if they are not up to your standards.

Fluid Grids

One of the first things that has to be addressed when designing a site is the layout. Historically, because of the limitations in browsers, most sites have been built in some variation of what I’m calling “poster format”. One width, variable height, and you have the following problems:

  • On large monitors, content appears tiny and hard to read, and you always come away feeling like there was a lot of wasted space on the screen.
  • On small monitors (or if you have a site snapped to the side of your screen) the content doesn’t scale down, and your left with scrolling back and fourth to be able to read everything.

Over the years one of the principle solution to address this, if someone addressed it at all, was just to never center your content and just let it fill your entire screen. Although this almost works for lots of content, it’s difficult to read as paragraphs will stretch across the screen and you constantly lose your place as your eyes try to find the beginning of the next line. The other problem that arises is that if your designer has a large screen, theres a tendency to continue to add content to ‘fill in’ the space so the main content area isn’t as large. All in all, the only solutions were hacks on a broken system.

With the mobile smart phone market exploding over the last several years, and the browser wars providing an exponential increase in speed and standards complacence, we have a unique opportunity to re-evaluate how we build our sites. A beautiful example of this is this site:

http://goldengridsystem.com

No matter what browser you visit it on, or what size your browser is at, the content will be sized appropriately, the typography is readable, and everything will feel right. No insane urges to re-size your browser window.

This, to a limited degree, is how I want the Comatose Theme to look and behave. Fluid layouts are hard, and getting everything to work correctly while still maintaining a standard html5 layout hierarchy is going to be tricky.

Here’s a link to the demo: http://www.paulrohde.com/demo/html/layout-demo.html

And a video of the layout in action:

Since I currently don’t have access to a scanner, I will be scanning in and posting up images of the layout brainstormings with commentary soon.

Until next time.