One Size Does Not Fit All


Unlike print design, web design due to the many different formats to view a website, has no definite size. For someone, like myself whom is accustom to designing within a given parameter, designing sites for today’s web environment has become somewhat tricky.

Like most people when I cannot understand something, I turn to the “Omniscient Internet”; and when it is web design related I usually head for my favorite go to (aka my little black dress for all that is web) A List Apart.
Recently there was a post called The Infinite Grid, by Chris Armstrong. The post discussed the idea of creating websites for an infinite amount of viewing platforms.

“Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between.”

Designing for a medium that has no fixed dimensions? How do I design for a something that is ever changing?

We’re designing for an infinite canvas—and for that, we need an infinite grid system.

An infinite canvas? An infinite grid? Is there an infinite bean stalk somewhere in there too?

As I read further into the article, Chris began to explain that designers need to design layouts for content. If a layout is designed with substance/content as the main focus the white space and other elements with fall into place.

Designing from the content out means finding a constant in your content—be it the ideal measure of a paragraph or the dimensions of an ad unit—and building your grid out from there to fill the space available.

Design with an Infinite Grid means I need to understand and identify the essence of the site. Designing the site of the content and the factors I can control. Some ideas Chris states I should keep in mind when sketching are, hierarchy (What’s its order and prominence in the layout?), density (How much detail do you show?), interaction (Should it be a list of links or a dropdown? A carousel or a group of images?), and width (Is it fixed (a specific width), flexible (set with max-width), or fractional (set with percentages?).
Even though these controllable factors have been identified, it does not mean their functions in the layout may not change depending on the device being used. That is the beauty and pain of a fluid/ responsive layout. At this point in the article I started to get lost, but Chris was able to share some great techniques to help establish a good start.
1. Use Proportional Units
Like most graphic designer I love pixels and inches, they are finite and never fail to ensure consistency. However, proportional units (ems, rems, and percentages) allow one to create a relationships between different design elements within the layout, making element flow easily from one layout to another.

2. Start With the Extremes, Then Work Out the In-Betweens
First design a layout for the biggest possible screen, 75em wide, then design a layout for the smallest possible screen, 34em, keeping in mind the content’s hierarchy, density, interaction, and width. Creating a layout for the two extremes will allow for a better transition from one view platform to another. It ensures the innovative layout is not constraint and enlarged without consideration for the design.

3. Change State Where Relationships Breakdown
Once the two extremes layout have been designed, it is time to decide where the in between lays and at what size a new layout may need to be created. No worries, some great new tools (like Gridset and are making it easier to design and test responsive prototypes!

4. Go Beyond the Extremes
Design a layout that works under 20em and one for over 75em. The end objective for this step is to ensure the layout makes the most of the space available without losing readability and good design.

It is nice to know that the hard work with creating a great website does not begin with code, it starts with a pen and paper, I guess print and web are not so different after all!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s