Web design and Web design and implementationimplementation

Dr. Tim King13th May 2008

2/14

My CVMy CV Computer Lab 1973-1981

– Wrote a relational database for Ph.D. Lecturer, University of Bath 1981-1983 R&D Director 1984-1986

– Wrote AmigaDOS Founded Perihelion with Jack Lang 1986

– Distributed OS, embedded systems, database systems Founded UK Online 1994

– First UK ISP with content– Sold to EasyNet 1996

Independent consultant– Technical Due Diligence for VCs– Advice for Sainsbury’s, Sony, Home Office etc– Strategy for small companies and following M&As

3/14

Web designWeb design

Get the domain name right– Inventive: business.com vs PlentyOfFish (dating site)

Design is important– But functionality more so– Integrate good design with backend databases

It’s another type of publishing– Web publishing is no different from other types of publishing– Spelling, grammar, point size, broken links, incorrect

captions

Navigation is important– Make the navigation clear– Three clicks maximum to get anywhere– Hard when Sainsbury’s have 25,000 line items

4/14

Common mistakesCommon mistakes

Too much text Frames Huge images Distracting colour schemes Flashing gifs, scrolling text Music Unclear navigation Unreadable Cluttered

Useless Title Mystery Meat

Navigation you have to roll overZero intelligible content

Refuses to work with IE Only works with IE Requires Flash Assumes screen size Assumes font size Contains errors

www.webpagesthatsuck.com

5/14

Poor design examplePoor design example

Needs more than 1024x768

Navigation a mess

Far too much material

Title seems to be confused

with keywords

Mixture of fonts

6/14

Good design exampleGood design example

Pop-over sub-menus

Recent news stories

Search clearly available

Discussion forumsClear link to

technical support

Consistent navigation

Special event links

Quick links to sub areas

Services for subscribers

7/14

Protected and encrypted Protected and encrypted pagespages

Most web sites are open to all Protected pages for

– Subscribers, Suppliers, Customers, Staff– Protected by

• Username / pw; IP address; Domain name of browser• Combinations of these

Most traffic to and from web sites is in clear– Potential eavesdropping possible– Secure Socket Layer (SSL) encrypts data

Widely used technology– Used whenever privacy is important

• Payment• Secure communication (spooks, terrorists, medical)

8/14

Dynamic pagesDynamic pages

HTML with extra tags pre-processed– Java Server Pages (JSP)– Active Server Pages (ASP)

AJAX (Asynchronous Javascript and XML)– Define page with named sections– Make XMLRequest call with data entered– When result returns update DOM– No need to refresh entire web page– Google Web Toolkit

• Java and AJAX• http://code.google.com/webtoolkit• Desire to produce web apps that compete with

local ones

9/14

Page transition diagramPage transition diagram

Help Company Products Services Support

Home page

About Us ContactSearch Sitemap Free Paid

Downloads Chat

Product

search

Service 1

Service 2

Service 3

Service 4

Dynamic pages

Applications

Static pages

Protected pages

Payment

Encrypted pages

Shortcuts

Search from every pagePayment from free support page

10/14

Multiple targetsMultiple targets Different devices

– Different browsers – Different bandwidth, resolutions, screen sizes, colours, printers– Phones & PDAs– TV: Open TV, DVB-TAM-HTML, WebTV

XML helps, but doesn’t solve everything

Phones and PDAs have different physical characteristics– WAP issues– Small screens– Battery life essential issue– Java Midlets a step forward

TV and other streaming media have different metaphors to the Web– Device limitations– Audio important– High colour depth, poor display quality– Evolution: Text -> Still Pictures-> Moving Pix-> 3D

11/14

Merchant SystemsMerchant Systems

Requirements– User logon required?– Remember credit card details?– Same price for everyone?– Special offers (free delivery if over $100 spent)– Backend integration?– Help desk support?– Online credit checking?– Order picking?– Online stock shown?

Examples– Microsoft .NET, FatWire, InterShop

12/14

Outline Physical DesignOutline Physical Design

Load balancer

Web Server

(static data)

Application Server

(business logic)

Database server

(orders)

Legacy

(stock control)

Big IP

Apache

J2EE

OPS

IBM

13/14

SizingSizing

Scalability – How many people?– At the same time?

Number of products

Size of downloads– Ring tones 10K– Music 4M– Software 200M– Movie 2G

Reliability

BigIP BigIP

WebServer WebServer WebServer WebServer

AppServer AppServer

DatabaseDatabase

Lastminute.com system design

14/14

Site performanceSite performance(Netcraft.com)(Netcraft.com)

Note scale

Time since reboot varies from around a fortnight to a year