Transcript 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 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
CIS 1310 – HTML & CSS
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>
CIS 1310 – HTML & CSS
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>
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


Left-column (Navigation)


float: right; width: 200px;
Center Column (Content)



float: left; width:150px;
Right-column (Sidebar)


Sets Background Color, Text Color, Typeface, & Width
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
<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>
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
http://www.w3.org/TR/mobile-bp/
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 Email

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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Mobile Navigation

List Thumbnails
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
<meta name="viewport" content="width=device-width,initial-scale=1.0“ />
CIS 1310 – HTML & CSS
Media Queries 3

Determines Capability of Mobile Device


Directs Browser to Styles


e.g., Screen Resolution
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
<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)
{ ... }
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
CIS 1310 – HTML & CSS
Tablet
Smartphone
Flexible Box Layout

Configured Horizontally or Vertically

Can Change Order of Display

Properties

flex-basis: #;


flex-grow: #;


Specifies Initial Length of a Flex Item
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 | columnreverse;


flex-wrap: nowrap | wrap | wrap-reverse;


Specifies Direction of a Flex Item
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;


align-self: stretch | center | flex-start | flex-end | spacearound | space-between;


Specifies Default Alignment for Flex Items
Specifies Alignment for Selected Flex Item
justify-content: flex-start | flex-end | center | spacearound | 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
center
CIS 1310 – HTML & CSS
spacebetween
spacearound
stretch