[maemo-community] Maemo Site

Mon Dec 8 10:39:04 EET 2008

Hi, all

2008/12/5 Tim <tim at samoff.com>:
> As far as I'm concerned, this is GOLD! ;)

Looks pretty nice! I'd still like to see some designs for Downloads,
News etc, but this is a great state to start with :-)

> If we have a majority consensus on this by COB today, we're onto the
> html/css phase of the home page.

Related to that, Joonas wrote some guidelines for how to make the HTML
easy to use in the various systems that we run on maemo.org:

* HTML should be laid out without the use of tables (See
http://www.w3.org/2002/03/csslayout-howto for further explanation -
NOTE: absolute positioning should not be used, instead floats are
preferred).

* HTML should be valid HTML 4.01 Strict.
    - This means it should pass the W3C Markup Validation Service
(http://validator.w3.org/) with zero errors.

* HTML should be valid CSS (level 2.1 or above preferred)
    - This means it should pass the W3C CSS Validation Service
(http://jigsaw.w3.org/css-validator/) with zero errors.
    - Should there be a need for Internet Explorer specific CSS,
'hacks' should be avoided. Instead, a separate Internet Explorer
stylesheet (it can be separate stylesheet for Internet Explorer 6 & 7
if need be) should be defined using conditional comments (See
http://www.quirksmode.org/css/condcom.html for further information).

* Character encoding set used throughout the document should be UTF-8.
    - See http://www.w3.org/International/O-charset for more
information on character encodings.

* Site should be accessible even if javascript, stylesheets and images
are turned off, therefore the HTML structure should be logical and
utilize semantic class/id attributes (See also
http://microformats.org/wiki/semantic-html and
http://microformats.org/wiki/POSH).

* For accessibility reasons, em or percentage values should be used
instead of pixel values when defining sizes (at least font sizes,
paddings and margins too if possible).

* Images should have semantic (meaningful) alt and title attributes.

* If individual styles should be overwritten on a specific page, a
body class should be used to do so. (i.e. frontpage should be given
<body class="frontpage">, which then could be used in the CSS as
body.frontpage prefix to the rule to give it page specific styles, see
for instance http://weblogs.asp.net/jgalloway/archive/2008/06/18/using-lt-body-gt-classes-to-fight-css-class-explosion.aspx).

* Navigation should be done as unordered list, currently selected item
should be indicated with class="selected" on the list item tag.
    - Example of what the navigation structure should look like:

    <div id="navigation">
        <ul>
            <li><a href="">Home</a></li>
            <li class="selected"><a href="">Downloads</a></li>
            <li><a href="">Information</a></li>
        </ul>
    </div>

* Footer contact information (and for instance news item authors/user
avatars when shown) should also marked up as a hCard element according
to http://microformats.org/wiki/hcard specification

Looking forward to the implementation phase!

> Tim

/Henri

-- 
Henri Bergius
Nemein - Web Craftsmanship
http://nemein.com