Should My Designs Be Deep and Wide?

I’ve been designing websites now since 2003, and I’ve seen quite a few web design fads go by. At one time, left-aligned, horizontally “skinny” designs (barely 500 px wide) were the trend; then, it was horizontally- and vertically-centered larger background graphics, with an iframe floated atop them.

Now, as more and more computers are coming equipped with wider screens, I’ve seen more designers widening their designs to 1000 pixels or more–something I would have never seen coming back in the 500-px days. Some layouts are so wide that you have to scroll sideways if you’re on an older monitor.

Since I like to design sites that are accessible to as many monitor sizes as possible, I’ve found myself wondering if I should follow suit with the current “wide design” trend. Since widescreen monitors have become so popular, should designers now build wider layouts for their websites?

Wider Layout: Pros

More space to fit content “above the fold”
You can fit much more content on a wider layout, since you have space not only for text-based content, but for multiple sidebars full of widgets, photo thumbnails, video previews, playlists, etc.

Content is more spaced-out and readable
Since wider layouts use more of the screen space, your content can expand a little; more white space makes it much easier for users to read and enjoy your content, since it isn’t all crammed together.

With more space, you can use larger layout images
Wider layouts can mean bigger graphics–you can create huge background images and float your content on top of them, or experiment with many different images joined together to create a collage effect.

Wider Layout: Cons

People with smaller monitors have to scroll sideways
In the hunt for more and more horizontal space for web content, people with older monitors are going to be left out. Narrower screens will force such users to scroll sideways to see all your content (VERY annoying), and not everyone is going to upgrade to a new monitor just to view your site.

Page can take longer to load
With all this awesome media-rich content, users could be stuck waiting for your page to load a little bit longer, especially on slower connections (like mobile users–more on that below).

  • Not mobile device-friendly
    Widescreen layouts are definitely NOT mobile-friendly–and much before now, you would have needed to make a separate mobile layout so that you didn’t leave your on-the-go users behind. BUT…there is another solution.

    Responsive Design: Those With Wide Screens See a Widescreen Layout!

    A design that shrinks and expands with differing screen resolutions (also called “responsive design”) is the new way to support all your users’ screen size needs. But it actually has its roots in a design practice I learned back when I first started in webdesign.

    In the early to mid-2000s, 800px x 600px was the standard screen resolution, though some people had upgraded to a larger 1024px x 768px resolution. Many of my fellow webdesigners fixed this problem with “alternate layouts”–they made one layout sized for 800 x 600 viewers, and another for their 1024 x 768 viewers. Then, on their splash pages (entrance pages which have gone the way of the dodo bird), they had simple links for you to click to go to each design.

    Today’s responsive design, with its automatic “resizing” to visitors’ screen resolution, is the best way to get a “widescreen” feel for users whose screen resolutions can make the most of it. Yet it also doesn’t lock out smaller screens–it’s an automatically customized user experience, one that was heralded by the “user choice” model of the mid-2000s.


    Widescreen layouts don’t have to be just “widescreen” anymore–with responsive design, you can make a layout that satisfies most every visitor’s viewing needs. It’s a lot more backend work, but it’s definitely worth it!

  • 2 thoughts on “Should My Designs Be Deep and Wide?”

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.