Re: Website proposal for usability

[Martyn Russell <martyn lanedo com>]

On Mon, 2010-08-09 at 14:54 -0700, Devin Samarin wrote:
> I posted this on Bugzilla (https://bugzilla.gnome.org/show_bug.cgi?id=626380)
> and I was recommended by Martyn to post the details here.
> 
> I was browsing around gtk.org and I thought that it could use some adjustments.
> So I downloaded the web files with git and made some changes. I attached
> some screenshots and example file on Bugzilla (the design changed a little
> since then), but if my computer is up, you can see it at
> http://eboyjr.homelinux.org:8080/gtk/ .

So my comments:

1. I don't think the "What is GTK+" on the main page should be a snippet
on the top right corner. I think it should be _the_ main point of the
main page. Most people coming to the page aren't visiting it for news,
they are likely going to download or get more information about GTK+.
The news there I think can be cropped a bit more or kept below.

2. Presumably the box at the bottom right of the page for Source/CSS/etc
is just there during this review? I quite liked the feedback page and
wondered if that was useful for people not subscribed to the mailing
list?

3. I think the "Features" page is superb. I especially like the images
in there. However, I would reorder this a bit so the important things
are more visible first. Like the "foundations" above "mobile" perhaps

a) the indentation on the icons for Windows/Linux/etc looks too far,
might just be the icon width there.

b) the "mobile" section should list N900

4. The "Downloads" page feels the wrong way round to me. I always prefer
more content on the left side where there are multiple columns - must be
my OCD kicking in ;) can we switch these around? 

a) the icons again look overly indented.

b) the shadow on the git commands don't look good hear, I would prefer
it was the way we had it before to be honest. As it currently looks it
feels like I need new glasses :P

5. The "Screenshots" page has an odd number of images, I would prefer
this to look like a grid, so we should either remove the Windows image
at the bottom or find 2 more to go beside it.

6. The "Development" page table about maintainers should really loose
the indentation I feel. Some of these sort of indentations seem somewhat
superfluous when using a second column or the floating text on the right
with the grey background. I also struggle to identify what should and
shouldn't be in this grey floating box and what shouldn't. In my mind
these positions are usually for quick, non-important details, Comments?

7. The "Success Stories" page has a heading "More Applications" which
should really be under all the grey boxes. The Maemo and GNOME
paragraphs should line up too IMO (vertically). Arguably Maemo should be
changed to MeeGo everywhere.

8. The "OverView" page has the same indentation issue with the icons.
And the columns look a lot closer than say the Downloads page, this
again triggers my OCD :)

9. General comments about the design:

a) I think the space before the top heading box should be reduced, it
wastes space but I think we should have something there, a few pixels
perhaps.

b) I don't really prefer the new logo/text to the old one. The icon is
too small and the text looks better as a raised+shadow text IMO. I see
what you're doing there with the height to make the space more useful,
but I think the icon would look better the height of the text and
left/right of it. Or perhaps even behind the text as some sort of
transparent image? Not sure. It just feels left wanting.

c) The border widths around the page were chunky, which I liked, not
sure yet if I like the new thinner look. More content is visible sure,
but I just wonder if it looks right.

d) I prefer the title in Red rather than Blue, it looks more colourful,
cheerful, etc.

/brain dump :)

> I made the width of the content area wider and added either columns or a
> sidebar for pages that needed it. Having columns makes it easier to read by
> making it so that you don't have to scroll for everything. For styling, I added
> some rounded corners with CSS for some of the elements. For all of the pages, I
> made the HTML more semantic by removing replacing some of the <tables> with
> <ul>'s. I changed the color of the headers to the shade of blue. For the
> features page, I separated each section into blocks and added some pictures to
> spice it up. For the commerce (success stories) page, I did the same thing so
> that it is easier to read, and looks nicer.

Yea, I commented about that above.

> I made a template.php file which has the outer content of the HTML pages, so as
> a consequence, the pages' extension is changed from .html to .php. I think it's
> better so that for some changes, you wont need to edit every single page of the
> site. So with this design, some external links might need to be updated unless
> PHP can be run with the .html extension.

I agree. I think at the time, the question was if PHP was available on
the web server. I don't think this is a problem now. Should check this
though.

> Since it uses PHP, I made it easy to update changes to the tables. Specifically
> the language bindings page. There is a PHP array that stores all the
> information about the bindings and then formats it into a table automatically.
> I attached that file so you can see it.

Thanks.

> I have tested it so far in:
> 
> * Internet Explorer 6, 7, & 8
> Everything works except the rounded corners, except for the header which is a
> single image so that works. Personally I don't think rounded corners are
> necessary, but if you think I should hack them in I'll do it

Yea, to be expected.

> * Firefox 2
> Everything is messed up. This is because I am using HTML5 elements... I made
> the CSS not specific to tag names, so changing <article> to <div
> class="whatever"> would make it work fine. This also means that in IE,
> JavaScript must be enabled. I thought I'd try something new but HTML5 just
> causes pains. So I'll change them to <div>s.

:) OK.

> * Firefox 2 and 3 on Windows and Firefox 3 on Linux
> * Safari 3 and 4 on Mac
> * Google Chrome 3 and 5(beta) on Windows

Great.

> The design is not complete and still requires changes to be compatible with all
> browsers, but once it's done I really think it would make gtk.org much more
> usable. I am open to any suggestions.

This is usually where the time goes ;)

So a couple of other things.

- I would like Andreas to at least comment here, I have CC'd him.
- Are the pages XHTML validated? The current side is and I would like to
try and keep it that way. Same goes for the CSS.

Again, thanks for starting this work!

-- 
Regards,
Martyn