TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

“Everything looks like a blog”

June 11, 2004

A hallmark of good design is that it provides context and meaning for the work it’s applied to. It enhances and emphasizes, and if necessary it distracts and obfuscates. Design is about visual communication and it’s about enhancing written communication equally; not all text is designed, not all design is text.

The web is predominantly about written communication though; usable web standards don’t extend to multimedia as well as they could. The basic constructs of HTML/XML and CSS are text, and the content they manipulate is most often text. Even the surge of weblog popularity hinges on the importance of the written word.

Consider the shape of text. Long passages share a common characteristic; they are narrow and long, never wide and short. You scroll down a page, and everyone resents scrolling vertically. The basic building block of the sites we all build is shaped like a big narrow rectangle, and there’s no way around that.

Do a lot of the sites in the CSS Vault look like weblogs? Yes. Do many of the designs in the Zen Garden use two columns and scroll vertically? Yes. Because they were designed to best suit their content, which is simply good design.


Reader Comments

Keith says:
June 11, 03h

Well said.

This is something I’ve struggled with a bit, as I’m sure many others have. You want to break the two-column blogish mold, but keep coming back to the fact that it’s very, very good in many ways for presenting a content-centered site.

June 11, 04h

Well said. Funny how all books look the same as well. They are all rectangular. Most have a table of contents. Each page contains a column of text. They all have a front and back cover. There’s no way around all of this.

I chuckle when people complain that a two-column layout looks like a weblog. There are only so many ways to present primary and secondary content. There are methods that work best – and those best methods are the ones that get used frequently.

Rimantas says:
June 11, 04h

Best practice? ;)

June 11, 04h

Well said, Dave. I do think there’s plenty of room for experimentation beyond the two-column blog-like layout, but there’s a good reason this design is so popular – because it works.

I think the singlar feature missing from CSS that may allow us to do more magazine-like layouts (and make them really work) is alto-flowing columns.

What fun I could have with that…

June 11, 04h

The people at the International Herald Tribune have a clever, if clunky, way of presenting text that does not burden the reader with vertical scrolling. Observe: http://www.iht.com/articles/524537.html

June 11, 04h

This is something I’ve been wondering about for a while now. People deride CSS layouts by saying that they “aren’t innovative and just mimic table based designs.” I want to know, once and for all, HOW is this a valid criticism? Humans like to read things in evenly aligned columns. It’s just how we work. It works in newspaper, books, table based design, and CSS design. I fail to see how there’s anything valid in the whole “mimicking” criticism.

8
Zarquon says:
June 11, 04h

At my previous job, I made an effort to raise the level of design work we were putting out, and I showed my boss/business owner the Zen Garden, to which he replied, “I don’t like it. Its not corporate-looking enough.” I took great pains to explain to him that, yes, the Zen Garden doesn’t have that professional business look, but I’d like the work we put out to aim for that level of artful execution, subtlety and attention to detail. Even still, he didn’t get it, and that incident was one of the main reasons why I left his company. Any company that ignores good design principles and resists positive changes towards them is not a company with long-term prospects, IMO.

That being said, Zen Garden submissions tend to be created by people trying to be more creative, and often that means designing in ways that are more personal, more idiosyncratic and, significantly, less like what they do at work. The “too blog-like” criticism is somewhat valid – one thing that’s attractive about certain blog designs is that they depart from the traditional height-width ratio, which is more fun to design for. Same goes for the choice of colors.

Keith says:
June 11, 04h

Tom (#5) – While I find it interesting and clever what IHT is doing there, let’s not assume that vertical scrolling is a burden. I’ve never seen an actual user complain about scrolling and there has been quite a bit of research done to show that scrolling is preferred over paging.

I’m not trying to say every user loves to scroll, only that in general it’s not something you need to design around.

June 11, 05h

Good observation, Dave.. I also noticed this a few weeks ago (http://www.alextaylor.org/archives/000066.php)

11
Ed T says:
June 11, 05h

True and well put as usual… But I often stuggle with defining – and then choosing between – what is intuitive and natural for the user and what is simply learned and comfortable.

Going with what you know an audience has been trained to expect *is* good design, but it’s also conservative and it will inevitably make a site look similar to many others. That’s ok – some arbitrary standardization in design is worthwhile in any class of product, whether a chainsaw or a web page (saves toes and mouse clicks too). Designing as if the audience should discard what it has learned elsewhere is foolishly arrogant.

But on the other hand, designing to encourage new ways of interacting – ways that inform rather than negate other experiences – is brilliantly arrogant… Challenging the audience can bring an unexpected delight in the moment, and it can lead to new (though maybe arbitrary) design standards too – which makes things more interesting over time, if nothing else. And I’d like to think it is sometimes something else: an evolution towards what is more intuitive rather than just expected.

Wide and short pages are definitely less expected than narrow and long pages right now, but I’m not sure that they’re any less natural for navigating text. In print, the multiple short column design has had a long life, and for reasons larger than just one industry’s conventions… And why shouldn’t it apply well on a screen (especially a nice widescreen display)? Moving through chunks of text is no more clearly “down” than “right” (um, in English, I mean – this is what I mean about struggling with defining what is more intuitive). I see many more horizontal page turns within Flash presentations, and wouldn’t be surprised to see them get more crossover popularity in HTML – the IHT layout is fairly sweet for a quick read. Of course, CSS support currently makes the vertical-scrolling design a little easier to do… but maybe that’s just from the conventions I’ve been trained to know too…

12
David Robarts says:
June 11, 05h

I like the idea of auto-flowing columns to make a page grow horizontally, but fit vertically (if the scroll wheel software is smart enough to scroll horizontally when there is not vertical scroll availible). Of course we’re a long way from that idea being practical.

13
Alan Shutko says:
June 11, 05h

I’d also like to note that the IHT’s site, in Mozilla at least, breaks if you scale the font size up and gives no clear indication that you’re supposed to click on the text to scroll. It’s an interesting gimmick, but not very intuitive.

And personally, I’ve always been annoyed at multicolumn text layouts like that. Tracing the text down, up, down, up, down and then all the way back to the corner again is, to me, far more annoying than scrolling down the page. In newspapers, it’s less annoying because the columns are generally longer, but I still prefer reading things with wider columns. (I notice that the IHT layout is nowhere near double-alphabet magic width.)

A final killer in their layout is that on my screen, almost the right half is completely blank. I probably could have almost fit the full article on my screen without any scrolling or stealth paging!

Of course, given the current state of the art, it’s near impossible to code a site that can handle different resolutions, font sizes, etc with the kind of layout IHT chose. That’s another reason the two-column weblogish format is so popular… it’s simple enough to work well in a variety of font, window and screen sizes.

Lea says:
June 11, 06h

Abso-frigging-lutely, Dave.

Let’s use another example: magazines. We can easily say that almost all magazines look like…well, magazines. Similar layouts, headlines, and hell, paper even! etc… However, each magazine looks unique to its own audience and information, so despite the fact the structures are similar, it’s still not.

Martha Stewart Living Magazine for example, does not look like Cosmopolitan or say, Wired Magazine or PC World, but they use similar ways to lay out information and photos–why? Because they’re both magazines and thus use similar “rules.” Like web design, there is room for flexibility, creativity and originality, but using a “template” (or grid, really) doesn’t mean it’s “bad design.”

Derek says:
June 11, 07h

I often give introductory talks to people unfamiliar with how to put together a website. The way I start is to hold up two different magazines, as Lea suggests, and ask the audience what they expect to see when I open them. Ads, table of contents, feature articles, page numbers, columns, and so on are what they expect.

Books are the same way. Both have had hundreds of years to evolve, and in some ways have been conventionalized, but they are also somewhat optimized for their readerships. People know what to expect, and how to find things. Design fits within those constraints.

It’s the same on the Web, but here we’ve had less time to establish standards and find optimal conventions. We’re still feeling our way through, trying to figure out which holdovers from print and other media work, and which don’t. But we should acknowledge—even celebrate—that there are constraints. We don’t have to get all Nielsenian ( http://www.useit.com/alertbox/20000723.html ) about it, but there is value in having the upper left corner link to the home page, and never underlining text that isn’t a link, for instance.

Maybe every text-based site looks a bit like a blog, but maybe that’s because blogs are some of the most elemental expressions of text on the Web, and have settled into a reasonable set of layouts. It still takes work and talent to make them shine.

16
holly says:
June 11, 08h

At http://cssbeauty.com web site designs offered by category: business, personal, portal|magazine, photography, sports … categories share similar elements of design.

Blogs can be dressed up just a bit differently, maintain common elements of design, and some may have a bit of a twist or bend: http://www.orderedlist.com/examples/the_bend

X-Wes says:
June 11, 08h

Well said, Dave.

This short entry perfectly expresses the popular form of text on the Web. However, there is also another side to Web that has not yet been given a chance to fully express itself. Websites are beginning to use the form of the text itself to convey a message. This is, quite obviously, a technique which will lessen the impact of the content itself. To most webloggers, this is simply not a productive concept. However, some people enjoy the artistic expression found in manipulating the form of text into nonstandard formations. See the CSS Zen Garden entry What Lies Beneath [1] by Michael Pick. This design still focuses on the content, but does it in such a way as to allow the flow of the text to carry the reader away. A new form of art may appear that separates itself from the weblogs much like how some magazines have distanced themselves the classic book layout. Unfortunately, this school of thought may still be in its infancy, and ultimately the web will choose whether this trend catches on.

[1] http://www.csszengarden.com/?cssfile=019%2F019%2Ecss

June 11, 09h

I agree completely, Dave. We’ve all heard people complain about the lack of innovation with CSS design. Well, as you said, we use certain styles of layout because they work. It’s as simple as that.

Personally, I’ve never minded the “2 column, blogish” look. Sure, I like seeing an innovative design as much as the next guy, but I don’t necessarily alway like *using* such a design.

Jeremy S. says:
June 11, 10h

Thanks for speaking up and saying what I’ve been wanting someone to say for quite awhile.

Jim says:
June 11, 10h

I was just thinking about this a few hours ago. Why the aversion to vertical scrolling when the scrollbar is such an integral component of every browser? I don’t understand why so many of my clients persist in asking for websites that ‘fit on one page’ without scrolling. I think we’re all accustomed to it by now, it feels completely natural to scan across and down.

And two column layouts make sense when you have a mix of content/sidelinks - which most sites do. I see nothing wrong in following this trend. I understand why some designers/companies might think the blog appearance is passe, another way of looking at it would be to say that it’s a ‘well established design construct’. Nothing wrong with replicating and building upon what already works.

Mike P. says:
June 12, 03h

Nice commentary Dave.

I’ve been wondering where the next “layer of innovation” was going to come from; it seemed that with respect to design, two columns quite often fit the bill quite nicely.

The very same day you launched your redesign I was having a discussion with someone, wondering what aspect of the two coulmn could be improved, when poof! there was Mezzoblue, working the UI end of things a little better and trying to push the envelope.

Ethan [1] then pushed a bit too, with his markup and UI changes [2].

Similar, I think, to the way that Scrivs worked over Whitespace [3], which in the end is still two columns, but with a few different twists. I’m trying a few (ugly) experiments on our blog homepage (more to come), and now we see Doug [4] experimenting here and there but fundamentally building on what works, what you call good design, design that best suits it’s content → two columns that scroll vertically.

[1] http://sidesh0w.com/
[2]http://sidesh0w.com/weblog/2004/06/02/several_mornings_after/#more-265
[3] http://www.9rules.com/whitespace/
[4] http://www.stopdesign.com

mark says:
June 12, 05h

i take your comments on board but why do all weblogs look the same… all magazines dont look the same, all forms of interactive tv and cdroms dont look the same, a corporate site simply shouldnt look like a weblog, same as a newspaper shouldnt look like a magazine.


its very frustrating as ive now got customers who want a weblog style design for their site.

mattymcg says:
June 12, 07h

There’s an extra ‘.’ at the end of Tom’s URL, if anyone is scratching their head over why it throws a 404.

June 12, 08h

Why, yes there is. Gotta remember that the urls are auto-linked next time…

Lea says:
June 12, 09h

Mark, I disagree that all weblogs look the same and all magazines DON’T look the same.

Every piece of design borrows from something or other—and frankly, almost every piece of design—print or interactive—is a slave to some type of “grid” or template.

Like I remember one web designer wrote, weblogs are websites—with a certain look. If a client of yours wants a weblog style design for their site and you, honestly believe that isn’t what they need–then make a CASE for it, and push YOUR style of design. If they don’t budge, then make ‘em “look like a weblog.” They ARE your client. You’re a designer. NOT an artist.

Meanwhile, as for your newspapers don’t look like magazines–well, the format and audience is different. And, as well, many newspapers ARE adopting magazine-like layouts to appeal to younger, hipper audiences. While some magazines (ala Rolling Stone) mimic NEWSPAPERS, so they look more unique and also add a more “legitimate” angle to their stories.

Web browsers are always going to be a slave to the screen and pixels.

kadavy says:
June 12, 12h

I think they do generally look the same, but why do all “A’s” “B’s” and “C’s” generally look the same? While web browsers are always going to be a slave to the screen and pixels, the layout of text is even more so a slave to the past. There are of course optimum ways to lay out text for easy reading. Just as books settled into having optimum places to place body text, chapter heads, and page numbers, blogs are settling into having optimum places for those informational counterparts. The only thing that can really change the layout of the information is the information itself. A good example of mostly-text book being layed out differently because of a different information structure is Richard Saul Wurman’s “Information Anxiety 2.”

You can display individuality through your use of space, form, color and detail, but straying from this “optimum layout” without a fundamental change in information structure will simply be experimenting. Experimentation is wonderful, but don’t expect to come up with something that transfers information more expediently.

June 12, 12h

” think the singlar feature missing from CSS that may allow us to do more magazine-like layouts (and make them really work) is alto-flowing columns. “

Umm…not to plug my own horn here (but yeah, to plug my own horn), I wrote a script, based on the layout flow engine at 13thparallel (now defunct), that will allow you do exactly that. What was that link…oh yeah, http://www.dept-z.com/dropbox/layouttest.html.

Relies heavily on the innerHTML property, and can only handle a certain amount of HTML (not length-wise, but tag-wise). It was an experiment, and I was looking to do exactly what you mentioned. Works pretty well…and degrades well too (at least its set-up to; it’s been something like 6 - 7 months since I wrote it). The basic concept is that it will take all of the HTML in a marked container, take an array of ids, and flow the content into them. The array of ids are meant to be styled with CSS, so you could take 5 containers and absolutely position them…and they will only appear on the page if JS is enabled and the browser supports innerHTML.

Hmmm, maybe I should write an ALA article now…

(original engine is by Dan and Michael over at 13th)

Sam says:
June 13, 07h

Sure. The two-column blog is good design. It works. It’s logical. It’s easy to implement and does a fine job of communication blog-like material.

But is that it? Should we look no further (as designers) than the two-column layout? There is more to design than just an expedient means of communicating a particular message.

There are more reasons beyond the two-column structure that make many people see “blog”. The styles within the two-column layout are repeated continuously throughout popular blogs. Typography, image treatment, colour usage, placement of certain types of content…. things like the “Cederholm drop shadow”.

But I digress, I think it is great that people challenge the two-column layout. Certainly, there are other methods of effectively designing a blog. Yes, I know, we do have restrictions within screen design - but we still have choices.

Let me put it this way: one of the most important tasks of the designer, is to keep our visual world fresh. That could be a whole book in itself. But I like that idea - keeping things fresh. I like to look at and interact with new things. Two-column blogs have been in the fridge for a few weeks now…

Angie says:
June 14, 03h

Great post, Dave. When it works, use it!

And not to dredge up ancient and buried history, but the “two column layout” has been around for far longer than blogs, and designers have been bitching about it for just as long: Anyone remember the “CNet look”? Way back when, CNet had only two columns, too… a narrow left column that had onsite links, offsite links and ads, and a wider right column for content. And once their design became de rigeur, the uber connected complained about the fact that every single site looked like CNet.

Wait, does that mean that CNet was one of the first blogs? *gasp*

The wheels on the bus go round and round, as does this particular debate, it seems. :)

Trent says:
June 14, 06h

Tom (5), I disagree about the IHT site.

When I first visited them, I thought, “Wow, that’s a cool design.” After trying to read several of their stories, I noticed the limitations of their technique.

First, try to copy and paste text that spans more than 2 columns. It’s a nightmare.

Second, I find it curious that they make the use click a NEXT button to read information that is already loaded in the page. Why not just display it all at once?

Ritz says:
June 14, 08h

As much as I hate to say it, most customers I come in contact with rarely even know what a blog is… When you have several blogs you read on a daily basis, you start to see similarites like crazy that would make the two column approach seem bloggish.

The only people I hear making “It looks like a blog” statements are poeple who read and make them all the time.

Then I hear what a customer and it’s audience say and it a totally different story. “Wow that’s neat! It reminds me of (insert non-blog here). “

As far as I’m concerned, if it’s the most successful format for the site to be in, what does it matter what it looks like. Well, it matters… You know what I mean. My point is that not eveyone sees two colums as a blog.

June 21, 07h

Ritz is right, many customers don’t know what a blog is, in fact many customers are not interested, yet, in blogging, web standards or css design. Unfortunately many people, mistakenly, think design is Flash. We have to understand that design has a purpose: Communicate. If having usable, readable and simple sites help us communicating, then design is doing its work. Of course we need aesthetics, but we don’t have to forget that conventions in web design exist because they help people get things done, if not weblogs would be created using Flash.

July 27, 08h

Couldn’t have said it better myself, Dave.

*cough*

http://www.themaninblue.com/writing/perspective/2004/07/01/

:o]