Web Site Re-Design

I offered to do the web site a couple of weeks ago. Life got in the way temporarily, and it took me a long time to make it look the way that I wanted and to make it look the same in IE6. Anyway, I wanted to get some feedback on what I had done.

Some concerns:
1. SSI and JavaScript seem like overkill. Each subproject can have their own look and feel by overriding the CSS (...cascading...) -- all of the images are in the CSS, not the page.
2. It relies rather heavily on transparent PNGs, which may cause problems for some (though I have yet to encounter any in the 4 browsers I have tried)
3. I only have 2 screen resolutions to try it out on, so I'm not sure if anyone else out there will have any rendering issues (it looks a little "chunky" in Safari -- will investigate further).
4. I have only finished the first page and part of the Download page (some of the site is really kind of confusing -- that needs to be resolved by someone, and I'll try more as I go along)
5. I would recommend establishing a wiki or "CRM" system where everybody who is registered (trusted users/whatever) can contribute; that might help to cut back on the profusion/diaspora/melee of information, some of which can and should be updated more frequently and with less of a hassle than putting it into SVN/CVS.
6. Lastly, and most importantly, I am not a professional web designer or graphic artist, so I definitely need some feedback about things people don't like/would like to see changed.

-Gabe

P.S. The image files are from Illustrator CS2 (another thing I needed to get better at in order to do this); please email the list to let me know if you would like to play around with them. (If you don't have a copy, somebody out there might know somebody who could let 'em have it for cheap.... wink wink, nudge nudge.)

Note to self/dumba**: include web site next time.

http://www.deadparrotsoftware.net/llvm

Looks nice :smiley:

-Keith

Gabriel McArthur wrote:

6. Lastly, and most importantly, I am not a professional web
designer or graphic artist, so I definitely need some feedback about
things people don't like/would like to see changed.

First off, the site design looks really nice! It's got that clean
unassuming feeling to it and is very appropriate for LLVM! With that
said, I now begin to nitpick. :slight_smile:

The body text is either too small or too low-contrast (or both). Please
make it black. Yes, it might not look as pretty, but it will at least be
high contrast.

The four major boxes form a corner in the upper-left. Because of the
drop-shadows, they have the image of not lining up even though they
actually do. It looks jarring; try making the main green title piece an
inset that doesn't line up with the other elements, or merging it with
the "llvm" logo piece on the left somehow.

Also, should the title piece really have the text at the bottom? And
could it be a bit bigger? The font looks nice though. (I don't suppose
you're taking a page from Apple's webpage design?)

Also, there's blue-space above the top two pieces, but not to the left
of them. The page isn't square. That's also a bit jarring -- think about
your margins.

While you're at it, the body text in the page is too wide for my browser
leading me to have to scroll horizontally. That's a show-stopper for me.
I know it's being caused by the width of the background image that
includes the rounded edges, but I don't really know how to fix it
cleanly. Hopefully you do. :slight_smile:

Finally, the footer looks too out of place, but I can't really place
why. It might be because you're using an accent colour in a place that
you don't really intend to accent.

I read the HTML and CSS and I find that it's really clean! Very good
job! I wouldn't even know where to begin thinking of a module web design
strategy like this. Thanks Gabe!

Nick

The body text is either too small or too low-contrast (or both). Please
make it black. Yes, it might not look as pretty, but it will at least be
high contrast.

One of my concerns as well. The Webkit and openSUsE sites seem to be
similar -- maybe just darker and not yet black.

The four major boxes form a corner in the upper-left. Because of the
drop-shadows, they have the image of not lining up even though they
actually do. It looks jarring; try making the main green title piece an
inset that doesn't line up with the other elements, or merging it with
the "llvm" logo piece on the left somehow.

Ok, this is a general comment to everybody wanting to make a comment:
If you have specific issues, please make sure to name your browser
version, your OS, and your screen resolution -- I can't fix what I
can't see.

Also, should the title piece really have the text at the bottom? And
could it be a bit bigger? The font looks nice though. (I don't suppose
you're taking a page from Apple's webpage design?)

No, but thanks for thinking so :slight_smile: It's designed to make you read it.
That's why it's down there and white on green -- it kind of compels
you to look.

Also, there's blue-space above the top two pieces, but not to the left
of them. The page isn't square. That's also a bit jarring -- think about
your margins.

Again. Browser, OS, Resolution.

While you're at it, the body text in the page is too wide for my browser
leading me to have to scroll horizontally. That's a show-stopper for me.
I know it's being caused by the width of the background image that
includes the rounded edges, but I don't really know how to fix it
cleanly. Hopefully you do. :slight_smile:

And again.

Finally, the footer looks too out of place, but I can't really place
why. It might be because you're using an accent colour in a place that
you don't really intend to accent.

That's bothering me too, though I'm not yet sure how I want to fix it....
Be thankful that the sidebar is no longer a collection of brick-red
bubbles, however. ~8')

Gabriel McArthur wrote:

The body text is either too small or too low-contrast (or both).
Please
make it black. Yes, it might not look as pretty, but it will at
least be
high contrast.

One of my concerns as well. The Webkit and openSUsE sites seem to be
similar -- maybe just darker and not yet black.

Right. Slashdot uses #111111 but at that point ... you may as well use
black. I mean, I'll bet you didn't even know that /.'s body text wasn't
black did you? :wink:

I'm perfectly okay with you choosing a non-black darker colour.

The four major boxes form a corner in the upper-left. Because of the
drop-shadows, they have the image of not lining up even though they
actually do. It looks jarring; try making the main green title
piece an
inset that doesn't line up with the other elements, or merging it with
the "llvm" logo piece on the left somehow.

Ok, this is a general comment to everybody wanting to make a comment:
If you have specific issues, please make sure to name your browser
version, your OS, and your screen resolution -- I can't fix what I
can't see.

Fair enough, but in this case it's not a browser issue but an optical
one. You've got four rounded corners that line up to the pixel, but the
top two have drop shadows. Because of the drop shadows they look like
they're offset.

Also, there's blue-space above the top two pieces, but not to the left
of them. The page isn't square. That's also a bit jarring -- think
about
your margins.

Again. Browser, OS, Resolution.

Mozilla suite 1.7.12, Debian, 1600x1200. It's probably a whole lot more
useful to see a screenshot, so here it is:

  http://wagon.no-ip.org/llvmwebshot.png

Finally, the footer looks too out of place, but I can't really place
why. It might be because you're using an accent colour in a place that
you don't really intend to accent.

That's bothering me too, though I'm not yet sure how I want to fix
it....
Be thankful that the sidebar is no longer a collection of brick-red
bubbles, however. ~8')

:slight_smile:

Nick

Wow, that looks really good. I'm amused to see code I wrote in the background of the logo. :wink:

My only concerns have already been voiced by others, but I thought I'd throw my vote behind them too:

1) I'd like it if the body test could be a little bit darker. Doesn't need to be purely black, but I think it's a bit too light right now.

2) The footer looks out of place. Part of that may just be its coloring: it doesn't go with anything else on the page.

Thanks,

--Owen

Very nice and clean.

A few comments:
1) The header looks like it could be 1/2 as tall without losing anything.
2) Please use ems (or some other non-absolute size) for the widths. I
really like my big, widescreen monitor, but sites that set the content
width to 800 pixels just look silly, especially since I have the font
sizes somewhat higher than usual. (80 em is often a decent choice for
the main content area.)
3) The headers in the sidebar don't wrap, so the "oject" in "The LLVM
Project" ends up under the main content section. (Though solving 2 may
well solve this one as well.)

Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.8.1.4) Gecko/20070630
BonEcho/2.0.0.4

~ Scott

I have no significant complaints, but it sounds like folks want fluid widths. Probably the simplest technique would be to float the left nav using a negative-margin…

#leftnav { float: left; width: 200px; margin-left: -210px; }
body { margin-left: 220px; }
#footer { clear: left; }

And I guess I second whinging re the drop shadows and misfit footer coloration.

— Gordon

I offered to do the web site a couple of weeks ago. Life got in the
way temporarily, and it took me a long time to make it look the way
that I wanted and to make it look the same in IE6. Anyway, I wanted
to get some feedback on what I had done.

Oooh, very cool. I don't hate it, which is quite the accomplishment :wink:

Lots of other people are nit-picking the presentation, I'll pick on the content (besides, obviously people hate my presentation skills significantly more than yours :). Specifically, please please please consider using the content that I've started setting up the the 'website' module in subversion.

You can see what I have so far here:
   http://testing.nondot.org/

Some concerns:
1. SSI and JavaScript seem like overkill. Each subproject can have
their own look and feel by overriding the CSS (...cascading...) --
all of the images are in the CSS, not the page.

I agree partially. The reason for SSI's has two parts:
1. I want the sidebar to be defined in a single place.
2. I want the documentation to integrate "perfectly" with the web page, and "good enough" when viewed standalone. For example, if you take a look at this page: http://testing.nondot.org/AdvUsers.html you can load the html file locally (which doesn't process the SSIs) and the page is quite readable (though not perfectly valid html).

I don't see a good way to do this without either client or server side SSIs. I'm much more fond of SSIs than CSIs, because you don't need the client to be smart :slight_smile:

2. It relies rather heavily on transparent PNGs, which may cause
problems for some (though I have yet to encounter any in the 4
browsers I have tried)
3. I only have 2 screen resolutions to try it out on, so I'm not
sure if anyone else out there will have any rendering issues (it
looks a little "chunky" in Safari -- will investigate further).

no opinion

4. I have only finished the first page and part of the Download page
(some of the site is really kind of confusing -- that needs to be
resolved by someone, and I'll try more as I go along)

Yeah, the current web page has evolved into a really unorganized mess. Some will trivialize the amount of content that is available in the svn repository, but I spent a huge amount of time trying to figure out how to categorize things better and how to make the site more accessible for 'newbies'.

5. I would recommend establishing a wiki or "CRM" system where
everybody who is registered (trusted users/whatever) can contribute;
that might help to cut back on the profusion/diaspora/melee of
information, some of which can and should be updated more frequently
and with less of a hassle than putting it into SVN/CVS.

I'm not sure what you mean. We do have a wiki, do you think the main site should be there?

The organization that I would like to see is:

1. The page is explicitly broken into subprojects. The top-level is
    served out of the 'website' module.
2. Each subproject (e.g. core, llvm-gcc, clang, hlvm, etc) gets its own
    subdomain (e.g. http://clang.llvm.org, these already exist, but
    currently have an autoforward set up).
3. Each subproject gets a www directory (the top-level for their
    subdomain's content) and a docs directory (which gets checked out under
    www, e.g. Welcome to Clang's documentation! — Clang 16.0.0git documentation )
4. Each subproject can in theory do their own thing, and I think it would
    be good for the major different subprojects to have different color
    schemes, but they should use the same web scaffolding. Ideally the
    customization would just be through their local css file.

Does this seem reasonable?

6. Lastly, and most importantly, I am not a professional web
designer or graphic artist, so I definitely need some feedback about
things people don't like/would like to see changed.

Looks pretty nice to me!

-Chris

I have no significant complaints, but it sounds like folks want fluid widths. Probably the >simplest technique would be to float the left nav using a negative-margin…

I have a very nice three column format with variable center column with minimum and maximum widths :-

http://www.aarongray.org/Examples/CSS/ThreeColumnExample.html

It would enable the old websites layout to be followed which I still prefer to the new website, this could possibly be combined with the modern graphics of the new website.

Just a thought,

Aaron