Optimal width for 1024px resolution?
~ 14 September 2006 ~
Let’s face it: The jump from developing for 800×600 to 1024×n is inevitable; not only inevitable, but just around the corner, too. Many of you are considering the jump. Some of you have already leaped. I suspect that some time in 2007 most of us will knock out comps optimized for 1024px resolution rather than 800px if we’re not doing so already.
But perhaps just as important as when it will happen is how: What’s the proper width for a layout optimized for 1024?
With 800x600 it’s easy: Account for browser chrome and scrollbars (usually 40-50px) and then use as much of the remaining space as possible. This usually means a layout width of 750-760px.
If we use the same logic for 1024, browser chrome is still the same, so that leaves us with 974-984px as the “ideal” width. However, many users (including myself) don’t browse full screen, especially as display resolution in increased. Almost as if there’s an inverse relationship between browser width and display resolution — as the display gets wider, the browser width gets smaller (proportionately).
Additionally, in a time we all are, or should be, considering grid usage in layouts, is a random number like 974 an optimal number for dividing a layout into its necessary elements — sidebar(s), main content area, and so on? Fluid/liquid layouts are another issue, but even those have to be optimized for a minimum width.
I’ve been using 960 for some time now, as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities). I’d love to hear what all of you are wrestling with.
Update: Jon (first comment) brings up an interesting point: If your layout includes ads, 960 seems to facilitate IAB widths fairly well.
Update II: Jeremy (comment #22) makes a good case for fluid instead of fixed-width. My thinking here was aimed at optimizing for 1024 resolution and not necessarily 1024 fixed-width sites, per se (there’s a difference). Hence, I’ve changed the title of this article as it appears to have been misleading.
Shameless Workshop PromotionThis is one of the many topics we’ll cover in-depth in my all-day workshop, “Designing Elegant User Interfaces”. Only 4 weeks left before showtime — register now if you haven’t done so already!
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.