CD202 Interface, Representation & Sequence User theory in website design

1. CD202 Interface, Representation & SequenceUser theory in website design Course created by Sarah Phillipssphillips@lecturers.billyblue.edu.auBBCD Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/

2. Accessibility • Web accessibility means that people with disabilities can use the Web. • A lot of people will access your site with devices you won’t have designed for – you need to ensure that they will be able to access your content too

3. Accessibility • One of the most common devices that you will not have thought of is a screen reader, which helps blind people or anyone that has trouble seeing or reading. • You need to provide alternatives to some of your content to allow for these devices. For example, all images must have an ALT tag which describes what is in the picture

4. Accessibility <imgsrc=”cat.jpg" alt=”Fluffy white cat wearing a top hat and red bow tie” /> Image source

5. Accessibility • Here’s a couple of other things to keep your eye on • Font colour contrasts with background colour • Video & sound files have a transcript and subtitles. • Keep your navigation consistent • Font can be resized

6. Accessibility • If you are working on a government website, it is a legal requirement to make the site accessible to all. • Eg. Radio National • http://www.abc.net.au/radionational/programs/booksandartsdaily/vale-maurice-sendak/4005108

7. Working with grids

8. 960 Grid system • Modern monitors support at least 1024 × 768 pixel resolution. • 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

9. Working with grids • 960 grid system • Total width 960px • 12 columns @ 60px each • Each column has 10px left & right margin which forms 20px of gutter space • Total content area is 940px

10. http://960.gs/

11. Adaptive & Responsive design

12. Adaptive vs Responsive design • Responsive design changes to fit any browser size on the fly • Adaptive design detects what size browser you’re looking at the site on and serves one of a defined set of layouts

13. Adaptive design • Nubby Twiglet • http://www.nubbytwiglet.com

14. Responsive design • Earth Hour • http://earthhour.fr/

15. Responsive & adaptive design • It’s all about keeping it fluid. • Consider adjusting the layout or even removing some content for smaller screens

16. Screen shot from http://css-tricks.com/ Accessed 4/2/13

17. Screen shot from http://css-tricks.com/ Accessed 4/2/13

18. Guidelines for responsive design • Responsive Web Design: What It Is and How To Use It • http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

19. Supplementary links • Examples of Sketched UI Wireframes & Mockups • http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups • Nathan Smith presentation – 960 grid • https://speakerdeck.com/nathansmith/960-grid-system • Prototyping with the 960 grid • http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

20. Supplementary links • Font Awesome • http://fortawesome.github.com/Font-Awesome/ • Responsive web design patterns • http://bradfrost.github.com/this-is-responsive/patterns.html • 70 examples of modern responsive web design • http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/

21. Supplementary Links • Flexible web design • http://www.flexiblewebbook.com/bonus.html • Standards for web accessibility • http://www.w3.org/standards/webdesign/accessibility