1024×768 was a pretty good sized monitor resolution, and was probably the standard for laptops, back in 2002. As such, I designed the previous version of this site to fit in an 800×600 screen - or common resolution minus one step.
With version 2.0, I’ve decided to go ahead and push all the way out to the 1024x* resolution width. This decision hurts me a little bit today, as there are undoubtedly folks who either have monitors smaller than 1024px wide, or prefer to browse with a browser window less than 1024px wide. Until I built this new site, I was generally around 900-950px wide in my own browser window.
But here’s the thing. As monitor pixels become smaller and monitors become bigger, so do the standard browser window sizes. My last design lasted four years, and I hope this one will do the same (or better). I’m looking at the trends of monitors growing wider and wider, and I think that the current site width will be pretty common, or at least reasonable, over that time period.
Besides, my site has an undoubtedly tech oriented audience. I’m not going to gear the site towards the good folks who are still running Windows 98 on an 800×600 monitor.
Here is an excellent article by Cameron Moll that breaks down the optimal width for a site at 1024px wide. And yes, 960px is the width I set for my site.
The width of the pages is not the only change that helps with future-proofing the site. Another big change1 is the move of all content into a database. With the content (almost) fully abstracted from the page templates, future site design changes will be significantly easier and faster. Using a CMS for everything, WordPress being my choice of course, makes everything better. 
I’ve also tried to avoid really trendy stuff like rounded corners with shadows, web 2.0 gradients, reflections and other things I think will look dated in a few years. On my old site I went with all lowercase letters for a few things because it was hip at the time, and I regretted it. It’s a lot more hassle to go back and fix that stuff than it is to not use it in the first place.
The last bit of designing for the future is an area that can be pretty tough; URLs. I’ll get into this more in the next article.
- Which, as I’ve covered in previous articles in this series and will continue to expand on. It does lots of good. [back]
Popularity: 5% [?]
dhruv adds this Comment:
Hey
im pretty sure i read recently that the average screen size now is 1024- sort of surprized me, but its true, i looked into my stats for a few accounts and found it to be totally true
dhruv
November 16th, 2006 at 6:39 pm
Joe Casabona adds this Comment:
Great write up. I am currently working on a redesign and have been considering going bigger. The last time I checked w3c, about 25% of users still have 800×600, but that number keeps decreasing. I think this convinced me to go for a 1024x design!
November 16th, 2006 at 7:17 pm
David Emery adds this Comment:
Why didn’t you go for a fluid width design, that adapts to fit the window size?
This way you don’t have to worry about people still on 800×600, or people that don’t maximise their browser - I’m using 1024×768, but because I’ve got a sidebar open I have to scroll horizontally on this site.
It’s not all about display resolution - window size is much more important.
November 17th, 2006 at 1:53 am
Arp adds this Comment:
The first thing I thought of as I started reading was the Cameron Moll article - I’ve been designing for 960px ever since reading that. While the W3C figures show 25% at 800×600, my various site stats show the figure to be closer to 10% or less.
November 17th, 2006 at 5:44 am
Marc Comeau adds this Comment:
The 960px is important to make. It allows for some breathing room while still filling the screen.
Don’t worry too much about the 800×600 people. The website still loks good at that resolution and my tech oriented audience is giving me stats are showing below 10%. I’m also somewhat confident that this share will likely drop after the holiday presents are opened and installed.
November 17th, 2006 at 7:48 am
Alex adds this Comment:
David Emery - fluid width designs result in wide content columns, which hurt readability.
November 17th, 2006 at 8:32 am
lambic adds this Comment:
I have my resolution set as high as possible (1600×1200 on this computer), but I almost never maximize windows. Currently my browser is taking up about a quarter of the screen and your blog is fine as far as the content, but I don’t see your rightmost sidebar. Maybe your top menu should be moved closer to the left side to cater for awkward gits like me.
November 17th, 2006 at 10:09 am
David Emery adds this Comment:
Alex - that’s what max-width, larger font sizes and word spacing is for.
The readability of a slightly long line is certainly a lot better then one you can’t see at all, because it’s off screen.
November 18th, 2006 at 6:04 am
Alex adds this Comment:
Using max-width results in ugly gaps, etc. We can just agree to disagree on this one.
November 18th, 2006 at 8:29 am
Rudd-O adds this Comment:
Hmm… why didn’t you make your design/theme scalable/fluid? It’s got a lot of potential to last for the future, and it’s perfectly feasible!
Plus if you think about it well, in the future scalable user interfaces will also be the norm. Fixed pixel dimensions will then become a usability problem.
November 18th, 2006 at 4:04 pm
Rudd-O adds this Comment:
By the way, if you need help to get the fluid layout and you’re interested, I can freely share with YOU the HTML/CSS of the design I linked to in my earlier comment. Take the chance since after it’s done it won’t be sold for less than $1000.
November 18th, 2006 at 4:06 pm
erica adds this Comment:
From the different sites I have, I would take into account that the different resolutions sizes would also depend on what target audience you are going for. With a target audience of older ages, very younger ages, or target audiences that are not techies… my stats on non-tecie sites show approx 35% of viewers are 800×600 rez and approx 54% of viewers are 1024×768. The rest are either higher rez’s or mobile, web tv viewers… but then when it comes to a stie that is a techie driven site… a smaller number are 800×600 - approx 11% while 49% are 1024×768 and the last 40% are either greater res or mobile/web tv users.
So.. It does pay to watch your stats and adjust to the target audience for your own personal site and not the averages for all sites across the board. Just my 2cents
November 18th, 2006 at 6:18 pm
Building alexking.org 2.0, Part 1: Overview | alexking.org adds this Pingback:
[…] Designing for the future. […]
April 18th, 2007 at 10:52 am