finishing your site html and css 2012 brian davison

17
Finishing your site HTML and css 2012 Brian Davison

Upload: alexia-morris

Post on 12-Jan-2016

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Finishing your site HTML and css 2012 Brian Davison

Finishing your site

HTML and css

2012 Brian Davison

Page 2: Finishing your site HTML and css 2012 Brian Davison

Good design – bad design

• Web pages should be easy to use

• Information should be clear

• The design should not be a problem

Page 3: Finishing your site HTML and css 2012 Brian Davison

Web pages that suck: http://www.webpagesthatsuck.com

Page 4: Finishing your site HTML and css 2012 Brian Davison

Jakob Nielsen: http://www.useit.com/

Page 5: Finishing your site HTML and css 2012 Brian Davison

Some guidelines

• Make your home page fit onto one screen• Use a simple background image/colour• Use a clear text colour• Use clear navigation• Put the menu in the same place on every page• Avoid a 'busy' page• Do not use music• Do not use moving images

Page 6: Finishing your site HTML and css 2012 Brian Davison

Home page size: http://www.fredfrap.com/

Page 7: Finishing your site HTML and css 2012 Brian Davison

Simple background: http://www.mewspage.pwp.blueyonder.co

http://www.mewspage.pwp.blueyonder.co.uk/

Page 8: Finishing your site HTML and css 2012 Brian Davison

Clear text colour:

Page 9: Finishing your site HTML and css 2012 Brian Davison

Use clear navigation: http://www.shmarketing.co.uk/

Page 10: Finishing your site HTML and css 2012 Brian Davison

Menu in the same place:

Page 11: Finishing your site HTML and css 2012 Brian Davison

Page too busy: http://anselme.homestead.com/AFPHAITI

Page 12: Finishing your site HTML and css 2012 Brian Davison

Music and movement: http://www.serene-naturist.com/

Page 13: Finishing your site HTML and css 2012 Brian Davison

Colour values

• http://www.colorpicker.com/

Page 14: Finishing your site HTML and css 2012 Brian Davison

Don't use these tags / attributes in HTML

• <font>

• <center>

• <b>

• <i>

• <u>

• align• color• bg_color• border• width• height• background• background-image

Page 15: Finishing your site HTML and css 2012 Brian Davison

Being organised

• Directories correct

• All files correctly named

• Indentation

• All style rules in css

Page 16: Finishing your site HTML and css 2012 Brian Davison

Browser differences

• IE

• Firefox

• Opera

• Chrome

• etc...

Page 17: Finishing your site HTML and css 2012 Brian Davison

Checklist

• Is everything on the page a good size?• Can I read all of the text EASILY?• Does the menu move around?• Is there too much information on the page?• Can I see table borders which are not needed?• Do my images and text line up well?• Do all of my pages use the same style?• Is my page annoying in any way?