cd202 interface, representation & sequence user theory in website design
DESCRIPTION
CD202 Interface, Representation & Sequence User theory in website design. Course created by Sarah Phillips sphillips@ lecturers.billyblue.edu.au BBCD Melbourne BAPDCOM Version 1 – February 2013. http :// bbcdcomdes.weebly.com /. Accessibility. - PowerPoint PPT PresentationTRANSCRIPT
CD202 Interface, Representation & Sequence
User theory in website design
Course created by Sarah [email protected]
BBCD Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/
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
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
Accessibility
<img src=”cat.jpg" alt=”Fluffy white cat wearing a top hat and red bow tie” />Image source
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
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
Working with grids
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.
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
http://960.gs/
Adaptive & Responsive design
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
Adaptive design
Nubby Twiglet http://www.nubbytwiglet.com
Responsive design
Earth Hour http://earthhour.fr/
Responsive & adaptive design It’s all about keeping it fluid.
Consider adjusting the layout or even removing some content for smaller screens
Screen shot from http://css-tricks.com/ Accessed 4/2/13
Screen shot from http://css-tricks.com/ Accessed 4/2/13
Guidelines for responsive design Responsive Web Design: What It Is
and How To Use It http://coding.smashingmagazine.com/20
11/01/12/guidelines-for-responsive-web-design/
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/
Supplementary links
Font Awesome http://fortawesome.github.com/Font-Aweso
me/
Responsive web design patterns http://bradfrost.github.com/this-is-responsi
ve/patterns.html
70 examples of modern responsive web design http
://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/
Supplementary Links
Flexible web design http://www.flexiblewebbook.com/
bonus.html Standards for web accessibility
http://www.w3.org/standards/webdesign/accessibility