Web Development

Lecture Objectives

• learn about design-for-all
• appreciate some of the challenges
• learn about design as an iterative process

Careers

Different goals

A user who visits a web site does so for a reason, e.g.:

• to buy something
• to sell something
• to find a piece of information
• to make a social connection
• to overcome boredom

The UCC web site

Different users may have different goals

Consider users of the UCC web site, e.g.:

• journalists
• researchers in other organizations
• employers
• prospective students
• current students
• former students
• government

Well-Designed Web Sites

A well-designed web site…

• is one that works!
  (Users can achieve their goals)
• is one that looks good
  (UI design)
• is one that is easy to use
  (UX design)

Design-for-All

Can everyone easily achieve their goals?

Web Sites Should Be Usable…

• …no matter who is visiting them
  • people with visual, auditory, physical, speech, cognitive, and neurological disabilities
  • people whose capabilities are modified by a medical condition
  • people of different ages
  • people with different first languages

Web Sites Should Be Usable…

• …no matter when users visit and where they are
  • whether stationary or on the move
  • no matter the environmental conditions (bright/dark, quiet/noisy)
  • no matter where in the world (developed/developing, rural/urban, …)

  

Web Sites Should Be Usable…

• …no matter what network connection, device or client software visitors are using
  • connections of different bandwidths and speeds (cable, wireless, mobile, …)
  • different screens (resolution, dimensions, colour)
  • different I/O modalities (keyboard/ mouse/ stylus/ touchpad/ touchscreen/ speech for input; screen/ print/ speech & other audio/ etc. for output)
  • different web browsers, different versions of browsers, different OS, client software other than browsers

Web Sites Should Be Usable…

• …now and in the future

Simple Advice

Don't assume anything!

Example Challenges

We'll look at some examples of the challenges we face.

(Not exhaustive and not in depth)

Visually-Impaired Users

a regular browser or special browser
+
a screen reader,
which sends the information from the web page to a speech synthesizer

Solution

Information conveyed exclusively in images is inaccessible to these users

Where images convey info, we must always provide an alternative

Different Screen/Window Sizes

Fixed-width layouts (based on pixels) work only for a handful of devices

Solution

Instead, use liquid layouts (based on percentages)

And, better still, use responsive web design (which adapt to the dimensions)

Serving Media Over Slow Connections

Typically, images in web pages are external resources
— stored separately, in their own files, and fetched separately

Image files are often large

Solution

Reduce! Reduce! Reduce!

Can you eliminate images?
Can you merge images?
Can you compress images?

Browsers Are Not The Only Clients!

Email Harvesters

list_of_urls = [www.example.org]
list_of_emails = []
while list_of_urls is not empty:
    remove a URL from list_of_urls
    send HTTP GET request to the URL
    receive HTTP response
    find all email addresses within the response
    insert the email addresses into list_of_emails
    find all hyperlinks within the response
    insert the URLs of the hyperlinks into list_of_urls
    

Now sell the list of email addresses to spammers!

Web Search Engines

Indexes

Search Engine Crawlers

list_of_urls = [www.example.org]
while list_of_urls is not empty:
    remove a URL from list_of_urls
    send HTTP GET request to the URL
    receive HTTP response
    find all important words within the response
    for each important word:
        in the index entry for that word, insert the URL
    find all hyperlinks within the response
    insert the URLs of the hyperlinks into list_of_urls    
    

Solutions

Disguise email addresses to make life difficult for email harvesters

Make it obvious what a web page is about to make life easier for search engine crawlers

User-Centered Web Design

1. Empathize: through observation & discussion, understand your users' needs
2. Define: analyze what you learned & identify the core problems
3. Ideate: generate ideas for solving the problems (brainstorming)
4. Prototype: create versions of the web site that embody the best ideas
5. Test: try out the prototypes with your users

Repeat until you find a prototype that can be finalized

G'luck!