CSS for Mobile DevicesMaking web sites look good on mobile devices like iPhones, Android, and Windows Phones

Programming for mobile devices is difficultiOSObjective-

CCocoa

TouchXCode IDE

• Android• Java• ADT plugin• Eclipse IDE

• Windows Phone

• C# or VB.Net

• Silverlight• Visual

Studio IDE

sdf

But if we create a web site, they can all browse to the web site

Pros

1. One language, environment, IDE2. Only one version of the code base

exists3. Super-easy deployment

ConsIt will not be in the AppStore/Play

Market/etc.It won't have the native look and feelMust be connected to the Internet to runSlowerCannot access some native resources

◦Accelerometer◦Proximity sensor◦GPS (sometimes)◦Camera◦Telephone (sometimes)

We can mitigate some of those weaknessesUse a web-to-native solution to

create a native appUse offline caching for offline appsUse JavaScript/jQuery to push most

of the processing to client-side

Certain frameworks allow us to write our sites more abstractlyiuiSencha TouchSencha jQTouchjQuery Mobile

Many sites use a header/body/footer layout for consistency

<div id="header"> <div id="topbar">...</div> <div id="menubar"> <ul> <li><a href="home.html">Home</a></li> <li><a href="aboutus.html">About us</a></li> <li><a href="catalog.html">Catalog</a></li> <li><a href="login.html">Log in</a></li> <ul> </div> <!-- end of menubar --></div> <!-- end of menubar --><div id="content"> <div id="page_menu">...</div> <div id="page">...</div></div> <!-- end of content --><div id="footer">...</div>

Here's a typical header layout<div id="nav"><ul><li><a href="/activity">Activity</a></li><li><a href="/you">You</a></li><li><a href="/contacts">Contacts</a></li><li><a href="/more">More</a></li><ul></div>

#nav ul li { display: inline; width:25%; text-align: center;...}#nav ul li a {display:block;}

OptionsServer-side detectClient-side detect

◦One stylesheet◦Multiple stylesheets

Server-side detectUsing jsp, asp.net, php, or whatever,

detect the browser and serve a different stylesheet based on the browser

Client-side detect – different stylesheets<link rel="stylesheet" href="site.css" media="screen" /><link rel="stylesheet" href="mobile.css" media="screen and (max-width: 650px" />

Client-side detect – single stylesheet@media screen and (min-width: 650px) { body { background-color: #e4e3a5; } #mainContent { float: left; padding: 10px; width: 65%; } #sidebar { clear: none; float: right; margin: 0 0 0 0; width: 30%; }}@media screen and (max-width: 650px) { input[type=button] { font-size: 1.2em; } }

What to changeReduce contentReduce bandwidthCompensate for the small screen

Reduce contentRemove sidebarsdisplay: none;Move navigation links to the bottom

instead of the left sideReduce bandwidthNo mouse events; mouseover,

mousein, mouseoutNo :hover pseudo-class

Reduce bandwidthRemove backgroundsReplace images with plain textUse lower-res versions of some

imagesLoad resources using Ajax after the

page loadsif ($(document).width() > 640) { // do lazy loading here}

Compensate for the small screenIncrease fontIncrease padding on buttons and

anything else that the user will be touching

Convert all horizontal layouts to vertical – no side-scrolling!

Make the site minimalist so that it isn't confusing and busy

ViewportAll browsers have a viewport that

changes based on the sizeTiny browsers allow a large viewportTo make the page look bigger on the

the device, set viewport to be small<meta name="viewport" content="width=device-width" />

ProblemsReduced bandwidth on cellular

networks vs. WiFi or wiredReduced screen real estateCross-platform compatibility – many

browsers

tl;drTo avoid the pain of multiple source

codes in multiple languages with multiple frameworks, we can publish a mobile website instead of a mobile app

Separate presentation from layoutUse media queries to detect the

device and simply rearrange the layout

Setting viewport will keep the user from scrolling horizontally on a phone

Oh and one more thing ... iPhone icons come for free for your websites!57X57 png<link rel="apple-touch-icon" href="/customIcon.png"/>The iPhone creates rounded corners

and the 3D effect

Further studyNice strategy for backward

compatibility◦http://stuffandnonsense.co.uk/projects/

320andup/