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”
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.Wow, you must really hate sidebars, Louis! Are you anti-sidebar or something? :P
Seriously though, I will make the current theme available for use for anyone who prefers it over the new design. Keep in mind that a big reason I am changing the default design of the site is to increase usability, visitors, readers, exposure, etc. Selfish, I know, but it’s one of the reasons I like to play this crazy game.
Of course, I will do my best to keep the sidebar information useful and relevant. Actually, I am nearing completion with most of the design itself, but am having a heck of a time trying to decide which content, links, info to include in the sidebar. I am so used to just packing it all into a giant footer area that I am feeling overwhelmed by the possibilities and flexibility that a sidebar provides. “Information relevance is key.” Got it.
As for
position: fixed;, which versions of IE are non-supportive? As far as I know, IE7 interprets it correctly, but I am not sure. If it’s anything less than IE7, it doesn’t matter to me because I will no longer be supporting those terrible browsers (as far as CSS is concerned) here at Perishable Press.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
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
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.
Hi Donace,
Do most Firefox users really have JavaScript disabled? I would think just the opposite, especially given the recent rise in popularity of Ajax, jQuery, Mootools, and other JavaScript-based functionality. The reason this concerns me is that I am thinking about implementing some JavaScript tricks into the the new design. Hiding the sidebar is a good idea, and I am still considering it.
As for releasing any of my themes, some of the older (and I mean older) themes are already available for download, but I have not yet had time to prepare several of the newer ones for release. I certainly would like to, though..
@Donace: when I was using Google Analytics on my website, the proportion of JS disabled visitors was 1%.
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
I can’t see any reason to block JS. I have never seen any in fact.
What do you block it for Donace?
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.
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!
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.