1. Course created by Sarah Phillips sphillips@lecturers.billyblue.edu.au BBCD Melbourne BAPDCOM Version 1 – February 2013. http://bbcdcomdes.weebly.com/

2.  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.  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. Image source

5.  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.  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/b ooksandartsdaily/vale-maurice-sendak/4005108 http://www.abc.net.au/radionational/programs/b ooksandartsdaily/vale-maurice-sendak/4005108

8.  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.  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.  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.  Nubby Twiglet  http://www.nubbytwiglet.com http://www.nubbytwiglet.com

14.  Earth Hour  http://earthhour.fr/ http://earthhour.fr/

15.  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/13http://css-tricks.com/

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

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

19.  Examples of Sketched UI Wireframes & Mockups  http://webdesignledger.com/inspiration/18-great- examples-of-sketched-ui-wireframes-and-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 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/ http://net.tutsplus.com/tutorials/html-css- techniques/prototyping-with-the-grid-960-css- framework/

20.  Font Awesome  http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/  Responsive web design patterns  http://bradfrost.github.com/this-is- responsive/patterns.html 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/ http://www.splashnology.com/article/70- examples-of-modern-responsive-web- design/2537/

21.  Flexible web design  http://www.flexiblewebbook.com/bonus.html http://www.flexiblewebbook.com/bonus.html  Standards for web accessibility  http://www.w3.org/standards/webdesign/accessib ility http://www.w3.org/standards/webdesign/accessib ility