Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/2014 1.

BASICS OF

WEB DESIGN

Chapter 8More on Links, Layout, and Mobile

Copyright © 2013

Terry Ann Morris, Ed.Drevised by Bill Pegram, 9/24/2014

1

Relative Linking

<a href=“javelina.html">Javelina</a><a href="../index.html">Home</a><a href="../events/weekend.html">Weekend Events</a>

2

Relative links from the canyon.html page in the rooms folder

Linking to Fragment Identifiers

A link to a part of a web pageAlso called named fragments, fragment idsTwo components:

1. The element that identifies the named fragment of a Web page. This requires the id attribute, e.g.

<div id="top"> ….. </div>Previously, this was done as <a name=“top”></a>, but this is now obsolete in HTML5

2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute.

<a href="#top">Back to Top</a>3. This permits linking within the same page, or to another page, e.g.

<a href="page1.html#bill">More info on bill</a>

3

Skip Links (used for accessibility) as an

Example

4

HTML5 Structural Elements Header Element Nav Element Footer Element

Example:<header>

<h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1>

<h2>the best coffee on the coast</h2>

</header>

5

HTML5 Figure and FigcaptionElements<figure> <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption></figure>

6

Floating Images img tags by themselves will float; however, if embedded in a <figure>

element, which is a block level element, one needs to float the figure elementsee examples on the schedule page

<figure>

<img src="photo1.jpg" alt="Golden Gate Bridge" width="225" height="168">

<figcaption>Golden Gate Bridge</figcaption>

</figure>

CSSfigure { float: left; width: 230px; padding-bottom: 10px; background-color: #EAEAEA; }

figcaption { text-align: center; font-style: italic; font-family: Georgia, serif; }

7

More HTML5 Elements Section Element

indicates a portion or “section” of a document, like a chapter or topic

Article Elementindicates an independent entry, like a blog posting,

that can stand on its own Aside Element

indicates a sidebar or other tangential content Time Element

represents a date or time

8

HTML5 Compatibility with Older Browsers

CSSheader, nav, footer, section, article, figure, figcaption, aside { display: block; }

HTML5 Shim (aka HTML5 Shiv)<!--[if lt IE 9]>

<script src=" http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>

<![endif]-->This enables IE before version 9 to process CSS applied to the new HTML5 tags

9

<link rel="stylesheet" href="lighthouse.css" media="screen"><link rel="stylesheet" href="lighthouseprint.css" media="print">

CSS Styling for Different Media

Create separate stylesheets, one for browser, one for print, using the media attribute of the <link> tag or a single stylesheet using @media screen { }

@media print {} sections

See examples on the schedule page

10

Print Styling Best Practices

Hide non-essential contentExample: nav { display: none; }

Configure font size and color for printing Use pt font sizes, use dark text color

Control page breaksExample: .newpage { page-break-before: always; }

11

Mobile Web Design Best Practices

Three Approaches to Mobile Web:◦ Develop a new mobile site with a .mobi

top level domain◦ Build your mobile site as a subdomain

within your current website – the standard is to use m. before your current domain, e.g. m.whitehouse.gov

◦ Use CSS to configure your current website for display on both mobile and desktop devices

Mobile Web Limitations

Small Screen Size Low bandwidth Limited fonts Limited color Awkward controls Limited processor and memory

Design Techniques for Mobile Web

Single column designAvoid floats, tables, framesDescriptive page titleDescriptive headingsOptimize imagesDescriptive alt text for imagesEliminate unneeded imagesNavigation in listsEm or percentage font size unitsCommon font typefacesGood contrast between

text and background colors Provide “Skip to Content” hyperlinkProvide “Back to Top” hyperlink

Notice the overlap between these

techniques and designing to

provide for accessibility?

Viewport Meta TagDefault action for most mobile devices is to zoom out and scale the web page

Viewport Meta TagCreated as an Apple extension

to configure display on mobile devices Configures width and

initial scale of browser viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

15

Telephone & Text Message Hyperlinks

Telephone Scheme

<a href="tel:888-555-5555">Call 888-555-5555</a>Many mobile browsers will initiate a phone call when the hyperlink is clicked.

SMS Scheme

<a href="sms:888-555-5555">Text 888-555-5555</a>Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked.

16

Responsive Web Design

Term coined by Ethan Marcotte Progressively enhancing a web page for

different viewing contexts Techniques:

Fluid LayoutCSS3 Media QueriesFlexible Images

17

CSS3 Media Queries Media Query

Determines the capability of the mobile device, such as screen resolution

Directs the browser to styles configured specifically for those capabilities

Link Element Example:<link href="lighthousemobile.css" media="only screen and (max-device-width: 480px)"> CSS Example (putting the media query directly into the

CSS)

@media only screen and (max-width: 480px) {

header { background-image: url(mobile.gif);

}

} 18

Flexible Images

Edit HTML: remove height and width attributes

The CSS below means that if the width of the image is less than the width of the container element, the image will display with its actual dimensions; if smaller, the image will be resized to fit in the container

img { max-width: 100%; height: auto; } Traditional way example – with height and width specified -

http://www.billpegram.com/WWWDesign/imgwithheightwidth.html

Flexible way example - http://www.billpegram.com/WWWDesign/flexibleimage.html

19

Testing Mobile Display Options Test with a mobile device Emulators

Opera Mobile Emulator MobilizerOpera Mini SimulatoriPhone Emulator

Test with a Desktop Browser reducing size of window

Install an iOS or Android SDK (these include an emulator)

20