The opportunities and obstacles of merging high-fashion and e-commerce

While fashion shops were never designed for the masses, a web site is the equivalent of opening a shop in every small town around the world. But the technological limitations of the web create obstacles to taking full advantage of the web’s global reach. A web site that is too difficult to use or takes too long to load can have the effect of frustrating people in every small town around the world. A fashion house can tightly control what happens on the runway or in a boutique. But a web site is a lesson in chaos. Web browser settings vary so much that it is difficult to control what the end user sees. One user may view the text on a site at one size while another may view it at twice that size. One user may have the sound turned off; another may have the graphics turned off. And the biggest hurdle of all is the user’s Internet connection. A slow connection can make for a long, frustrating experience, particularly when it comes to most high-end fashion sites.

But in some ways the fashion industry is creating problems for itself. Based on our analysis of more than 80 fashion web sites, the fashion industry builds heavier—and therefore slower and less user-friendly—web sites than other industries (see chart). Brokerage sites are the lightest; fashion the heaviest. The sum of the graphics and text of a web page equal the total weight of a page in kilobytes. The heavier the weight, the longer the page will take to download.

How long? A user with a 56k modem will have to wait half a second for the stripped-down Helmut Lang home page but a full minute and 40 seconds for Hugo Boss’s home page. The latest surveys show that consumers’ patience for web site downloading has shrunk to an incredible 3 seconds.

The best-designed web site is worthless if users don’t have the patience to wait for it to load or if the competition offers a site that loads more quickly. Although weight may seem like a trivial detail, companies that ignore it often pay for this oversight later in costly redesigns and lost sales. In May, Zona Research released its latest findings on the impact of slow-loading web sites on customer bailout and lost revenues. The report, “Need for Speed II,” estimates that e-retailers lose up to $25 billion a year due to poor web site performance.

But Flash is enormously popular. While mass-marketers like the Gap and Lands’ End avoid Flash, more than two-thirds of upscale sites rely on Flash. According to Michael Bereck, president of Fashion500.com, a company that builds and maintains web sites for fashion designers and sells fashion itself, Flash is the tool of choice in the fashion industry. “Designers prefer Flash because they are concerned about promoting their brand,” Bereck says. “You don’t need Flash for mass merchandising. However, if you’re selling upscale products, presentation is what will set your company apart from the competition.”

Bereck acknowledges that fashion sites sometimes go overboard in their use of Flash, but he maintains that the loss of web performance is offset by the benefits of creating a unique, engaging experience for the user. “We’ve tested both HTML and Flash versions of a site,” he says. “Time and again the designers want Flash.”

The key to using Flash is not to overuse it. Macromedia offers a list of 10 guidelines for building Flash sites that load quickly. The tips include not building files that exceed 40K or creating excessively long sound files. Nearly all the sites we studied violated one or many of these guidelines.

A good example is the Celine site. Celine makes extensive use of Flash, so much in fact that the user must sit through an animated “splash” screen before arriving at the home page. Approximately half of the high-end designers we studied use splash screens as a means of introducing the user to the company. But most users would rather skip the introduction. Splash screens may be interesting the first time one visits a site, but returning visitors must sit through the screens all over again. If you want to encourage repeat visitors, don’t build obstacles. And if you include a splash screen, make it easy for users to skip the intro. Some sites don’t even allow users to opt out of the introduction.

When users finally arrive at the home page of the Celine site, they are presented with a brief fashion show, complete with models walking down the runway and music playing in the background. It may seem natural for a fashion site to recreate the experience on the web. Unfortunately, the Internet can’t do what television can do. Celine attempted to do things with the technology that the technology doesn’t fully support. For example, even while using a high-speed cable modem, we found ourselves waiting for pages to load. When they did load, the movements were choppy, the sound far from realistic. And it didn’t present a flattering depiction of the models; this is a result of web designers keeping the picture resolution as low as possible to minimize file size. The result is a site that tries to do too much and ends up accomplishing much less.

IRCE 2008 Conference Multi-Media CD-ROM

We set out to view the clothing collections of two designers: Hugo Boss and Helmut Lang. The Hugo Boss site first presented us with a splash screen where we had to choose our language. After selecting English we were taken to a page, where there was no text, only a scrolling array of photos.

Only after rolling our cursor over the images did we realize that each image was a link to a different subsite, such as the Hugo home page, the Boss home page, or the Hugo Boss corporate page. After selecting the Boss page, we arrived at yet another animated splash page. Still, we saw no navigation system. After much fumbling around, we found a clothing collection. But even there we weren’t quite sure if we were viewing the entire collection. We also weren’t sure if we could easily find our way back again.

Then we went to the Helmut Lang home page. The home page loaded in a fraction of a second because there were no images to display, just text. We selected a link to the fall 2001 collection and came to a page where screen shots for the entire collection were displayed.

The collection page was enormously overweight because it displayed the entire collection on one continuous page, but it did have the benefit of allowing the customer to see everything with no further clicks. While we would have liked to have seen clothing descriptions, we preferred this Flash-less presentation because we got exactly what we wanted and after only two clicks. By contrast, the Hugo Boss collection took us upwards of 25 clicks to find.

We encountered numerous fashion sites where the simple process of viewing an entire collection could have taken an hour given all the Flash files involved.

One fashion site that gets high marks is Polo.com by Polo Ralph Lauren LLC. The site is clean and inviting and, in fact, looks a lot like other e-commerce apparel sites, with an easy-to-navigate layout. It weighs in at a svelte 82K, even lighter than the Gap site. It offers the full range of products and includes such features as clicking on color swatches to change the view of the product.

We arrived at this number by taking the average weight of more than 300 of the most popular sites on the Internet (91K) and subtracting 20%. This weight limit ensures that your site remains slightly faster than the pack.

This weight limit is still twice that of Yahoo! but lighter than most high-fashion sites. Arriving at the ideal size for a web site is a complex matter. Designers must look at their customers, their competition and other web sites.

Once you set a weight limit, you may be surprised how much easier web site management will become. Instead of just guessing at when you’ve inserted too many graphics onto a page, you’ll know exactly where you stand.

Your organization will begin to approach web development as a zero sum game. If you add something, you’ll have to subtract something. This discipline may be challenging to enforce initially, but it will prevent the inevitable flood of added product lines and announcements from dragging down your site.

Finally, keep an eye on the pack. Other sites may be getting lighter (thereby making your site heavier) or they may be getting heavier (giving you room to expand and still remain underweight).

You must always know how your site ranks against all major sites for your users will surely know as well.

Most fashion sites are at that awkward stage of imitating rather than innovating. Sites tend to look alike or attempt to replicate the real-world experience of a fashion show or a boutique. But there will be more sites that take chances, like the Helmut Lang pages; sites that challenge accepted notions of what a fashion site “should” look like.

How to weigh a site

Using Internet Explorer, select “Save As” from the File menu and save the home page to your computer. Internet Explorer will save the page as a separate HTML file with a folder that includes the necessary graphics. Select the file and folder, right click and select “Properties.” This will show the total weight in kilobytes. This process, however, often fails to capture all of the elements of more complex web pages and does not work well with Flash sites. But it will give a rough idea of how much a web page weighs.