More Redesign Rambling: Columns and Sidebars
After announcing my intention to redesign Perishable Press, I received some great feedback addressing everything from site architecture and navigation to appearance and usability. As the conversations continue, I want to spend some time thinking about usability, navigation, columns and sidebars. The current minimalist design features a single column layout with no sidebars. Content is located prominently front and center, with all navigational links appearing in either the oversized “footer” area or at the end of each individual post. As several people have pointed out, such navigational strategy (or lack thereof) discourages visitors from digging deeper into the site. Apparently, the pile of links at the bottom of each page — the menu, as I like to call it — requires far too much effort to decipher. I mean, really, just because it all makes perfect sense to me, doesn’t mean that everyone else will “get it” too.
So, here is where I’m at so far with the next redesign. I have a good idea of what the overall design will look like. Although I am going with another dark background throughout the site, I will be focusing my initial efforts largely on usability. The text will be larger and lighter to provide better contrast and readability against the dark background. Because of this improved usability, there will be no need for a secondary, “high-contrast” stylesheet; however, as I am aware that there will always be people who have issues reading light text on a dark background, I will provide an easy and hopefully obvious way for users to switch to one of my 14 or so alternate themes (including the current one). So, we will have bigger, better-contrasted text, especially for paragraphs, lists, and other “texty” areas. Links will also be better emphasized with a solid underline. Although I disagree with some of the more hardcore linkologists out there who insist on highly contrasted, underlined text on every link throughout the site, I do agree that links need to be clearly identifiable, especially within <p> text.
Beyond these general usability improvements, I am still grappling with the best way to implement a solid navigational system. With the current single-column theme, the location of navigational elements is really a matter of vertical positioning within the page. You know, main links near the top, post-related links in the middle, and miscellaneous links at the bottom. To move beyond this fairly limiting situation, it seems necessary to embrace a multi-column layout. I really like some of the new “magazine-style” layouts that people have been reiterating and cannibalizing for the past year or so, but I am not really excited about the rigidity, formality, and predictability of such designs. One of the great things about some of these new, “non-traditional” designs, however, is that they are really pushing the envelope in terms of how content may be arranged on a page. For example, I have seen some great designs where a double-width sidebar is broken up vertically into various regions, with single-width and double-width panels alternating alongside the page’s main content. Other great layouts mix and match multiple columns in very creative ways, obscuring clearly defined sidebar regions into overlapping “featured-content” panels. Really, the possibilities are endless and often overwhelming.
Fortunately, this site has certain design requirements that eliminate many of the more frivolous and experimental layouts. For example, I want to keep a strong focus on content by displaying articles prominently and with as few distractions as possible. In the current minimalist design, I became obsessive about this requirement, emphasizing article content at the expense of everything else. Unfortunately, this strategy now manifests its own navigational shortcomings, and thus needs to be tempered with a strong dose of usability for the next design. Given this reasoning, I am thinking about implementing a simple two-column layout, featuring content on the left and a sidebar on the right. The crux of this plan rests on having two page regions — content and sidebar — that are consistent and well-defined throughout the vertical length of each page. This, I think, will enable the content and navigational tools to coexist peacefully alongside one another with minimal interference. This may seem completely obvious to those of you who already grasp the functional and aesthetic significance of the common sidebar, but I honestly had to “think this one out” before understanding it well enough to embrace the concept.
So why not two sidebars, either adjacently positioned or straddling the main content? First, the width of the main content area needs to be at least as wide as it is now, due to self-imposed dimensional constraints of images and other post content. To include two sidebars into a layout that is say, 1024 pixels wide, leaves less than 250 pixels for each sidebar. This may work for some, but for me, that is just not enough room for anything other than badges, links, and icons. Trying to force full-post titles into 250 pixels requires small font sizes, broken lines, or both. Then, once you try cramming any worthwhile amount of content into such a narrow column, the sidebar begins to look forced, tedious, and cluttered. Add a second sidebar to the mix — on either side of the main content — and you might as well save yourself the agony and just download a ready-made theme instead. Thus, for the next redesign, I am going with a nice, wide, single sidebar that will be kept as clean and simple as possible. Anything less limits effective navigation; anything more detracts from the main content.
21 responses to “More Redesign Rambling: Columns and Sidebars”
Guys: whether js or no js, the page designer/coder needs to anticipate both eventualities and have a coping strategy. Where js is essential for the proper operation of the page (say, an AJAX contact form with some client-side validation) the end user with js turned off (e.g. via NoScript) will need some indication of that fact to be clearly posted on the page, lest they think the whole shebang is broken.
The strategy for delivering the js-driven page can be quite cute. By way of an example, take a look at a WP blog I’m birthing now.
Heads-up: I’m not actively link-building for this site yet, as you’ll probably guess.
The page is at http://www.slowcookingdigest.com/contact/
Try it with js on and js off. See if you can figure what I’m doing there, and feel free to ping a message to me through the form (call it testing, QA, whatever).
I’m with Louis on this one. Javascript has issues, for sure, but the Web is pretty dreary place without it ;)
Jeff
Hi Jeff, you are absolutely correct about the importance of unobtrusive and gracefully degradable JavaScript. I am no expert at it, but I try to use JavaScript as progressive enhancement, such that all page content loads properly and remains accessible with or without JavaScript support.
Incidentally, looking at the contact page of your slowcookingdigest.com site, it seems as if users are completely out of luck unless they have JavaScript enabled..? At least, that is what I observed while trying the page with JavaScript both enabled and disabled. Preventing use of the form to users without JavaScript seems to go against the principles we are discussing here. Especially when it comes to critical elements like contact forms, degradable JavaScript should definitely be implemented — think of it as an enhancement, rather than a requirement.
Great topic, btw — one of my favorites! :)
Jeff:
Oh, Jeffrey! (I bet only your parents would ever call you that)
I can just see you slavering over my slow-cooked pulled pork or spicy mackerel.
Dude, we all find a time when we decide to draw a line in the sand. Your line is all too apparent in this IE6 experience I’m enduring right now ;)
It’s an email contact form. Probably the biggest attack surface any site can expose to TEH INTERNETS.
Gimme a break. I’m very reachable, but on my terms. Is all.
Is that really so unreasonable?
ps: there’s a ton of stuff happening at both ends of the connection.
;)
Hi Jeff, there is no need to endure the torment of unstyled content while visiting via IE6: simply click on one of the style options (light or dark) located at the top of every page on the site. The current theme does support IE6, but due to a JavaScript bug that I couldn’t work out, the styles need to be applied manually via the user. Try it out and see for yourself — should work great. Else, you may also skin the site with any of my 15 or so themes; just scroll down to the “WordPress Themes +” link at the bottom of any page and have at it. No need to go naked, although I provide a specifically designed unstyled theme for that as well.
Jeff
I wuz joshin’ ya man. Like I said somewhere else, I actually prefer a no-BS style-free read when there’s this much to take on board.
Fact is that someone has to make a stand and focus ahead instead of staring astern. That’s what’s been holding the web to ransom for a decade.
Wordpress, inter alia, should have embraced the OOP in PHP5 and just plain re-factored the app. They had (have?) a huge following and would have been very influential. Instead, what we’ve got is a WP that is increasingly detached from mainstream PHP, with its hundreds-per-page-served error log entries about undefined indexes and deprecated calls or whatever.
As for my AJAX contact page (note: it’s not actually a ‘form’), it uses SimpleXML and XMLDOM (like a lot of what I do) and is therefore PHP5-only. Anyone who can’t be arsed to turn on js to make it work is likely someone I’d rather not hear from;)
Oh, there is one amusing phenomenon arising form the no-style view. If I drop the window size to 800×600, the comments box has definite ‘neo-cubist train-wreck’ overtones.
I can live with that though, right?
Really, it’s a non-issue. Already wishing I hadn’t thought to comment on it;)
Yeah, I understand where you are coming from, I was just trying to contrast the implementation of your contact form with the ideals you were so boldly proclaiming in your initial comment. Generally, when people open with such comments, they do so with a vehement passion for design principles such as unobtrusive JavaScript and graceful degradation. It is refreshing to see a more casual interpretation of the concept! ;)
I do agree about your WordPress concerns, however; I think that we have seen its “peak” in terms of popularity and developer involvement. It seems now like its more of a cash cow than a thriving blog platform. Plus, with the relentless and unnecessary upgrades, the whole project is just getting ridiculous, especially in terms of “feature bloat.”
My two cents, anyway..
Security and javascript I’d say is mostly a problem with IE and Windows. Not to bash Windows, more the fact that we all use Windows with the most possible privilege (which means that if someone can break out of the sandbox, they can destroy your whole operating system and not just your personal files)
I surf with javascript turned off, but mostly just because it cuts down on the number of annoyances. I don’t actually LIKE when leaves float down my screen behind or in front of what I’m trying to read.
I don’t LIKE when javascript tries to fill the whole window with an ad. I especially don’t like the flash player, and a lot of people use javascript to summon it.
Of course, if I want to use javascript for something I turn it on at the touch of a button (thanks, Noscript!) but I usually don’t.
Most of the GOOD/best sites I visit employ javscript, but do not require it.
But I also sometimes visit very bad sites where it degrades the experience instead of adding to it, so it’s annoying when people depend on it to do basic and normally inappropriate things like basic navigation.
On layouts:
Lately (don’t know where) I saw a really nice trick with putting a navigational pane in a float and stuffing it into the actual article near the top. I wish I knew where. A lot of sites pull it off really badly. One of the most common mistakes with that sort of thing is setting a fluid width for the article and links, but a fixed width for the navigational stuff.
Either the links and up one-word-per-line and it looks bad, or worse (I’m on a very small screen right now and worthy of curses), the navigational area fills the whole screen and the article text ends up one word per line instead.
As for IE6…. Just ignore it :P I’m sure you won’t, you’re too good for that.. But I make a point of it. I write valid CSS, CSS degrades gracefully, and my layouts tend to linearize now – so what it looks like to IE6 users doesn’t really bother me as long as they can access it. Normally once they arrive they are nagged to upgrade to a proper browser anyway.
It may lose me visitors, but it’s for a good cause.
Viewing the web should not be deliberately made a chore by web designers,
and web design should not be made a chore by archaic browsers. Writing code for the web should remain always fun.
My new design for this site (which I hope to finish within the next few days) employs a healthy dose of JavaScript, but it doesn’t require it for proper viewing. Everything is 100% degradable and unobtrusive; the portions of layout which employ JavaScript to enhance visual presentation appear seamless and look great even when JavaScript support is unavailable. It has taken some extra time to attend to such functionality, but I know that there are many people such as yourself who surf 99% of the time with JavaScript disabled. So to me, it’s worth the effort..
Excellent commentary on layouts, browsers, and IE6, by the way. As explained in a recent article, I am dropping support for IE6, but only in regards to CSS and JavaScript. From now on (or until IE6 finally disappears off the face of the earth), I am using conditional comments to hide all CSS and JavaScript from older versions of IE; so basically, IE6 users will get a plainly styled XHTML page. This works if you design your pages in such a way as to display properly even without CSS and/or JavaScript. I also include a conditional message explaining why the page looks so plain, and then “encourage” them to upgrade their browser to something better (like Opera, Firefox, Safari, etc.). Given that most of sites are seeing less than 10% of IE6 users, I feel the time is right to let it go and move forward.