FOSS4G'13

See also this page https://basecamp.com/1920286/projects/762306-foss4g-13/documents/1019641-website-content.

Antony

I've hijacked a web server for development here:

http://ma-wwwprod.lancs.ac.uk:8080/wordpress/

currently lacking in content, but has a few design ideas in there.

I'm wondering if the home page should really look different. Its a landing page, and needs to be something for everyone, so I think having anything like the big block of welcome text with sidebars and boxes isn't the right way.

Consider http://www.lancs.ac.uk/ - which manages to have links and info for everyone, fairly easily found, and yet it doesn't look anything like a blog page, which seems to be what we want to avoid.

The current vogue for home pages is to have a 'hero unit' on your home page http://twitter.github.com/bootstrap/examples/hero.html - and then breakout info in the content underneath. Pages linked therein will be predominantly information pages with main content plus useful sidebars of menus etc. I like this structure.

I must admit I like this "hero" structure...its' clean and modern. As a result I'm not sure that the map background adds anything to FOSS demo site - perhaps clutters the page slightly? On the 'bootstrap' version the header bar remain visible as you scroll down the page which I prefer over the Lancaster Uni version...but hey, were you looking for that sort of feed-back?

Yup, mostly happy with this design. I think we definitely need a less cluttered background- which is a shame because the map idea was nice. Actually I like the ruled background on the styleguide, though that would then imply a colour change to the main boxes...

OK, quick points:
1) The logo looks a bit too small I think
2) It should say "Open Source Geospatial" not just open. Don't go there...
3) I'd like to see a bit of spacing between the targets and the titles in the widgets
4) The sponsor section doesn't really do it for me, but I'm not sure how best to approach that yet

Jo

I've started adding issues with the current design to the github tracker:

https://github.com/barryrowlingson/foss4g2013/issues

please add more, and also add any points for discussion about the design there.

I've already fixed Open [Source] Geospatial :)

Barry - I've a slight problem with the main options bar not being fixed at the top of the page (so it disappears as you scroll down). I'm not sure of the implications of this on the design - before I put it on GitHub, is it something that can be contemplated?

Fixed menu bars aren't compulsory (BaseCamp's isn't!).

I've done some things this weekend: the home page now doesn't have a large chunk of the header that all pages had previously because this info is duplicated in the main Hero Unit. Hence for the home page only, the menu appears right at the top:

http://ma-wwwprod.lancs.ac.uk:8080/wordpress/

Every other page has the header with the menu appearing after that. I'm not convinced this is a good idea - maybe the menu bar should always be the first thing on the page.

Now this is independent of whether the menu scrolls off or the content scrolls underneath it.

I don't know if the base template easily supports a fixed absolute position menu - it can be done but I don't want to do it and then have people go 'actually, it was better as it was' if its not a quick job. I'm not sure what the base template uses, but I don't think its twitter bootstrap.

Are these permanently visible menus a good thing always? The twitter bootstrap top menu is only fixed visible when in its most expanded form - narrow the browser and it becomes a scrolling thing.

Hmmm....

Have also been mucking with background, not to my total satisfaction. I've tried with strips from Ogilbie's road maps that include Nottingham, and also some assorted old-papery backgrounds. If you have Firebug if you change the body background to images/back1.jpg you'll see one using an old border motif on one side.

Done plenty of other tweaks to the layout etc over the weekend too.

Barry

This is always one of the dangers of opening these discussions up, and why I didn't want to post it on GitHub - it's a question of preference. Suggest leave it as is, until we get hundreds of people complaining ;-)
Background image - how about none? The design is strong enough not to need the extra 'noise'. 

The FOSS4GNA site is up: http://foss4g-na.org/ 
A quick note, the 'sign up' widget seems a good idea....we could do with a 'I'm interested, keep me posted' and a 'I want to help' list. 

Also, how do we update this page content? http://foss4g.org/ 

Tweak tweak tweak.

Now on the home page the Hero Unit sits in the middle, framed by sponsors either side, diamond and platinum left, gold on the right. These guys have paid for extra web presence so they get it. Not totally sold on the green borders, might change to grey like the full sponsors iist in the footer.

Those two sidebars are configurable from the wordpress admin menu - see the newsflash for example.

The background - I've splatted a large chunk of the target plus ribbon anchored bottom left. I think its bold without being noisy. I've also taken off the target quadrants that I had top left of the widget boxes since the page got a bit noisy with them.

Current known problems, not yet submitted as github tickets:

 Search button styled wrongly in Chrome and IE
 Bad flow of footer widgets in narrow layout
 Template for posts is all wrong - pages are fine, just not posts - see the Buzz page for example. Easy fixable.

 Default page style is probably better with one sidebar rather than two.
 The news page 404s at the moment.

I've also restructured the menu slightly. There's a home page link, then an about page with basic details.

Hi Rollo,

I can get foss4g.org updated- are we just thinking of getting the new logo on there or anything more snazzy?

Jo

Hi Barry,

I'm liking what I see so far- I agree with comments about internal pages having 1 sidebar rather than 2, I think that works much better.

I would still like to see a photo on the front page somewhere, and I'm not convinced that sponsors need their logos in two places (I'd like to just see the osgeo logo on the footer, to be honest).

Jo

Jo, I'd suggest just the image so that it's in keeping with what exists for the previous sites lower down on the same page....however if you have something zazzy in mind.....?!

Barry - you're nailing this. Those last few 'tweeks' have made a significant difference IMHO. Like the logo in the background.

Yes agree with both those comments, the image of EMCC is good, otherwise something with people, or even a scrolling set of images? Would prefer to see more of a text intro on the front page to inform the newbies, it's a little 'shouty' at the moment I think. Internal pages are great, generally the design flows through the site very nicely.

Home page does need a photo, but struggling for placement. In one of the three sub-widgets maybe? I could possibly try and make the central main logo fade to some images or have a carousel but finding a responsive one that works nicely with everything else is a struggle.

The plan is Diamond and Platinum sponsors left, Gold sponsors right, on the home page. That shouldn't be so many that the boxes are bigger than the middle box.

The other three sponsor levels get a 'minor' web placement..

WDDD? They had a wall of sponsors at the bottom of every page, in order of level but uncategorised (so you can't tell where the platinums end and the golds begin). The only sign of the categories is on the Sponsors main page. A nice touch is the inclusion of a web page for each sponsor, where they can have some text about why they are involved in FOSS4G.

http://2011.foss4g.org/content/mapquest

I think this can be done through the Conferencer plugin

We could also add a sidebar sponsors widget that loops through each sponsor in the levels - i've just added this, but I think with six levels its going to go waaay down the screen. It could be tabbed or concertinad but I think sponsors wouldn't like users to have to interact with the page to get eyeballs on their logo.

 I think the wall of sponsors in the footer is the best idea (but I might make the images smaller or pack them in more. It would be nice to have an estimate of number of sponsors per level.

Okay, you wanted animated piccies, you got 'em. The transitions aren't quite perfectly smooth and there's some slight glitching which I can fix in a couple of ways. Just look at it and tell me if we really want it, and what pics we could put on it, 300x176 pixels of freedom. Could possibly also add captions.

I have no idea how it looks in internet explorer, its nearly 8pm and the bar downstairs has just started playing noisy music so I'm going home!

Very nice in Firefox and Chrome, but IE8 puts all the images on top of each other, bless it. Captions not needed I think, but maybe a border? Will try and do a thorough review over the next couple of days and post on github.

Yes, IE8 doesn't handle transparency, and the FOSS4G logo has a transparent b/g. If I make the FOSS4G logo solid white background it will hide the other images. You won't see the other images (because CSS transitions dont work in IE8 either) but you won't know they're there... The other option is to detect opacity/CSS transition capabilities (using Modernizr.js, probably) and then write some Javascript to do the animation...

I have a carousel on this WP site http://www.strawberrylinecafe.co.uk/ which seems to work OK in everything, but no idea how it works, it's part of the Arras theme.

Its javascript - I'm trying to avoid having to do any JS coding, especially just for old-browser compatibility issues.

The bigger IE8 problem is the transparent backgrounds on things like the sponsorship packages pages and in the footer.

My corporate PC runs XP with IE8 as the default (apparently about to upgrade to Win7, but that's an aside) - the site looks and behaves well. Only noticeable difference is the lack of scrolling images on front page. 
I really think you've done an excellent job Barry. Congratulations to you and Barry and Jo.