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

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

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

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

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)

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

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…

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.

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)

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 328-330. Many of these you already do – such as consistent navigation, h1, and small images.