Finishing your site HTML and css 2012 Brian Davison.

17
Finishing your site HTML and css 2012 Brian Davison

Transcript of Finishing your site HTML and css 2012 Brian Davison.

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?