Notes on the 2008 Redesign: User Feedback
First of all, thank you to everyone who provided screenshots, feedback, and ideas for the new design. Your help is highly valued and greatly appreciated. From what I am hearing, the redesign seems to have been well-received, with many readers and visitors taking the time to leave a comment, send a screenshot, or email a message. As hoped, people seem to enjoy the vibrant colors, the translucent panels, and the fancy sliding menus.
Other people have pointed out the site’s oversize width. On screens that are 1024 pixels (or less) in width, the design triggers the hideous horizontal scrollbar. Using a 1024-pixel width was a conscious decision based on sound statistical information and a desire to maximize screen area. Based on my statistics, approximately 85% of visitors view the site through a monitor that is greater than 1024 pixels in width:
![[ Screenshot: Browser Statistics ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/browser-stats.gif "Over 85% of Perishable Press visitors enjoy a window width of at least 1024 pixels")
Another point of concern is the relative opacity of the rounded-corner background panels. Unfortunately, transparency/opacity varies greatly across browsers, operating systems, platforms, monitors, ambient lighting, psychological disposition, and many other external factors. Apparently, Mac screens tend to display brighter and more vividly than others, thereby reducing the effective opacity of the background panels and thus affecting content readability. So, depending on the set brightness of your monitor (along with many other factors), the colorful background image may interfere with your viewing experience and thus decrease overall site usability.
Viewing the site through my 22-inch HP widescreen monitor, everything appears exactly as intended:
![[ Screenshot: Relative Opacity of Quintessential Theme ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/browser-shot.jpg)
Moving on, a less-critical concern addresses the relative widths of the two central columns. As you can see, the difference in width between the main column and the side column is minimal. This similarity in column widths is awkward for some viewers, especially those with a keen eye for compositional balance and proportional harmony. After all, the vast majority of sidebars are significantly less wide than primary content areas. In fact, many designs feature sidebars that are narrowed further with two or more subdivisions.
After much contemplation concerning the ideal sidebar strategy, I decided to centralize site navigation by maximizing sidebar real-estate. At first, the design featured two columns of equivalent widths; however, even with the extra-wide, 1024-pixel <body> width, the primary column would have been too narrow to accommodate existing post content. This design constraint was essentially set with the previous design, which boasts an ultra-narrow, singular-column width of 500 pixels. Thus, for the new design, the main column requires at least 500 pixels, leaving slightly less for the sidebar.
Beyond these three concerns — screen width, panel width, panel opacity — there are many other great suggestions for improving and enhancing the new design. Here are a few of the more useful ideas:
- Decrease the height of the header area to display more content
- Decrease the contrast of the body text to improve readability
- Add a jump menu similar to the one used in the previous theme
- Add Gravatar support to comment area and recent comments panel
- Add quicktags, threaded comments, and quick-reply to comments
- Allow the background image to scroll or fade it out sooner
- Eliminate some items from the sidebar (e.g., Tumblr feed)
- Integrate show/hide toggling of individual comments
- Add some large social media buttons after each post
- Improve font selection for main paragraph text
All of these are good ideas, and I intend to implement many of them, but for now I need a break from doing any more work on the new design in order to prevent burnout. Frankly, I almost reached that point the night before releasing the theme, but fortunately the thrill of the launch pulled me through. It’s like, you can only stare at a design for so long before it either stops making sense or begins to making you sick. Needless to say, after four weeks and a few hundred hours working on the new “Quintessential” design, I need to break away and work on other projects for awhile. Eventually and most likely gradually, many of these suggestions will be implemented as opportunities arise. You know how it goes: setup a new theme, use it for awhile, make a few changes here and there, more use, more tweaks — wash, rinse, repeat.
For now, I feel comfortable with the design “as-is.” As I use the design, changes are inevitable, although I can’t say to what extent. Obviously, structural changes involving increasing <body> and column widths require more work than presentational changes involving opacity and contrast adjustments. Chances are that my next redesign will be a comprehensive “realignment” of this new design, much like the “Optimized” and “Lithium” themes were re-workings of the original “Jupiter” design. Realignments are an excellent way to improve your site without sacrificing brand recognition. In any case, I am planning on tweaking the site during the next few days, so if you happen to notice any of the changes, drop a comment and let me know if they are for better or worse.
28 responses to “Notes on the 2008 Redesign: User Feedback”
odd i thought I commented on this already….But one other function which I will think would be useful is allowing you to edit comments…just say you forget to say something or spelling mistakes!
Looking forward to see version 2!…or 6th hmm
Aaaah, so that’s what it looks like on your screen! I understand now why you don’t find the main typography too bold. On Leopard, the rendering is so completly different.
— what you see | what I see
PS: a (live?) preview feature would be great on the comment form. I would like to see how the HTML renders before submitting. That would also help me reread myself.
@Donace: You’re probably thinking of one of the previous posts where we were discussing more redesign ideas.. In any case, the comment-editing idea is also great, and certainly something that I am considering for the new design. There are so many ways to improve blogs’ commenting functionality that we could almost devote an entire site to the subject.. hmm
@Louis: I know! I am constantly struggling with finding a font that a suits my taste and doesn’t look horrible on teh Mac (I really hate the way Mac displays fonts). So, help me out here, Louis.. what font looks great at the same size on both machines? Is there an easy way to stop Mac browsers from distorting the fonts? I would like nothing more than to find a way to use a nice, thin font across platforms. Any ideas?
I have to say that the intentional use of 1024 pixels does seem a little misguided, and in hindsight I’m sure you can see that too – even if you won’t admit it! ;)
When we’re literally talking about a difference of 20 pixels or so, clearly it generally makes sense to lean in the direction that benefits more rather than less users. It’s doubtful that many if any people will appreciate or notice the additional 20 pixels of width your conscious decision brought to the table.
Still, you have done good work and thanks to the content being on the left it’s not like I have to scroll to view it anyway – a benefit of right-aligned sidebars. :)
While on the subject, do you know roughly how many actual people per day/month are affected by the horizontal scrollbar? It’s easy to underestimate when the percentage doesn’t seem so high. But when that low percentage actually translates to several thousand people, suddenly I feel a bit more responsible.
@Ryan: I know, I know — I’m kicking myself for such shortsightedness concerning the various widths used in the design. So, yes, I will admit it! ;) You raise an excellent point about the percentage of 1024px users; what’s 15% of 100k monthly visitors? Too many, I am sad to admit. Thanks for the eye-opener..
The more I think about it, the more I want to start over and try something completely different. Plus, you would not believe how many utterly rude comments and emails I get regarding the “horrible readability” of the text — it’s enough to make me want to scream! :P
Well I think that you may be over-critical, I don’t see a darn thing wrong with it – I like it a lot!
The skin seems (mostly) fine in my expert opinion.
Your one of the few people able to make a design with a transparent table and a background image without it looking absolutely horrible. The only real complaint I have is that it takes up a lot of cpu power (in comparison to any other site, of course) in order to scroll etc on the website. This is due to the transparent image borders (i like calling them ‘image borders’ ;P). Because they are semi-transparent, when you scroll, your computer has to do many times the normal processing power to view the website. I usually have a few programs running and a few tabs open in Firefox. I haven’t tried it in IE7+ though because IE usually makes many websites slower than what they are, so It would be a nightmare I imagine. I mean the website isn’t really ‘slow’ in comparison to other wordpress websites. It just seems not as ‘smooth’.
Sorry if this felt like bad criticism, it’s not.
I do like the unique style you’ve chosen for a:hover. I’ve never seen it before so that means you should be proud of it, it is a very good style. The a:hover on my website uses a background image and a border. If your curious, I could share with you how I managed to make it work without the text going to the left or right slightly when hovered. This is always a problem when adding borders / weight to hovered text.
One thing I am curious of; how I did you position the borders using an image map?
It looks great on my browser! I wish I had that much creativity in my head! It’s gorgeous!
It may just be firefox / mac issue, but it’s really hard to read what you’re typing in the name / email field. Anyway, that wasn’t what I was going to type – which was that I think one thing that might help is more paragraph breaks! Nice deisgn but it’s a little hard to read. Chopping copy up more might help.
@Cooltad: thanks for the great comment! So true about the heavy load on CPU for the transparent elements. On Firefox, the rendering of the various graphical elements is significantly “choppy”, especially so for the heavily styled
<pre>elements (something I intend to work on..). On other browsers, including IE7 (surprisingly), the rendering is virtually flawless, even during rapid scrolling. Of course, slower computers may argue otherwise!Also, thanks for the compliment on my link hover styles — something that I am very fond of.. But, even so, there is a noticeable lag time during the rendering of the extra-wide link borders when hovering long lists of linked elements. I like the feel of well-hovered link lists when the underline or border is very rapid; but with the styles I have given them on this design, they just aren’t as “snappy”..
For the positioning of the borders, I am unsure as to what you are referring.. do you mean the transparent content panels..?
@Marilyn: Thank you!! :)
@malcolm: Really? I have styled the Name, Email, and URL fields for the comment form to be as big and bold as possible. Perhaps that is the issue you are finding them difficult to read? I was assuming that the large font would facilitate easy reading, while adding some visual interest to the design..
Also, great tip about the text copy needing to broken up more.. I tend to write long paragraphs of text, but I am certainly aware of the issue and doing my best to break things down a little more!