More Redesign Rambling: Columns and Sidebars
Published Saturday, September 6, 2008 @ 3:00 pm • 21 Responses
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 paragraph 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.
About this article
Related articles
- Notes on the 2008 Redesign: User Feedback
- Thinking About a Redesign and Trying to Get Unstuck
- Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS
- Horizontally Sequenced Display Order for WordPress Posts in Two Columns
- Perishable Press Redesign 2008
- Year-End Rambling, Boring Personal Stuff, Etc.
- Perishable Press Redesign
Dialogue
21 Responses Jump to comment form
September 7, 2008 at 5:02 am
IE6 doesn’t support this property, but if you don’t plan to support it, you can consider using it, as it would be much much simpler to deploy.
Oh, and yes, I hate sidebars. I plan to program a Terminator to go back in time and kill the first genius that has come with this terrible idea. I must’ve been like “hey, let’s put a long bar next to the content, so we can put all kind of stupid information like the latest comments, the whole archives, my twitter status, the photo of a kitteh, and yeah, why not even put the link I has to login to the admin — everybody needs to see this one.”
So, I won’t insist anymore, but you see my point: sidebars most of the time are the place the blog owner puts his garbage, like statistics or unuseful blogroll.
But I’m not scared by your threats Jeff. I’ve got a plan. I’m going to make a GreaseMonkey extension that remove the sidebar! Even though I hate using Firefox, I’ll do it if it’s what it takes :p
September 7, 2008 at 7:46 am
That actually sounds brilliant man.
Re: sidebars…hmm I actually like the current design without the sidebar, but the sidebar is necessity now imho.
Would be interesting if you could hide the sidebar using css trickery as some(most) Firefox users have js disabled as standard (thanks to no script).
A sideline question, will you be releasing any of the themes? as I would like to look at the source code of a few and start working on my first ever theme :p
September 7, 2008 at 8:17 am
well i’m assuming based on how I use firefox and some sneaky peaking at users that visit my site.
Yes a lot of people have js enabled but them some don’t.
Still your new them sounds good; can’t wait to see it.
September 7, 2008 at 10:15 am
@Donace: when I was using Google Analytics on my website, the proportion of JS disabled visitors was 1%.
September 7, 2008 at 10:20 am
ah for my site averaging between 30-100 per day of that 60% Firefox, from then between 60-80% has JS blocked, hence why I changed to a js-less theme.
Depends on the niche I suppose and expertise of people using it. Doesn’t help if I advocate actually blocking JS on my site :p
September 7, 2008 at 10:31 am
I can’t see any reason to block JS. I have never seen any in fact.
What do you block it for Donace?
September 7, 2008 at 11:51 am
a number of reasons actually, but foremost security reasons. Great nastyness is capable via JS.
Also very useful to stop videos etc autoplaying and reduces page load times as it only loads the basics, and if required JS can be allowed for bits you want.
I’ve had it off 2 or so years now and only hit ‘issues’ with some registration pages. Though just allowing the page temporarily works well enough.
September 7, 2008 at 12:01 pm
Security is the browser/OS problem. If you deprive yourself from the great user experience modern JavaScript provide, just because your system would feel insecure, then you should consider changing your browser/OS.
On Mac OSX, I can’t see any reason to turn JS off. It’s safe, and it enforces the user experience.
Also, most video player on the web are using Flash, so turning JS off won’t affect their autoplay feature. Unless there’s a little JS that does the task, I don’t know.
Anyway, the whole thing sounds like a bad idea to me. It’s like saying “hey, you should disable HTML, and surf the web in Text mod. It’s 10x faster, and no viruses!”. I’ve built my own lightbox the other day, and while you can view the photos without this little script, try with JS on, it’s not the same experience; you don’t get preloading, animations, confort, etc.
No really, I don’t understand your philosophy. C’mon, it’s 2008!
September 7, 2008 at 1:36 pm
have you seen windows?! loads of nasties for it.
Re: flash players, yea a js dohickey controls their insertion.
yes JS libraries are brilliant, what you can do with them is great. Yes it is very 2008 to use them BUT i’m from the older more paranoid generation (or just paranoid sect) that believe control over every aspect is better then free reign.
Then again for sites that I regularly visit that use JS I allow it.
I’m not anti-js just pro-control.
September 23, 2008 at 4:35 am
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
September 24, 2008 at 12:12 pm
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.
;)
September 25, 2008 at 11:37 am
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;)
September 25, 2008 at 11:51 am
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;)
September 27, 2008 at 11:38 pm
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.
Share your thoughts..
← Previous post • Next post →
« Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS • Perishable Press CSS Hackz Series Summary »
1 • Louis
September 6, 2008 at 4:38 pm
That may be true, but sidebars are not the only way to display informations — thanks God.
Though, as you seem to have decided already, I would only advise that you be careful while chosing wich informations to put on the sidebar. Information relevance is the key.
Also, if you chose to have the sidebar fixed, remember that IE is not your best friend with the handy
position: fixedCSS property.