October 01, 2003 | View Comments (10) | Category: CSS Redesigns
Summary: CSS Redesign of FARK.com showing how quickly one can produce layouts in CSS. This is a complete redesign, not just a remake in CSS.
Jarrod over at textbased was having a redesign contest that ended today. The contest was a redesign of FARK.com. Anyone looking at the site can see that it is a usability nightmare along with not being too aesthetically pleasing. I only had about 2-3 hours to do a design since I am really swamped in projects at the moment and I am a bad procrastinator, but I believe I was able to come up with something that is much better than the current design. I am very hesitant to show you guys this since it is not my best work and there are plenty of other improvements that I could do with it. However, I figure it will show that clean design usually always wins and maybe somebody can make it look better by looking at my code instead of the exisiting site's code. So without further ado:
I must admit that I am proud of this design because it showed me how much I could accomplish using a CSS only design in a short amount of time. If I had used tables I do not think I would have been able to tweak the site as much as I did. Many designers like to use photoshop to plan their layouts, but CSS allowed me the freedom to play with different layouts while using the same XHTML document. Gotta love that.
I kind of cheated obviously by not including the 1000 ads that are on the site, but who likes to see those ads that could induce seizures? I would love to add more color and possibly implement a liquid design. I encourage everyone to tell me how they would improve upon my design because I am always willing to learn. Enjoy.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/15
Did you even look at my design compare to the current FARK design? They are completely different. Yes it would have been pointless for me to simply rebuild FARK in CSS, but I REDESIGNED it using CSS. I changed the layout so the content becomes more of a focus and the navigation and other such items are grouped in a logical series.
And please do not get me started on just pure CSS redesigns of table sites. Designers do these for a reason and most of the time it is just to show ourselves that it can be done. Our community encourages people to share their work and their experiments and therefore we move quicker in our quest for knowledge. So if someone does an exact replica of table-based design in CSS, yes I would love to see for the simple fact that there might be something in the CSS that I have not seen before. Sure it might not represent the full power of CSS, but that is why we have the CSS Zen Garden.
I encourage you James to next time look at the two different sites that I posted and possibly read my entry. With time restrictions it is not always possible to come up with a new and interesting design, but as I a designer I would love to be able to. I mention that I did this in two hours and I am sure anyone could do the same and even better. The main point was that my redesign is cleaner and hopefully more logical for a user than the current FARK design.
If some designer wishes to use boxes their whole life who are we to stop them. The beauty about design is that you develop your own style. If that involves boxes and you can find a way to make those attractive then more power to you.
http://www.message.uk.com/
Not too many people are complaining about the boxiness of that site. I apologize if this sounds resentful, but I asked politely for criticism on the design and how it would be improved. You are more than free to give your opinion, but to tell me the merits of "recreating" a table based design in CSS does not make sense to me. I really do appreciate your comments, but I fail to see how they pertain to this particular example.
By the way there is nothing wrong with boxes. http://modulo26.net/daily/082803.php
Scrivs (http://www.9rules.com/whitespace/)
I did another design that is less "boxy", but still really plain. The more I look at the content needed to be present on the site the more I try to figure out how could you use anything but boxes. Most designs require a clean separation between sections and since there are so many sections to the FARK site I think it is necessary to use boxes so that users may be able to scan the page and gain a quick understanding of its structure.
Randy: Again I apologize if I was coming off too harsh, but your comment was the first thing I saw when I wokeup this morning so it just didn't hit me the right way. I am sure you had good intentions and thank you for posting.
Here is the "liquid" design only tested in Firebird: http://9rules.com/projects/fark/index2.html
Scrivs (http://www.9rules.com/whitespace/)
Oh and as you can see by the time of my posts the latest design took less than 20 minutes thanks to CSS. I know it's not going win any awards :), but again this was more of an exercise showing how quickly one can develop using stylesheets.
Scrivs (http://www.9rules.com/whitespace/)
My vote's on the first one. I didn't look at Fark to compare to the original and it's not a site I frequent (slashdot's bad enough), but yours looks ok.
The only other possible permutation I can see for the site that would use existing design elements without significant change would be to make the text/news area two columns wide, showing two dates at a time, and moving the navigation into dropdowns under their individual headings. That's harder to use though.
The liquid design is (obviously) more flexible, though. That's a plus. You're not wasting space on a big border, the content is the king.
Maybe a combination between the two; keep the boxes around the individual content areas (helps seperate them visually) but not the border around the page.
As for the not using boxes rant above... I'm afraid I don't get it.
What are we supposed to use? Trapazoids? Triangles? Even CSS (except for a non-standard curving extension from the standards fanatics at mozilla... can't be bad if it's not microsoft, I suppose) only works on a rectangular field. Monitors are rectangular, browser windows are rectangular, most applications are rectangular (or rather, they all are but some have transparent parts to appear curved)
I fail to see where some dramatic revolution could take place, particularly while retaining usability. There's no reason for it and no benefit to it.
Or was that entire rant simply because you had the audacity to display the borders on your divs?
But I have to say, this was quite well said. "I don't think it was a universal infatuation with Mondrian that drove designers to embrace assorted styles of grids."
But that may just be because I'm a bit of an art geek on the side.
JC (http://www.thelionsweb.com/weblog)
"Did you even look at my design compare to the current FARK design? They are completely different."
Well, I confess to being a hasty ass and juddging the Fark CSS make-over based on the idea, and previous experience with a Google CSS "redesign." But, while the CSS version is indeed different, it is not so completely different. So, yes, I really should have taken the time to actually *look* at new version before shooting my mouth off, but as it turns out I don't think I would have said anything all that different. The first CSS version is certainly easier on the eye (owing, perhaps, to the lack of garish ads), but otherwise it's still a tablular layout, albeit without using tables.
Perhaps it's the nature of the site, and marking the content as lists rather than tables and rows is indeed an improvement regardless (almost)of how it looks.
Getting folks to use semantically meaningful markup is a big step, too, and perhaps *not* changing the essential look will help ease some people's fears that XHTML + CSS means redoing everything.
But I'm still inclined to think that The Grid has become so ingrained as part of the Web's (or computing GUIs in general) visual language that stepping away from it seems "wrong," that people are now so accustomed to visually parsing grids that offering something outside of that will break some critical mental model.
Granted, CSS does (yet) not offer slick ways to conjure circles, trapazoids, and the like, but there are a few things that can help to break up grid space. Divs need not neatly align; boxes may overlap; chunks my be removed or occluded to break apart the familiar rectangle; overlapping images can be used to break up the rows of horizontal lines and pull groups of divs into a common visual mass.
Really, of course, this is where I should be pointing out examples of such work. I don't have any URLs to give, so yeah, talk is cheap, but we've all seen sites that make you saw, wow, that's different, even if you can't quite explain why.
My comments were not meant to disparage your work (and I apologize if I was offensive or disrespectful) but to suggest that there may be better ways to encourage the use of CSS. I believe it can offer a more sophisticated visual vocabulary which need not be restricted to avant garde design sites or CSS geek projects.
A task for myself, now, is to pay more attention to CSS-backed sites that seem to solve old problems in new ways, to understand *what* is new, *why* it's a better solution, and somehow document or catalog this so that others may learn, copy, and improve on it.
Hopefully, if I have another rant to offer I'll be able then pony up something to back my assertions other than some opinionated observations.
James (http://www.jamesbritt.com)
I think you are totally missing the idea of the FARK redesign. I wasn't showing the power of "my" design skills and the contest was more of a redesign of FARK to make it look better. I also wanted to show the power of CSS in regards to being able to quickly come up with an easy layout that can be quickly manipulated. Yes I see your point that both layouts are simple, plain designs, but really what kind of layout would you expect in 2 hours with about 10 minutes of planning? Also if you notice the content and the purpose of FARK it is not intended to wow you, but to get you to read the news.
These are the situations that you must be careful of applying too much form and not enough function. It is great to add all the cool things that CSS can do, but if it just takes away from the design and message of the site then what is the purpose?
When encouragin others to use CSS there are many different ways to do so. One of those benefits that I do not think gets spoken of enough is that you may be able to develop sites or prototypes more quickly than if you used tables. My FARK design is a perfect example. You may want to get away from table-based designs, but just because I use CSS does not mean that my site can't look table-based.
I do wish the FARK site had a little more creative flair, but I wish the same for eBay, Amazon, and Yahoo. However, and I say this again, you cannot have form over function. They must work together for a site to truly give a great user experience. Just remember FARK is a news site and nothing else really.
Scrivs (http://www.9rules.com/whitespace/)
the grid isn't a computing thing, James. It's the world.
Books are rectangular, except for the occasional children's book.
Text is written in blocks.
That's not because people are hidebound, it's because they're practical. It's because it's easier to use, easier to read.
The "wow, that's neat" stuff is usually followed by "damn, that's hard to use"
It only works in advertising, where you WANT people to say "wow, that's neat" and since that's all there is, there's no real detriment to putting form over function to some extent.
JC (http://www.thelionsweb.com/weblog)
For what it's worth, I was blown away by your design. I hate Fark.com in it's current form--it's so hard to look at and takes more time to load than it should.
Great job!
Kimberly
//the grid isn't a computing thing, James. It's the world.//
No, not really. Trees, clouds, lakes, mountians; seems most of the world is ungrid-like. Now, manufactured things, they may tend towrds blockiness. I'm suggesting that such forms may be a by-product of available technology, not the best choice of all possible forms.
And I'm concerned that as design technolgy improves, new choices are discounted or unseen because people have become so conditioned to technolgy-limited offerings.
//Books are rectangular, except for the occasional children's book.//
Sure. Technology imposed that form. Prior to that, writting (and other visual communication) could be found on scrolls or spread out over cave walls. The "block o' text" form factor is perhaps simply the result of technology, something which people, over time, have become accustomed.
//The "wow, that's neat" stuff is usually followed by "damn, that's hard to use"//
Sure, sometimes. Hardly a reason to insist on sticking only to what's familiar.
Most personal electronics used to be gnarly black plastic boxes. Over time, technolgy improved whereby more human-friendly forms were practical and cost-effective to make. Hence things such as the i-Pod. Yes, they may have at first struck many as odd, but ease of use won the day.
//It only works in advertising, where you WANT people to say "wow, that's neat" and since that's all there is, there's no real detriment to putting form over function to some extent.//
I'm not looking for a "Wow, neat" factor. Quite the opposite. The point I've been trying to make is that there may be uses of CSS that allow better, more functional, web site design. Design that may have been impractical using HTML tables. I'm struck by the overall boxiness of most of the web, and I'm wondering if CSS will help us get away from that.
Art-for-art's sake is not the goal.
Now, if in fact grid designs are the best way to present web content, then great. We're there. I'm unconvinced of this, though such concerns are, I gather, orthogonal to many current CSS redesign demos.
Getting more people to use fundemental W3C recommendations, regardless of any perceptible change in presentation, is a good thing. An ancillory goal might be to then go and expand the design vocabulary of the Web.
James (http://www.jamesbritt.com)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
While such redesigns are perhaps interesting execises, and maybe prove some sort of point, they may be counterproductive.
The web is filled with table-based layout for a reason: Tables were about the best (i.e. easy reliable) thing in HTML for controlling layout. I don't think it was a universal infatuation with Mondrian that drove designers to embrace assorted styles of grids. It's become so prevalent it's hard for some to see any other way of designing web pages.
Yes, there were ways to break away from simple boxiness, but it was relatively hard, so folks gravitated to the ordinary "headers and columns" style.
One would hope that CSS allows designers to focus more on what they really want to see and less on the hackish machinations required to produce it.
Showing folks how to repeat the same tired box look in CSS seems only to encourage people to maintain a style that evolved out of primative necesity, not aesthetic preference. And to what gain? Will the site be easier to maintain? Maybe, but maybe not, if the site owners are using templates and scripts to build pages (as is likely with Fark). Will it render better across all browsers? Likely not. Will it at least *look* better? No; the whole point of the exercise is to look the same.
A more interesting goal would be to redesign table-based sites to show how the content and navigation is better served by a new design, freed from the grid, now made possible using the power of CSS.
James Britt (http://www.jamesbritt.com)