7 More on Links, Layout & Mobile

1. 7 More on Links, Layout & Mobile

2. Learning Outcomes • Code Relative Links to Pages in Folders • Configure a Link to a Named Fragment in a Page • Configure Images with CSS Sprites • Configure a Three-column Page Layout Using CSS • Configure CSS for Printing • Configure CSS for Mobile Display • Use CSS3 Media Queries to Target Mobile Devices

3. HTML 5 Link Changes • Block Anchor • Block Display Elements can be Wrapped By an Anchor <a href="http://somewebsite.com" > <p>Some text inside a paragraph element.</p> </a> • target Attribute • Open a Link in a New Window or Tab <a href="http://www.cod.edu" target="_blank">COD</a>

4. HTML 5 Link Changes • Telephone Scheme • Initiates a Phone Call When Link is Clicked <a href="tel:888-555-5555">Call 888-555-5555</a> • SMS Scheme • Initiates a Text Message When Link is Clicked <a href="sms:888-555-5555">Text 888-555-5555</a>

5. CSS Three Column Layout • Header Across Top • Three Columns Below • Navigation • Content • Sidebar • Footer Beneath

6. CSS Three Column Layout • Container • Sets Background Color, Text Color, Typeface, & Width • Left-column (Navigation) • float: left; width:150px; • Right-column (Sidebar) • float: right; width: 200px; • Center Column (Content) • Uses Remaining Real Estate • margin: 0 210px 0 160px; • Footer (Clears the Float) • clear: both;

7. Different Media • Style Sheet is Applied to All Devices • media Attribute Allows Sheet Definition for Specific Device

8. Print Style Sheets • Create Separate Style Sheet for Each Medium <link rel="stylesheet" type="text/css" media=“screen" href=“reg.css" /> <link rel="stylesheet" type="text/css" media="print" href="prn.css" /> • Create Separate Section for Each Medium <style type="text/css“> @media screen { /* The regular stuff. */ } @media print { { background: #fff; color: #000; } html { font: 100%/1.5 georgia, serif; } #nav, #about { display: none; } } </style>

9. Print Styles • size: width height orientation • page-break-before: always | avoid | left | right | auto | inherit • page-break-after: always | avoid | left | right | auto | inherit • orphan: value • Minimum Lines Forced to Remain on Bottom • widow: value • Minimum Lines Forced to Remain on Top

10. Print Styles Best Practices • Non-essential Content#nav { display: none; } • Configure Font Size and Color for Printing • Use pt Font Sizes • Use Dark Text Color • Print URLs for Hyperlinks #sidebar a::after { content: " (" attr(href) ") "; }

11. Mobile Web Design • Develop a New Mobile Site with a .mobi TLD • Create a Separate Website • Hosted Within Your Current Domain • Targeted for Mobile Users • Use CSS to Configure Your Current Website • Display for Both Mobile & Desktop Devices

12. Mobile Web Limitations • Small Screen Size • Low Bandwidth • Limited Fonts • Limited Color • Awkward Controls • Lack of Flash Support • Limited Processor & Memory • Cost Per Kilobyte

13. Mobile Web Design Techniques • Single Column Design • Avoid Floats, Tables, Frames • Eliminate Unneeded Images • Em or Percentage Font Size Units • Good Contrast Between Text & Background Colors • Provide “Skip To Content” Named Anchor • Provide “Back To Top” Named Anchor

14. Mobile Navigation • Image Grids vs. Text Lists • Text-Only Menu Items Require Less Vertical Space • User Often Sees Only 4 Grid Items at a Time • Should Keep All Navigation Options Visible 2 Screens vs. 4 Screens

15. Mobile Navigation • Image Grids vs. Text Lists • Text-Only List Menus Are More Flexible • Short Lists of Subcategories Expanded Via an Accordion • Does Not Require a New Page to Load • No Image Requests Slowing Down Page Load • Images Can Help Users Differentiate • Images Provides Larger Tap Targets • Images Allow Users to Skip Reading Altogether Accordion List

16. Mobile Navigation • Image Grids vs. Text Lists • Images Must Contain Helpful Details • Optimize for More Images per Scroll Images Do Not Provide Detail 2 Images Better Than 1

17. Meta Viewport • Default Action for Most Mobile Devices • Zoom Out & Scale Web Page • Meta Viewport • Created as Apple Extension for Mobile Device Displays • Configures Width & Initial Scale of Browser Viewport <meta name="viewport" content="width=device-width,initial-scale=1.0">

18. Media Queries 3 • Determines Capability of Mobile Device • e.g., Screen Resolution • Directs Browser to Styles • Configured Specifically for Those Capabilities • color, color-index, aspect-ratio, device-aspect-ratio, device-height, device-width, height, monochrome, orientation, resolution, width • Most have min/max Prefix

19. Media Queries 3 • Apply to Devices with at Least 256 colors <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> • Apply to Devices when Screen is < 800 px Wide <link rel="stylesheet" media="screen and (max-device-width: 799px)" /> • Apply to Devices when Viewport is 500-800 px Wide @media screen and (min-width: 500px) and (max-width: 800px) { ... }