1. Chapter 7
Absolute/relative hyperlinks
Frag id
3-column site
CSS printing
Mobile display
Responsive design with media queries
ARIA – Accessible Rich Internet Applications
Also from previous Chapter:
Thumbnail images

2. More on Relative Linking
Relative links from the Home page: index.html
<a href="contact.html">Contact</a>
<a href="rooms/canyon.html">Canyon</a>
<a href="../index.html">Home</a>
<a href="../events/weekend.html">Weekend</a>
Relative links from the Canyon page:
rooms/canyon.html

3. RELATIVE LINKS & SOURCES
Both files on same level:
filename.ext
example: <img src="banner.jpg">
Folder on same level as your file:
foldername/filename.html
Link to a folder one level up:
../foldername/filename.html

4. The Target Attribute
The target attribute on the anchor element opens a link in a new browser window or new browser tab.
<a href=" target="_blank">
Facebook
</a>

5. ARIA Accessible Rich Internet Applications
ARIA provides methods to increase accessibility of web pages and applications.
Landmark roles configures semantic descriptions of HTML elements.
Examples are: banner, navigation, main, complementary, contentinfo, form, and search
Coded as: <header role=“banner”>
The assistive device would understand these roles
banner (a header/logo area)
navigation (a collection of navigation elements)
main (the main content of a document)
complementary (a supporting part of page, designed to complementary to main content)
contentinfo (an area that contains information about the content such as copyright )
form (an area that contains a form)
search (an area of a web page that provides search functionality)

6. Thumbnails Rules
Crop images so that they are equal height and/or width.
Must have both large and small image for sake of bandwidth.

7. Ideas and Visual Inspiration for sidebars
Keep sidebars clean, uncluttered and engaging.
Add design elements to accentuate parts of 3 column website.
Do not neglect text.
What to include in sidebars.
Creative and beautiful ideas
See next slide for
sidebar or other designs…

9. CSS Styling for print
Reason: To control what gets printed and how printouts are configured.
Commonly used techniques
Hide non-essential content
Font & color best suited for printing
Page breaks
Print hyperlinks
For practice, we will create a print stylesheet using your artist website. Or the 7.5 folder.

10. Designing for Mobile Web
From both Chapter 5 & 7
Three approaches to consider:
Develop a separate site with a .mobi extension
Create separate site targeted to mobile users
Apply responsive design techniques via CSS (See CofC)

11. Mobile Design Considerations
Best practices for optimized sites include:
Small screen size – e.g. resize header area
Low band width – avoid large images
Font, color, etc. – choose good contrast, etc.
Awkward controls; limited processor & memory – maybe single column. Consider other touches and navigation
Functionality– display important links under header
Additional best practices on pages Many of these you already do – such as consistent navigation, h1, and small images.