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

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. Reminder of 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. Mobile Web Limitations
Small Screen Size
Low bandwidth
Limited fonts
Limited color
Awkward controls
Lack of Flash support
Limited processor and memory
Cost per kilobyte

11. 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)

12. Viewport Meta Tag
Default action for most mobile devices is to zoom out and scale the web page
Viewport Meta Tag
Created as an Apple extension to configure display on mobile devices
Configures width and initial scale of browser viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

13. CSS3 Media Queries Media Query
Determines the capability of the mobile device, such as screen resolution
Directs the browser to styles configured specifically for those capabilities
Example with link tag
<link href="lighthousemobile.css" rel="stylesheet" media="only all and (max-device-width: 480px)">
Example within CSS
@media only all and (max-width: 768px) { }

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

15. Today’s Class Assignment
Grading:
Worth 1% of grade. Pass/Fail.
Upload to students server. Due at BEGINNING of class on April 2nd
Simply access/load the page on your cell phone and; I’ll walk around and check at beginning of class.
What is assignment:
Download the zip file,
Examine the HTML and CSS
Add a body background image
Change h2 color to something audacious
Follow along in class …