Victoria’s Secret Doesn’t Know The Right Way To Build A Website, Or Just Doesn’t Care
I can’t help it, I’m a front end guy so as I peruse the web and I see something that sparks my interest I fire up Firebug, my go-to Firefox plugin to see the “meat and potatoes of a website”. Websites are like onions and I like to analyze the layers to get at the good stuff, deconstruct it, and understand it.
I work on Yumdrop.com, a popular lingerie site. Often I’m out there looking to see what the competition is doing to see how we stack up and also evaluate how well we’re pushing the envelope in our particular niche. Victoria’s Secret is by far the leader in this industry as far as market share, but their website could’ve been built in 2002.
When I peeled back Giselle’s onion I was flabbergasted. I haven’t seen egregious CSS like this in a long time. As developers have embraced web standards over the years (something I have done from the start) and standards based practices have been understood and adopted, people have just gotten a better understanding of how it all comes together. You don’t see blatant misuse of CSS like this anymore. Even basic knowledge of CSS inheritance could let them avoid this debacle.
On http://www2.victoriassecret.com/html/includes/globalstyles_normal.css for example:
.blacktext {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:10px; }
.blacktext2 {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:11px; font-weight:bold }
.blacktext3 {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:11px; }
.text2 {color:#333333; font-family:Arial, Helvetica,sans-serif; font-size:11px; text-decoration: none;}
.text3 {color:#333333; font : 10px/14px Arial, Helvetica, sans-serif; text-decoration: none;}
.textPink {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-size:10px; }
.textPink11px {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-size:11px; }
.textPinkBold {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-weight:bold;font-size:11px; }
It goes on and on and makes me quite agitated 
Turn off Javascript. They use it to write OUT their styling.
No Javascript, No Styling, NO degradation. You end up with something like THIS ». The complete header with site navigation and footer don’t even render, making the site pretty useless to navigate or use.
And as laughable as all this it keeps getting better!
The site navigation is 1 large image map! This is just not done in practice. How can screen readers access the content? How do visually impaired users shop?
Never mind degradation here, there are so many better ways to construct such navigation. Each time you visit a different department you must create a whole new image map image. What a waste of time. If your navigation changes, you have to recreate all of the active department images all over again. With modern development techniques this just makes no sense.
There’s just too much to point out so I’ll just list the rest I briefly spotted in the 5 minutes I looked..
- They’re using a centered div w/ css to center the containing wrapper, but they use tables for layout.
- Extraneous use of classes all over the markup because they don’t understand inheritance.
- Validate much? Of course not, are you even surprised though?
As a web developer, you think that “doing things the right way” is part of building a successful web presence, but as time goes on I’m beginning to realize that it really doesn’t matter as much as we often think. I wonder if Victoria’s Secret developers know that it is not developed with the best practices, I wonder if they care. I wonder if they have an internal team or whether they just outsourced it to a very misguided web shop.
If anyone at VS wants me to scramble their onion, contact me. You deserve better.
Popularity: 11% [?]
Chart From Hitwise
Bitch Slapped!!!
