Download presentation
Presentation is loading. Please wait.
Published byAda Bruce Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.