CIS 1310 – HTML & CSS 7 More on Links, Layout & Mobile

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Fragment Identifiers  Create a Link to a Specific Location on a Page  Example A link to paragraph 4 in same document. Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 content.  id Attribute Value Must be Unique for that Page Begin with a Letter Spaces Not Allowed

CIS 1310 – HTML & CSS HTML 5 Link Changes  Block Anchor Block Display Elements can be Wrapped by an Anchor Some text inside a paragraph element.  target Attribute Open a Link in a New Window or Tab COD

CIS 1310 – HTML & CSS HTML 5 Link Changes  Telephone Scheme Initiates a Phone Call When Link is Clicked Call  SMS Scheme Initiates a Text Message When Link is Clicked Text

CIS 1310 – HTML & CSS CSS Three Column Layout  Header Across Top  Three Columns Below Navigation Content Sidebar  Footer Beneath

CIS 1310 – HTML & CSS 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;

CIS 1310 – HTML & CSS Different Media  Style Sheet is Applied to All Devices media Attribute Allows Sheet Definition for Specific Device

CIS 1310 – HTML & CSS Print Style Sheets  Create Separate Style Sheet for Each Medium  Create Separate Section for Each screen { /* The regular stuff. */ print { { background: #fff; color: #000; } html { font: 100%/1.5 georgia, serif; } #nav, #about { display: none; } }

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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) ") "; }

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Mobile Web Limitations  Low / Variable Bandwidth Coverage / Access Issues  Awkward Controls  Limited Processor & Memory  Cost Per Kilobyte

CIS 1310 – HTML & CSS Mobile Web Design Best Practices  Layout Single Column Design Avoid Tables Use Headings & Lists Provide Labels for Form Controls Eliminate Unneeded Images

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Mobile Web Design Best Practices  Graphics Avoid Images that Are Wider than the Screen Avoid Large Images  Text Good Contrast Used Common Typefaces Em or Percentage Font Size Units 

CIS 1310 – HTML & CSS 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?

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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 It In Whatever Format They Like? e.g., Phone Numbers, Credit Cards

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Mobile Navigation  Accordions Expands In Place To Expose Some Hidden Information Push Page Content Down

CIS 1310 – HTML & CSS Mobile Navigation  Accordions Benefits Users Get Big Picture Before Focusing on Details In-Page Table of Contents Tells Users What Page Contains Determine Whether Information Likely to be Relevant for Goals Helps Users Form Mental Model of Page and, Potentially, Site Collapsing Each Step in a Form Effective Way to Convey Workflow without Overwhelming User

CIS 1310 – HTML & CSS Mobile Navigation  Accordions 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS 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

CIS 1310 – HTML & CSS Media Queries 3  Apply to Devices with at Least 256 colors  Apply to Devices when Screen is < 800 px Wide  Apply to Devices when Viewport is px screen and (min-width: 500px) and (max-width: 800px) {... }

CIS 1310 – HTML & CSS Responsive Web Design  Dynamic Site Changes Based on Screen Size & Orientation  Desktop, Smartphone Hiding Content / Functionality or Altering Appearance Based on Knowledge About Your Users & Their Needs Desktop TabletSmartphone

CIS 1310 – HTML & CSS Flexible Box Layout  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

CIS 1310 – HTML & CSS 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 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

CIS 1310 – HTML & CSS 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 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

CIS 1310 – HTML & CSS Flexible Box Layout  Properties order: #; Specifies Order of Flex Item flex-start flex-end centerspace- between space- around stretch