Feature

Whizzy front ends

Web design is one of the areas where the techies can still blind the business with science. Mark Vernon helps get you past the geek-speak

 

In an ideal world infinite bandwidth would come at virtually no cost. Web sites with the heaviest graphics would flash as quickly upon the screen as those with none at all. But even if this IP nirvana is one day reached, it is not clear that Web sites will be the better for it. At least when it comes to design, the most effective Web sites are often those that work within their limits.

Like the composer who with only a 12 note scale turns out a symphony, the best Web designers are those who understand the range of technologies at their fingertips and can apply them most creatively to the task at hand. So what are the limits, and what are the costs?

"Conrad Hilton said that the three most important things to consider when building a new hotel were location, location and location. When designing a Web site, the three most important facts to consider are content, content and content," says Tim Field, of e-business consultants successunlimited.co.uk

"Fancy graphics and blinking text may impress at first, but surfers will only stay and return if the content is good." The other important element is speed of download. "Graphics are what eat up the loading time of your site," continues Jennifer Stewart of Web content consultants write101.com. Thinking of the domestic user she advises, "A rough rule of thumb to determine good loading time is to keep the entire page around 30k. Images should be between 6 to 8k. Each additional 2k adds approximately one second to loading time."

Having said that, bandwidth has increased dramatically in recent months, notably on the desktops of corporate users. "The recent increase of users with wideband connections, combined with compact new interactive media such as Flash, Shockwave, and Java, has given Web designers the flexibility to create highly graphical, interactive sites - the projects that people were dreaming about in the early nineties," says Smokey Wantoch, of Web consultants, Design Net. The constraints on designers have therefore slackened somewhat.

In fact, if anything the pressure is now on sites that originally opted for low technology graphics in the interest of fast download. "We are integrating more 'flash' animation into the Web site to stay ahead of competition from similar Web sites," says Huw Williams, the designer of Liquid-Life.com, an online magazine covering bars and club culture. Another approach is to allow users to select the level of graphics that fits their system. "We use a combination of many graphical elements," says Steven Blackburn, online marketing director at gameplay.com. "For example, on the homepage we have an option to turn off the Flash used throughout the site. We also test the site to make sure it is compatible with low spec machines as far as possible."

It is, of course, worth asking how much a Web site costs, or rather, what a certain amount of cash can provide. Most professional designers start at around £5,000 as the minimal spend for a company that is serious about using the Web. Brochure-ware may be bought for less, but as Dave Taylor, Creative Director at Web designers Imaginet points out, you can never be quite sure what you are buying at this level. Poor navigation or tacky graphics are the likely result, and when the company's image and reputation are online, a bad site can do more harm than good.

"£5k will get a few days quality design and several days of quality site build, providing a solid foundation for future developments, and cementing the online brand development," continues Taylor. "It will probably include a few animated Gifs, maybe a simple customised Java applet and maybe a couple of server-side scripted input forms." Taylor reckons that a professional Web designer costs between £400-£600 per day, or perhaps up to £1,000 per day in London. Freelancers can cost less, but they will not have the back up of a full service team.

"10k will get all of the above, plus a couple of days strategic consultancy to define a more long term online vision, more time devoted to the creative design, and a quantity of database and GCI programming development in JSP, PHP, Perl, ASP and so on," says Taylor.

 

"So you would get a better designed site, probably double the number of pages and a simple product database. Add on another 7k for a shopping cart module development hooked into a secure payment system such as SecureTrading or Netbanks." More than £20,000 and sites can begin to deploy very complex data delivery and online purchase systems.

The Web is the leading interactive medium of today, but tomorrow it will be competing with interactive TV and a host of others. So, how will a Web investment now fare in the future? Will it inevitably be cannabilised or rendered redundant? "iTV presents different challenges and opportunities," says Gerald Morgan, CTO of tempz.com, the online recruitment agency. "The ability to stream high-quality video will be useful, plus there is a different demographic we can tap into. However it is better suited to short interactions with minimal-data input, which means it will complement our Web site, not replace it." He believes that firms should have kiosks, WAP, SMS, and IVR systems on the roadmap too, to ensure functionality even without a PC.

Furniture Online

Name: Julian Field, Managing Director

Company: Furniture Online - furniture retailer

What concepts drove the design of your Web page? 
It must clearly communicate that we sell furniture online as there are too many Web sites that are not e-commerce enabled. It must also appeal to people in a creative sense to provide customers with inspiration. We have tended to go for minimal design features.

What technologies have enabled these ideas? 
We use basic HTML templates for the home page and product pages. These are underpinned by dynamically generated text and images that are supplied on demand by a database. This technology is supplied by ubik.net who use their own powerful scripting language. We will use Flash for our online magazine.

How much did it cost?
Our budget for the front end design was £70K and we expect to be within budget when we re-launch in September. Time-wise it has probably taken about 20 man-days of board level management time.

What about the future?
As bandwidth increases we will be looking to develop more sophisticated content such as video tours and "design a room" software with more features. We expect interactive TV to become a significant factor in 6 to 12 months. We therefore have plans to design Web pages that are optimised for use on iTV.

Extraordinary World

Name: Tim Rich, co-founder

Company: Extraordinary World - football Web site

What concepts drove the design of your Web page?
Energy, excitement and a dollop of attitude are key. There are more than 50 new football Web sites launched every week in the UK. Speed is important: in fact we have just cut our download time on the home page by 50 per cent.

What technologies have enabled these ideas? 
You can make your home page buzz in lots of ways but our approach is to use well-chosen animated gifs, strong images, and strong headlines. We achieved the download reduction by replacing some image-led links with compelling text and making images work harder.

We worked with Altitude Productions. Outsourcing can slow you up, but it worked for us economically and in terms of performance.

How much did it cost?
Financially, our overall budget for the outsourced aspect of the site over a nine month period is less than £50,000. That figure does not include the cost and value of our time and expertise. We try new things out the whole time so we are constantly developing it. There is no point trying to create a 100 per cent perfect home page - you should try new ideas, take risks and develop your learning.

Face

Name: Michael Paine, co-founder

Company: Face - cutting edge watch retailers

What concepts drove the design of your Web page? 
We were trying to design an e-commerce store that is clean, funky and alternative, to appeal to a specific target audience. The users buy things like the drum-and-bass watch with tracks by DJ Ken Ishii.

What technologies have enabled these ideas? 
Faceforwatches.com uses Flash 4's new programming components all the way through, which gives greater control of the design without slowing the user down. The navigation is a good bit, where users can select to view the products by brand, style, specials and the featured face, with watches rotating in a virtual gallery.

Did you have any worries about the design then? 
We spent a lot of time getting the designs right, getting people's views along the way. One thing took us by surprise, about 80 per cent of sales were being made by US shoppers. Primarily we had concentrated on the UK market so although we expected the US shoppers to account for a fair percentage we didn't expect it to be quite that high.

What about the future?
We are considering more functionality, such as featured watches displaying the local time, games and competitions and, using Generator and template files in Flash, users should be able to e-mail a working watch that can be used as a clock/screensaver.

Propertyworld.com

Name: Simon Waugh, CEO

Company: Propertyworld.com - online estate agent

What concepts drove the design of your Web page? 

To allow the user to gain straightforward and quick access to a vast choice of available property and a wide range of property-associated products and services. We wanted enough design features, but did not want to distract the user with Flash or other aesthetics.

What technologies have enabled these ideas? 
Java has featured strongly, including Java Application Server, Java Enterprise Beans, Java Servlets and Java Server Pages. These were used because they will enhance response, process and database performance. The best bit would be the shopping kart for registering interest in one or more properties. A single email will then send the enquiry to all the appropriate agents representing those properties.

How much did it cost?
The design element took a total of 13 days to create out of a total site build time of 6 months. Design is subjective and so, as expected, there was a great deal of discussion both in-house and with third parties before we achieved the result we wanted.

What about the future?
Application server technology will enable us to update the site and slot-in new functionality much more quickly - rather like Lego. We anticipate that we will be able to add new features for new online media as they emerge.

Ad Trader

Name: James Bromley, head of business development

Company: Ad Trader, UK buying and selling site

What concepts drove the design of your Web page? 
To provide an easy-to-use, strongly branded user interface, carrying over 200,000 ads each week. We chose a clean design with sophisticated functionality so as to have "enough" design features for the user to make full use of that, while ensuring that it was easy to use and the screens weren't cluttered.

What technologies have enabled these ideas? 
A full range of technologies including DHTML, Javascript, gifs and CGI/Perl. We opted for these technologies because they would give us the design we wanted while minimizing development time. We didn't use Flash because it is not supported across all browsers and we wanted to maximize accessibility for users.

Did you have any worries about the design then? 
We made some small refinements to the initial designs but we had developed a thorough brief and worked very closely with E-Marketing so there were no major surprises. Users did not use some of the navigation as we had planned so we have evolved it accordingly.

What about the future?
The design and branding would transfer easily to other online platforms like interactive TV. Increases in bandwidth will allow us to increase the speed of our service rather than add bells and whistles.

Web Design Jargon Buster

 

  • ASP Active Server Pages is an open, compile-free application environment in which you can combine HTML pages, scripts, and other components to create Web applications.

     

  • CGI stands for Common Gateway Interface, and is a mechanism through which a browser is allowed to communicate with programs running on a server.

     

  • DHTML Dynamic Hypertext Mark-up Language is the coding that Web browsers read to create Web pages on the hoof.

     

  • Flash is the standard for animating Web pages and is made by Macromedia. It comes in the form of a plug-in for the browser. Flash allows moving pictures and sounds as very small files that don't take long to download.

     

  • GIF Graphics Interchange Format is the most common graphics compression used on the Web to display images. Animated GIFs are several discrete images that run together to create movement.

     

  • IVR Interactive Voice Response is voice as opposed to keyboard-activated computing.

     

  • Java Programming language developed by Sun Microsystems with the concept that the same software should run on many different kinds of computers, consumer gadgets, and other devices.

     

  • Java Enterprise Beans A software component built in Java that implements a control or provides a series of functions for use within another application.

     

  • JSP Java Server Pages is similar to ASP, the difference being that the code is exclusively Java.

     

  • JavaScript is a scripting language designed by Netscape and has nothing to do with Java.

     

  • JPEG Joint Photographics Expert Group file format good for photographs. Can produce small images in exchange for lower quality.

     

  • Perl is a compile-free language which is ideally suited for CGI programming.

     

  • PHP is also a scripting technology, designed for embedding into Web pages or with CGI. It does not directly support any object technologies such as COM or CORBA, although it is distributed under open-source license.

     

  • Scripted Input Forms are customised feedback forms written for particular Web page use.

     

  • SMS Short Message Service is used for sending/receiving text messages on mobile devices.

     


Email Alerts

Register now to receive ComputerWeekly.com IT-related news, guides and more, delivered to your inbox.
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

This was first published in September 2000

 

COMMENTS powered by Disqus  //  Commenting policy