Looking Good Online Design and Presentation of Websites 1

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

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

The ‘Best’ of the Worst –Good examples of things not to do! –More examples of things not to do! Special Mention 4

We live in a beautiful world… 5

Now… 6

… but earlier 7

Now… 8

… but earlier 9

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 – Had to consider your audience (Mac Vs PC) W3C 10

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

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

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

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

Example 1 15

Basic Colour Theory –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

The RGB Colour Wheel rnames.asphttp:// rnames.asp 17

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

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

CSS Resources 20