Chapter 7 Absolute/relative hyperlinks Frag id 3-column site CSS printing Mobile display Responsive design with media queries ARIA – Accessible Rich Internet Applications

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)

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.

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.

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

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)

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">

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) { }

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.

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 …