[ZWeb] The move goes on - NZO Design modifications

Thu, 16 May 2002 09:47:30 -0400

Olivier Deckmyn wrote:
> Hi there,
> 
> I've spent several hours on nzo yesterday and today :
> 
> You can see this 2 gif files :
> 
> http://www.deckmyn.org/olivier/work/after.gif
> http://www.deckmyn.org/olivier/work/before.gif

Wow, it looks really good!  I'll spend some time trying to get it woven 
into CVS.

> (Notation : * : fix ; + : add ; - : remove ; o : still to do)

Good notation.

>  (*) css font sizes. It's back to "pt" notation. This is the only way to get
> a coherent website look.

That's too bad.  Nearly all the docs I have read have encouraged people 
to switch to em as a relative point size.  While things look better on 
your browser, they look worse on mine (Mozilla under Linux on a big screen).

Perhaps we need to find a way to accomodate this better.

>  (*) H1, H2, H3 have more usual sizes
>  (*) CSS clean-up
>  (*) #326699  color was replaced everywhere by #336699, which is web-safe
> and is the same color to my eyes.

Fine.

>  (*) Changed user bar a:hover color. I used a brown as the orange was
> difficult to read with the gray background.

Perhaps over should be an underline for the nav bar, user bar, and side 
bar (as well as the actions).

>  (+) added bullets on side menu bar. One could use <LI> tag with a bitmap in
> the CSS. Last time I tried, it became weird, depending on browser. If
> someone is candidate to make a try.

Sidnei and I are experimenting with the use of CSS auto-generated 
content.  If you go to:

   http://www.x3ng.com.br:8080/ZopeOrg/

...you can see the affect.  On the H1s (About Zope, Spotlight On, etc.) 
the bullet.gif (the four orange squares in front) aren't in the HTML. 
They are assigned in the CSS with h1: before and content: 
url('bullet.gif').  It will only work with IE and Moz, but its absence 
won't hurt other browsers.

>  (+) added footer bar as it was on the mockup
>  (*) slogan -> 10pt bold
>  (-) Removed html, body, etc. blocks in local_html at root. I wonder why
> it's here ? Is local_html technic the good way to play with ZPT ?? Should'nt
> we prefer macro or something ?

That's the way the CMF works.  It yanks the content out of the <body> tag.

>  (-) Remove "[more...]" button on titles of "Announcement", "News", etc.
> It's the same as left bar now (H1 is clickable). I also added a centered
> "[more...]" link at bottom of section too. Code is much simpler now.
>  (*) Re-organised "Top Ressources" section. Removed date (was not useful
> here ???), added small sentence (today's top 5) and the ressources list has
> anoter format (minor changes)

That whole right bar has been aching for some work.  Thanks!

>  (*) Did a full cleanup of code for news items. It's a much more usual look
> now. Made some modifications to css (#newsarea)
>  (o) Have a look to actions_bar. As it was removed from html source, I'll
> wait until it's back
>  (o) Please don't use <font> nor direct <xxx style=""> inside your HTML code
>      1/ Use a specifier css class or style or  id
>      2/ If there is no css definition for your style, declare and use a
> local css style (like in nzo Download section)

Agreed.  I did it in a couple of places to avoid some conflicts with 
other people working on the stylesheets.  It's a bad practice, I should 
have cleaned up afterwards.

>  (o) Suggestion : I would remove the word "location" in breadcrumb, and
> would not display it at all on home page (would be only "Home" link). Votes

I put it in there because I thought other sites that used breadcrumbs 
did it.  Can you check the web design patterns site and see what it says?

It's ok if we decide to remove it.

>  (o) local_css.css : I would like to remove specific parts of the css from
> main css file (and think about css of sitemap.html inside main css for
> example), and have a simple acquisition system like for local_html.

Sounds good.

>  (o) I wonder if the "[more...]" gif file is a good idea ? If we use a gif,
> let's make it visual (an arrow, or something like
> http://www.welie.com/patterns/images/tog-outgoinglinks.gif )

If we keep it, I'm fine with using this image in place of [more...]

Let's get some votes on whether to use an image, text, or nothing for 
[more...].

> I hope I didn't forgot to mention a modification.
> 
> The site looks fine to me on IE6, Mozilla, NS4.
> NS4 just don't have horizontal grey bars under sections names (I don't think
> it's a problem).

The only major disagreement that I have is concerning the base font choices.

We might have to move to a system where we let people have a member 
stylesheet that is included first.

For instance, let's say we move all the font-size and font-family 
setting to a separate site_fonts.css file.  The one used for anonymous 
is one geared (sadly) towards IE and Windows on normal size screens.

However, people can create a mystyles.css in their member area that can 
override all CSS.  We can then find a way to make this visibile somehow 
(e.g. the preferences screen).

Although this is extra work, it might be less work than the holy war 
we'd engage in over font settings. :)

--Paul