Links

What makes the Web the Web

One of the things that makes the web unique is hyperlinks, or 'links'

Changed the way consumers interact with content

No longer a linear, start-to-finish activity

Users can follow a 'breadcrumb trail,' jumping from site to site, or to different locations within a site, to find the content they want

The Anchor Element - <a>

The HTML element that we use to create hyperlinks is the 'anchor' element

<a>

This tells the browser that whatever appears as between the <a> and </a> tags is a link to another resource

By default, links are displayed as underlined blue text

Links

Let's think about this for a second

We use <a> to specify a link

That's great

Now what?

Well, if we're going to tell the browser to go somewhere when the user clicks on a link, it'd be nice if the browser knows where it is we want the user to go

Where to go? - href

This is one of the places we need to add an attribute to the opening tag

CSCI 1210

Will display like this:

Where to go? - href

href == 'hypertext reference'

This is an HTML-speak way of saying 'address'

Tells the browser where to go when the user clicks the link

Remember, we talked about attributes a couple of lectures ago

They provide the browser with additional information to make the page behave the way we want

href - Two Types

An important aspect of hrefs is the type we're using

There are two:

absolute

relative

Which one we choose to use has an important effect of the behavior of a web page / website

Navigating the File Tree

If you think of your computer's file system as a tree, you'll see that there are several big branches (main folders)

Then smaller branches (sub-folders)

...and leaves (files)

Any of the branches can have 0, 1, or many leaves

Navigating the File Tree

Navigating the File Tree

This is the output from the DOS 'tree' command, which shows a listing of folders, subfolders, and files in each folder for a given directory

It also illustrates how files and folders are arranged in relationship with one another

Navigating the File Tree

Absolute vs. Relative URLs

There are two primary reasons to use relative URLs in place of absolute URLs:

1. Absolute URLs can take longer (DNS lookups)

2. What if you have to move your site to a new provider, server, or domain?

The rule is: If you're linking to any resource on your site, use relative URLs; Any other site, use absolute URLs

Links Within Pages

We can create links within pages to navigate to other parts of the page

Use an id to identify the part of the page you want to link to (creating an 'anchor,' if you will)

Top of Page

Create a link on the page that points to the 'anchor'

Top

Mailto:

Another type of link is the mailto: link

Makes the browser launch user's default email application and inserts the given email address into the 'to' field

Email Jack

This used to be a real popular way to get in touch with users, but it's largely fallen into disuse

We've never used it in labs because of the requirement for the computer to have a default email application designated

There are better solutions using scripting languages available

Links Summary

Provide a way for users to navigate to resources within and outside a site

HTML anchor element

CSCI 1210

href is the location you're navigating to - hypertext reference

Within a site, use relative links

Outside a site, use absolute links

Understanding the path to a resource is important

Images

Obviously, images are an important part of the Web experience

The old saying, "A picture is worth a thousand words" is still true, as much for the Web as anywhere else

Knowing how to make a raw image suitable for use on the Web is a critical skill for a developer

First, let's look at how to add an image to a web page

Then, we'll see how we can take raw images from the camera to the web page

The <img> Element

<img>

This is the element we use to embed an image on a web page

Like the <a> element, we have to provide the browser with a little additional information to make it work

<img> is a standalone (void) inline element

<img> Images

So an image element will look like this:

src & alt are required for the image to work

title displays text when the user hovers the mouse over the image

src may be either an absolute URL or a relative URL (for the most part, linking to someone else's image (absolute) is considered kind of rude)

<img> Images

So an image element will look like this:

alt is important for users with visual impairment

Allows them to experience the page more fully, even if they can't see the image

Required for page validation (we'll talk about that later)

Modern browsers will display the alternative text when the image is hovered over, if no title is specified

Image Formats

GIF

Graphics Interchange Format

Smaller file sizes

256 colors - not good for photographs

Used mostly for logos, icons, cartoons, etc

Support transparent backgrounds

Support animation (can be annoying)

Image Formats

JPG / JPEG

Joint Photographic Experts Group

Lossy compression

Compression == smaller file sizes

Supports 16+ million colors

No transparent backgrounds / animation

Image Formats

PNG

Portable Network Graphics

Lossless compression / larger file sizes

16+ million colors

Good for photos

Good for logos, icons, cartoons, etc

Supports transparency

Doesn't support animation

Captions

<figure>

Sometimes we want to include captions with our images

The <figure> element couples an image element with a <figcaption> element to provide a captioned image

Captions

Resolution

Resolution refers to the number of pixels per inch the image contains

Standard resolution for the Web is 72ppi (pixels per inch)

A photo print of a digital image is much larger - 300ppi (or dpi - 'dots per inch') or more

So, if 300dpi is better than 72dpi, why not use it for Web images?

Two words:

FILE SIZE

Resolution

Many users still connect through dial-up

2G/3G/4G cellular

'Slower' broadband (cough, cough) - Satellite

Larger files take longer to download

Resolution

One way browser makers compensate for this is caching

A 'cache' is a [temporary] copy of a downloaded file

Browsers will cache files for a while

When a user re-visits a page, the file can be loaded from the local copy instead of having to download it all over again

Resolution

As a developer, it's important to know this

You can optimize your site's speed by taking advantage of the browser cache

Images (like, for example, a logo) that appear on many pages should be accessed from the same folder

The browser will then detect that the it is the same file and won't download it again for subsequent page visits

Resolution

Resolution

While caching helps page load times, the files still have to be downloaded the first time the page is accessed

It's important, then, to optimize images for the Web

By 'optimize,' we mean edit the files so that their resulting file size is as small as possible without losing resolution

Page download times are the most important factor in overall user satisfaction with a site

Photo Editors

Adobe Photoshop is arguably the best photo editor around

However, it ain't cheap - we've had problems with licensing on lab comptuters in the past

Another popular editor, that isn't as expensive, is GIMP

GIMP

The original file size was 500KB (500,000 bytes)

By modifying the image's dimensions, resolution, and compression ratio, the optimized image is 24KB (24,000 bytes)

That’s 4.3% of its original file size!

Smaller, faster to download And

...looks the same on when displayed in a browser!

Cropping

Another way to reduce an image's file size is cropping

As the name implies, when we crop an image, we get rid of the part of the image that isn't important / that we don't need

Often used anyway to fine-tune images

Typically, when I frame a photo, I zoom out a little to give myself a little 'wiggle room' artistically

But it also reduces the image's file size

Photo Editing

We'll cover the mechanics of resizing, cropping, and compressing images in lab

It's much the same with Photoshop

Again, this is the bare basics of photo editing

Enough, though, for optimizing for the web

Users

Every well designed site is based on a targeted set of site users

Cannot create a site that appeals to everyone

Define groups of targeted users to focus design

Once we know who to target, we can plan what content and design will (and won't) appeal to them

Will often create user personas to aid in planning

Users

Information can come from

Customer's company marketing department

Existing web site analysis

Surveys and research of existing customer base

Any other ideas?

Creating User Personas

Who will visit this site?

What do they have in common?

Interests?

Goals?

Likes / dislikes?

Developers often create 'personas' - hypothetical users - to identify these characteristics in a less abstract way

Persona

Persona

User Groups

Sites often exist for more than one type of user

We can group these users according to characteristics they have in common, but which distinguish them from other groups of users

Example - A university web site:

Faculty/staff

Students

Prospective students / parents

Alumni

Having identified specific groups of potential users, we can then partition the site into sections that will meet each group's needs

User Groups - Some Common Elements

Age

Gender

Education level

Occupation

Hobbies/interests

Technology experience

Personal goals

Primary access platform (mobile/desktop/tablet)

Activity

Scenario: Your firm has been employed by the owners of an auto parts store to develop a website

Consider: What distinct groups of customers that would use such a site can we identify?

For each group, identify one overall characteristic/concern that distinguishes that froup from others

Parts Store - User Groups

Professional mechanics

Hobbyists / car enthusiasts

DIY repair

Suppliers/resellers of components

Parts Store - Mechanics

Use: Search inventory by part number and availability

Major concern: Delivery speed

Parts Store - Hobbyists

Use: Search by make/model/year; getting the right part

Major concern: Getting the part(s) they want

Parts Store - Do It Yourselfers

Use: Finding parts by pictures / tutorials

Major concern: Price

User Groups - Prioritizing

Oops! Did we forget one? What about resellers?

Having identified specific groups of potential users, your client may choose to downplay or ignore one or more of those groups for business reasons

In this example, our auto parts store owners have no interest in dealing with parts resellers

So we can eliminate that group from the design process

Benefits of Understanding Site Users

Overall tone, personality, attitude of site

Organizational structure / navigation

Text, terminology/jargon, writing style

Appropriate pictures/graphics

Functional features

Requirements

Designer

Free from errors and usable

Site owner

Must meet customers'/visitors' needs & goals

End user

Find needed information/conduct transactions quickly and efficiently

User Requirements Elicitation

Requirements Analysis: process used to learn and understand the needs of our targeted users

What do they need/want to do?

Requirements Elicitation: discovering requirements by communicating with end users and others

User Task Analysis: determining how requirements can best be implemented and supported in a design

Begin by determining what functionality needs to be supported

Then consider how it should be presented and accomplished

User Requirements Elicitation

Designers do not determine site requirements, they gather requirements specified by others

Comes from meeting with clients and end users (when possible), and asking specific questions

Requires effort on the designers' part to learn requirements through skillful use of questions

Customer may say “I want an online store” but there are many different kinds and design alternatives

Users must be guided in the process of stating their requirements

They generally will not have thought through this in advance

User Requirements Elicitation

Interviews and questionnaires

Ask specific questions to determine wants/needs

"What do you want?" may elicit general requirements, but detailed questions needed

Brain storming sessions

Meet with groups and discuss ideas and variations

Storyboards

Diagram alternatives

Discuss pros/cons and changes

User Requirements Elicitation

Role playing

Walk through particular requirements

Prototyping

Produce rough drafts of potential "solutions" for examination

Types of Requirements

Specific requirements tie to functional demands or design attributes of our site

"Our company color is royal blue; we’d like that featured in the design"

"We’d like site visitors to be able to chat with technical support via our site"

General requirements can be derived from attributes of and knowledge of our targeted users

Since target of AARP site visitors are mostly older users, "flashy" presentation not valued

Color contrast important for readability, and information architecture (organization) is paramount

Requirements vs. Site Mission Statement

Sometimes, stated requirements obtained from users may conflict with site mission statement

Can the requirement be satisfied in a manner consistent with the mission statement?

Customer/site owner must be made aware of conflict so they can decide how conflict will be handled

This is referred to as 'Requirements Creep'

Questions?

Reading for this week

Chapters 4 & 5 & pp. 452-463