Web design and implementation

1
Web design and implementation

• Dr. Tim King
• 13th May 2008

2
My CV

• Computer Lab 1973-1981
• Wrote a relational database for Ph.D.
• Lecturer, University of Bath 1981-1983
• RD 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 Sainsburys, Sony, Home Office etc
• Strategy for small companies and following MAs

3
Web 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
• Its 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 Sainsburys have 25,000 line items

4
Common 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 over
• Zero 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
Poor design example
Mixture of fonts
Title seems to be confused with keywords
Navigation a mess
Far too much material
Needs more than 1024x768
6
Good design example
Quick links to sub areas
Search clearly available
Services for subscribers
Pop-over sub-menus
Special event links
Recent news stories
Discussion forums
Clear link to technical support
Consistent navigation
7
Protected and encrypted pages

• 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
Dynamic 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
Page transition diagram
Home page
Help
Company
Products
Services
Support
Free
Paid
Product search
Service 1
About Us
Contact
Search
Sitemap
Service 2
Downloads
Chat
Payment
Service 3
Static pages
Service 4
Protected pages
Dynamic pages
Applications
Shortcuts Search from every page Payment from
free support page
Encrypted pages
10
Multiple targets

• Different devices
• Different browsers
• Different bandwidth, resolutions, screen sizes,
  colours, printers
• Phones PDAs
• TV Open TV, DVB-TAM-HTML, WebTV
• XML helps, but doesnt 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 -gt Still Pictures-gt Moving Pix-gt
  3D

11
Merchant 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
Outline Physical Design
Load balancer
Big IP
Web Server (static data)
Apache
Application Server (business logic)
J2EE
Database server (orders)
OPS
Legacy (stock control)
IBM
13
Sizing
Lastminute.com system design

• 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
Database
Database
14
Site performance(Netcraft.com)
Time since reboot varies from around a fortnight
to a year
Note scale