WSA Winner
Wednesday September 7th, 2005
When this site came to my attention this week I was keen to see how a major brand like Sony had implemented a new site with standards based methodologies.
On a first glance I was surprised to see that the home page was not infact a table-based design, so closely it's layout structure resembles corporate sites made from the slice and dice techniques of old. But a glance at the HTML (yes I said HTML, not XHTML) shows that tables have been replaced with <div>s and that more semantic approach to markup has been taken.
Taking a closer look reveals a slightly different story (and with my HTMLTidy Firefox extension revealing 0 errors but 137 warnings) I decided to delve a little deeper into the home page code.
Warning: Removing this case may invalidate your warranty
The developers have interestingly chosen an HTML4 Loose DocType, in place of the obligatory XHTML Transitional designers often prefer. There are also multiple instances of unencoded ampersands, scripts without type attributes and oddly malformed anchors. All of which I presume are legacies of the CMS chosen to power the site. There are multiple <h1>s used for presentational, rather than for semantic reasons and ineffective alt attributes (eg: alttext3). You might also wince at element naming conventions,
<div class="cntMySonyAppletOutsideNotLoggedIn">
Of which my particular favourite is,
<div class="content pgeHomePageDefault
pgeHomePageDefaultHotStories2">
The main CSS file shows the complexity of markup and styles used to implement the site's design. As CSS files go, this is a behemoth and shows to full effect the site's propensity towards a large number of id and class attributes.
(Your) Input 5v == 400mA
By this point you may be wondering why, after not awarding here for a little while, that I chose to feature this site when there are now so many cleverly designed sites which are implemented with more semantic code, leaner CSS and which validate to a DocType stricter than HTML4 Loose?
Well there are two main reasons, the first being that the client is Sony and I sincerely hope that by including the site here we may learn more about the decisions which were taken in the development of the site and the reasons for adopting standards. Was the choice of standards a Sony directive to increase accessibility or reduce overheads? (That would be a story in itself and one which I look forward to reading.) Or was the choice for standards made by the developers alone?
The second reason is simple. The client is Sony.
Now, do I get a free PSP? ;)
Reviewed by Andy Clarke
#1
I like the clean design, but yes what is with the selector names.
I think they should get an award for the longest class name.
".pgeSpecialContentArticleLibraryArticleDetailPage"
I am sure it is some backend app that creates them or something.
Posted by Blake Scarbrough :: September 7th, 2005 at 08:42 PM
#2
From the SONY I would aspect something much better... really!
Posted by mario :: September 7th, 2005 at 11:28 PM
#3
Good choice Andy. It's nice to see something a little different appearing here.
As a corporate web developer by day (and Nefarious Web-Standards Crusader by night), it's interesting for me to see other corporations moving to web standards.
I suspect the use of web standards has more to do with accessibility for Sony, much as it does with my employer!
Posted by Tim :: September 8th, 2005 at 08:15 AM
#4
I totally understand the reasons for reviewing Sony's site but this site now carries the title "WSA Winner" and I don't feel too good about it.
I do wish to congratulate to the team responsible for bringing this site up to (closer to) web standards. I am sure that it must have been a struggle producing this inside a corporate environment.
Posted by Alen :: September 8th, 2005 at 08:25 AM
#5
When I first saw this site, I thought "now that is a site which is about to get a lot of exposure in the css galleries." I mean seriously, it's Sony! The only thing that could top that would be Apple, IMHO.
My first instinct is to agree with Alen, however, that something just doesn't feel so good about this site getting a WSA. Indeed, the code certainly has its limitations, and the site does not display perfectly in Safari. The design is nice, if that's your taste, though it's not earth shattering.
Yet, upon close scrutiny this WSA makes a whole lot of sense, and actually does make me feel good. Here's why:
A WSA is often given to sites that break new ground. In a sense, the mere fact that Sony has actually built a site with web standards is ground breaking. And, I feel good about this because if I were a WSA winner I would be honored to be up there with such high company. Maybe not from within the web standards community, but in the large scheme of things, which is what this award (in Sony's case) is really about. The design is great - is it the best, probably not, but it's certainly way better than much of the stuff that's out there these days, especially among global corporations.
Congrats Sony, and way to go Andy for stepping it up and breaking some new ground. Here's to a bright future for web standards, cheers.
Posted by Terry :: September 8th, 2005 at 03:15 PM
#6
This makes me wants to send in my latest project, let's hope you guys like it.
Posted by Arjen Geerse :: September 9th, 2005 at 11:45 AM
#7
As a member of the team that recently redeveloped the Sony Europe websites I'd like to thank you for the Web Standards Award.
I've read the various comments here and can understand why some people have reservations that the award has been given. The site does fall short of 100% standards compliance but (as correctly stated in posts above) there were various legacy CMS issues as well as a very rigid deadline that mean the first release still has issues that need resolving.
I'd like to pick up on a couple of relevant points from the posts and put them in the context of the project.
Why standards? - When the new Sony 'Like.No.Other' global catchline was launched a site redesign was required. Killing off the previous tables based design that was difficult and costly to maintain as well as the need to overhaul the site to comply with accessibility legislation led us to standards based development. Also, we wanted to make future changes to look and feel less costly and the only way to do this was to separate content from design.
Site structure - The redesign covers 38 countries in 28 languages including Cyrillic and Greek character sets. The design needed to be flexible enough to cope with languages such as German and Polish that have longer word lengths and therefore take up to twice as much space as the equivalent English phrase. Each site has a different configuration - for instance, some territories don't have a SonyStyle store - and so the design needed to allow for the absence of any component part.
Systems - Without going into detail there are multiple back end systems feeding the site with product information, stories, press releases and sales data. Multiply 2,000 product lines and hundreds of articles by 38 countries and you can appreciate the complexity of the project.
Team - The team is split across multiple countries - UK, Belgium, Germany & Turkey. This means that we had to be as specific as possible with our class names. What looks ugly to outsiders was vital to ensure everyone knows exactly what we're talking about.
Coding in the dark - At the start of the project we knew the page functionality but the look & feel was yet to be agreed. To hit the deadline we took a decision to code the HTML with a wireframe CSS and drop the look & feel in once it had been signed off. To achieve this we coded the pages with extra hooks to allow for any challenges the look & feel could give us. From a technical standpoint this is the part of the project that we are most proud of - when the look & feel was finally agreed the HTML changes requiered to replicate the design were minimal.
Accessibility - Although the site design is a lot more accessible than the previous incarnation we still have work to do to ensure that a number of accessibility issues, such as alternative versions of Flash content, are addressed.
Specific coding problems - As I mentioned earlier, the first delivery deadline had very little flexibility - the new site had to be live in the first week of September to support some major product announcements. For this reason the project is being delivered in phases. There are still fixes to apply that will address specific browser compatibility problems and CMS based anomalies. Also, we are looking at splitting the enormous CSS file so that a first time visitor has a smaller payload.
If anyone has further questions or comments that arise from this posting I'll be happy to answer them.
Posted by Colin :: September 10th, 2005 at 10:17 AM
#8
I don't want to seem negative. The site is pretty and all that, but, just for starters, it's built with invalid HTML 4.0 transitional, has in an invalid CSS, uses h1 headings throughout the page and not much else (that I could see... the source was really spaced out and difficult to look at), and it replies on JavaScript for page layout or something; turn it off and it breaks a bit.
Anyway, like I said it's pretty. Sorry if I'm being picky. I would expect to see something more in-tune with the criteria is all. This is a surprise. I know for a fact that if I made this site I would have been beaten up by the reviewers I reply on for insights and would have had to make a host of changes and fixes before going live with it.
That said, I did read Colin's remarks (is this the Colin I know?, If so, sorry man, no disrespect intended) and I can and do appreciate the complexity of the site and languages served and whatnot. But maybe the site should have been submitted here after the corrections are done. If the site's not complete, seems like it would have better to wait. Perhaps a lot of what jumped off the page at me would have been taken care of.
Posted by Mike Cherim :: September 10th, 2005 at 02:45 PM
#9
Hello! What is this site doing here? 162 validation errors in the home page!
Posted by Rich :: September 16th, 2005 at 02:29 PM
#10
The programming is okay... the design is okay ... but it has nothing to do with web standards!
Posted by Patte :: September 16th, 2005 at 04:46 PM
#11
But stil nice site. :)
Posted by nq :: September 18th, 2005 at 04:16 PM
#12
Ultra slow site, or need i a new processor, again?!
Posted by Peter :: October 8th, 2005 at 11:22 AM
#13
I am seeking a replacment remote control for my KVS 2952U tv and I have already been misled into buying RM862 which puts me into the ballpark but alas not on my seat.It lets me access menus but I can't scroll or select items.Also various menu symbols do are not present on the remote keypad.If someone in the vast ,impenetrable organisation known as Sony could unearth the vital numbers to fill in these blancs,RM---,I will be happier than a dog with two tails.I need a remote because before my boy lost the original he reset all the sound and picture parameters to suit his own odd tastes and untill I get a replacment I have to tolerate garish colours and overbright picture as well as thudding heavy bassy sounds.If you can furnish me with those missing numbers I'll be happier than a dog with two tails.Thanking you in hope and anticipation,Yours,Michael.
Posted by Michael Frank :: October 18th, 2005 at 05:03 PM
#14
Excuse me, but how did this manage to win an award? Take a look at the W3C's very own validator reports: "Failed validation, 200 errors". 200!
The homepage uses a mixture of HTML and XHTML markup, the doctype is written incorrectly and URL ampersands are not encoded as mentioned. Have a view at the style sheet. Errors galore! What a mess!
If they used such a large development team, couldn't they have come up with something better? All those resources to hand and this is the best they could come up with.
Using the "the client is Sony" as a catch-all excuse is simply unforgivable. Well, so what? Get it right or go home.
Web Standards? NOT. Get real.
Posted by Martin Crockett :: October 27th, 2005 at 01:12 PM
#15
:)
-UTF (Support all languages of the world)
Checked!
-CMS
Checked! (Java legacy content..must be integrated with their CRM)
-CSS
hrrmf checked!
-a web dev methodology?
Checked!???
Might I suggest to Mr.Sony UML or RUP?? (not only for the case drawings) this way your site structure and class names... would have had at least a chance for a common class naming convention scheme...
In fairness and to the point, well laid out MR.Sony -with a pressured deadline and all.
Quick and dirty = Fast result
Ask for more resources
Posted by Mikael Starck :: November 16th, 2005 at 09:15 PM
Comments on: Sony UK