1. Looking Good Online Design and Presentation of Websites 1

2. ReCap What is HTML? –What are these? Scripting language that webpages are based on Elements! 2

3. The appearance of a website (colours, font used, layout) will affect whether people come back – or not! It also helps with usability (that is, how easy it is to navigate and extract the information the visitor / user wants) and readability We live in an increasingly design- conscious age –Not entirely because of Apple! 3

4. The ‘Best’ of the Worst http://www.webpagesthatsuck.com/ –Good examples of things not to do! http://www.jimwestergren.com/worst-web-design-ever/ –More examples of things not to do! http://www.gam-robert.com/ http://www.pennyjuice.com/htmlversion/whoispj.htm http://www.valleyisleaquatics.com/ http://www.militarycorruption.com/ http://www.digitalhollywood.com/ http://architecture.rice.edu/ http://www.stexps.com/ Special Mention http://www.girstonltd.co.uk/index.html http://www.robson.co.uk/ 4

5. We live in a beautiful world… 5

6. Now… 6

7. … but earlier 7

8. Now… 8

9. … but earlier 9

10. First browsers were Text only Limitations in technology meant that early web “designers” had to come up with innovative ways to make things look ‘good’ “Best viewed in [browser name] at a resolution of [800x600 / 1024x768] –Browser Wars –http://en.wikipedia.org/wiki/Browser_warshttp://en.wikipedia.org/wiki/Browser_wars Had to consider your audience (Mac Vs PC) W3C 10

11. Resolution When designing a website (or even an application) – you need to consider the target device it will be used on –Computer? –Tablet? –Smartphones (iPhone / Android)? –iPods? How would you describe ‘resolution’? 11

12. “Resolution” means the screen dimension in numbers of pixels (dots on screen) –How much space is ‘available’ to you 4:3 “Square Screen” –1024x768 / 1280x1024 16:9 / 16:10 “Wide Screen” –1366x768 / 1650x1080 Latest statistics can be seen here: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3schools.com/browsers/browsers_display.asp Important to know because things need to fit properly to look good 12

13. Safest resolution to design for is 1024x768 Although many desktop computers have screens that have a higher resolution, the iPad (1,2 and Mini), Android tablets, and most laptops can’t view higher than this Many developers design for a variety of devices – but this takes an in-depth understanding of web development 13

14. Content Vs Presentation HTML deals strictly with the content that needs to be displayed CSS – Cascading Style Sheet – deals with how that content looks and displayed –This means font size, font style, font colour(s) –Colours of the page –Control where images go 14

15. Example 1 15

16. Basic Colour Theory https://kuler.adobe.com/ –Helps create colour palettes for design Shouldn’t have more than 3 colours –Main colour –Secondary (complimentary) colour –‘Highlight’, another colour used to help break things up Avoid grey for text – especially on white backgrounds! –Goes for other colours too, consider ‘comfort’ of reading 16

17. The RGB Colour Wheel http://www.w3schools.com/cssref/css_colo rnames.asphttp://www.w3schools.com/cssref/css_colo rnames.asp 17

18. Hierarchy in CSS There is a strict order observed within CSS –This is called a hierarchy Elements (tags) are either a parent or a child The is the very first element –This means all other elements are children A child inherits properties from the parent 18

19. Sorting the Content Last week we looked at tables –Why are these ‘wrong’ to use? How do we separate content without a table? –We use divisions These can be given names (id or class) –id can only appear once in a document ie. Footer, header, etc –class can appear many times ie. photo gallery 19

20. CSS Resources http://www.w3schools.com/css/default.asp 20