University of Washington, CSE 154

Exploration Session: Mobile Web Programming

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, Victoria Kirst and Zachary Cava. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

original session idea and slides by Zachary Cava

Valid HTML5 Valid CSS

Mobile Web Programming

Defining Mobile Web Programming

android ios blackberry webos

So the question is, why bother changing our style for mobile devices? Just make them display things properly!

The Answer: Real Estate

A Class Website: Dissecting Screen Sizes

1024x768 (Desktop/Tablets)
640x6400 (iPhone 10)
640x1136 (iPhone 5)
640x720 (Droid 3)
480x640 (Droid OG)
320x426 (G1)

A Visible Difference

What if we don't make a better layout?

Mobile Web Programming

Metadata - Specifying mobile settings

<meta name="viewport" content="width=device-width, initial-scale=1" />
Property Description
width Width of page, CSS 100% will be equal to this value. Values: ###px -or- device-width
height Height of page, CSS 100% will be equal to this value. Values: ###px -or- device-height
initial-scale The initial zoom to have the page at; it's a ratio. Default: 1
maximum-scale The most the page can be zoomed.
user-scalable Allow the user to zoom/scale the page? (yes/no)

Metadata - Specifying mobile settings

Layout out the page

Good Mobile Sites

google wikipedia facebook

Good Mobile Sites 2

amazon imdb aol

To Zoom or not to Zoom

Mobile style sheets

<link href="mobile.css" type="text/css"
      rel="stylesheet" media="handheld, only screen" />

CSS media directives

@media only screen and (max-device-width: 800px) {
	body {
		margin: 5px;
	}
	#main p {
		font-size: larger;
	}
	#sidebar {
		float: none;  /* un-float the side column */
		width: 95%;
	}
}

Mobile Web Programming

Serving Mobile-Optimized Sites

	Mozilla/5.0 (X11; Linux i686)
		AppleWebKit/537.4 (KHTML, like Gecko)
		Chrome/22.0.1229.79 Safari/537.4

Using the User Agent String

Collapsible Sections

wiki2

Tabbed Sections

tab