cis 1310 – html & css 7 more on links, layout & mobile

CIS 1310 – HTML & CSS

7

More on Links, Layout & Mobile


Learning OutcomesLearning 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

Fragment IdentifiersFragment Identifiers

Create a Link to a Specific Location on a Page

Example

< a href="#P4">A link to paragraph 4 in same document.</a>Paragraph 1Paragraph 2Paragraph 3Paragraph 4 content.

id Attribute Value Must be Unique for that Page Begin with a Letter

Spaces Not Allowed

HTML HTML 5 5 Link Changes Link Changes

Block Anchor

Block Display Elements can be Wrapped by an Anchor

<a href="http://somewebsite.com" >

Some text inside a paragraph element.

</a>

target Attribute

Open a Link in a New Window or Tab

<a href="http://www.cod.edu" target="_blank">COD</a>

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


CSS Three Column Layout CSS Three Column Layout

Header Across Top

Three Columns Below

Navigation

Content

Sidebar

Footer Beneath


CSS Three Column Layout 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 MediaDifferent Media

Style Sheet is Applied to All Devices

media Attribute Allows Sheet Definition for Specific Device

Print Style SheetsPrint 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 Best PracticesPrint 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) ") "; }


Mobile Web DesignMobile 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 LimitationsMobile 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 LimitationsMobile Web Limitations

Low / Variable Bandwidth

Coverage / Access Issues

Awkward Controls

Limited Processor & Memory

Cost Per Kilobyte


Mobile Web Design Best PracticesMobile Web Design Best Practices

Layout

Single Column Design

Avoid Tables

Use Headings & Lists

Provide Labels for Form Controls

Eliminate Unneeded Images



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



Graphics

Avoid Images that Are Wider than the Screen

Avoid Large Images

Text

Good Contrast

Used Common Typefaces

Em or Percentage Font Size Units

http://www.w3.org/TR/mobile-bp/


Mobile Input Field ChecklistMobile 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?



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



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 It In Whatever Format They Like?

e.g., Phone Numbers, Credit Cards


Mobile NavigationMobile 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



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 AltogetherAccordion List



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



Accordions

Expands In Place To Expose Some Hidden Information

Push Page Content Down



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



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

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


Media Queries Media Queries 33

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 Media Queries 33

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


Responsive Web DesignResponsive 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 Tablet Smartphone


Flexible Box LayoutFlexible 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



Properties order: #;

Specifies Order of Flex Item

flex-start flex-end center space-between

space-around

stretch

cis 1310 – html & css 7 more on links, layout & mobile

Documents