Scribd
Upload
33 views59 pages

Lec 6

Uploaded by

trinhbaduong287
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views59 pages

Lec 6

Uploaded by

trinhbaduong287
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

COS10005 Web Development

Module 6 – Response CSS


Usability / Accessibility
Contents
• Responsive CSS
• Linking to Social Media
• Usability
– Best Practices
– Website Usability Test
• Accessibility
– Accessibility Testing

2 - Web Development, © Swinburne


CSS: Alternate Stylesheets
• We can use different style sheets for different
users and different devices.
• An easy way to offer this is by providing
“alternate” style sheet links: DEMO! - link.txt
<link rel="stylesheet"
href="normal.css" title="normal" />
<link rel="alternate stylesheet"
href="bigfont.css" title="bigfont" />
<link rel="alternate stylesheet"
href="aqua.css" title="aqua" />
• If the browser supports it, the user can select one of
the “alternate stylesheet” options.
( <=IE7 no, >=IE8 yes, Firefox yes, Chrome yes )

3 - Web Development, © Swinburne


CSS: Alternate Stylesheets

Mobile web often: Best Practice: use a


• a small representation of different stylesheet 
the regular screen view, that
needs to be zoomed 
4 - Web Development, © Swinburne
CSS: Media Types, Media Queries
• CSS2 introduced media types to enable different
style rules to be specified for different devices
eg. screen, handheld, projection, tv, print, embossed,
braille, speech, tty, all.
Only screen, print and all are currently supported 
• CSS3 introduced media queries to expand on
the concept of media types in CSS2
Media Queries creates more precise rules 
DEMO! – print.html

5 - Web Development, © Swinburne


Media Queries: Using External Files
• In HTML <head>:
<link rel="stylesheet"
media="screen and (max-device-width:640px)"
href="mobile_device.css" />
• Alternatively, in CSS:
@media screen and (max-device-width:600px) {
font-weight:bold;
} DEMO! –
print.html

6 - Web Development, © Swinburne


Media Queries: Within One Stylesheet
/* media queries within a stylesheet */
@media screen and (max-width:640px) {
… style rules
}
@media all {
body {background-color : blue;}
}
@media print {
body {background-color : white;}
.donotdisplay {display: none;}
}

7 - Web Development, © Swinburne


Media Features
Feature min-/max- Description Value
width Yes Width of targeted display Length
area of output device
height Yes Height of targeted display Length
area of output device
device-width Yes Width of the screen of the Length
output device
device-height Yes Height of the screen of the Length
output device

8 - Web Development, © Swinburne


Media Features – continued
Feature min-/max- Description Value
orientation Yes Value is portrait if the length portrait |
of the height media feature is landscape
greater or equal to the length
of the width media feature
aspect-ratio Yes Ratio of the value of the Ratio,
width media feature to the e.g., 16/9
height media feature
device-aspect- Yes Ratio of the value of the Ratio,
ratio device-width media feature e.g., 4/3
to the device-height media
feature

9 - Web Development, © Swinburne


Media Features – continued
Feature min-/max- Description Value
color Yes Number of bits per Integer
colour component of the 0 if not a colour
output device device
color-index Yes Number of entries in the Integer
colour lookup table 0 if there is no
lookup table
monochrome Yes Number of bits per pixel Integer
in a monochrome frame 0 if the not a
buffer monochrome
device
resolution Yes Screen resolution of the Resolution
output device e.g. 1024 x 768

10 - Web Development, © Swinburne


Media Features – continued
Feature min-/max- Description Value
scan No Describes the scanning Progressive
process of TV output | Interlace
devices
grid No Query whether the output Integer
device is grid or bitmap 1 if grid, e.g
tty terminal
or a phone
display with
only one
font

11 - Web Development, © Swinburne


CSS: Responsive Layouts

12 - Web Development, © Swinburne


CSS: Responsive Layouts
• Viewport
– <meta name="viewport" content="width=device-
width, initial-scale=1">
– It is used in the <head>…</head> part of the
HTML document.
– The viewport meta data instructs the page to
automatically match the width of the device.

13 - Web Development, © Swinburne


CSS: Responsive Layouts

Without viewport meta DEMO! – With viewport meta


14 - Web Development, © Swinburne print.html
CSS: Responsive Layouts
• Use media query to specify CSS for different
device sizes
/* Mobile Phones */
@media screen and (max-device-size:640px) {…}

/* Tablets */
@media screen and (min-device-width: 768px) and (max-device-
width: 1024px) {…}

/* Desktops */
@media screen and (min-width: 1024px) {…}

15 - Web Development, © Swinburne


Contents
• Responsive CSS
• Linking to Social Media
• Usability
– Best Practices
– Website Usability Test
• Accessibility
– Accessibility Testing

16 - Web Development, © Swinburne


Social Media
A key characteristic is to facilitate two-way
communication
• Social networking websites enable one to
share information about common interests,
news, and events with people they choses
• Blogs are websites that enables one to post
news or updates often on a narrow topic
• Video host is a hosting website that enables
one to create and distribute video

17 - Web Development, © Swinburne


Linking / Embedding Media
• Facebook
http://developers.facebook.com/docs/plugins/
• Twitter DEMO!
https://twitter.com/about/resources/buttons
• Youtube DEMO!
http://support.google.com/youtube/bin/answer
.py?hl=en&answer=171780
• Google Map
https://developers.google.com/maps/

18 - Web Development, © Swinburne


Contents
• Responsive CSS
• Linking to Social Media
• Usability
– Best Practices
– Website Usability Test
• Accessibility
– Accessibility Testing

19 - Web Development, © Swinburne


Web Usability Resources
• Usability.com
http://usability.gov/
Step-by-Step Usability Guide. Also free 292pp pdf
Website provided by US Government.

• NetMechanic.com
http://www.netmechanic.com/news/webmaster-resources.shtml
WebMaster Tips - Usability, Accessibility
• Usability Checklist:
http://www.tcnj.edu/~it/usability/checklist.html
Useful Usability Checklists
• Jacob Nielson:
http://www.useit.com/jakob/
• Readability:
http://www.readability.com/about
Converts Webpages to readable content
20 - Web Development, © Swinburne
Usability
• Usability is about how users utilise a human-
made object (e.g., a software application, a
website or a device) to achieve goals.
• Good Usability is also about ensuring good
accessibility
– Websites should be accessible to all users on all
devices.
– Example: Windows Narrator for bad eye vision

21 - Web Development, © Swinburne


Usability
• Usability issues should be considered right
from the start of web site design.
– Overall website architecture of the pages/content
and how they are linked together.
– Individual page layouts, and common navigational
features, tools and aids that influence how a
website is used.
– Example: Amazon (Navigator versus Search)

22 - Web Development, © Swinburne


Usability: Consideration
• Usability does not simply refer to the “visual”
design of a site. It also concerns
– Ease of learning (vs. Ease of use)
– Ease of navigation
– Ease of undoing actions
– Ease of access for different groups of users
– Ease of task completion (e.g., registration for
shopping, anonymous access)
– Ease of reading
It applies to all software applications, not just web sites.
23 - Web Development, © Swinburne
Usability: Web Design Consideration
• Usability may be constrained by Universal
Design Issues:
– Older equipment - Low literacy
– Limited bandwidth - Noisy environment
– Language - Learning style
• And the users’ needs are rapidly changing:
– People age
– People’s skills, knowledge, experiences change
– Technologies change

24 - Web Development, © Swinburne


Usability: Universal Design Issues
Rural access – Limited Bandwidth
• Slow modems, connections, computers
– Multimedia? Images? Text?

25 - Web Development, © Swinburne


Usability: Universal Design Issues
Older or Limited Technology
• Limited screen resolution / limited colour
range
• Limited computer memory
• Old computers with old browsers
• Not able to handle plug-ins, or JavaScript
• No mouse / pointing device

26 - Web Development, © Swinburne


Usability: Universal Design Issues
Aging Population
• Users may need to be able to alter user
interface: font size, mouse pointer size,
magnify screen, set preferred style sheets
– Most browsers have built-in ability for users to
change font size: Ctrl +, Ctrl –, Ctrl 0
• Most operating systems have the ability to
alter the mouse pointer size

27 - Web Development, © Swinburne


Usability: Universal Design Issues
• Usability may be constrained by whether the
web site or web application has the right
volume of information, or the right number of
users (critical mass). For example,
– a photo sharing site without photos,
– a discussion board without contributors,
– a online game without players
Probably not web developer’s responsibility!

28 - Web Development, © Swinburne


Contents
• Responsive CSS
• Linking to Social Media
• Usability
– Best Practices
– Website Usability Test
• Accessibility
– Accessibility Testing

29 - Web Development, © Swinburne


Best Practices: Ease of Navigation
• Breadcrumbs or breadcrumb trail allows users
to keep track of their locations within
programs or documents.
• Breadcrumbs typically appear horizontally
across the top of a web page, often below title
bars or headers.
• Example
– Swinburne

30 - Web Development, © Swinburne


Best Practices: Navigation Bars
• Clear navigation bars allows users to know
where to go next
– Use vertical list or horizontal tab list
– Add visual effect and indicate current
selection/location

Shows underline
on mouse over

Indicates that
library is the
current selection

31 - Web Development, © Swinburne


Best Practices: Page Length
• Webpages is considered long if it is three or
more screens lengths
– Consider breaking to multiple short pages using
linear organisation
• If required to be a single file
– Provide a table of contents or a bullet list at the
top of the page that links to specific parts of the
page
DEMO! – links.txt,
Long Page

32 - Web Development, © Swinburne


Best Practices: Design Principles
• Consistency – consistent visual elements
(shape, color, font, images) throughout
website
• Contrast – Add visual excitement and draw
attention, dark text on medium to light
background provides easy reading
• Proximity: visually group logically related
items on your web pages
• Alignment: align elements (horizontally or
vertically) to create visual unity

33 - Web Development, © Swinburne


Best Practices: Webpage Design Factors
• Load time – limit the total size of a webpage,
all associated images and media files.
– On a 56kps connection, it takes about 8 seconds
to load a 60kb webpage
• Perceived load time – limit the time a visitor is
aware of waiting
– Break a long page
– Split a large image into smaller images, since
graphics are displayed as it load

34 - Web Development, © Swinburne


Best Practices: Webpage Design Factors
• Above the fold
– Place important and interesting content on the
viewable portion of the page
• Webpage "Real Estate"
– Place important information and navigation on the
upper left and top centre of the page
• Horizontal scrolling DEMO! – Horizontal Scrolling
– Avoid horizontal scrolling
– Use percentage of layout width

35 - Web Development, © Swinburne


Best Practices: Webpage Design Factors
• Adequate white space
– place blank or white space around blocks of text to
increase readability Demo! – CSS for Margin

• Target audience: Use of colour


– Younger audience prefer bright, lively colours
– Late teens and early twenties prefer dark
background with occasional bright contrast and
dynamic navigation
– Older audience prefer light backgrounds, well
defined images and large text

36 - Web Development, © Swinburne


Best Practices: Webpage Design Factors
• Target audience: Animation
– Use animation only if it suits your website, not
because you have one in your library
• Browser friendly – test webpages on popular
browsers, not only in your favourite browser
• Target audience: Reading level
– Match reading level and style of writing to the
audience, e.g., “Deleterious” for a kids’ website
– Use vocabulary that they are comfortable with
Why can you just use “harmful”?
37 - Web Development, © Swinburne
Best Practices: Text Design
• Use common fonts, sans-serif fonts are easier
to read, serif fonts were originally designed
for printing
• Be careful on font sizes (12 point or medium)
• Use appropriate color
• Hyperlink keywords or phrases, not sentences
and avoid words like "Click here"
• Check spelling and grammar

38 - Web Development, © Swinburne


Best Practices: Graphic Design
• Use colors consistently
• Use only necessary images
• Keep both file size and dimension of images
small

39 - Web Development, © Swinburne


Contents
• Responsive CSS
• Linking to Social Media
• Usability
– Best Practices
– Website Usability Test
• Accessibility
– Accessibility Testing

40 - Web Development, © Swinburne


Test: Why?
• Increase in productivity
• Decrease in user training requirements
• Decrease in calls to the Help Desk and need
for technical support
• Decrease in user error rate
• Decrease in programming costs associated
with late design
• Decrease in maintenance costs.

41 - Web Development, © Swinburne


Test: What?
• Focuses on testing, improving and refining the
information architecture in terms of
– Design
– page design, readability, layout, graphics, scrolling
– Finding information
– navigation, category names, links
– Understanding information
– content quality and presentation
– Search
– quality of search results

42 - Web Development, © Swinburne


Test: When?
• At the website's conception
(test on the printed mockup of the home page)
• Before planning a redevelopment
• Repeatedly during (re)development, as critical
pages or sections are prepared

43 - Web Development, © Swinburne


Test: Myth (Posted by Jacob Creech on July 12, 2011)
• Pointless because we won’t make changes
anyway
• Just get overruled through ‘design by
committee’
• Takes too long
• Costs too much
• Impossible to convince management to run
tests
• Not needed because my site is perfect
44 - Web Development, © Swinburne
Test: Myth (Posted by Jacob Creech on July 12, 2011)
• Impossible to show the value of testing
• Users don’t care about usability
• Requires an Human Computer Interaction
degree to understand usability
• Designers already know what they are doing,
they don’t need to run usability tests
• Had tested the site in the past, there is no
need to test again
• Too difficult to get started
45 - Web Development, © Swinburne
Contents
• Responsive CSS
• Linking to Social Media
• Usability
– Best Practices
– Website Usability Test
• Accessibility
– Accessibility Testing

46 - Web Development, © Swinburne


What is Web Accessibility?
• Web accessibility means that people with
disabilities can use the Web
• More specifically, Web accessibility means that
people with disabilities can perceive, understand,
navigate, and interact with the Web, and that they
can contribute to the Web.
• Web accessibility also helps older people with
changing abilities due to aging, and those who
have temporary impairments.
W3C Introduction to Web Accessibility:
http://www.w3.org/WAI/intro/accessibility.php
47 - Web Development, © Swinburne
Why: Demonstrations
From the OZeWAI CD 2001:
• John McKenna
– Mobile devices and enhanced quality of life
Segment: Played from the 4 min mark, where he gives the
examples of online banking and shopping versus doing it physically
• Stephen Jolly
– Benefits of Internet (and problems) for visually impaired
Segment: Played from the 4.20 min mark, where he demonstrates
a screen reader (JFW - Jaws For Windows) reading a web page
from “The Age”.
... See links to these on Canvas

48 - Web Development, © Swinburne


Why: Demonstrations
Wheeling in Second Life
• Judith, who has cerebral palsy, has been using computers
and the web for many years.
In this short video, Judith talks about using Second Life and
a club called "Wheelies" - one of her favourite Second Life
locations.
Link to Video Segment 4:27 min
http://www.usability.com.au/resources/wheeling-vid.cfm
Link to YouTube version 4:26 min
http://www.youtube.com/watch?v=CBlaiBV_yJs

49 - Web Development, © Swinburne


WCAG 2.0
• Web Content Accessibility Guidelines (WCAG)
– is a stable, reference-able technical standard.
– has 12 guidelines that are organized under
4 principles: perceivable, operable,
understandable, and robust.
http://www.w3.org/WAI/WCAG20/quickref/

• Has been endorsed by all levels of


Government in Australia
– This is one of the mandatory requirements for
Australian Government agencies to consider when
developing and maintaining their online presence.
https://www.australia.gov.au/accessibility

50 - Web Development, © Swinburne


Accessibility: Guidelines, Policy & Legislation
Australian Disability Discrimination Act
Web Accessibility: Advisory Notes
Individuals and organisations who provide goods and services over the
Internet need to make their websites accessible to people with
disabilities.
Australian Human Rights and Equal Opportunity Commission (HREOC)
Advisory Notes, draws attention to resources that will help authors
and designers make Worldwide Web documents accessible.
http://www.hreoc.gov.au/disability_rights/standards/www_3/www_3.html
The Advisory Notes also advises how web designers and website owners
can avoid disability discrimination, without sacrificing the richness
and variety of communication offered by the World Wide Web.
See also:
determination against Sydney Olympic Games Organising Committee:
http://www.hreoc.gov.au/disability_rights/decisions/comdec/2000/DD000120.htm

51 - Web Development, © Swinburne


WCAG 2.0: Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for
multimedia.
• Create content that can be presented in
different ways, including by assistive
technologies, without losing meaning.
• Make it easier for users to see and hear
content.
http://www.w3.org/WAI/WCAG20/quickref/

52 - Web Development, © Swinburne


WCAG 2.0: Operable
• Make all functionality available from a
keyboard
• Give users enough time to read and use
content
• Do not use content that causes seizures
• Help users navigate and find content

http://www.w3.org/WAI/WCAG20/quickref/

53 - Web Development, © Swinburne


WCAG 2.0: Understandable
• Make text readable and understandable
• Make content appear and operate in
predictable ways
• Help users avoid and correct mistakes

http://www.w3.org/WAI/WCAG20/quickref/

54 - Web Development, © Swinburne


WCAG 2.0: Robust
• Maximize compatibility with current and
future user tools

http://www.w3.org/WAI/WCAG20/quickref/

55 - Web Development, © Swinburne


ACCESSIBILITY:
TESTING ACCESSIBILITY COMPLIANCE
Tools:
• AChecker WCAG2 Online Validator:
http://achecker.ca/checker/index.php
An open source Web accessibility evaluation tool.
Can be used to review the accessibility of Web pages based on a
variety of international web accessibility guidelines

• Total Validator: http://www.totalvalidator.com/index.html


An accessibility validator, (as well as an (X)HTML validator, a spell
checker, and a broken links checker etc.) allowing one-click validation
of your website. Can be added to Firefox and/or installed stand alone.

• Web Accessibility Checklist (v2)


Provides a useful ‘how to’ process for evaluating webpages and
suggestions for addressing WCAG 2.0 guidelines.

57 - Web Development, © Swinburne


Web Usability Resources
• Usability.com
http://usability.gov/
Step-by-Step Usability Guide. Also free 292pp pdf
Website provided by US Government.

• NetMechanic.com
http://www.netmechanic.com/news/webmaster-resources.shtml
WebMaster Tips - Usability, Accessibility
• Usability Checklist:
http://www.tcnj.edu/~it/usability/checklist.html
Useful Usability Checklists
• Jacob Nielson:
http://www.useit.com/jakob/
58 - Web Development, © Swinburne
NEXT LECTURE:
INTRODUCTION TO
CLIENT SIDE SCRIPTING
JAVASCRIPT

You might also like