[Design-team] Wiki page for country - web page markup and styling now available for review
astavale at yahoo.co.uk
Mon Aug 2 22:12:43 UTC 2010
----- Original Message ----
> From: Sijis Aviles <sijis at fedoraproject.org>
> Sent: Mon, 26 July, 2010 22:02:04
> 2010/7/25 Al Thomas <astavale at yahoo.co.uk>:
> > ----- Original Message ----
> >> From: Máirín Duffy <duffy at fedoraproject.org>
> >> Sent: Mon, 12 July, 2010 19:48:04
> >> On Thu, 2010-07-08 at 22:00 -0500, Matt Domsch wrote:
> >> > I built a very minimal top-level fedoracommunity.org and
> >> > www.fedoracommunity.org web page now,
> >> I did a mockup today too of how it might be improved:
> > I was very impressed by the design and so had a go and turning it into a
> > page:
> > http://astavale.co.uk/fedoracommunity/
> > I know the design has changed a bit since then, but the bulk of the work on
> > page is done and any amendments should hopefully be fairly quick.
> > The page is a fluid layout using floats and margins. It is optimized for
> > 1024x768, but will display fine at 800x480.
> > The first China link is the same as the Bangladesh link, this was in the
> > too. Can someone please correct this.
> Wow! Great work.
> I am aware that 960.gs does have some shortcomings (multiple divs,
> fixed, odd code, etc). However, I believe the benefits outweigh the
> shortcomings of it. These are the reasons we are strongly focusing on
> using 960:
> * its a framework we can standardize across all fp.o domains
> * an excellent way to build sites quickly
> * a way communicate specs between designer and web developer
> * its proven
> We have tried using the 960 fluid  version but that has proved
> difficult to keep things inline as we'd hope.
> I would appreciate if you could help us, using 960, to merge your
> example with what we have. Let me know if this is something that
> interests you. I can grant you access to make that possible.
>  - http://www.designinfluences.com/fluid960gs/
I am more thank happy to integrate this into the Fedora websites set up. I won't
have much time to do this until a couple of weeks though.
I would first like to make sure the design is signed off before re-jigging the
styling to fit a more generic setting. The following need to be clarified:
1. It was suggested the sections should be ordered by geography (left to right)
rather than alphabetical.
2. The colouring of the in page navigation bar is different to the sections. If
colour coding is required I need some image files which have matching colours, I
will update the colour borders appropriately. Are we supporting IE6? If so then
the PNG8 should be used where transparency works for IE6.
3. There was talk of making the sections appear by clicking on the in page
navigation bar, rather than having one long page. Not sure I have time to
implement this now, but I can amend the markup to make this easier for future. I
think it is fine as is, it is a directory listing after all and a long page
seems fine to me.
4. Each item in the list in later designs only had a thin grey line top border.
I can change this if needed, although I'm happy with the way it is at the
moment. [For comparison take a look at Sijis' work at
http://www.fedoracommunity.org/template.html compared to my work at
5. The text and links need to be checked. The link for one of the China sites is
the same as Bangladesh and I think some of the spelling / characters used for a
few other languages are slightly wrong. (Czech Republic and Romania were
mentioned at one point I think.)
6. I will exclude the site navigation and page heading from this, as this will
become generic later on. Although I think the page title heading is a bit too
too small and text lacking contrast with the pale blue on white. Suggest making
the banner logo wider and shorter by placing community.org to the right of
Fedora and maybe increase the colour saturation of the logo. Then the specific
page title can appear under the logo in a darker colour and large size. This
would become generalise across the fpo pages.
OK, now for the 960.gs fixed layout discussion! The markup I've done is a fluid
layout. For anyone not sure, this means that as the page gets narrower in the
web browser, the page itself gets longer to compensate. This means no horizontal
scrolling. The best way to see this effect is to hold CTRL and press number pad
plus in Firefox. This increases the font size. Keep doing this and you will see
how the page flow compensates. This is the equivalent of making the window
smaller. Go the other way by holding CTRL and pressing number pad minus. Keep
trying this as far as you can and again see how the page flow compensates. This
is the equivalent of making the window very large. To me this is the desired
layout. The web is not print. Print is static, the web flows. All the CSS specs
talk of document flow. The web is a multi-device, multi-platform, multi-browser
world and the markup and styling I've done allows for this. Although at 1024x768
pixel display it is similar to the SVG mockup, it is still good for someone
looking at it on a 800x480 smart phone browser. I do believe the techniques I
have used are generic enough to be used for the fpo redesign. This is what
interests me - using a fluid design for a reasonably large site and very popular
site like Fedora. I believe there are enough people out there on the list, etc.
who can make this work with a bit of inspiration. So, I have to say I was
surprised at your request to undo this functionality and go for a 960 pixel
I still don't see how a grid system will work here, but I'll let you show some
examples. For example the section headings are quite easy to markup and style as
an in margin heading, with the CSS background image pushed into the margin
leaving the text to align with the vertical line of the page. As the image is
quite large, the content below needs to be pulled up with a negative bottom
margin. Once this is done it can be re-applied fairly simply for the rest of the
page sections. With a grid I guess the image would have to be separate to the
As a way forward I see the need to create a lexicon of styles and markup which
can become generic for the site and reused, aiming for minimal markup for
maintainability. So a single H1 element is used for site title
(i.e.fedoracommunity.org) then a body id tag allows a selector to replace the
text with the logo. H2 element is used for the page title itself and styled
accordingly. The site navigation is simply a UL list and labelled as 'site_nav'.
Section heading within the page are marked up as H3.
Well, I'll see how things develop,
More information about the design-team