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.