Web Site Design: Serving all the customers is a good idea
If you have been to Angry in the Great White North in the recent past, you'll have no doubt noticed that the site has undergone yet another change. It was prompted by my commitment to make sure the site is as accessible as practical to as many web surfers as possible. In this case, the problem was with the 3-in-5 people who come to this website who have monitors set to lower resolutions.
Generally, the redesign of the website to a tab-driven design was well received. Everyone agreed that it loaded much faster than before, and I liked it because I could add content such as custom search engines by creating additional tabs, instead of loading up a single blog page with more and more stuff of interest only to some people.
The problem with the page design, however, was that for people with monitor resolutions of 800x600, or even 1024x768, the site was difficult to use. The banner and the tab menus were fixed in place, and on that resolution, they used up nearly two thirds of the vertical real estate.
Does this matter? Sure it does. These resolutions combined are hugely popular for readers of my site, according to Google Analytics. The most popular is 1024x768, with 47% of my visitors at that resolution. Next at 15% is 1280x1024, and 11% use 800x600. No one comes in lower than 800x600. The remaining 27% of my visitors are viewing the web sites at resolutions higher than 1280x1024.
So fully 58% of my visitors are coming in at resolutions under 1280x1024.
So with that number of visitors having real problems, I had to make a change. The obvious thing to do was to let everything scroll away, but I really wanted the tabs to be available at all times as a navigation aid. After much poking around, I came up with what you see here. Tabs are fixed by aligned vertically. The banner (which has been shrunk vertically as well) now scrolls away, thus allowing virtually all the vertical screen space to be used to display content. Just about everything else stays the same.
Amazingly, this was done entirely through manipulating the CSS file. Style sheets are extremely powerful, and once I decided on the layout, all I had to do was tweak the style sheet and rebuild it. The website altered dramatically in appearance and functionality in an instant. You know you are using style sheets properly when you can do things that quickly and easily.
So give this a test drive and let me know what you think. I hope that the user experience is improved for everyone, and not just the people at 1024x768 and 800x600.
Skew my story on Skewz.com
Rate political news for their bias, read related stories, and leave your own skewed commentary
Search for more opinions from Canadian bloggers on these related keywords
Google Analytics blogs blogging metrics tracking screen resolution usability
Sphere presents related news articles and blog posts
Sphere It!
Comments
My monitor is set at 1024x768. If I have my Favorites list displayed, then the tabs cover part of the title graphic, and the scroll bar on the right disappears.
Posted by: Ed Minchau at December 20, 2006 02:13 PM
I'm at 1280x800 using Firefox, and the Tab menu on the left is totally squished together and unreadable.
Posted by: bob at December 20, 2006 03:08 PM
Also, the content in the top header bar is truncated on the left side.
There is, however, a huge swath of white space between the right edge of your post and the advertising.
Posted by: bob at December 20, 2006 03:11 PM
I am running at 1680x1050 and all looks good in IE7. The tabs on the left do not seem to render properly on either Firefox or Opera - all the text is compressed together.
Anyway, I usually read from a big screen, but I like to use my notebook too - good thing you are paying attention to the common resolutions.
Posted by: Concerned Torontonian at December 20, 2006 03:27 PM
I use Firefox as well and can confirm the same problems as bob. I also noticed that in IE 6 your "angry" graphic header acts somewhat irratic - sometimes remains fixed in place as the header, sometimes not. In Firefox it doesn't stay fixed at all (which is better in my opinion).
The extra space is much appreciated though, even though my computers all have decent resolutions (1280x1024 or larger) I almost never surf with a maximized browser. When it comes down to it though, I prefer the frameless experience all the way. I don't mind going back to the top for navigation.
Thanks for the continued work!
Posted by: Denis at December 20, 2006 04:55 PM
IE6 at 1280x1024 has the same flaky problem with the header graphic overwritting the google toolbar and the top of the text in the blog.
Thunderbirds RSS reader scrolls OK but the tabs are all squished up as reported by the Firefox users.
Otherwise - a much better design - cleaner and more text on the page.
Posted by: DHuff at December 20, 2006 05:17 PM
Damn! Looks like I've got some work to do this weekend.
Posted by: Steve Janke at December 20, 2006 06:04 PM
Bravo, Steve! I don't feel like I'm wearing a visor anymore, one that I kept feeling like I had to push up on my head to get more light. There's lots of "head space" now for comments.
Thanks for your blog, thanks for always being open to suggestions, and thanks, even further, for responding so whole-heartedly to your viewers'/readers' constructive criticism.
I have absolutely no idea what my "monitor resolutions" are; I just know that I felt cramped when reading your posts and responding to them.
'Looking forward to more posts from Angry in the Great White North once you aclimatize to your new job.
BTW, Blessings of the Season, Steve, to you and your family!
Posted by: 'been around the block at December 20, 2006 06:05 PM
Your changes work for me, Steve! 'Hope you can work out others' problems and leave me with the improvements I'm enjoying.
All of the tabs on the left are perfect, totally readable, and your heading is great, too.
BTW, I never have trouble posting now, whereas until you made your changes, it was a crap shoot whether or not my comment would be "accepted." I usually got the message that "This page cannot be displayed," or something to that effect.
From where I sit, you get an A+.
Posted by: 'been around the block at December 20, 2006 06:09 PM
'Only thing is: all of the ads are BELOW the comments rather than beside them.
Posted by: 'been around the block at December 20, 2006 06:15 PM
Using IE6 at 800X600 the space and environment links are cut off and the ads appear after the comments. At 1024X768 everything seems fine.
Posted by: Pat at December 20, 2006 07:26 PM
I'm at 1280x1024 and your heading is truncated to the left side and your LH vertical tabs are overlapping and unreadable. Firefox 2.0.
Posted by: john at December 20, 2006 07:49 PM
Something is wrong with your tabs under Kubuntu 6.10 Firefox 2.0 - they all overlap and are ugly. Send me an e-mail if you want a screen - shot.
Posted by: Mike F at December 20, 2006 08:37 PM
Works for me but your text font drives me nuts--word kerning is non-existent. Not complaining, really, your plate overflows with meat and potatoes.
Posted by: Colin at December 20, 2006 09:09 PM
It looks OK with Opera 9.1 at 1024x768 except that the test in the tabs on the left and their text don't line up. The ads on the right are below the message at 800x600, which is my normal resolution for my old eyes.
The validator in Opera reported 286 errors on your page. This high a count is often due to a mistake like a missing declaration near the beginning that cascades. Load your page with Opera and hit Ctrl-Alt-V to run the validator.
Posted by: Jack at December 20, 2006 11:15 PM
Absolutely no offense indended; but if you are going to start blogging on website and blog "design strategies", etc., you should really ensure that you test any new features on all of the major browsers before you roll them out. It is one thing for us hacks to mess around with our design and screw it up -- but when your job is "blog master" . . .
Firefox is disproportionately popular among blog-readers, and at the moment your site is all but unusable for them given that I can't read any of the tabs.
Again, no offense intended -- I love the site and just want to be able to read it again.
Posted by: altacan at December 21, 2006 07:25 AM
It looks like the compression problem with the tabs on the left has been fixed.
Posted by: Concerned Torontonian at December 21, 2006 11:43 AM
Thanks for the changes. I thought it was just me as I'm running on a mini-laptop with a tiny screen. It will be great to get to read you while walking on my treadmill again. (I have to increase font size when I'm on the treadmill and with the old layout I'd only get a paragraph of text at time!)
Posted by: CanadianKate at December 21, 2006 02:48 PM
Using Firefox 1.5.0.7 on openSuse. Also have MSIE 6.01SP1 under Wine on the desktop. Also MSIE 6.01SP1 available in a W2K VMware guest on this Linux machine.
All display you site just fine. I usually only keep the left-right window size about 85% of the screen width, to allow left-most icons on screen to be accessed, and your site displays fully in that set-up too. Narrowing window (resizing) works to the logical design point, too. All at 1024 x 768.
Of course, the site fonts look gorgeous in Firefox on native Linux, but crappy fonts in MSIE.
Posted by: Eik Sorenson at December 23, 2006 04:28 PM
 
|
|
