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.


Dialogue

21 Responses Jump to comment form

1Louis

September 6, 2008 at 4:38 pm

Anything less limits effective navigation; anything more detracts from the main content.

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: fixed CSS property.

2Jeff Starr

September 6, 2008 at 5:08 pm

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.

3Louis

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

4Donace

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

5Jeff Starr

September 7, 2008 at 8:05 am

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..

6Donace

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.

7Louis

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%.

8Donace

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

9Louis

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?

10Donace

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.

11Louis

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!

12Donace

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.

13Jeff M

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

14Jeff Starr

September 24, 2008 at 11:37 am

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! :)

15Jeff M

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.

;)

16Jeff Starr

September 24, 2008 at 2:37 pm

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.

17Jeff M

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;)

18Jeff M

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;)

19Jeff Starr

September 27, 2008 at 7:42 pm

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..

20SneakyWho_am_i

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.

21Jeff Starr

September 28, 2008 at 9:28 am

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.

Subscribe to comments on this post


Share your thoughts..

TopRead official comment policy

Contact Perishable Press

  • Contact Jeff via form

Search Perishable Press

About Perishable Press

Perishable Press is the virtual playground of Jeff Starr — visionary, founder and lead developer of Monzilla Media, a small web and graphic design company in the lush desert oasis of Moses Lake, Washington. Perishable Press features articles and tutorials on many aspects of digital design..

Read more..

Perishable on Twitter

Google tells users to drop support for IE6! @ http://www.tgdaily.com/content/view/40785/140/

Perishable on Tumblr

WordPress Tip for Multiple Themes

Sunday, 4 January 2009, 5:16 pm

If your site makes available multiple themes for users to choose from, remember to include the JavaScript (or any other required code) for any statistical applications that you might be using, such as Mint, Google Analytics, and so forth. I am not sure about the various WordPress statistics plugins, but they may need to be included as well. A good way to check if your stats plugin is tracking data across all themes is to either visit a few pages that you know others aren’t hitting, or else activate each of the alternate themes and check the source code of each one for the required code.

Earlier today, I realized that only several of my most recent themes included the required JavaScript for Mint and Google Analytics. I am now in the process of editing each of the 18 themes available for users at Perishable Press. Haven’t decided on whether or not both statistics apps are needed for all themes, but I will certainly be using at least one of them to keep an eye on everything.

Insane Christmas

Monday, 22 December 2008, 9:47 pm

For as long as I can remember, Christmas has always been a relatively peaceful affair. Sure there’s the usual holiday stress — traffic, shopping, presents, relatives, and all that goes with the preparation of a traditional celebration, but when it’s all said and done, you get to relax and enjoy the peace and harmony of gathering together and basking in the reason for the season: the birth of Christ.

This year, however, the stress factor has been kicked up a few notches, making for a rather insane Christmas if I do say so myself. In addition to the usual holiday chaos, we are currently purchasing a brand new home, and quickly realizing the incredible amount of work involved in the process. If you’ve ever bought a newly built home, you know exactly what I am talking about here.

Plus, as if all the paperwork, inspections, insurance, costs, and anxious anticipation weren’t enough to confound the usual holiday stress, we are also packing up everything, dealing with kids, working full-time jobs, and — beginning on Christmas Eve — moving into our new house.

It certainly is all a great joy and blessing to have such amazing things going on, but combined with the work that I do on the Web — blogging, designing, projects, helping people, and so on — it really becomes all too much rather quickly. We are doing are best to get through everything with our sanity intact, but I have to admit that this is the most insane Christmas I have ever experienced.

New (4G) Blacklist Now in Beta

Monday, 22 December 2008, 9:27 pm

Just a quick note to anyone interested in securing their websites against malicious activity, spam, and other nonsense. Several months after releasing my 3G Blacklist, I have finally begun work on the next incarnation of the blacklist: the 4G Firewall!

The first part of the blacklist is now ready for testing, and I plan on setting it up on Perishable Press within the next few days. While testing on my own site, I thought it would beneficial to also invite a few “beta” testers to run the code on their own site(s) as well.

So, if you have a site that receives its share of malicious attacks, and cracker exploits, drop me a line via the contact form at Perishable Press and I will send you the initial block of HTAccess directives. This version of the Blacklist is looking better than ever, and I look forward to releasing the complete version to the public early in 2009.

Thanks for the Free Traffic and Link Juice

Sunday, 7 December 2008, 1:26 pm

Just wanted to thank the fine folks at fafich.ufmg.br for all the free traffic and link juice. Thanks to their misapplication of my comprehensive canonicalization code, every non-canonical version of their 21,700 indexed pages points directly to my site, Perishable Press. This means that every one of their permalink URLs that is mistyped, lacks the “www” prefix, or contains the superfluous “index.php” file name is directed via permanent redirect directly to the home page of my site.

I have tried contacting the site owner(s) about this situation, but it has been over a week and I have yet to hear anything back. Hopefully, they will take notice soon and correct the issue by properly configuring their htaccess file, but in the meantime, I certainly don’t mind the extra link juice and free traffic! :)

No Plugin Needed for Feed Delay

Monday, 24 November 2008, 10:01 am

I recently saw a WordPress plugin that was designed to delay the publication of your WordPress feed by any specified time interval. While it is a good idea to carefully proofread your content before posting it, a plugin certainly is not required to do so.

As savvy WordPress users already know, WordPress has a built-in post-preview feature that enables authors to view their unpublished content as a published post. This enables authors to do any amount of proofreading and browser checking until they are satisfied with the results.

To do this, simply write your post as usual, and then click on the “Preview this post” button on the right-hand side of the screen. In older versions of WordPress (less than 2.5, I think), you actually need to save (without publishing!) the post first and then re-open it as if to continue editing. You will then see a “Preview »” link sort of hidden (due to poor CSS design) in the upper-right corner near the edit post field. Right-click on that link to open in new tab and you are good to go.

No extra plugin needed! :)

Read more on Tumblr..

Subscribe to Comments Recent Dialogue

  • Jeff Starr: Well said, Mark! Here is some news that I find ...
  • Jeff Starr: Thank you all for the great feedback! I wrote this article as a way to purge some of my thoughts on Twitter, but now see that some of...
  • Jeff Starr: Thank you so much for the thoughtful feedback, Adrian. It has been a good year indeed, and I certainly hope that 2009 brings many ble...
  • Jeff Starr: Hi heywho, glad to hear you are doing well! ;) I wish I could join in the festivities.. it has been so long that I almost have forgot...
  • Rob Barrett: Thanks for posting about the Stealth Publish plugin -- just what I needed for my site. Works perfectly!...
  • Jeff Starr: Hi Chiwan, I got your email and have sent some information that may help you with this. Cheers, Jeff...
  • Chiwan: Hi. This is cool. So I can I replace the clock that comes with your Apathy theme with this clock? If that's not possible, how do ...
  • Brass Engraved: Thankyou very much for this, worked like a dream!...
  • Patrix: I'm using FeedBurner and the Feedsmith plugin for my filter blog, DesiPundit. I found your post via the WordPress page for RSS feeds ...
  • teddY: @Jessi Hance: Sorry to hear about your experience with Twitter spammers/flamers. I was once a victim of flamers and it sucks that peo...

Read more recent comments..

Attention: Do NOT follow this link!