Cd202 interface representation sequence user theory in website design
Download
1 / 21

CD202 Interface, Representation & Sequence User theory in website design - PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' CD202 Interface, Representation & Sequence User theory in website design' - elmo


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Cd202 interface representation sequence user theory in website design

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/


Accessibility
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


Accessibility1
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


Accessibility2
Accessibility

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

Image source


Accessibility3
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


Accessibility4
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



960 grid system
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
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




Adaptive vs 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
Adaptive design

  • Nubby Twiglet

    • http://www.nubbytwiglet.com


Responsive design
Responsive design

  • Earth Hour

    • http://earthhour.fr/


Responsive adaptive design
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
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/


Supplementary links
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 links1
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/


Supplementary links2
Supplementary Links

  • Flexible web design

    • http://www.flexiblewebbook.com/bonus.html

  • Standards for web accessibility

    • http://www.w3.org/standards/webdesign/accessibility


ad