Redesign: Phase 1

December 07, 2003 | View Comments (17) | Category: Whitespace

Summary: Another redesign, but this one is justified.

Well I spoke about it before so it should be no surprised that this site has been redesigned. However, this redesign is kind of different because it is going to happen in phases until everything is right and my experiments are done. I have a couple of theories about design that I would like to test out and after I get my results I will post a hopefully interesting article about the whole thing. Let me talk about the current design now.

Legibility

I am constantly thinking about legibility and how easy sites are too read (even though the last design used a small 11px size font). And after reading Font Size Redux by Dave Shea, I began wondering about default font-sizes. One incarnation of this design did not even touch font-sizes in the stylesheet. Let me tell you that <h1>'s are huge! I was going to keep that design to show people who believe that font-sizes shouldn't be touched how the default sizes kill almost any chance of your site having aesthetic value. For visual reasons I didn't, but I did use a more reader-friendly sized font to stay. Complaints in this department should be at a minimal now.

Liquid Design

I have spoken about it here and it is another thing that is constantly on my mind. To me liquid design is nirvana...when you can make it look good. The problem with liquid design is that people will complain about legibility even though the font-size is a good size. Some design elements become a little harder to control when dealing with liquid design. Liquid design is not simple. However, in the spirit of openness it just seems like the right thing to do.

To achieve liquid design the use of percentages is required to scale with the resolution of your monitor. A pseudo liquid design can occur when you use em's for widths. When a user increases the font-size the site adjusts with it. Pretty cool. In light of this I have decided to use the em's method of design. The site is about 40ems wide, which means that there should at max be 40 characters per line. If you have problem reading that, then I don't know how else to help you out right now.

Layout

This is where the main experiments are going to take place. I wanted people to be aware of when a new entry was put up so it is now front and center. Can't be missed. I also like the idea that people should be able to view the most recent entries in case they are new or haven't been around for a couple of days. Therefore, you get the list of recent entries below the most recent entry. To me the design kind of gives the site a magazine feel. You have the featured article along with the other table of contents. The main issue though is going to focus on user patterns on this site and the visibility of metadata for entries. I would like to go into further detail on this another time.

So do you like this new look more than the old one. Am I crazy for changing? Sound off.

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/68

Comments

#1

You're crazy for changing it.

I like it.

Roman (http://www.google.com)

#2

I forgot to talk about the individual entries page:

When users click on an entry they do so with the intention to read that entry or view the comments (at least that is what I think) so I decided that nothing should hinder their objectives. Therefore, all you pretty much get is the entry on the page. When you are done reading it and the comments you can see the categories and recent entries at the bottom.

Roman: So you like it or "liked" the last design?

Scrivs (http://www.9rules.com/whitespace/)

#3

I like it the way it is now. The content is right in front of you, impossible to miss. The content is directly focused to the reader. The one thing I do miss is the categories missing in the right column. Now, the categories listing is located on the bottom of the page — harder to navigate.

Roman (http://www.google.com)

#4

Ems for width, centered content area -- it's a good look. (I use this technique on my vanity site, and it's been quite effective.)

I don't like the loss of information on your weblog's front page. If nothing else, as an RSS feed consumer but infrequent visitor to the actual site, I'd like to be able to see at least a timestamp and category, maybe word and comment count, for recent entries. It's helpful to be able to get an overview of what's new with your site.

Keep it coming!

Brian (http://joechip.net/brian/)

#5

I like this Paul. Very clear, concise, easy to read and easy to navigate.
Grand job sir!

Andy (http://branchleft.co.uk/)

#6

I like the new look! (Been thinking about the same issues myself the last couple of days....)

Elaine (http://www.epersonae.com)

#7

Brian: it's funny you mention the timestamp and category information because that is some of the metadata that I am talking about for my experiments.

Glad to hear the people who are speaking out like it so far.

Scrivs (http://www.9rules.com/whitespace/)

#8

Yeah, this new design seems...solid, for lack of a better term. It's very polished, and it feels like everything is placed with a reason. You placed everything with thought, and it works very well.

milbertus (http://www.milbertus.com)

#9

Hiya,

It looks good. However, the colour scheme feels colder than before (it is a neutral comment). The colour reminds me of sailors too. Hehe. ^_^

Suggestion: What do you think of a link between the article and the comments section to either return to the top or skip the comments.

Zel,

Zelnox

#10

I can see how the blue is cold. When the new 9rules comes out you will see a different color to try to maintain a brand image throughout the three sites here.

As for the links to comments and back to the top, excellent suggestion, that is already part of phase 2...

Scrivs (http://www.9rules.com/whitespace/)

#11

Hi Paul, I like the ideas you are trying out your blog. There are a couple of things I do like and a couple I don't.

I like the focus being the content but that's nothing new with you. I like the categories and recent entries on the main page but not at the bottom of an entry. The main reason is for this is exactly what Roman said about it making the site more difficult to navigate. If I don't enter a comment I have no idea that list is at the bottom of the page. I don't like the color scheme. I agree with Zelnox on that point. The red looked better to me.

Also about the "Recent Entries": I would suggest a date next to the titles perhaps. I hate not knowing how fresh the content is. Generally, with you freshness is not a problem but others take weeks between entries.

Basically my favorite design was about 2 designs back. The color scheme was red. The content was on the left where I like it and the "Recent Entries/Categories" were on the right divide by a light gray line. The right columns text was aligned left. And there were like the 5 most recent entries on the main page with the first paragraph of each. I really like that cuz it gave me enough info to decide whether I was interested in the topic or not without having to make a click to another page.

By the way I like the use of ems. Gives the pages more flexibility.

:)
-- Joshua

Joshua

#12

Nice redesign, Srivs. I like it.

Putting the recent entries on the front page is very slick. Much more friendly than the traditional scroll-till-it-hurts weblog layout.

Will Pate (http://www.willpate.org)

#13

Aside from the "narrowness", I like it.

Mark

#14

I loved the last design.. although the recent entries on the front page is nice.

Colin

#15

The new design is very nice and uncluttered. I only have one suggestion: give us a short clip of the content for the "recent entries," for those times when the title's just not enough to decide if we want to read them.

Mark Morgan (http://www.voicesofunreason.com/)

#16

Mark: Have you been looking at my phase 2 design without me knowing? :)

Scrivs (http://www.9rules.com/whitespace/)

#17

Merely more evidence that the line between "genius" and "blaringly obvious" is one each of us has to make our own decisions about.

Mark Morgan (http://www.voicesofunreason.com/)

Keep track of comments to all entries with the Comments Feed