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
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

I don't know whether I prefer the Safe Clean Open boxes horizontally or vertically, but if you're going to keep them vertical it would be better if the text wrapped around them.

I dislike websites which have all the text crammed across the screen after you scroll down past the outer columns.

A website I recently checked out which does this to the extreme is d11's actually. Check out this page and scroll down a little. Your page obviously isn't this bad but it's the same effect.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

jayshields wrote:I don't know whether I prefer the Safe Clean Open boxes horizontally or vertically, but if you're going to keep them vertical it would be better if the text wrapped around them.

I dislike websites which have all the text crammed across the screen after you scroll down past the outer columns.

A website I recently checked out which does this to the extreme is d11's actually. Check out this page and scroll down a little. Your page obviously isn't this bad but it's the same effect.
Wow. I see what you mean.

Although, that example would be quickly cured by moving one of the left bars to the right side and the content in the center.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

That would just move the space to the sides. You can always make floating divs for the navigation so that the content flows around it when rendered.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

That would just move the space to the sides. You can always make floating divs for the navigation so that the content flows around it when rendered.
I'd prefer 'position:fixed' added to navigation boxes.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Everah wrote:That would just move the space to the sides. You can always make floating divs for the navigation so that the content flows around it when rendered.
Yeah, but in the case of navigation, flowing around it is a bit unconventional.

In HTMLPurifier though, the boxes aren't navigation, just pretty. :-p
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

And unconventional is not always bad, especially when produced correctly.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I, too, like it. Very nice job!

the only snag for me is the lack of a giant download button. Maybe shrink the side boxes a little and put it under there?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I don't understand why people want the text to take up the full width of the screen at all times. I have my browser opened at a fairly regular resolution, 1000- 1200px, like most people. (I say most, not all! Window sizes is another discussion).

Text taking up that much space horizontally is very hard to read.

When I sit at my table and open up a book, I wouldn't want the book to take up the full width of my 2m (6 ft) wide table. Besides the negative effects it would have on the readability and the pain in my neck it would cause, a bit of empty space left and right helps me focus on the book. A table full of crap and other stuff just distracts.

Really, a bit of whitespace left and right only helps improve the usability and experience of your readers.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

matthijs wrote:I don't understand why people want the text to take up the full width of the screen at all times. I have my browser opened at a fairly regular resolution, 1000- 1200px, like most people. (I say most, not all! Window sizes is another discussion).

Text taking up that much space horizontally is very hard to read.

When I sit at my table and open up a book, I wouldn't want the book to take up the full width of my 2m (6 ft) wide table. Besides the negative effects it would have on the readability and the pain in my neck it would cause, a bit of empty space left and right helps me focus on the book. A table full of crap and other stuff just distracts.

Really, a bit of whitespace left and right only helps improve the usability and experience of your readers.
:lol: Reminds me of how we complained about Everah's PHPBeginner website not having enough margin.

I agree. The extra space focuses the text.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I think there needs to be a balance though. Imagine reading a book (or a newspaper or magazine) where the page is 5.5 inches wide and the margins are 2 inches on each side. That whole fixed width 760px crap looks like garbage on a 1024 X 768 res monitor. Even worse on larger resolution.

I like space as much as the next guy, but it also needs to work with the page and the content. Cramming it all into a single skinny column when there is a bunch of unused space around it looks unprofessional to me.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Everah wrote:That whole fixed width 760px crap looks like garbage on a 1024 X 768 res monitor. Even worse on larger resolution.

I like space as much as the next guy, but it also needs to work with the page and the content. Cramming it all into a single skinny column when there is a bunch of unused space around it looks unprofessional to me.
How can it "look unprofessional"? The basic rule is that text needs a bit of design to be optimized for reading. So choosing the right font, enough line-height, and a not-too small or not too wide line-length. I wouldn't call a 1024px wide single column of text "professional".

I just counted the amount of characters of 16 px default text on a 1024px screen: 168.

Optimum is around 40-50 or so? (10-14 words)
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Sorry about letting this thread languish a little. I'm trying to implement all of your suggestions before posting again, but I've gotten bogged down by a little problem.

@matthijs: I will reduce the header size slightly. However, I think I already have summary-text in it. :?

@Everah: CSS error fixed, thanks!

@jayshields and co.: Line length is a complicated issue, and I think the way I'm going to work around excessively layouts is to implement something similar to Switchy McLayout. The idea is that the layout should adapt to screen-sizes, which I find quite attractive, since one layout does not fit all. I currently code all my layouts for an 800 x 600 screen, which marginalizes those with big monitors (I actually do have a large monitor, but I can't stand surfing it maximized.)

I did a bit of independent study of typography while I was learning to use LaTeX, so I appreciate the importance of reasonable line-lengths. Don't worry: your calls for change are not lost upon me!

@Kieran Huggins: The download button is the snag that I have hit. I will elaborate:

The whitespace still bugs me, mainly because it's not uniform: the text is weighted towards the right side of the page. In my working copy, I have set clear:left to the "Background" header so it is now takes up the entire page width, which opens up a bit of white-space underneath the leading text. I would like to put the download buttons here, but what I currently have looks UGLY!

Image

I'm probably going to add an arrow gradient to the background, but that won't fix the funky borders. Soliciting recommendations to beautify this. Also, is there any way to make this "fill up" the remaining space? I don't think it looks too good on wide screens.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Why don't you make the layout fluid instead of fixed width? As for the download buttons, you can always wrap them inside a <p> or <div> inside the content area where the text is at.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

It is fluid! Well, to be more precise, the summary boxes are fixed with and the main content is fluid.

I'm not looking so much for technical solutions as ideas on what would look "good" for a download button. I can probably implement any design you throw at me, but I need to know what to implement.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Alright, after fiddling around with the download box for the better part of the hour, I've made a modified version of it live. Comments?
Post Reply