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

4. HTML 5 Link Changes Block Anchor target Attribute
Block Display Elements can be Wrapped by an Anchor
<a href=" >
<p>Some text inside a paragraph element.</p>
</a>
target Attribute
Open a Link in a New Window or Tab
<a href=" target="_blank">COD</a>

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

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

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

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

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

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

11. 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) ") "; }

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

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

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

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

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

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

18. 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?

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

20. 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
Allow Typos or Abbreviations?
Allow Users To Enter in Whatever Format They Like?
e.g., Phone Numbers, Credit Cards

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

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

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

24. Mobile Navigation
List Thumbnails

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

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

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

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

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

30. Mobile Subnavigation
Category Landing Pages

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

32. 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" />

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

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

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

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

37. 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;

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

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

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

41. 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;}