« Previous -
Version 16/81
(diff) -
Next » -
Current version
Antonio De Marinis, 03/10/2011 16:50
= EEA Website Design 2011 =
This document is the starting point for the re-design work for the EEA website during its platform upgrade to Plone 4 in 2011.
'''Re-design 2011 main goals:'''
- '''Refreshed design'''
- '''Accomodate design for better mobile accessibility'''
- '''Improve general template layout (header, footer, navigation)'''
- '''Improve front page layout'''
- '''Improve layout of several main areas and templates'''
1. clean and simple design
1. avoid the use of borders and boxes (use simply background color to separate/highlight areas)
1. make use of overlays
1. make use of transparency
1. make use rounded corners with CSS
1. use JQuery effects (slides, accordion etc)
1. more use of larger images, e.g. as background for messages, for thematic pages, in articles/news
1. adaptable design to smaller screens (small internet devices like smart phones and tablets)
1. start using HTML5 where possible and relevant
1. move 2 level navigation (left navigation) to the right column (not sure here of the implications ...)
1. make 2 level column navigation wider (as screen as wider today and the content are is better readable)
1. introduce breadcrumb
1. full screen mode
1. smaller top header for application / large sub sites Specific pages === Frontpage ===
page: http://www.eea.europa.eu
The area "In the spotlight" needs improvement. The small peripheral images are not really seen, lacking text info.
There is a need for having "topic of the month" staying for some months, always visible (not rotating with others)
Maybe we can use some sliding areas like it is done on http://data.gov.uk/ for other "secondary spotlights items" :)
=== Data and maps ===
page: http://www.eea.europa.eu/data-and-maps
Here we want to have an improved layout.
We were thinking of a Search input box on top. Then an area which highlight the most popular content, with image preview.
Some main entrance points by type as we have now would go below (Datasets, Maps and Graphs, Indicators, Interactive maps).
"Data providers and partners" and "European data centres" should go at the bottom of the page, a bit smaller.
We also want to have areas like: "Most downloaded dataset" and "data by type"
Some inspiration of functionality can be taken here: * http://www.data.gov * http://data.gov.uk
=== Environmental topics ===
page: http://www.eea.europa.eu/themes
this page needs layout improvement
We want to highlight some topics over other. maybe using rotating SOER key messages/facts (see http://www.eea.europa.eu/soer) over images.
=== Topic entrance page ===
example: http://www.eea.europa.eu/themes/climate
Still need discussion on what to do here.
=== Article/News template ===
current layout examples:
http://www.eea.europa.eu/highlights/renewable-energy-production-must-grow
http://www.eea.europa.eu/highlights/eea-to-enhance-cooperation-with-greenland
issues: picture is too small and floating right, not really well placed
We want to have a better layout for main picture, themes portlet, and quotation.
Possible solution:
- large picture floating left
- move quotation to the right (otherwise it conflicts with image) and a bit more down.
- make themes portlet inline just below the title. (as an horisontal list)
Idea:
- to use the description text (bold under title) on a semi-transparent overlay on the large image via css. Similar to the overlay below (of course without the > read more links)
Image(description on image, 200px)
TO BE CONTINUED
=== Websites for inspiration ===
In the following sites there are some good elements of design which can give us some inspiration.
'''Previous design studies''' * 2009: [wiki:RedesignPlan2009] * 2009: [wiki:SwotWebDesignStudy2009] * 2007: EeaDesignStudies
'''Other'''
- [http://www.eea.europa.eu/about-us/documents/corporate-identity-manual Corporate identity manual]
- see also [https://svn.eionet.europa.eu/projects/Zope/search/opensearch?q=wiki%3AWebHistory EEA design history]
