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

The 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?

What if we don't make a better layout?

Mobile Web Programming

Telling a Mobile from a Desktop

	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

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, its a ratio. Default: 1
maximum-scale The most the page can be zoomed, more on this in a second.

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 Web Programming

Collapsible Sections


Tabbed Sections