Let your users scroll

There are certain design choices that are very effective in making me want to leave a website as quickly as possible. One of the best is when the designer has decided that the entire layout should use a fixed width and height. With very few exceptions doing that is a really bad idea.

Fixed size layouts are typically found on Flash sites, and to me confirm the inability of many Flash developers to understand how the Web works. It’s a real giveaway that the designer has come straight from a print/TV/multimedia background and has not yet grasped that the Web is different.

In fixed size layouts, content (provided there is any worth mentioning) is normally treated in one of two ways:

  1. Chopped up into tiny fragments that the user has to navigate through by following a long series of links.
  2. Displayed within a (small) scrollable portion of the screen. All too often the user is not allowed to use the normal scrolling mechanism built right into their web browser. Instead the designer feels the need to be “original” and “creative”, and come up with an entirely new scrolling interface. No regard is given to usability or accessibility.

Designers that create fixed size layouts seem afraid to let the page scroll. Afraid to let the Web be the Web and behave like the Web.

Ethan Kaplan has more to say on this subject in Why is it so hard to grasp scrolling?, a great article about fixed design and why it hinders usability:

Flash is like retrofitting a perfectly good industrial building. Sure, its not pretty, but with the right tools, the right people and the right knowledge, it can be made into anything you’d like it to be. 100% flash, 4:3 websites, and their ilk are the gaudy exteriors on otherwise serviceable canvases. Not necessary, and terribly tacky.

Spot on.

Posted on September 15, 2006 in Quicklinks, Usability

Comments

  1. While I absolutely agree that this sort of interface is almost always a bad idea from a usability perspective, I feel compelled to note that the place I’ve seen this used the most — personal portfolio sites of print designers or other creative types — do sort of lend themselves to being creative and having less regard for usability/accessibility.

    I think the reason these designers “feel the need to be ‘original’ and ‘creative’” is that they’re trying to get jobs in creative and competitive areas. Their creativity and ability to think outside the box is actually a marketable skill they want to show off. And, frankly, if I were trying to hire a print designer, film editor, animator, or similar, I would probably not be that concerned about whether or not they followed basic web usability rules. But, I would definitely be interested in how creative and outside the box they were able to think.

    There is a continuum between design and art, and I don’t see any reason that everything on the web has to tend towards the design end of it. If someone wants to make a site for the sake or art, or an artist wants their site to be artistic in nature, I don’t see why it should be discouraged.

    Bottom line, I guess: not every website is created with the purpose of being a usable, readable, accessible resource for the general public. Sometimes they’re created just for the sake of being cool or different, because the creator intends to display just how cool or different he or she can be. Like most things on the web, it’s all about knowing your audience and giving them what they want and/or expect.

    I say all this only because I’ve never stumbled across, say, a news site that used the kind of layout you described. If I did, I would absolutely have the same reaction as you and be turned off very quickly.

  2. September 15, 2006 by Roger Johansson (Author comment)

    Jeff: Agreed, personal portfolios that are only meant to show off your non web related graphic design skills can be an exception. But to me the most impressive and talented designers are those who embrace the characteristics of the medium and work with it instead of trying to make it something it isn’t.

    I’ve seen boxed-in designs on plenty of informational sites that definitely should have used a different layout. I don’t have any examples handy since, well, I don’t stick around on those sites long enough to remember them.

  3. @jeff:

    I’m sorry, but I find this horribly ironic:

    I think the reason these designers “feel the need to be ‘original’ and ‘creative’” is that they’re trying to get jobs in creative and competitive areas. Their creativity and ability to think outside the box is actually a marketable skill they want to show off.

    Fixed-width and height sites are pretty much inside-the-box, no?

  4. But to me the most impressive and talented designers are those who embrace the characteristics of the medium and work with it instead of trying to make it something it isn’t.

    Absolutely — but most of them I’ve seen aren’t from designers. They’re from visual effects mavens, animators, musicians, etc.

    I’ve seen boxed-in designs on plenty of informational sites that definitely should have used a different layout.

    Fair enough, then! :)

    Fixed-width and height sites are pretty much inside-the-box, no?

    Hehe. Cute. :)

  5. There are seemingly two separate issues at play here and I feel the message is getting confused. The title and much of the article seem to reflect on ‘fixed width and height designs’ but really seemed to be a knock against Flash-based sites that feel the need to reinvent the usability wheel.

    The whole idea of a fixed-width/height design isn’t really the issue. Anything not visible outside the confines of the browser window will have scrollbars, allowing the user to access that content. (As much as people complain about horizontal scrolling, I find the argument as compelling as telling me to keep all important content ‘above the fold’.)

    The problem with Flash is that designers and developers HAVE to reinvent the wheel partially because of the inability to have flexible height or width Flash containers. Therefore, they work within the limitations of their medium and create scrollbars or paging mechanisms for anything that can’t sit within the dimensions of their ‘canvas’.

    Oh, and what Crofty said, too.

  6. September 15, 2006 by Adam A

    Is it me, or does every post on every blog contain a (usually first) post by Croft?

    Get back to work, mate!

    On topic, I started out as a flash designer. I did all the bad things you talked about in your post. What made me change? Zen Garden, as well as this blog. Now I am happily coding using CSS + XHTML, and accessibility is always on my mind. These days, I usually cringe when a client asks for flash, and have become pretty good at convincing them that a rotating 3d logo is not a good thing.

  7. Adam, Rotating logos are perfectly acceptable so long as they’re animated GIFs.

    I also used to be really into flash, I stumbled across the were-here forum when I was in college and got hooked. I even awed over 2advanced at one time!!

    Now when I look at the supposedly functionaly 2advanced sites, I can see they’re actually a big load of rubbish!

    ~~~

    I think you’re wrong in identifiying scrolling as an inherit part of ‘the web’. It’s more an inherent part of HTML documents. Although it’s true that most tiny text areas on flash sites with crappy scroll bars were awful work arounds, flash also opened up a lot of new ways to interact with information that weren’t there before. A very strong case for flash would include data visualisation, such as newsmap

    Scrolling and content interoperability via Microformats / XHTML / RSS etc is all very cool (i love it!), but it really isn’t the end of the story for the web. It’s more like a new foundation rather than an end in itself… okay, back to eating parma ham and cheese, good evening!

  8. I’ve even seen Flash sites with no scrollbars and that have hidden the browser’s scrollbars, forcing me (at 800x600) to leave the site, because I can’t see half the page…

  9. September 15, 2006 by Roger Johansson (Author comment)

    Jonathan: Hmm. Yeah I guess you could read the article that way. I think the article I’m referring to can be read that way as well.

    Anyway, the thing I have a problem with is making users watch your content a couple of paragraphs at a time through a tiny scrollable area with non-standard scrollbars. Whether that effect is achieved using Flash or JavaScript doesn’t really matter.

    But then again, the whole idea of full-Flash sites or using Flash for anything that is better left to HTML+CSS+JS seems backwards to me.

    Adam: No, it’s not just you ;-).

    Matt:

    I think you’re wrong in identifiying scrolling as an inherit part of ‘the web’. It’s more an inherent part of HTML documents.

    Fair enough.

    flash also opened up a lot of new ways to interact with information that weren’t there before

    Absolutely. Flash used well is cool. Flash used where HTML + CSS + JavaScript should have been used is silly.

  10. @Matt:

    IMHO, rotating logos are never acceptable, no matter how they are implemented. They have no real benefits, but they distract users from the actual content.

    The only good embedded animations I’ve ever seen are the ones at How Stuff Works.

  11. Sometimes A is better than B. That’s all there is to it. But, in the end, a lot of people just don’t pay attention to information design. If there is a lot of content, putting it in a small, scrollable area is foolish, and if you are stuck because Flash can’t adjust, then you should consider not using Flash.

    The problem I see is that there are a lot of people who only know how to make a site with Flash, or people who only make sites with HTML + CSS. I think the real talent is knowing what the right tool is for the right job, and not letting one technology box you into a design that hurts the reader’s honest ability to access your site’s information. For a majority of the sites I go to, overused technology just gets in the way.

    I also think that a lot of ‘creative’ types feel some sort of obligation to use Flash because that’s what everyone has done before them. However, when you see a beautiful, elegant, and sophisticated site that show you everything you want while not requiring a plug in or load times, while allowing you to deep link to the relevent content, then you know you’ve actually stumbled upon some talent, not just an artist who sat down with a Flash tutorial.

  12. when you see a beautiful, elegant, and sophisticated site that show you everything you want while not requiring a plug in or load times, while allowing you to deep link to the relevent content, then you know you’ve actually stumbled upon some talent, not just an artist who sat down with a Flash tutorial.

    What about when you see a beautiful, elegant, and sophisticated site that show you everything you want designed with Flash? They do exist, you know. And to imply that Flash designers have no talent? That’s a little harsh, I think.

    You say “the real talent is knowing what the right tool is for the right job,” and then you imply that Flash is always a bad choice. But what about when Flash is the best tool for the job? Because sometimes it is.

    Design isn’t about tools. Design is about communication and evoking emotions. You can do this with all kinds of tools — including Flash.

    Even though I’m not a Flash designer and am an (X)HTML/CSS advocate, I think it’s really narrow-minded to suggest that all Flash design is bad and anyone who does Flash design has no talent.

  13. In my opinion, Flash is best used when a) as noted above, someone wants to show creative, out-of-the-box thinking, or b) the marketing message primarily lies on showing how cool one’s product is. For instance, car manufacturers often use flashy, dynamic animations for showing how amazing and manly their new car is. I guess that’s what most car-loving people want to see and with that we’re back at choosing the right tools for the job.

    Any website that should be available to a wide range of people and is mainly informative, should be HTML.

    “I think you’re wrong in identifiying scrolling as an inherit part of ‘the web’. It’s more an inherent part of HTML documents.”

    @Matt: a mighty long time ago the Web was all about text. It’s main purpose was displaying text. And scrollbars naturally came with that. I think scolling can be called an inherent part of the Web.

  14. Why not give a user/visitor more options ? Own prference ? Like at:http://www.vision.to/CMS/Home/Preferences.php , this is nothing new, but visitors appreciate it :-)

  15. Of course, many Flash designers have talent, but… “full Flash” webistes make little more sense than “full JPG/GIF/PNG”. There may be exceptions, but still…

  16. Even if Im not a big fan of Flash only sites I completely agree with Harmen:

    I guess that’s what most car-loving people want to see and with that we’re back at choosing the right tools for the job.

    Overall it is about the purpose of the work you are doing and sometimes especially in image centered campaigns flash is the most appealing way to do it. A lot of times an alternative accessible version is not in the budget - sadly enough but true. Of course Flash only is totally inacceptable for informational sites (but can definetely add great value to ilustrate or interactivate things and create a richer overall experience).

    Although I am totally convinced of xHTML/CSS based web design, i have to defend the good flash designers/programmers which ARE out there. Statements like

    then you know you’ve actually stumbled upon some talent, not just an artist who sat down with a Flash tutorial.

    are ridiculous. It takes a lot of programming skills to master Flash perfectly and is nothing to look down upon. That’s also how you can often tell the difference between people that know what they’re doing (object oriented programming the project) and people that think Flash is a cool animation/drawing tool.

  17. Aren’t you just talking about good vs bad design? Boxed in designs can work perfectly well if designed well, if the site has little content to start with I see little problem (also designed well remember). However if the site has tons of content then its always going to be hard to pull off.

  18. To me ALL of this depends on the content and the site’s goals. I must say I’m a huge fan of the out-of-the-box-creativity of many pure Flash sites like BillyHarvey.com, but that’s because I can support them and actually get some enjoyment from exploring them and figuring out how the interface works. If I couldn’t support them or didn’t get a kick out of them it’d be an entirely different matter. Being I’m an accessibility, usability, and standards advocate, I see how Flash developers get it wrong all the time mostly by not offering the Flash presentation as the alternative as it often should be, and I don’t make them myself because I understand and appreciate the fact not everyone can support them or have some fun using them as I can and do.

    When it comes to scrolling, because I can use a site like the Flash site I mention after figuring it out (hint: click on the photos, and the background to zoom out and see the photo-based navigation), I’ll enjoy not having to do it and support that method as the designer’s choice. If I do have to scroll, all I ask is that I only have to do it in one direction, preferably downward. And if I have to click a lot to get around, make the pages lightweight please.

    I do not like sites that make me scroll every which way or don’t accommodate my resolution (1204x768) and I strongly advocate 800x600 support as well. These are my personal and professional preferences. I can understand fixing widths at times (and masthead heights) as sometimes it seems to be the best method of accommodating a particular design, Thompson Center Association, for example, which I made and felt it needed to be fixed width with a fixed masthead height for design reasons. It’s highly accessible - that’s what I do - but it does scroll in one direction for the vast majority of users and works in 800x600.

  19. if the site has little content to start with I see little problem

    That’s my view too. I’ve only designed one site that’s had internal (default browser) scrollbars and the decision to go with a fixed width/height content area was largely to do with the very little content supplied by the client.

  20. Interesting tutorial/article here related to serving content to the extent a user can support, from basic html through to Flash:

    http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html

    BTW - Flash has supported resizing (an “elastic” stage) for several versions now. True, many Flash designers/developers continue to use fixed height and width layouts. I think that’s either their aesthetic decision or ignorance, but it’s not a limitation of Flash itself.

    And without wanting to be in any way incendiary and with all due respect to Roger (whose writings I follow faithfully and who I admire profoundly), a comment like “It’s a real giveaway that the designer … has not yet grasped that the Web is different” suggests that Roger’s web is the web. The web is a big place, speaking to lots of needs and there’s room for all sorta folk. ;)

    The point I guess is “use your tools appropriately”.

  21. September 19, 2006 by Isaac Lin

    There is a significant difference with horizontal scrolling versus vertical scrolling for most users. With vertical scrolling, I can easy scroll large increments using the keyboard (Page Down and Page Up keys) or the nearly ubiquitous scroll wheel, without having to move the mouse pointer. Unless you have one of the much less common pointing devices with ways to scroll sideways, it is much harder to easily scroll through content horizontally without interrupting the flow of your web navigation with the pointer.

  22. @Jeff Croft: You’re right, and I apologize for implying that Flash designers can’t be talented and sites can’t be wonderful if Flash is used. That was not my intention, and I acknowledge that Flash can be the right tool. I do believe that Flash is used far more than it should be, although I do see it being used in a less invasive way, which is wonderful.

    www.etnies.com is a site that I have a lot of respect for (no affiliation). It uses flash to enhance the site, while sticking to xhtml and css where that’s appropriate. The site is interactive, well balanced, appropriate for both the product and the demographic, usable and intuitive. I wish there were more sites like this.

  23. Too many people are breaking the Internet! I can’t stand it when I go to a site and want to right click to copy and paste a link and they have right click disabled! It is extremely frustrating! People don’t understand that if users want the content…they’re gonna find a way to get it one way or another.

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.