looking good online design and presentation of websites 1
TRANSCRIPT
1
Looking Good Online
Design and Presentationof Websites
2
ReCap
• What is HTML?
• <p> <h1> <body>–What are these?
• Scripting language that webpages are based on
• Elements!
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!
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/
5
We live in a beautiful world…
6
Now…
7
… but earlier
8
Now…
9
… but earlier
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
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’?
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
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
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
15
Example 1
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
17
The RGB Colour Wheel
• http://www.w3schools.com/cssref/css_colornames.asp
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
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
20
CSS Resources
• http://www.w3schools.com/css/default.asp