Wiki page for country - web page markup and styling now available for review

[Al Thomas]

----- 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:
> >>
>>>http://duffy.fedorapeople.org/webdesign/fedoracommunity.org/fedoracommunity.org.2.png
>>>
>g
> >>

> >  I was very impressed by the design and so had a go and turning it into a  
>web
> > page:
> >
> > http://astavale.co.uk/fedoracommunity/
> >
> > I know the design  has changed a bit since then, but the bulk of the work on 

>the
> > 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 
>mockup
> >  too. Can someone please correct this.
> >
> 
> Al,
> 
> Wow! Great work.
> 

Thanks.

> 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 [1] 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.
> 
> Sijis
> 
> [1] - 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 
http://astavale.co.uk/fedoracommunity/ ]

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 
weak, 

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 
fixed layout.

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 
heading text. 


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,

Al