Rework of the FreeBSD website [was:FreeBSD'sVisualIdentity:Outdated?]

Nicholas Wieland nicholas_wieland at yahoo.it
Thu Jan 6 19:12:55 PST 2005


 - Chris Zumbrunn :
> The html versions are now available from the following URLs:
> 
> http://top.ch/sitedata/freebsd/freebsdweb1e.html
> http://top.ch/sitedata/freebsd/freebsdweb2e.html
> 
> How does that look?
> 
> There is also a patch http://top.ch/sitedata/freebsd/patch.txt but I'm 
> not sure if it's usable. At least it should provide you with a good 
> overview of the kind of modifications involved.

It looks nice, thanks !
xhtml should contain content and semantics, it would be wonderful to switch 
to xhtml strict in the future, so keep layout and graphics out of the
markup. The main reason for this separation is accessibility for people
with disabilities, but it's also easier to mantain.
A "menu" is nothing more than a list of links, and it should be implemented
with a list of links.
This is a not-tested-and-somewhat-crappy mockup that I did to explain
the concept at 4 in the morning:

<html>

    <head>
        <style type="text/css">@import "screen.css";</style>
    </head>

    <body>

        <div class="navbar">

            <ul>
                <a href=""><li>Overview</li></a>
                <a href=""><li>Download</li></a>
                <a href=""><li>Support</li></a>
                <a href=""><li>Docs</li></a>
                <a href=""><li>Ports</li></a>
                <a href=""><li>Search</li></a>
                <a href=""><li>Index</li></a>
            </ul>

        </div>

    </body>

</html>

As you can see it's really simple, a div, a list, a few links. It's
_not_ accessible, it doesn't have accesskeys and a few other things, but
making it AAA compliant is simple as adding a few attributes.

body {
    background: white;
}

.navbar {
    background: url(bar-bkg.jpg) repeat-x;
    height: 25px;
}

.navbar ul{
    list-style: none;
}

.navbar ul li {
    float: left;
    padding: 5px 10px 5px 10px;
    font-size: small;
}

A simple CSS file named screen.css. 
I use floats instead of inline to render the menu, I just prefer relative 
positioning. If you have questions just ask.

HAND,
  ngw

-- 
checking for life_signs in -lKenny... no
	Oh my god, make (1) killed Kenny ! You, bastards !

nicholas_wieland-at-yahoo-dot-it


More information about the freebsd-www mailing list