A List Too Far Apart?

Jeremy Keith comments on the very wide fixed-width layout of A List Apart in A List Too Far Apart?.

Just like Jeremy, I have a nice, big, wide monitor hooked up to my computer. And just like Jeremy, I like to keep my browser window at around 800 pixels wide (screen size != browser size). The new A List Apart doesn’t fit in that window.

Don’t get me wrong. Having a four-column layout is fine. And the new A List Apart design is beautiful. What I don’t get is why they have a whole column of just whitespace (except for the header) and made the whole thing fixed width.

Sure, go wide, use lots of whitespace to let the content breathe. But don’t you think making the width liquid or elastic instead of fixed would accomodate the largest number of visitors?

Posted on August 28, 2005 in Quicklinks

Comments

  1. All in all I still think the wide concept is not so wrong here. If you resize it to 800x600 you can still see the most important parts - the logo, the content and the third column with the editors choice. If somebody with that width wants to search ALA, let them scroll their narrow browser.

    I belive that now with ALA the whole concept of building websites is moving to 1024x768. Finally.

  2. Miha, I wish that was the case. But there are still a lot of users using 800x600. And, yes, you can still see the main part of the site, but it doesn’t suprise me if someone can’t find the right menu because they are unaware of the horizontal scrollbar. That can be very confusing, thus inaccessible. And I think that ALA, a site that was one of the first to promote webstandards and accessibility, to be accessible for every kind of user.

  3. August 28, 2005 by Roger Johansson (Author comment)

    Miha: But why force it upon the user when there are better options?

  4. Accessibility is not everything. Sometimes you need to put your foot down if you want to move forward. If it makes (business) sense to you to restrict user choice, then you should do so.

    If the authors of ALA think they can deliver a better experience to most of their users, and at the same time create problems for a minority, then it’s their prerogative to do so, if they decide for it.

    Since you like to keep your window at 800x600 and you had problem with ALA, or any other 1024-friendly site, then either the site can change to accommodate your (will you pay for the time involved?) or you should resize your window, or not visit that site. Everything costs money, and the time put into accessibility is no exception.

  5. Jero: On the other hand, ALA has a rather specific target audience. “For people who make websites.” I think the ALA creators are justified to think that these people know computers well enough to find the horizontal scrollbar, and have good enough computers to have 1024 browser windows.

    Which is not to say that a hopping layout wouldn’t be something very nice.

  6. Well, it’s an ordinary, nice looking, design, but it’s so easily broken when we resize fonts to make it readable - not only in IE/win.

    The fixed width should have been avoided this time around. There are so many cross-browser stable options, so they should have left the question of page/window width to the user.

  7. August 28, 2005 by Roger Johansson (Author comment)

    Gabriel: Pay for the time involved? All of 5 minutes? Wow, that’s gonna be real expensive.

    In my opinion, this is more of a usability problem than an accessibility problem. But most of all I think it’s an attitude problem among designers (in general, not talking specifically about ALA here).

    Do those of you who think making over-wide fixed-width layouts is ok also think it’s ok to use JavaScript to resize the visitor’s browser window? I mean you should really make sure it takes up the entire screen so they don’t see anything else while at your site. If they don’t like it, they can go elsewhere. Right?

  8. August 28, 2005 by Martin Smales

    If they don’t like it, they can go elsewhere. Right?

    If they (people who make websites) are daring enough, they can use CSS signatures via Greasemonkey to restyle ALA to their specs.

  9. @CornedBee: You’re probably right that the majority of ALA’s audience uses a resolution of 1024x768 or higher. But I also make websites, and it was until last year that I switched from 800x600 to 1024x768 because of my cheap monitor. And like Roger said in his article, screen size != browser size. Some people don’t like it to maximize their browser window.

    Don’t get me wrong though, I also like to make websites for 1024x768 and up, but I don’t want some of the users of my websites to suffer because of that. So appearantly the internet is not ready for that yet.

  10. I like to keep my browser window at around 800 pixels wide (screen size != browser size).

    I’m a little curious about this. What’s the reaon for not maximising? (I do, even though I have 1280x1024)

  11. August 28, 2005 by Roger Johansson (Author comment)

    Johan: Because I like to use my screen in a way that is more efficient to me. I never maximise any application.

    I don’t know, maybe it’s primarily a Mac thing. Mac users don’t need to maximise applications just to know where the menu bar is, since it is always in the same place. Just a theory.

  12. That’s what I suspected. I, on the other hand, maximise (basically) every application that I use.

  13. Yet another place for resolution discussion ;) Full ACK.

  14. August 29, 2005 by o-juice

    I don’t think it’s primarily a Mac user thing not to maximise applications, I rarely do it myself and I’m primarily a Windows user.

    That said though, I personally don’t find it a major hassle to just resize my browser window slightly to remove horizontal scrolling bars on ALA’s site when I visit it on the rare occasion — which coincidentally was recently just to see the redesign — since I read most sites and blogs feeds’ through an RSS aggregator these days.

    I’ve been following most of the comments on other sites and blogs about ALA’s redesign and the contention that stands out to me the most is how people say they go to ALA for the content. So why should the design of their site, whether you believe it to be good or bad, be such an issue? Run the site san-CSS perhaps? :-)

  15. Roger, I fully agree. Even though I have my browser window slightly wider than yours (about 1000px), the layout doesn’t fit, and feels unbalanced (lack of whitespace on the right) and uncomfortable. And then I need to zoom in more than a little to render the text readable, which breaks it even more — actually, I don’t zoom, I already bumbed up the font-size seriously through my user stylesheet; haven’t gotten around to apply some corrections to the layout itself.

    Seriously, nowadays, there is little reason for not going liquid or jello, especially for a site like ALA, where the content is first and foremost text. I possibly can understand the need for fixed width when a site is about graphics or images, but in this case, I have a hard time understanding the reasoning.

    @ o-juice (comment 14), actually the first time I visited the new ALA, I did just that to read the articles (View > Page style > No Style in Firefox).

  16. As much as we gripe over the horizontal scrollbar, has there been a study that covers the detrimental use of the horizontal scrollbar? We’ve gotten used to the vertical scrollbar, depending on the design, is a horizontal one any worse? And with CSS-based column support coming in the next version of Firefox, could we begin to see more horizontal layouts hit the streets?

  17. A(lista)part from the discussion on screen resolution, could we all please stop calling the new ALA design ‘beautiful’? Minimalistic? Yes. Functional? Maybe. But appealing to the eye? Not in a lifetime.

  18. I’m not going to comment on choosing a width that’s over 800 pixels, that has been discussed above. But what I like to say that a fixed width can be very intentional. Many writers like to know exactly where the line-breaks will be and how many words each line will encompass, it’s often part of their presentation and writing process.

  19. My use habits are like Rogers’. I never maximise anything, nor appreciate anything that automatically assumes I want it maximized.

    Over on Bokardo, I answered a similar post with this:

    My display is still physically small, but capable of 1400×1050. I have never used full screen windows, even when resolution was much lower. I always use window sizes somewhat smaller, usually around 900.

    I once subscribed to “everything should be fluid,” but have changed my mind after having seen fluid sites look terrible on very high resolution displays (>2048).

    So, I’ve come to think that a good solution would be a flexible design with min-width:800px and a max-width:990 (to allow an easy fit in displays that are only 1024 wide). Of course, that means hacking for IE since it doesn’t support min/max.

  20. August 29, 2005 by Jaclyn

    Robert,

    I can understand the frustration for writers who want to control how their writing appears, but the truth is that it can’t be done. Even fixed width layouts and pixel sized fonts will show differences between platforms and the fonts installed on different computers.

    If they’re OK with that idea — and if they’re not, then only an image of their text would be acceptable — then a flexible design where the widths of elements is based on the size of the font (in ems) can also achieve that (loose) goal.

  21. Even on a maximized 1024x768 display, increasing the font size even once using the standard browser controls (tried in Safari and Firefox, not in IE) results in disruption of the main navigation - specifically a loss of one of the items.

    This is a significant oversight, in my opinion.

  22. Jaclyn,

    Generally, you’re right; it can’t be guaranteed. But in the cases when that’s a desire to control the automatic text wrapping, using pixel-based fonts and a font that’s pre-installed on most (if not all) machines, you can get pretty close.

  23. I started off a little disappointed in the ALA resdesign from a usability / accessibility POV. But after scrolling through 5 pages of ‘love the site’ comments, I figured I was expecting too much.

    Reading the ALA 4.0 article and following the ‘Faux Columns’ link at the bottom of the page, I found it was only just possible to get rid of the horz scrollbar on a 1280px wide display, never mind 1024px…

    I also noticed the lack of design scalability (where did FEED go?), as I found the default text size too small for comfortable reading on my 15” powerbook.

    Over the last few days I have begun thinking that perhaps I’ve been wrong to pursue accessibility and usability above design ideals, since one of the pillars of that ethic seems to have collapsed. I mean, if it’s okay for ALA to design for 1280px wide and very limited text scaling…

  24. PS. Where’s the Zoom layout, or aren’t there any low vision people who make websites? (I’m starting to sound a little cynical aren’t I - guess I feel more let down than I first thought…)

  25. August 30, 2005 by Roger Johansson (Author comment)

    Robert: I have also encountered print designers and writers who just do not get the web. Showing them the difference in text size between browsers, platforms and personal preferences tends to help in some cases.

    Steve: Agreed, the overly wide fixed-width is not the only problem with the current ALA. Too small text, too long lines, parts of the menu bar disappearing as you bump up text size etc. IMHO I’m not sure the ALA site itself has ever been an example of current best practices. I think you need to apply a lot of “Do as I say, not as I do” to ALA.

  26. Perhaps they just got their hands on mighty mice and needed a site to use them with! I am sure that 99% of the ALA visitors are designers of some sort and knowing that they felt it was OK to go large.

  27. August 30, 2005 by Overboard

    I recently read an interesting article on this at www.kwilson.me.uk/blog/2005/08/tight-fit, discussing the ever-decreasing browser size that people now have (think Firefox bookmarks pane, Google sidebar etc). It does make a good point that even with large resolution and a maximised browser window, the screen size available may not be as large as you think.

  28. I find it real hard to do liquid layouts without IE supporting min-height / max-height, and the current box model that only lets you secure the content width and not the box’es actual width, yet does not let you mix percentages with px or whatever (e.g. float: left; width: 30%-6px-2em; border: 3px, padding:1em;). Forgive me when I don’t want to use percentages for padding and border, or a box in box. But the current model forces people to do boxes in boxes because of this, and it goes totally against separation of content from style. Then again, CSS lacks a big deal in the realm of forming layouts, it seems like CSS3 will ease the pain, but it still will be missing crucial things needed for seperation of ‘layout’ from content.

  29. I myself very much like ALA 4.0. My screen solution is 1024x768. It displays beautifully. Even when I resize the browser down to 800x600 or 640x480 (Firefox v1.0.6, Web Developer v0.9.3 extension), I still can view the most important parts of the site (front page or article page). (I am happy with their intention!) Is that called accessibility or usability?

  30. I have been waiting for more than 5 years to see a significant amount of sites add value in higher resolutions.

    I don’t normally use my browser full screen (19” monitor, 1280+ res) - AND the reason why? Because most sites don’t offer any value - for me to do it. Why go full screen when you are looking at nothing but 1/2 of a screen, or more, of white space…

    Many news orgs have started to change - but the additional space is nothing but ADs… so it almost begs you to keep your browser “closed up” to relieve your eyeballs of the flashing…

    I hate to say it - but if designers, consultants, and clients “never” venture into the wider path - we will be stuck in the 800wide world forever.

    Step on the dance floor and start the dance. I am actively looking for reasons to use the wider space - you should too!

    Don’t worry about who you will be leaving behind - if you show the world a reason to open up the browser - “they will come”…

  31. “Actively looking for reasons to use the wider space”

    If you’ve got content that needs the wider space, go ahead. If you don’t, don’t use it—don’t be obnoxious.

    ALA 4.0’s use of page width is obnoxious.

    It assumes its users have a computer “good enough” (high res. display) to view large browser windows, and that they definitely want to do that.

    The design puts prettiness and phony “push the design envelope” ideas ahead of basic readability. If one can’t comfortably read the articles and apply them, what kind of great example does that set for people who make websites?

    Horizontal scrollbars are no fun because the user needs to deal with not just one (vertical scroll), but two dimensions that need to be uncovered. Pain in the neck.

    I haven’t seen a good explanation yet as to why the design needs to be so wide. The whim of wanting a “fresh, light, airy feel” doesn’t cut it. Come on, it’s a collection of articles.

    A decent response to all this page width criticism would be to add some liquid-width capability to the existing design, or add an alternative style sheet.

  32. I agree that horizontal scroll bars are not fun, however as OS/browsers take on the ability to use the “pan” function which many programs now have (and CAD programs for over 15 years have had) - the arguement of using the scrollbars (horizontal or vertical) becomes moot.

    I also don’t agree with keeping at the 800px width - because that is what the industry is doing… how did we ever get away from 640px with that line of thinking? If your visitors have wider displays - then you “can”… if your visitors are still stuck at 14” green/amber - then go with that… and of course if your content is being used via cells & pda’s… then go with that.

    The important point is to have a reason for the dimensions to be “wider”. Stretching a paragraph is not one of them - using either of the liquid or wide-fixed width methods. Reading/scanning vertically can be done very fast when the line length is “just right”. and even 800px is too wide for a paragraph.

    I like the 3 or 4 column look - and I like how easy is is to read the content in those small “chunks”.

    But I still come back to what I said at the end… give people a reason to open up the browser… and they will.

    That doesn’t mean having a 1280/1600px fixed-width wide paragraph. Proper organization still matters.

    Maybe what everyone is finding out is that for newsmags/blog style sites with one primary “article” column - 500px or so is about right, with balance for nav or other content.

    Are we left with wider pages only being valuable for “stores” or major news sites to display their sales & advertisements?

    Are we stuck with 800px wide formats - because that is the way it has always been done?

    I sure hope our creative minds haven’t hit a wall!

  33. I think I see what you mean now about giving the user a reason to open the browser, and I do agree with your hope that we can stay creative.

    As a counter argument to my prior comments: I do love the way the design looks, and looks do count. Also, the important column of content (article body) is readable within an 800-px wide browser window, with the less critical navigation off to the right side.

    So maybe it’s me—gotta get over my kneejerk disdain for horizontal scrolling.

  34. September 21, 2005 by stilfx

    Majority Rules, and I’m sure ALA has a firm grasp on who their audience is.

  35. September 21, 2005 by stilfx

    Majority Rules, and I’m sure ALA has a firm grasp on who their audience is.

  36. As much as we gripe over the horizontal scrollbar, has there been a study that covers the detrimental use of the horizontal scrollbar? We’ve gotten used to the vertical scrollbar, depending on the design, is a horizontal one any worse?

    See Nielsen’s Top Ten Web-Design Mistakes of 2002

  37. Stilfx, the majority seem not to like the horizontal scroll bar. People on various sites and boards complain and complain about it. Apparently majority doesn’t rule, or we’d have a better design, one that properly respects users’ screen space, and their precious time.

    Roger, it’s mostly for the same reason it’s always been—we’re already saddled with one scrollbar—the vertical—so an unnecessary horizontal scrollbar just makes the page that much hard to manipulate. With two bars, they’ve just unnecessarily doubled the number of interface controls to read a simple article. Not a nice thing to do when there’s no content need for it.

    ALA thwarts the decent convention and rule of thumb that most designers have started to follow (fit in 800px wide window without horiz. scroll), for no good reason. Ironically, the site is a collection of articles about web design. Poor example.

  38. Interesting continuation of the comments on this subject. But I don’t understand why we are criticizing ALA for going wide…

    Glad to see that designers & web aficionado’s are continuing to gain value from Jakob Nielsen’s work – however, the quoted link is now 3 years OLD!!! Imagine if everyone built their sites like Jakob’s site… what a bland world we would be living & working in.

    Jakob certainly has raised the point well – that point is that each site should fit their audience. That does not mean your design audience site has to cater to the millions of Internet wanderers out there… Interestingly, this same point is true about ANY project.

    CNN, MSNBC, some corporate business sites and many online store sites are now “wider” than 800 pixels wide. Why is it a shocker that ALA “went wide”… come on people… get out of the ‘90s! The most common monitor being sold now-a-days is 17” or better.

    If your visitors have the systems – then get out of the 800x600 box and enjoy the wider playground!

    Sure would be nice if the browser makers enabled panning! A simple click/hold and mouse move ends the concept of scrolling! AND best of all – you can go diagonal! I enjoy it when I use CAD, Image editors, and other software… WHY not in a browser?

    Each of our minds cannot think of everything. I personally want to see the design sites I visit – s t r e t c h – the envelope, just so I can see what is possible. So hats off to ALA for taking the heat! I hope to get my sites “in the kitchen” shortly…

  39. April 28, 2006 by GaryKyle

    Hmmm. Many good points made by all. I’ve worked in liquid for years - seen it as ‘the right way’ because I feel users should always be able to choose.

    However, most users don’t know they’ve got a choice, even if you present them with one!

    Liquid layouts were fine and quite easy to produce for 800 & 1024, but now that we have 1280 on the scene too, I find this leaves unreadably long lines.

    Easy, I say - I’ll increase my font size. But then, I, like everyone else here, knows we can do this. Whenever any of my colleagues or friends complain, I just say ‘increase your font size’. They go ‘huh’? I show them, they go ‘Ooooh!’

    The problem is people don’t know how to do this. And seeing as so many of my layouts don’t look great at 1280, I’ve decided to ix my width to 800. I feel I’ve been defeated, but never mind…

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.