CD202 Interface, Representation & Sequence

User theory in website design

Course created by Sarah Phillipssphillips@lecturers.billyblue.edu.au

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