Looking Good Online Design and Presentation of Websites 1.
-
Upload
brooke-harrington -
Category
Documents
-
view
213 -
download
1
Transcript of Looking Good Online Design and Presentation of Websites 1.
![Page 1: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/1.jpg)
1
Looking Good Online
Design and Presentationof Websites
![Page 2: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/2.jpg)
2
ReCap
• What is HTML?
• <p> <h1> <body>–What are these?
• Scripting language that webpages are based on
• Elements!
![Page 3: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/3.jpg)
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!
![Page 4: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/4.jpg)
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/
![Page 5: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/5.jpg)
5
We live in a beautiful world…
![Page 6: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/6.jpg)
6
Now…
![Page 7: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/7.jpg)
7
… but earlier
![Page 8: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/8.jpg)
8
Now…
![Page 9: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/9.jpg)
9
… but earlier
![Page 10: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/10.jpg)
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_wars
• Had to consider your audience (Mac Vs PC)• W3C
![Page 11: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/11.jpg)
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’?
![Page 12: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/12.jpg)
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
• Important to know because things need to fit properly to look good
![Page 13: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/13.jpg)
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
![Page 14: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/14.jpg)
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
![Page 15: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/15.jpg)
15
Example 1
![Page 16: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/16.jpg)
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
![Page 17: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/17.jpg)
17
The RGB Colour Wheel
• http://www.w3schools.com/cssref/css_colornames.asp
![Page 18: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/18.jpg)
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 <body> is the very first element– This means all other elements are
children
• A child inherits properties from the parent
![Page 19: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/19.jpg)
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
• <div> </div>• 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
![Page 20: Looking Good Online Design and Presentation of Websites 1.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2c5503460f94b1ab8f/html5/thumbnails/20.jpg)
20
CSS Resources
• http://www.w3schools.com/css/default.asp