HTMLPurifier.org redesign

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

HTMLPurifier.org redesign

Post by Ambush Commander »

I'm currently in the midst of a design refactoring for HTML Purifier's home page. The goal is to give the website a more "2.0"-ey feel and be less intimidating to starting users (the original page went straight to a huge block of text). All-the-while maintaining semantic correctness, standards-compliant markup, no tables and minimal images (since Photoshopping things takes too long).

http://htmlpurifier.org/

Any comments? Note that this is a work in progress: the huge header and the summary boxes are new, but everything else is from the old site, which means that the inevitable wall of text is only delayed a little.

I'm specifically trying to figure out what information should stay on the home page, and what should go to a subpage. Also, there's a little difficulty maintaining the same look and feel for subpages, which won't have the same huge header, see: http://htmlpurifier.org/comparison.html
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Having a link to the download section so large makes me feel as though I'm going to another page, but it doesn't, yet the compare button does. Maybe that should be a different page. I'd also like for the news to be a separate page, and the main page just hold the three latest news posts.

And this being the HTML purifier, I absolute HAD to look at the markup. :-p
Only small things, really.


The caption/subtitle in the header should be a different tag. <h2>, <p>... Something other than a div. Divs are overused. We need to promote other block elements where appropriate. ^_^

I like how you have the "Navigation" header when CSS is disabled. At first I saw it and was like "No way," then disabled CSS and there it was. I like. I'd suggest a skipnav, but really, your navigation is the only way to skip around the page.


And for readability, I'd increase the line height, or change to a sans-serif font. The easier it is to read, the less likely it'll be skipped.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

with 1024x768 I have nothing to read without scrolling, which is bad. 'Safe & Clean & Open' boxes are too large and text is too small. Your header occupies almost half a height of the screen and doesn't provide any useful info. You could use it to contain 'SCO' boxes for example.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Having a link to the download section so large makes me feel as though I'm going to another page, but it doesn't, yet the compare button does. Maybe that should be a different page. I'd also like for the news to be a separate page, and the main page just hold the three latest news posts.
Sounds quite reasonable. Putting the most recent news posts on the main page will require a little coding-fu, but it's not impossible.
The caption/subtitle in the header should be a different tag. <h2>, <p>... Something other than a div. Divs are overused. We need to promote other block elements where appropriate. ^_^
Weeeeell... it's not a paragraph, it's not a second heading...
I'd suggest a skipnav, but really, your navigation is the only way to skip around the page.
An extra bit to throw in sometime. Not difficult to do at all.
And for readability, I'd increase the line height, or change to a sans-serif font. The easier it is to read, the less likely it'll be skipped.
I'm going for a sort of traditional look with the serif fonts, so higher line-height it is.
with 1024x768 I have nothing to read without scrolling, which is bad.
Clarify? At that resolution, you see the header, the summary boxes, and then the first paragraph on what HTML Purifier is about.
'Safe & Clean & Open' boxes are too large and text is too small.
Erm... so make the boxes smaller and the text in them larger? (doesn't think that makes too much sense)
Your header occupies almost half a height of the screen and doesn't provide any useful info. You could use it to contain 'SCO' boxes for example.
I'm going to tread a fine line here, so if you're not convinced by my feeble attempts at an explanation of this, I'll reconsider.

The reason why the header is so big is to give the reader some "white-space": it reduces clutter. The large patch of dark blue naturally draws the eye to the title: "HTML Purifier", which is vitally important in improving brand recognition. Many websites utilize over-sized headers to emphasize their site names.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Ambush Commander wrote:
The caption/subtitle in the header should be a different tag. <h2>, <p>... Something other than a div. Divs are overused. We need to promote other block elements where appropriate. ^_^
Weeeeell... it's not a paragraph, it's not a second heading...
Well, you definitely got me there.
I wouldn't say it's a division either though.

.... <blockquote>?
Ambush Commander wrote:The reason why the header is so big is to give the reader some "white-space": it reduces clutter. The large patch of dark blue naturally draws the eye to the title: "HTML Purifier", which is vitally important in improving brand recognition. Many websites utilize over-sized headers to emphasize their site names.
I like the whole top of the page. The colors are soft and stylish, and it's a very nice introduction. And even if someone can't see below the three boxes, they've got links and they've got a mouse. They'll figure it out.
thiscatis
Forum Contributor
Posts: 434
Joined: Thu Jul 20, 2006 11:00 am

Post by thiscatis »

I'm not fond of scrolling all the way up to the menu everytime I click on a menu item..

Beside that, love the color scheme and general look!
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Very nice. I won't consider this web 2.0 though (don't ask why cause I really don't know).
Also change all the rest of the page cause after you scroll down you just see the old page.

Anyways, it's a huge change and I like it 8)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

It looks great!

I just love gradients!

One beef that I have is the height of the three focus boxes (safe/clean/open). They look perfect the way they are situated/coloured and sized. The only thing is their heights, keep them all the same! :) On my system (linux/ff) Open is one line longer than the other two... Either use a fixed height and a smaller font, or try to re-word it just enough to keep all three boxes 1+2 lines tall..

SWEET!
User avatar
maliskoleather
Forum Contributor
Posts: 155
Joined: Tue May 15, 2007 2:19 am
Contact:

Post by maliskoleather »

Its definantly a huge and amazing change...
My only problem is the headers and focus boxes take up so much space, that on my (1280x800) screen, i only see to the download link, and having to scroll that far to really see the text/body of the page kindof annoys me. (screenshot)
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Focus boxes being a major complaint, I have tried something different and moved them over to the left side. There is now a bit more text visible from the get-go. I also increased line-height and changed the styling for h2 headers.

I still haven't started migrating content off the page, that'll be next. Also, I need some way to work the download and comparison buttons back into the page: when I switched to a two-column layout, they had to go, otherwise the width would be too small. Also, the blank space to the left of the content is bugging me.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Looks much better now. I still would make the header area smaller, or at least use some of the space. Even though it is nice in a visual sense, using 30-40% of the (initial) screen space for just the logo is a bit too much. If you really want to keep it, maybe put in a short summerytext or quote or something.

And I don't think the whitespace left of the text is bad. It's good actually. Makes the line-lengths a lot better and brings in a bit of interesting tension. Instead of a uniform sea of text, you now have a asymmetrical column of text and much better scannability of the headlines.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

Ambush Commander wrote:Focus boxes being a major complaint, I have tried something different and moved them over to the left side. There is now a bit more text visible from the get-go. I also increased line-height and changed the styling for h2 headers.
Now it's MUCH better. Header is still to high to my taste but I can live with that.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Ooh! Definitely an improvement! :)
User avatar
maliskoleather
Forum Contributor
Posts: 155
Joined: Tue May 15, 2007 2:19 am
Contact:

Post by maliskoleather »

looks wonderful.
i love it just as it is :D
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I like the design AC. The header is a little large for my liking, but overall it is clean, easy to understand and easy to navigate.

I did notice there is one error in your CSS, but that is easily fixed. Overall, I like it. Reminds me of university or some other institution of that sort. Not sure why though.
Post Reply