streaming media
art studios graphic artists design resource
streaming media
  HOME | CONTENT | RESOURCES | HELPA Member of the Neotrope® Interactive Network 
streaming media
graphic arts photoshop using photoshop
streaming media
  Digital Author - the online magazine for creators of digital content
digital authoring
graphic arts photoshop using photoshop
streaming media
 
SEARCH
streaming media
streaming media
streaming media
Images on this site were compressed using e-Vue MPEG4 technology in 2001, which was groundbreaking at the time for its DRM component and higher compression than JPG, however e-Vue is no more — we are transitioning these images to JPEG for 2004.
streaming media
digital author feature articles

Home > Feature Articles > Article > Page 1 | 2
You've Got the Look
E-Commerce Designs Have To Do
Much More Than Look Pretty

by Christopher Simmons, executive editor
Copyright © 2000 Christopher Simmons

Back in mid-1995, when I helped launch one of the first online computer reseller Web sites, the Web was very different. There were less than 40,000 domains registered, and certainly no "dot com" billboards, TV commercials and radio spots competing for our daily attention.

Back then, the coolest things on the Web were the "fish cam" Web site, and the only cool e-commerce site was the Levi Strauss Web site which used server-push technology to update graphics quickly on a 640x480 video-wall (animated GIFs did not yet exist). In fact, we copied their concept for our own e-commerce site. Designing Web sites back in these days was pretty easy because there was really only one graphical Web browser (Netscape 2.1), one screen size to use (640x480), and the online audience was so small, nobody really expected to make any money. The Dell online computer empire, arguably one of the first real e-commerce success stories, had not even been built yet. AOL users couldn't even see the Web yet, and there was no Internet Explorer.

Back then, you could get away with almost anything and it would be greeted with optimism (unless the original Suck online magazine saw your site and ripped it to shreds). There were few off-the-shelf ecommerce packages (ours was proprietary), and products like iCat and Mercantec had not yet been published. Almost everyone used Sun or SGI servers, running Netscape commerce server, and likely the Apache Web server software. Your only real design consideration was to always use a maximum of 256-colors (8-bit), and test the download speed for 14.4 modems. Unfortunately for our particular project, the investors pulled the plug after six months because they weren't willing to invest in building an audience over time.

© 2000 Christopher Simmons
Shown above: sample e-commerce solution flowchart, showing possible elements which "drive" the commerce system on the back-end, such as templates, databases, and payment gateway.

Fast forward five years to the present and it's a very different world wide Web. There are now nearly six million registered domain names, tens of thousands of shopping sites selling almost anything you can imagine, and home-based Web connection speeds range from 28.8kbps to 1.5mbit or more. The Web audience has exploded from the hundreds of thousands to millions and millions, and growing so quickly that "online" is one of the most popular topics almost everywhere you go. There are now multiple Web browsers and various iterations of each, many more monitor sizes in use with better graphics cards (thankfully), and the term multimedia no longer brings a blank stare to the face of WindowsPC users. There are a few offshoots to consider such as WebTV and text-based Web browsers being incorporated into telephones, personal data assistants (PDAs), car stereo systems, and even watches.

There are literally hundreds of choices for e-commerce solutions, starting at free and costing up to half a million dollars before thefirst online customer ever sees the site. There are numerous platforms to serve Web sites on including the MacOS (and OSX), UNIX and its variants (Solaris, IRIX, Linux, etc.), and WindowsNT. And, unlike them olden days, all of these new elements now affect how an e-commerce site is both designed and built.

Design, in the context of e-commerce for the Web, is much more than the simple look and feel of the user interface and whether you choose to apply that bevel filter one more time to your navigation buttons or not. While the overall look and feel of a shopping site can be created in much the usual fashion, by creating graphical mockups in a program like Adobe Photoshop, theactual architecture and even the type of elements placed on each page must reflect the abilities of the e-commerce software being used to serve pages to site visitors (shoppers). What this means is that your design might work well being served through a standard HTML 3.2/4.0 Webpage, loaded via http by your browser, but may fail under the necessities of the software chosen to drive the site.

Designing The Back-End
What most designers are unaware of, unless they've been involved in a large e-commerce project, is that the majority of e-commerce software (meaning the server-based binary application running the store) parses all the pages and graphics shown to a shopper. By "parsing," I mean that all files are loaded first by the software before reaching the Web browser. This can considerably slow the transmission of data to the client Web browser from the server. A reasonable 15-second download time when downloaded conventionally can turn in to 30-seconds or more depending on server and traffic load. During very heavy use, and when multiple redundant systems are not used, this could turn into as much as 40-seconds or more, which would be unacceptable for a shopper going from page to page.

Most e-commerce sites with a budget under $250,000 will likely not have multiple redundant servers for their e-shop. The new and popular caching servers may not even help because an actual application must still parse all content. In other words, the slowdown is not entirely due to the graphics/content, but the efficiency of the application running the store, and the quality and speed of the Web server hardware running the site (on which the application is being "run" or executed).

Ultimately, what this means to the graphic designer, is that the graphics should be as small and compact as possible (even more so than in usual Web design practice), and if you are appraised of what kind of technology will be used (such as single WindowsNT server running Internet Information Server), you may wish to revise your design to be mostly HTML rather than graphical.

Smaller, low-traffic sites might be able to be more graphic-intense without beefing up hardware andsoftware. High-traffic sites might need to limit graphics if they can't afford additional capacity. On the other hand, some kinds of sites require numerous and compelling graphics in order to properly convey the sales message to potential customers, and must walk a balancing act between what they want to do and what their budget allows for on the technical back-end.

The reason most commerce software applications parse all pages is so that custom tags may be embedded into the HTML such as "<TAME ^VIEWCART>" which might place the contents of the current customer's shopping cart on the page where the tag is used. Other reasons may include what is called "maintaining state," which essentially means keeping track of the customer from page to page (often used by carts to track clients who don't accept cookies). The other compelling reason is that it allows shortcuts and loops to be used within pages, much like the relative path tag in HTML, as well as database-driven content. A shortcut might be to simply put in a tag "<TAME ^IMAGE=123.gif>" and because the server directory where all graphics are kept has been defined in the store setup, you don't need to use either absolute (i.e., http://www.yourdomain.com/shop/image/123.gif) or relative (relative paths are defined typically as relative to the root directory with an HTML tag in the head of each page on the site) link statements to graphics and pages.

Many designers may never have to deal with the actual architecture of the site, leaving that to either the programmer or information architect (depending on type of workgroup or design shop), but knowledge of the function behind the actual use of the graphic design will ensure a better and more efficient shopping experience.

Finding a Balance
Managing the balance between design and functionality is an ongoing process as systems improve, software is upgraded, and additional product lines are added to the shops. Much like a so-called "brick and mortar" store which constantly shuffles the window displays while always seeking better pricing from suppliers, the online store is similarly a dynamic management process and not a simple "build it once, and they will buy" proposition. E-sellers must be prepared to spend nearly as much time on their online venture as their physical "real world" venture. Further, most online ventures will not immediately be profitable, and must be constantly revised and massaged to locate that elusive balance we keep mentioning. Much like the physical store window displays and store aisle "end caps," the proper selection of "featured items" can also help to stick the customer to the site to continue browsing, and hopefully buy.

The importance of overall site design proved its importance this past holiday (1999) season, when the largest online buying audience in history pulled out their credit cards and logged on to shop and buy. The wake-up call to more than a few shopping site owners was that their overall design and implementation needed to be reviewed.

According to a report aired on ABC-TV, one out of four online shoppers were unable to successfuly shop online this holiday (1999). Reasons given include: pages took too long to load, pages hung up (never loaded) when going from page to page, images would not load (broken image icons), numerous server errors (typical of WindowsNT based servers are ASP and ODBC errors), and failures at the checkout and payment stage (typically due to using third-party automated payment processors who serve thousands of other sites at the same time). Reportedly, Toys-R-Us suffered major service outtages because too many people were visiting their Web site after their nationwide coupon book promotion was mailed out. They vastly under-estimated their potential audience, and the capability of their systems. Amazon.com, CD-NOW, and others planned appropriately, combining beefed up servers, fault-tolerant commerce software (jumps to new machine when too many users are on one system), and a simple, clean, HTML-based site design.


Continued Next Page >

Home > Feature Articles > Article > Page 1 | 2

NOTICE: All content on this site is protected by U.S. and international copyright laws. By viewing this content, you agree to be bound by our Terms of Use. Reproduction, redistribution, or derivitive works in any form is strictly prohibited. Copyright © 1995-2002 Christopher Simmons — All Rights Reserved.
streaming media
 
 

shop at Amazon.com
100 Hot Books
100 Hot CDs
100 Hot DVDs
Hottest Software

Book Search


More Cool Stuff

Copr. ©śChristopher Simmons
Music to get creative!
Listen to the electronica space CD "Beserker" by Christopher Simmons while you work and be more creative!
More Info

streaming media streaming media
Top of Page | Home Page | Privacy | Panic Button

This site needs a modern web browser and Java. More Info
This Web site is powered by Neotrope™ Hosting

streaming media streaming media
digital artwork
streaming media
streaming media   streaming media
streaming media
Web design the neotrope(tm) network - click to gostreaming media
streaming media
neotrope