----- Original Message ---- > From: Sijis Aviles <sijis@xxxxxxxxxxxxxxxxx> > Sent: Mon, 26 July, 2010 22:02:04 > > 2010/7/25 Al Thomas <astavale@xxxxxxxxxxx>: > > ----- Original Message ---- > >> From: Máirín Duffy <duffy@xxxxxxxxxxxxxxxxx> > >> 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 -- websites mailing list websites@xxxxxxxxxxxxxxxxxxxxxxx https://admin.fedoraproject.org/mailman/listinfo/websites
