1 / 21

CD202 Interface, Representation & Sequence User theory in website design

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.

elmo
Download Presentation

CD202 Interface, Representation & Sequence User theory in website design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 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/

  2. 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

  3. 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

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

  5. 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

  6. 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

  7. Working with grids

  8. 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.

  9. 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

  10. http://960.gs/

  11. Adaptive & Responsive design

  12. 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

  13. Adaptive design • Nubby Twiglet • http://www.nubbytwiglet.com

  14. Responsive design • Earth Hour • http://earthhour.fr/

  15. Responsive & adaptive design • 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/13

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

  18. 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/

  19. 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/

  20. 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/

  21. Supplementary Links • Flexible web design • http://www.flexiblewebbook.com/bonus.html • Standards for web accessibility • http://www.w3.org/standards/webdesign/accessibility

More Related