12 css for mobile devices
DESCRIPTION
TRANSCRIPT
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/