Redesigning Slashdot

Publicado el en Proyectos, In English por Jaime Gómez Obregón.

The popular Slashdot technology news web portal has just announced a public CSS redesign contest in order to get some fresh ideas to modernize their current look and feel. Since they have finished just a few months ago adapting the mythical Slashcode to be CSS template driven, refreshing now the current aesthetics of the website shouldn't be a pain, as well as no dramatic changes have to be made on the existing code. After all, that's both the power and the beauty of CSS design and modern web development methodologies.

Online since 1997, Slashdot is one of the oldest and most visited technology sites; also a part of Internet's history. But eight years with almost the same look and feel user experience is a lot of time in Internet terms. As far as I am already familiar with the site and it's contents, I've decided to finally spend some more time in front of it and get some new ideas about my user experience and implement them in a new CSS template. Here is my contribution to this redesign effort.

Slashdot redesign proposal

As a user, my preferences are to focus on content rather than in fancy baroque design aspects. Slashdot is plenty of content, and each piece of information has it's own proper relevance, that should be respected and reflected within the design. So I've paid special attention mainly to usability, readability and content architecture, rather than in merely decoration. Also, I consider myself a web developer rather than a web designer, so my template is thought in terms of cross-browser compatibility, bandwith saving, standards compliance and ease of implementation (no changes have to be made to the current portal code).

This said, let's take a deeper look into it.

Identity

I've read opinions —specially these days— criticizing Slashdot's current design aesthetics and arguing that "historical" things like the Coliseo font, the top left rounded corner and the shade of green tone are now obsolete and should be completely forgotten in the final design in order to start a new stage.

Well, I do not share that opinion. From my point of view that design decissions are now part of Slashdot's personality, and are identified by many Internet users with the Slashdot style. Users need time, often years, to identify and adapt to a completely new brand. So I don't think giving suddenly up with the current design line is a good idea. My bet is to try to rationalize it in order to look consistent with modern times. That said, I ve fully preserved all the three classical identity elements cited before.

Layout

It's surely a subjetive point of view, but I've found to prefer two-column layouts over the classical PHP-nuk'ish bloated three-column websites, which I find to be too dense to my tastes. That's my point of view, but is easy to realize that two columns make a better use of screen space, which is a valuable resource in a content-oriented site like Slashdot. Less columns means less margins and padding spaces between screen areas and sections. Disabling the rightest column gives me valuable space to present the main content (the articles), in a bigger area and with a bigger font, which has good effects over readability.

Slashdot's current layout

Slashdot's current layout.

Slashdot's proposed layout

Slashdot's proposed layout.

The new left column is somewhat wide (25% of total page width), to ensure a nice visual proportion between its content (metacontent) and the true contents (articles), as well as to keep enough room to display a random vertically oriented ad.

Despite trimming a whole column, which allowed me to earn about a 10% more of valuable screen space, the only content been truly removed from the new template is the top-right navigational topic icons, which I found completely useless since they provide no content nor useful navigational aid. The empty black frame around the page has been removed too, since it gives no extra information while using screen space.

Also, notice that when scrolling down to the middle and bottom of the page, the contents presented in both columns have already ended, but their room is still reserved and unused. That's a waste that should be corrected, in my opinnion, by moving from the three-column to a two-column layout.

I suggest to move the hole site from the 'Times' (serif) font to the more adequate 'Verdana' (sans-serif), which leads for improved readabily, essential in a full of content portal like the one we are talking about.

«Seriffed fonts are the overwhelming type choice for lengthy text printed in books, newspapers and magazines. The coarse resolution of computer screens has caused a reassessment of the role of serifs in readability, with a large percentage of web pages employing sans-serif type for body text. Fonts with hinting information, anti-aliased rendering and the ClearType rendering technology has partially mitigated these concerns, yet the basic problem of coarse resolution—typically 100 pixels per inch or less—continues to impose strict limitations on readability and legibility on-screen

— From the 'Serif' definition on Wikipedia.

The header

I bet for a clean wide header which is tall enought to randomly contain a 60 pixels height banner, as the ones described at the OSTG specs. The essence of traditional Slashdot's surrounding black frame is now contained in the black horizontal CSS menu bar, which is 100% CSS driven, without any Javascript slowing down the user experience. Moving the mouse over any main menu option unhides the adequate submenu as an horizontal sky-blue bar, which is good for saving space, without the need of extra mouse clicks. This contextual submenu drops a nice horizontal shadow over the page contents, and completely hides once the cursor is away.

A common problem with this kind of hover menus is that you should move carefully along the horizontal container element, because the new menu line dissapears as soon as the mouse exits the black stripe. I have solved this by adding extra padding space at the bottom of the #links div, so once the submenu is unhidden, you'll need to move far down to hide it again, so it's use is comfortable with no unexpected behaviours. Again, I have paid attention to avoid Javascript in order to allow non-Javascript enabled devices (like smartphones, browsers for disabled people or even search engine's robots) to surf the whole site without problem.

CSS contextual menu>

CSS contextual menu.

Regarding the search form, I still remember how much time did I spent looking for the Search input field the first time I needed to surf the Slashdot's archive. As I don't find it's useful in it's current position at the bottom of the page, I've absolutely positioned it at the top right corner, inside the header, which is the place where many users would expect it to be.

Slashdot with banner

Slashdot template with banner and the search input field at the top right corner.

The content

Title, body and bylines alignment has been changed to adapt Occident's traditional reading directions, again searching to improve the readability of the site. Eyes have to move less with this orientation, which I find more comfortable for daily readers.

Slashdot reading directions

Most Occident languages are read from up to bottom and left to right. My suggestion is to align the lines that way.

Personally, I prefer typographical quotes over traditional one, so I've used some CSS standard-compliant pseoudo-classes to add the '«' and '»' symbols after and before the cited text. This is a suggestion that, of course, would need to remove the actual traditional quote symbols '"', since this can't be done (easily) from the stylesheet itself. Also, I have choosen to invert the italic and normal roles within the quoted text, because I find italic text harder to read.

Slashdot quotes detail

Typographical quotes and italic/normal font style inversion detail.

Reordering Slashboxes

As I said before, I do not agree with people using Javascript for navigational puropuses, due to its negative effects over accessibility. But Javascript could be sometimes very handy, specially when combined with stylesheets to meet the goal of a site redesign without touching the original (X)HTML code. I've written a dozen lines for the purpouse of rationalizing the left column slashboxes into a more logical order. So I put the login box the first one, at the top left square, for the purpouse of both invite users to join, and to ease the process of login for already existing users. Next to it I put the Older Stuff box, which seems to me an important one for those who don't enter Slashdot in a daily basis.

The Javascript needed for this reordering is just a dozen of lines, and to enable it in the current slashcode, only a <script src="..."></script> construction is needed to add within the site <head></head> section. Of course, a more efficent reordering solution is possible by tweaking a bit the current code.

Technical issues

The complete set of images needed to render the template is about 5,5 Kb, which means this proposal is a very lightweight design, thought to save bandwidth costs (even more if we consider that both de stylesheet itself and the linked images are often cached on the client side) and download times.

Implementation is automatic, since no changes have been made to the current (X)HTML code code.

No use of the opacity CSS property nor Javascript for navigation has been made, in an effort to get a fast rendering even on low-powered or old computer hardware.

Finally, all font sizes and element widths are device-dependant (no absolute sizes), so the design scales succesfully both to user screen resolution and browser current font size, as shown in the following screenshots.

Slashdot at 800px width

The proposed design at 800px width.

Slashdot at 1024px width

The proposed design at 1024px width.

Slashdot at 1280px width

The proposed design at 1280px width.

Slashdot with smaller fonts

The proposed design when the user hits Ctrl + - to shrink the current default font's size.

Slashdot with bigger fonts

The proposed design when the user hits Ctrl + + to enlarge the current default font's size.

Finally

That's all! Hope it helps to modernize the current layout. Any comments and feedback is —of course— welcome, so feel free to drop a comment if you want.