Skip to Content


Gallery / JCDecaux.co.uk« previous | next »

JCDecaux.co.uk image

JCDecaux.co.uk

Current rating: 5.0 (429 votes)

(you have already voted for this entry)

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

Designing with Web StandardsDesigning with Web Standards
Standards aren't about leaving users behind or adhering to inflexible rules. Standards are about building sophisticated, beautiful sites that will work as well tomorrow as they do today.
Buy at amazon for only $23.10

There are 12 guest comments so far.

commentat 12:40 on 30 November 2006, Johan De Silva wrote:

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

commentat 15:30 on 30 November 2006, Seth wrote:

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.

commentat 18:05 on 30 November 2006, Tom wrote:

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 :)

commentat 18:07 on 30 November 2006, ryan wrote:

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.

commentat 00:39 on 01 December 2006, kevadamson wrote:

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.

commentat 23:30 on 04 December 2006, MazY wrote:

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

commentat 17:07 on 05 December 2006, Richard wrote:

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.

commentat 17:10 on 05 December 2006, Richard wrote:

"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?

commentat 17:11 on 05 December 2006, Richard wrote:

@ 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.

commentat 17:13 on 05 December 2006, Richard wrote:

@ 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).

commentat 20:39 on 05 December 2006, tom wrote:

"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).

commentat 11:04 on 06 December 2006, Richard wrote:

"Positioning the states further apart would fix this" When we read that we collectively went "ohhh, of course!" :) Thanks tom!


Gallery by month:

Gallery by rating:

Gallery All Stars:

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

Logo design for $149

Advertise here