Web design

1
Web design

• Dr. Tim King
• 9th May 2006

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
I have an idea

• Can you source?
• Purchasing where from and with what?
• Can you fulfil?
• Warehousing
• Tesco vs Sainsbury model
• Delivery
• Returns
• Electronic fulfilment
• Stock control
• Do it? Show it? Pending delivery? Dabs.com
• Cannibalisation
• Can you make money from it?
• Simple fact which seemed to elude people 1998-2001

4
Domain Names

• All 5 letter .com URLs now taken
• Be inventive
• Greetingcards.com, Cybercards.com, Mousegreetings
• Fish4cars, fish4homes etc
• Business.com went for 10m
• And it certainly isnt Google
• 25,000 for CitiCorp registered that morning
• .com .net .co.uk .eu .fr .de .be .biz .info
• The isles of Tivalu and Tonga
• .tv and .to
• New TLDs .info, .biz, .pro
• More harm than good

5
Web design

• HTML WYSIWYG Editors make it easy
• Too easy!
• Design is important
• But functionality more so
• Many web design houses dont understand about
  databases
• Managing Directors do not make good web designers
• 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

6
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

www.webpagesthatsuck.com
7
Poor design example
Mixture of fonts
Title seems to be confused with keywords
Navigation a mess
Far too much material
Needs more than 1024x768
8
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
9
Protected 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

10
Dynamic pages

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

ltHTMLgt ltHEADgt ltTITLEgtConnecting to an Access
databaselt/TITLEgt lt/HEADgt ltBODYgtltTABLEgt lt SET
myConnSERVER.createobject("adodb.connection")
strConn"PROVIDERMicrosoft.Jet.OLEDB.4.0DATA
SOURCEemp.mdb" myConn.Open (strConn) SQLStr"SE
LECT Empno, ename, deptno FROM Emp ORDER BY
deptno, ename" SET resultmyConn.execute(SQLStr)
gt ltH2gtASP Examplelt/H2gtltPgtConnecting to an
Access Databaselt/Pgt ltTRgtltTHgtEmployee
Nolt/THgtltTHgtNamelt/THgtlt WHILE NOT
result.EOFgt ltTRgtltTDgt ltresult("empno")gt lt/TD
ltTDgt ltresult("ename")gt lt/TDgtlt result.movenext
() WEND gt lt/TABLEgt lt/BODYgt lt/HTMLgt
11
Encrypted pages

• Most traffic to and from web sites is in clear
• Potential eavesdropping possible
• Secure Socket Layer (SSL) encrypts data
• Computationally expensive at server
• Hardware assist boards are available
• Widely used technology
• In all browsers
• Used whenever privacy is important
• Payment
• Secure communication (spooks, terrorists, medical)

12
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
13
Content Management

• Change once, changes all versions
• Input
• Data and news feeds
• Editorial, pictures
• Price, stock, changes
• Output
• Staging server
• Business/advert manager
• Web farm
• Content Management Systems (CMS)
• Interwoven
• Vignette
• ATG Dynamo
• Broadvision
• MS Siteserver

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

15
Workflow
New products
Content repository
Press releases
StagingServer
Web
Job vacancies
Template repository
Compliance officer
Web designers
Database designers
Webmaster/editor