Gallery / JCDecaux.co.uk« previous | next »
JCDecaux.co.uk
Current rating: 5.0 (429 votes)
(you have already voted for this entry)
- Added: 30 November 2006
- Designer: Tonic
- Submitter: Richard Hallows
Review:
I will let the developer explain why this site merits it's spot here at Stylegala. From my own point of view I think the light blue text could be an accessibility problem for some people. Apart from that I think this is a very well crafted site that goes a long way in promoting design, usability, accessibility and standards. The fact that this is a well known brand in Europe goes even further in promoting our cause.
Over to you Richard:
There's a lot of unique design templates and content throughout the site. Keep drilling down to discover them.
There were a few constraints e.g. The Creative Visualiser is an old school IE only web app. But we're tried our best to make the majority of the information available to everyone.
Just to point out a few not so obvious features...
1. The Flash header is built using the accessible XHTML DOM structure beneath it i.e. the XHTML is pumped into the Flash navigation via Javascript.
2. The entire layout is expandable, including the Flash header (just increase the text size)
3. You can enable / disable the Flash navigation and headings via the Accessibility page (http://www.jcdecaux.co.uk/access/)
We were a small HTML build team; 3 of us were responsible for all the HTML and CSS (http://www.jcdecaux.co.uk/includes/css/site/global.css) that we wrote over a number of months.
Richard Hallows
Senior Developer
Reviewed by Simon Terrence
There are 12 guest comments so far.
Gallery by month:
- August 2008 [1]
- July 2008 [1]
- June 2008 [3]
- February 2008 [1]
- January 2008 [1]
- December 2007 [1]
- October 2007 [2]
- September 2007 [1]
- July 2007 [2]
- June 2007 [1]
- May 2007 [3]
- April 2007 [1]
- March 2007 [3]
- February 2007 [2]
- January 2007 [4]
- December 2006 [3]
- November 2006 [3]
- October 2006 [3]
- September 2006 [3]
- August 2006 [3]
- June 2006 [5]
- May 2006 [1]
- April 2006 [1]
- March 2006 [2]
- February 2006 [1]
- January 2006 [3]
- December 2005 [3]
- November 2005 [3]
- October 2005 [3]
- September 2005 [6]
- August 2005 [7]
- July 2005 [9]
- June 2005 [7]
- May 2005 [9]
- April 2005 [12]
- March 2005 [20]
- February 2005 [6]
- January 2005 [7]
- December 2004 [9]
- November 2004 [14]
- October 2004 [14]
- September 2004 [15]
- August 2004 [24]
Gallery by rating:
Gallery All Stars:
- 02.2008 | Satsu Design
- 01.2008 | FortySeven Media
- 12.2007 | Biola Undergrad
- 12.2007 | Marius Roosendaal
- 10.2007 | Marius Roosendaal
- 09.2007 | Cravattificio.com
- 07.2007 | Rikcat Industries
- 06.2007 | Team Viget
- 05.2007 | Oxford Hotel
- 04.2007 | the Geniant Blog
- 03.2007 | Dept. of Spanish & Portuguese, UC Berkeley
- 02.2007 | A-Film
- 01.2007 | nonstep radio
- 12.2006 | Word Of Sport Bookshop
- 11.2006 | Syd Lieberman
- 10.2006 | C-Ville
- 09.2006 | Yes Insurance
- 08.2006 | Exozet
- 06.2006 | Hellgate: London
- 05.2006 | Dalit Freedom Network
- 04.2006 | Jakub Krčmář
- 03.2006 | Veerle's Blog
- 02.2006 | UX Magazine
- 01.2006 | E-knjige.net
- 12.2005 | The John Carroll School
- 11.2005 | Kutztown University
- 10.2005 | 31Three
- 09.2005 | Derek Powazek
- 08.2005 | A List Apart
- 07.2005 | Avalonstar
- 06.2005 | 9rules
- 05.2005 | folietto
- 04.2005 | web.burza - Superhero Edition
- 03.2005 | Joshuaink
- 02.2005 | Brother Jones Artwork
- 01.2005 | badboy.media.design
- 12.2004 | Mezzoblue
- 11.2004 | Shaun of the dead
- 10.2004 | Hicksdesign
- 09.2004 | Small Transport
- 08.2004 | Justwatchthesky
Comments / recent
About dan friml: The layout is good and also cplors are pretty....
[more]
About dan friml: looks like photoshop barfed on a canvas. The way h...
[more]
About dan friml: Bellissima l'immagine relativa al logo di Artworks...
[more]
About dan friml: Overall a nice looking site. Two points of improve...
[more]
About dan friml: This design definitely brings something to the tab...
[more]
Search
Features
- Stylegala BookStore
- The Stylegala BookStore has a massive archive of great books for you as a professional..
- Bullet madness
- Bullet madness is a list of 200 bullets, arrows and icons uploaded by our users.
- CSS Reference
- An alphabetical list over the most common CSS1 and CSS2 syntax and properties.
Sponsors

Designing with Web Standards
Under the hood it is very nice however on the surface it could be more eye candy. Tastes vary so don’t be too hurt. The top menu felt a little disconcerting as I thought the mouse over implied the text was changing! I would have chosen stronger title fonts. I don’t think the grey background works, consider white. That funny faded blue bar looks weird as it serves no purpose, consider removing it or adding text on top of it.
Personally I also think it should have been 2 columns at the bottom with “How can we help” prominent and the search box moved to the top right where it belongs.
Good site overall I would give 8/10
I would have to say the site has some minor room for improvements but overall it is well done. The use of flash is seamless and the sIFR for the headers looks less pixelated than normal, which is nice. Overall I would give the site a 5/10. The site is nice but they don't pass CSS, 508, or WAI. Those are all very easy and minor fixes though. Once those issues are corrected I would give them a 7 or so. They could also use some AJAX for the tab sections and a few minor tweaks that would really put this site on top.
Bravo for the Flash implementation. I was pleasantly surprised when I disabled javascript and found an identical navigation.
A few pointers on the flash:
- The tab order through the links is a bit random.
- It's completely inaccessible to screen readers.
You can take a look at the Adobe accessibility resource centre to get your started:
http://www.adobe.com/accessibility/
Another good resource is the Adobe accessibility blog:
http://blogs.adobe.com/accessibility/
You've obviouslly put alot of effort into this aspect of the site, it would be a shame not to take it all the way :)
It's nice to see the layout intact with font-size increase, it's a practice not often used. The design of the site provides a good opportunity to do this without extra markup (the loss of the bg shading in the layout on font++, isn't too significant a trade off, as it might be in many layouts). It would be nice if they could have tweaked sIFR to scale as the header flash does (but I imagine that's a whole other can of worms).
The spacing seems a little loose to me (e.g. the space between primary nav and secondary nav, and then the space between the secondary nav and primary content) … tends to make the layout not hold together as well as it might. Also, because there's not so much going on in the layout other than type, I think the typography could be tightened up a little (spacing between paragraphs, beneath headings, etc). Other than the flicker on some of the hovers, it's nice technically, but in my opinion might benefit from a little further refinement design-wise.
I kinda prefer viewing the site with javascript turned off - the flash just doesn't quite do enough, and the links look odd the way they move when you hover - flash for the sake of flash(?)
The rest of the site? ... Yeah, it's OK. Tidy. Good mark-up (a given) ...
It's interesting to see a 'zoom' layout in action, so hats off for that - but it does seem to have dictated some design decisions. Perhaps, dare I say, 'restricting' the site rather than 'setting it free' ...
Dunno. It's not 'rocking my world', but fair play with the 'zoom' thing.
I found this site to be really lacking, to the point where it looked like the designer got bored half way through and decided "ah that'll do, it's presentable".
Reading the homepage, I realised that I didn't have the first clue what the company did, or was trying to say. Then I realised they are in advertising, where sense seems to be something that is thrown out, and we'll all supposed to just "get it" through subliminal messaging perhaps.
The navigation -- a pointless exercise in futility it seemed to me. Just because you can, it doesn't follow that you should.
The colour scheme is way too bland, in fact downright boring to the point where I couldn't wait to leave the site. The font use and colour of text is just suicidal. Why are so many designers expecting their audience to do all the work for them lately? I don't need to struggle to read your text - I can just go elsewhere, in a heartbeat in fact.
I personally think that this is the worst site I've ever loo
Hi. I'm Richard, one of the HTML & CSS developers who worked on the project. Thank you for all your feedback and to those who provided constructive criticisms. As I'm a developer I can't comment on the design feedback, but I'll certainly pass all the remarks onto the designers.
@ Tom: Thanks very much for the helpful feedback. I've passed those two great resources on to the Flash developers. It's something I'll take a personal interest in as well.
@ Ryan: "...tweaked sIFR… (but I imagine that's a whole other can of worms)." Yeap :) it was on our "nice-to-have" list, but time issues relegated it to a low priority. However, it does rescale on a page refresh and we were happy with that compromise.
"Other than the flicker on some of the hovers". Good point. We initially used the "three states in one image" approach, but it caused problems when the text was enlarged or wrapped. Can anyone recommend a more modern technique that might help fix the flicker?
@ kevadamson: "flash for the sake of flash(?)". I understand why you might think this, but if you'll allow me a moment to explain our reasoning. One of our goals as developers was to deliver consistent type to the majority of the users. We believed a Flash header (with an HTML alternative) was one the most cost effective solutions for achieving this. Having said that, I'm completely open to a discussion about other approaches we could have taken. Does anyone have any suggestions?
@ MazY: "The navigation -- a pointless exercise in futility it seemed to me. Just because you can, it doesn't follow that you should." On the contrary, I believe it was well reasoned for this project and its constraints. We chose the Flash technology for the aforementioned type reason. We decided to use the DOM-Javascript approach to minimise maintenance time; knowing that the navigation content and order were likely to change, we invested a little more time up front to ensure a developer with no Flash skills could update the navigation. It helped a lot.
@ Seth: "The use of flash is seamless". Thank you :)
"They could also use some AJAX for the tab sections". I agree :) It was another one of our "nice-to-haves".
"but they don't pass CSS, 508, or WAI". Thanks for the heads up. We've just fixed all but two of the CSS errors. The remaining two are IE specific hacks; the IE7 clearfix one and the one to hide the print CSS from IE5.5. I expect we'll have to except these errors on this project, but we'll be investigating a better approach for our next one. How does everyone feel about conditional comments?
We also fixed the glaring 508/WAI issues of the missing label and default language. We're currently working through the guidelines again to make sure nothing else has been missed.
Thanks again for all your feedback and we're looking forward to more (perhaps in the forum).
"We initially used the "three states in one image" approach, but it caused problems when the text was enlarged or wrapped. Can anyone recommend a more modern technique that might help fix the flicker?"
Positioning the states further apart would fix this (so a 1000px tall image for example, with the three states top middle and bottom).
"Positioning the states further apart would fix this" When we read that we collectively went "ohhh, of course!" :) Thanks tom!