Redesigning SlashdotPublicado 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.
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.
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.
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 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.»
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
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 template with banner and the search input field at the top right corner.
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.
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.
Typographical quotes and italic/normal font style inversion detail.
<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.
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
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.
The proposed design at 800px width.
The proposed design at 1024px width.
The proposed design at 1280px width.
The proposed design when the user hits Ctrl + - to shrink the current default font's size.
The proposed design when the user hits Ctrl + + to enlarge the current default font's size.
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.