HTMLPurifier.org redesign
Moderator: General Moderators
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
HTMLPurifier.org redesign
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
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
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
Sounds quite reasonable. Putting the most recent news posts on the main page will require a little coding-fu, but it's not impossible.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.
Weeeeell... it's not a paragraph, it's not a second heading...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. ^_^
An extra bit to throw in sometime. Not difficult to do at all.I'd suggest a skipnav, but really, your navigation is the only way to skip around the page.
I'm going for a sort of traditional look with the serif fonts, so higher line-height it is.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.
Clarify? At that resolution, you see the header, the summary boxes, and then the first paragraph on what HTML Purifier is about.with 1024x768 I have nothing to read without scrolling, which is bad.
Erm... so make the boxes smaller and the text in them larger? (doesn't think that makes too much sense)'Safe & Clean & Open' boxes are too large and text is too small.
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.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.
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Well, you definitely got me there.Ambush Commander wrote:Weeeeell... it's not a paragraph, it's not a second heading...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 wouldn't say it's a division either though.
.... <blockquote>?
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.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.
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
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!
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!
SWEET!
- maliskoleather
- Forum Contributor
- Posts: 155
- Joined: Tue May 15, 2007 2:19 am
- Contact:
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)
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)
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
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.
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.
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.
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.
Now it's MUCH better. Header is still to high to my taste but I can live with that.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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
- maliskoleather
- Forum Contributor
- Posts: 155
- Joined: Tue May 15, 2007 2:19 am
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
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.