Design Focus

Friday Focus 03/05/10: Narrow

Just because monitors have gotten bigger doesn’t mean we should jump into wide layouts all the time. See how these designs make use of narrower widths effectively.

Designs of the Week


Even several years ago this could be one of the narrowest sites out there, and it stands out because of that. Yet the content isn’t sacrificed.

't Creahuys

Needs a bit more refined type, but the overall look is quite pleasant.

Lise Marie og Tobias

This one, on the other hand, mixes a lot of different typefaces and shades of yellow to brown. It may be a bit glaring to some but the detalis are lovely.

Marvin Y. Thomas

This business card-type site looks almost underdesigned but still looks crisp and clean. Again, it’s all in the custom type.


A narrow layout lets striking photo backgrounds define the look of the site. I like that the menu on the left shows the subpages for each link, not just the top-level navigation: instant sitemap.

A Casa do Canto

Same photo background treatment, except it doesn’t change per page.

Tenth Time

Great graphic details everywhere, and a very restrained use of color.

Web Designer Notes

Narrow designs seem to have minimalist tendencies too. This one hides away the clutter with a sliding box for the navigation.

Thomas Maier

A narrow layout can also influence you to do a one-column, one-page site that makes reading and browsing more convenient.

Social Media Weekly

Design4 Pixels or Less
“Having too much choice is one of the main obstacles for 21st century designers. With virtually unlimited tools and possibilities at our fingertips in the digital age, our creativity can become clouded very easily. Being inundated with thousands of photoshop brushes or fonts can push the very concept of a design from the forefront of your mind.”

TypographyThe Future Of CSS Typography
“In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.”

CSS!important is Actually Useful (in Print Style Sheets)
“So what you need is a way of specifying print styles that can override the inline styles. There’s only one way to do that: !important.”

CSSFlexible Color Schemes in Layouts with RGBa
“This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency.”

  1. By JB posted on March 7, 2010 at 6:47 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    The article is right….
    If the monitors gor bigger it doesnt mean that the webpages have to stay redicously small….


  2. By Victoria Blount posted on March 9, 2010 at 9:24 am
    Want an avatar? Get a gravatar! • You can link to this comment

    From the sites above my favourite is “Only 2 Designers” it has a slim design but isn’t compromised, i think the use of 3 colours and hierarchy aids in keeping the site simple and elegant. From the remaining list of sites, the ones that work best have a photographic or imposing background, which is showcased by the slim design and layout of the page.

  3. Trackback