Web design and Web design and implementationimplementation

Dr. Tim King4th May 2010

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– Social networking sites make this available to all

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

Lingscars.com

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

Static and Dynamic pagesStatic and Dynamic pages

HTML forms– Fill in fields– Press button to submit data– Validate locally using Javascript– Remember user input when redrawing form

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

Complete content management systems– Signiant, Vignette, Joomla, Drupal etc– Content and style kept distinct – can adapt for target– Dynamic pages added as extensions, many already in libraries

9/14

AJAXAJAX

Asynchronous Javascript and XML– Define page with named sections– Make XMLRequest call with data entered– When result returns update named DOM element

• No need to refresh entire web page• Immediate field verification• Google suggestions• Desire to produce web apps that compete with local ones

– Google Web Toolkit• Java compiler produces Javascript

– That works with all browsers– That can be tested using standard Java IDE

• http://code.google.com/webtoolkit

10/14

Page transition diagramPage transition diagram

Help Company Products Services Support

Home page

About Us ContactSearch Sitemap Free Paid

Downloads Chat

Productsearch

Service 1

Service 2

Service 3

Service 4

Dynamic pages

Applications

Static pages

Protected pages

Payment

Encrypted pages

ShortcutsSearch from every pagePayment from free support page

11/14

Merchant SystemsMerchant Systems Requirements: pluses and minuses

– 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

Community SystemsCommunity Systems Content Management on Steroids

– Wikis, FaceBook, MySpace, YouTube, Twitter• Usual suspects

– Layout generated by owners– Content generated by users, not owners– Sometimes owners (attempt to) regulate content– Instant feedback to ideas

• Seen as important tool in UK election• Modern version of “on the stump” heckling

– Widely used as informal knowledge sharing tool– Companies see need to participate

• But it can bite them back

13/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

14/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