7 More on Links, Layout & Mobile

Learning Outcomes Code Relative Links to Pages in Folders Configure a Link to a Named Fragment in a Page 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

Fragment Identifiers Create a Link to a Specific Location on a Page Example < a href="#P4">A link to paragraph 4 in same document.</a> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p id=“P4”>Paragraph 4 content.</p> id Attribute Value Must be Unique for that Page Begin with a Letter Spaces Not Allowed

HTML 5 Link Changes Block Anchor target Attribute 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>

HTML 5 Link Changes Telephone Scheme SMS 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>

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

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;

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

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>

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

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 aside a:after { content: " (" attr(href) ") "; }

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

Mobile Web Limitations Small Screen Size Content & Feature Prioritization Larger Activation Areas Required for Touch Portable Means Interruptions Average Session 72 Seconds (Desktop = 150 Seconds) Save State Simplify Tasks

Mobile Web Limitations Low / Variable Bandwidth Coverage / Access Issues Awkward Controls Limited Processor & Memory Cost Per Kilobyte

Mobile Web Design Best Practices Layout Single Column Design Avoid Tables Use Headings & Lists Provide Labels for Form Controls Eliminate Unneeded Images

Mobile Web Design Best Practices Navigation Located at Top of Page Minimal Avoid Popups Avoid Opening New Windows Provide “Skip To Content” Fragment Identifier Provide “Back To Top” Fragment Identifier

Mobile Web Design Best Practices Graphics Avoid Images that Are Wider than the Screen Avoid Large Images Text Good Contrast Use Common Typefaces Em or Percentage Font Size Units http://www.w3.org/TR/mobile-bp/

Mobile Input Field Checklist Should It Be There at All Is this Field Absolutely Necessary? Description Is Label Above It? (Not Inside or Below) Is Field Marked as Required (*) or Optional? Have You Removed Placeholders from Inside the Field? Visibility Is Field Big Enough So Most Field Values Are Visible? Visible in Both Orientations when Keyboard Displayed?

Mobile Input Field Checklist Filling It in for the User Are There Any Good Defaults for This Field? Any History Available? Frequently Used Values? Can You Use Phone Features To Populate It? GPS, Contacts Can You Compute It for User Based on Other Info? State Based on Zip Code

Mobile Input Field Checklist Typing Support Copy & Paste into the Field? What Is the Right Keyboard for this Field? Make Suggestions/Autocomplete Based on First Letters Typed? Do Not Autocorrect for Names, Addresses and Email Allow Typos or Abbreviations? Allow Users To Enter in Whatever Format They Like? e.g., Phone Numbers, Credit Cards

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

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

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

Mobile Navigation List Thumbnails

Mobile Subnavigation Accordion Expands In Place To Expose Some Hidden Information Push Page Content Down

Mobile Subnavigation Accordion Benefits Difficulties Users Get Big Picture Before Focusing on Details In-Page Table of Contents Determine Whether Information Likely to be Relevant for Goals Difficulties Disorientation Users Think They Navigated to a New Page Will Often Try to Use Back Button to Go Back Scrolling to Find Next Option

Mobile Subnavigation Section Separate Menus that Appear on Section Homepages Distinct from Main Navigation Menu

Mobile Subnavigation Section Benefits Difficulties Can Accommodate Fairly Large Number of Subcategories Difficulties May Be Confused with Main Menu

Mobile Subnavigation Category Landing Pages Too Many Subcategories to Fit in a Section Menu Serves as Navigation Hub For All Pages in that Section Contains Enumeration of All Level 2 Subcategories Even Some Level 3 or 4 Subcategories

Mobile Subnavigation Category Landing Pages

Mobile Subnavigation Accordian Section Category Landing Pages Less than 6 Subcategories for All Primary Categories Section 6 - 15 Subcategories for Some Primary Categories Category Landing Pages More than 15 Subcategories Per Primary Category

Meta Viewport Default Action for Most Mobile Devices Meta Viewport 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" />

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

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 < 800px 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) { ... }

Responsive Web Design Dynamic Site Changes Desktop, Smartphone Based on Screen Size & Orientation Desktop, Smartphone Hiding Content / Functionality or Altering Appearance Based on Knowledge About Your Users & Their Needs Desktop Tablet Smartphone

Flexible Box Layout display: flex; Properties Configured Horizontally or Vertically Can Change Order of Display Properties flex-basis: #; Specifies Initial Length of a Flex Item flex-grow: #; Specifies How Much Item Grows Relative to Other Flex Items flex-shrink: #; Specifies How Much Item Shrinks Relative to Other Flex Items

Flexible Box Layout Properties flex-direction: row | row-reverse | column | column- reverse; Specifies Direction of a Flex Item flex-wrap: nowrap | wrap | wrap-reverse; Specifies Whether Flex Items Should Wrap or Not flex-direction:row; flex-direction:column-reverse;

Flexible Box Layout Properties align-content: stretch | center | flex-start | flex-end | space-around | space-between; For Vertical Flex Items Items Stretch to Fit, Centered, Positioned at Beginning, End, With Space Before & After Items, With Space Between Items justify-content: flex-start | flex-end | center | space- around | space-between; For Horizontal Flex Items Items Positioned at Beginning, End, Centered, With Space Before & After Items, With Space Between Items

Flexible Box Layout Properties align-content flex-start flex-end center space-between space-around stretch

Flexible Box Layout Properties align-items: stretch | center | flex-start | flex-end | baseline; Specifies Default Alignment for Flex Items align-self: stretch | center | flex-start | flex-end | space- around | space-between; Specifies Alignment for Selected Flex Item

Flexible Box Layout Properties order: #; Specifies Order of Flex Item header {order:1;} article {order:2;} nav {order:3;} aside {order:4;} footer {order:5;}