Transcript Lecture 4

Web design and implementation
Dr. Tim King
13th May 2008
My 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
2/14
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

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
3/14
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
4/14
Poor design example
Mixture of
fonts
Title seems to
be confused
with keywords
Navigation a
mess
Far too much
material
Needs more
than 1024x768
5/14
Good design example
Quick links
to sub areas
Pop-over
sub-menus
Recent news
stories
Clear link to
technical
support
Search clearly
available
Services for
subscribers
Special event
links
Discussion
forums
Consistent
navigation
6/14
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)
7/14
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
8/14
Page transition diagram
Home page
Help
Search
Company
Sitemap About Us Contact
Products
Product
Services
Service 1
Support
Free
Paid
search
Service 2
Payment
Downloads
Chat
Service 3
Static pages
Service 4
Protected pages
Dynamic pages
Applications
Encrypted pages
Shortcuts
Search from every page
Payment from free support page
9/14
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 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
10/14
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
11/14
Outline Physical Design
Load balancer
Web Server
(static data)
Application Server
(business logic)
Database server
(orders)
Legacy
(stock control)
Big IP
Apache
J2EE
OPS
IBM
12/14
Sizing

Scalability
Lastminute.com system design
– How many people?
– At the same time?


Number of
products
Size of downloads
–
–
–
–

Ring tones 10K
Music 4M
Software 200M
Movie 2G
Reliability
BigIP
WebServer
WebServer
BigIP
WebServer
AppServer
AppServer
Database
Database
WebServer
13/14
Site performance
(Netcraft.com)
Time since reboot varies from around a fortnight to a year
Note
scale
14/14