Zooiblog

Search the Zooiblog

Follow the discussion below and participate.

Support this site.

Internet as the medium

Maybe the error will surface soon. I have had some mild rants against Jeff, and I think he got the point now. Let me add a tiny disclaimer first: Jeremy Keith needed no less than two days to fully convince me that I was wrong myself. So, if anything, believe him.

The common mistake

A common mistake is, you may have guessed with my current layout, wanting to be pixel-perfect. This is a myth. With the current spread of browsers, resolutions, OSes, colour settings and all possible combinations between all of these, there is no such thing as a pixel-perfect layout. Yes, you could try and achieve it by making it all image-based. However, that will mean a massive loss in terms of accessibility. I won’t even mention Flash here. The foundations of this mistake are very clear: print.

What’s wrong with print? Nothing. Absolutely nothing. It’s in fact my secret passion. However, internet was not made for print. Oh yes, do go ahead and make all your web pages a PDF. Accessibility? Sod accessibility! … Exactly. The point is, you can’t say “this thing goes to the left a bit, and everyone will see it like that”. You know it cannot be like that. With the vast amount of browsers alone, you can’t go pixel-perfect.

In the end, the conclusion will be clear and maybe a bit harsh to some: internet is a new medium. Yes, I can explain that, even though it’s been around longer than I have. Simple: people tried to feign other media on the Internet (internet with a caps ‘I’ is the medium from now on – with a lowercase ‘I’ it’s the thing we use this very moment), trying to make it do what print does, what TV does (remember those portals that offered you the news as video files? Doesn’t work, does it? Anyway, this trying to make it look and function like something else is the exact reason why the internet hasn’t evolved as much as it should have yet.

Let’s make some sense

Here’s Jeremy Keith’s account in the story then. Liquid design is an example of the advantages of the Internet over any other medium. Liquid design (up to a certain extent) safeguards a layout of sorts on any resolution. Liquid beats Paper. If Jeremy doesn’t beat me to it, I’ll get a write-up done on liquid design as well. Anyways. Why treat Internet as a newspaper or a magazine when there’s so much more to offer (direct commenting and other media mixed, and various other sorts of interactivity with that, to name something)? Alright, do create your newspaper style website, but don’t sacrifice the Internet for it. There’s more to the internet than just ‘other media in the mix’.

Another example. Accessibility. Accessibility is a hot issue, mostly because most people don’t get it and because governments finally do get it. Come OS X Tiger, accessibility will take another step, an ‘in your face’ step. Tiger will have a built-in screenreaderesque program, so Sites That Suck will not be loved by blind Mac OS users, and even though they couldn’t even get there before, they have now spilled their credit.

A newspaper is far from accessible. TV is even worse. Internet is not even remotely comparable. It indeed can be accessible, something that makes it stand out from the others.

So, mister know-all, how do we treat this new medium then?

I am not the one to decide, however, there are many of you already doing it correctly. The trick is to fill the gap that exists between the other media, and to build on that. Extend. Ajax (I still hate the name, but that aside) is a fine example of that, with the geniuses over at 37signals doing a great job with it. Also, Wikis. Yeah, that’s all I’ll say. Wikis are a fine example of what the Internet is meant to be about (if anyone opts for a post by me about money and content, go ahead ;)): free content by little effort.

For those of you who skimmed to the end just to read the dirty words (penis, titties, bum), here’s the lowdown: as my good buddy Seth Rasmussen once said (or something along these lines), Internet has much more potential than to just be Television++.

(To those of you (I’m looking at you now, Anatoly) thinking “Gee, that Rob sure does seem to like liquid layouts,” yes I do. I just picked that as a prime example, because it’s something unseen before the Internet was there, and it still needs its promotion. Do no see this post as a billboard for liquid design, but as another point on the map towards the new medium.)

More on this topic

23 comments

  1. Rob, I actually don’t have a problem with liquid layout and you liking it, I just felt like the article was a bit overwhelmed by it... After reading it once again I don’t have that feeling. ;)

    Anyway, I have to say that in addition to just being a new medium, it is an interactive one, which a lot of people seem to forget... It would be nice if now, when there are plenty of resources on Ajax, we could have more of the interactivity on the web... like the live comment posting on Axentric, but that’s just the beginning - there’s much more to be discovered and I’m sure we’re going to see a lot of wonderful, inventive examples of Ajax in the next year or so.

    More interactivity, please!

    gets back to finishing his live-commenting script

  2. Are you ever wrong in our arguments?

    Come on! Let me be right once!

  3. Thank you for that one, Rob. I agree with you. The Internet is truly a different place. Its interactive nature allows for instant feedback, which leads (ideally) to a better product. We’ve got millions of potential commentators whose rants are indexed and (oh my!) counted.

    I just hope that the merits of good design don’t get lost in the tumult.

    I’ll say it again, Rob, you’ve truly impressed me with this site.

  4. Hey, good writing Rob - and I totally agree with you.

    As Jeremy said (and I love the “monkey see, monkey do” analogy), fixed layout has happened for two reasons. Firstly, it’s easier to force users into seeing what you want them to see; and secondly, everyone else was doing it anyway so why don’t I?

    Until a year ago, I’d never made a fixed width layout in my life. Suddenly everyone was doing it, and bugger me, “their sites look fucking brilliant, I’m having some of that”.

    Fortunately you don’t have to look far to see some classy sites that are liquid.

    Each project needs an individual approach on this matter however. There ain’t no hard and fast rules.

  5. Hey Rob, basically I agree with what you are saying, althought his may just be being pedantic, but The www is a medium, email is a medium, IM is a medium. The internet is just the agreement that lets it happen.

    You are right about the www trying to copy print; until we discovered it’s potential, print was the closest copy we had to go on. Early photos were portraits, early TV was radio with pictures. We are starting to find the potential of the internet and a lot of new media will emerge.

    (maybe I should drink less before I write.)

  6. Well said, Rob. Although a point that is worth mentioning is that although Print, Television and Web and even Radio should not try to emulate eachother (a matter I feel strongly about), they should try to learn from one another. I think that, in particular, Television can learn alot from the Web. With Digital Television really making a surge, issues like design, accessibility and usability can be gleened from the Internet, which, although a reletively new medium, took what previous mediums gave it and improved on them. It’s time for it to give back.

    Think how Newspapers could learn (and are learning) from the browsing habits of Internet Users. They can build on this and adapt it into a style that suits Print Media. Not copy it, but adapt it.

    So basically, I agree with you. Mediums should be specific, but not exclusive.

  7. I don’t really agree with everything to be honest.

    The thing is: on one hand you’re 100% right. Liquid design makes more ‘use’ of the medium internet. It indeed safeguards proper viewing in any resolution and with any font size. On the other hand however it seriously limits a designer in terms of what he can do with his design. A lot of great designs on the net simply wouldn’t work if it weren’t for the fact that they have a fixed layout.

    Also, while you can’t go pixel-perfect in any browser on the planet, you CAN do it for 95+ of your visitors. Of course there are always those who use extremely obscure browsers but it’s really a small minority. When looking at my own visitor stats I can’t say they justify setting up a layout that can be viewed with browsers that only 0.1 or less of my visitors use. (in fact most of these browsers actually DO work fine). In terms of accessibility there’s always the option of using CSS specifically tailored for other user agents than the common browsers.

    So... yes I do agree you have a point by fixed layout sort of ‘limiting’ the possibilities of the medium internet but on the other hand it seriously limits the possibilities in terms of design as well. I for one liked your old layout much better than this new one even though this one is probably more ‘hip’ because of the liquid thing...

  8. I think this may just be your best post ever, Rob - maybe a topic for a future post, “Does Improving the Design Improve the Writing?”

    Not much to add, apart from that ‘Ajax’-dissing seems to be the new bandwagon - what’s wrong with giving something a cool name?

    Oh, and I’m stealing your comment/author/gravatar layout for my redesign...

  9. :) Thanks Matthew.

    I’m not dissing Ajax. Also not doing it because everybody’s doing it. First of all, there’s a football (soccer for you Americans) team in the Netherlands called Ajax, and they suck. Second, it’s not completely correct. Hardly any ‘Ajax’ app actually uses XML.

    Do go ahead. I was afraid someone would steal it before I’d launched, with all these variations on this starting to surface not two weeks before finishing this design. Which would be painful. I already thought out this comment layout in January.

    Pete, of course you may adapt. But don’t copy unless you do it well and smartly.

  10. The arguments for liquid layouts are all very sound. Trust me, I got an earful at SXSW. LOL.

    However, the reason why I prefer fixed, the real reason, is that it makes a stronger first impression. No I see how that impression is subject to aesthetic taste, but, for me anyway, I find that fixed-width layouts, in general, appeal more to me visually.

    Now, having said that -- I think a compromise can be made, and it depends on the site, goals and audience quite a bit. To assume that all, or most, fixed-width designs are a result of “lemming-ism” could be a stretch.

    I’m working on a liquid version of my site to be made available via a style switcher, but to be honest, I’d feel really uncomfortable with going with a liquid design as default and yeah, it has something to do with control -- I’m not afraid to admit that. ;)

  11. Keith’s comment pretty much sums up the sentiments I feel about it as well, in a different way. I agree fully.

  12. You’d think the ‘elite team of expert web design and usability specialists’ over at 37signals could write valid markup. :-\

  13. Different medium or not, it’s still damn hard to read really long lines of text. Having a liquid layout being splashed out across the entire goodness that is a 30” display (no, I don’t have one, yes, I’d like to) is one sure way to have ruin readability, and thus usability for the “regular” user. This is a cross-browser thing, too. Of course, those with 30” displays are less likely to browse full-screen (that’s a guess), but it’s still gonna happen. Yuck.

    Apart from that, it’s pig ugly, and you can’t do real design as you never know where stuff is going to end up. That’s worse than not-pixel-perfect, that’s just gonna look plain messy.

    The previous incarnation of my site had a fluid layout, and I’m really happy to have a fixed one now.

  14. Hm, now that I’m in less of a hurry I think that my comment is prone to misinterpretation... I’m not out to start a flame war or to step on people’s toes, I was in a bit of a hurry when posting the thing.

    Even though you could gather that from my comment, I’m not saying that the layout here is messy or pig ugly. =]
    I was referring to the effect you can get with fluid layouts, where a page worth of text is stretched onto one line. Yes, that’s exaggerating (sp?) it, but I think you know what I mean. You can lessen the effect by using percentages for column widths (as you have done for your layout).
    Also, I completely forgot to mention the fact that (min|max)-(width|height) are perfect for creating a layout that’s both fluid and somewhat predictable for the designer. Too bad they’re not supported everywhere; until they are, IMO the fixed layout is the way to go.

  15. Max, we always have expression for IE... ;)

    I would also like to add that for example for a client you usually won’t go with a liquid layout. It may be good for some information portal or personal site, but not for company presentation... :)

  16. Expressions for substituting min-width and max-width that is... :)

  17. I don’t quite get why you say it should not be for a company site?

  18. Jeff: simply because I have yet to see a good looking liquid layout which would be comparable to the fixed one , plus companies usually don’t have enough text to put in liquid etc. I could talk for many hours about this. :)

    Any points why it should be for company website?

  19. Also, while you can’t go pixel-perfect in any browser on the planet, you CAN do it for 95+ of your visitors. Of course there are always those who use extremely obscure browsers but it’s really a small minority. When looking at my own visitor stats I can’t say they justify setting up a layout that can be viewed with browsers that only 0.1 or less of my visitors use.

  20. Hi. Thank you for your article. It helped my a lot, but I’d like to make a constructive critic. I’m a beginner in a web designing, so I’m learning and actually I’m searching for some informations which will help me understanding the decission about the layouts. Don’t get me wrong, but generally I see only one argument in this article: do it because it’s possible. And it’s not an argument. Apart from that you are missing the meanings of the most important words. You are writing about web designing and you’re using a word “internet” to speak about it. And it’s not the same. WWW Internet. WWW is only one part of the internet and quite a small part. While internet overall is interactive and noone can deny it, the WWW is partially interactive and partially non interactive and it’s intentionally non-interactive. One of the main usability rules says that a web site should be user-friendly and the navigation should be intuitive. And it simply must be very alike the print, because the print has it’s classical composition (header, content, footer, columns, banners, etc.). People got used to this order and it’s simply almost impossible to make them get use to the new order and composition. So in this part it’s fixed and it must be like that. The reasearches says that when an internet user can’t understand the composition of the web site in the first seconds of viewing it, he simply skips it and goes to another page, because the competition is only “one click away”. And from my experience I have to say that I really don’t like pages which are hard to understand in the first seconds of viewing. I like the classical composition because I expect the navigation to be on the top or on the left and I expect it to be very visible. if I have to search for something across the site I simply don’t like it and I go somewhere else. And that’s why in this big part a web page shuld be fixed and non-interactive. I want it to be interactive, because when I’m viewing it I expect it to be very alike to the print and the books and this classical composition is very comfortable for me as I got used to it since I don’t know when. So when Internet overall is very interactive, there are places, where interactivity is not welcome. Web pages are more being expected to not move, don’t ask, don’t play anything (music, advertisements), simply be “dead” like the print. And the fact that internet is overall interactive doesn’t change it. Not here in my opinion. Yes, interactivity is so big potential, that words can’t describe the power of it, but in case of web pages, I wouldn’t be so enthusiastic about interactivity. And I don’t think if it would ever change. I’m reading a lot and I still can’t find argumentation which would be enough for me to make web pages liquid of elastic. Especially those, which contains muuch of a graphic, which should suit perfectly and can’t be cut (internet stores for example, but not only). Small screens are also the problem of PDA’s programmers and users, not designer’s and taking this problem from the programmer’s heads to web designer’s heads is a big mistake IMO. Still an argument that a web page should be interactive because internet is interactive is nt an argument for me. And still 95% of web usability and accessability = fixed solutions. And I don’t know why a “pixel perfection” would be a myth when a pixel is a pixel everywhere and everytime no matter what web browser you use. So thanks for the article, but I’m still on the road yet and I’m looking to find the satisfying answers. Anyway it was helpful to read it.

  21. Old post but i totally agree with you
    great post!

  22. Wow.

    Just wow. Reading this article in late 2011, I am amazed at how prescient your 4.15.05 article is. Accessibility and Interactive. That which stands out and is unique about the Internet. You have that exactly right.

    Which is why I have landed here tonight on your blog. Working on my next redesign; I want those two things. People are still linking to your website. Tracks in the snow.

    When I started to learn web design, I loved liquid layout. I love to resize the browser and see the text reflow. However, the learning curve many years ago required learning lots of hacks to make IE work. The brass ring was “pixel perfect” layout.

    Now with HTML5 we are letting go of that. Letting go of IE altogether.

    I feel like I am coming home, circling around to the beginning, looking for liquid. What I find here along the way are the big concepts: Accessibility. Interactive.

    Something really caught my attention about your website: I love the way the fonts and columns work when I hit command-+ (zoom) on my mac. The fonts get bigger. The columns hold their ground. Wow.

    Just wow.

Participate, yes!

(Rock out with Textile; it's what the cool people use!)