Making your site mobile-friendly - DevCSI Reading 21.07.2010
-
Upload
patrick-lauke -
Category
Education
-
view
3.853 -
download
0
description
Transcript of Making your site mobile-friendly - DevCSI Reading 21.07.2010
![Page 1: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/1.jpg)
Making your site mobile-friendly TIPS AND TECHNIQUES FOR A BETTER MOBILE PRESENCE
Patrick H. Lauke / Developing for Mobile Applications in Education / DevCSI / Reading / 21 July 2010
![Page 2: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/2.jpg)
mobile web is increasingly important
![Page 3: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/3.jpg)
we need a site that works on iPhone
![Page 4: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/4.jpg)
...works on iPhone...oh, and iPad
![Page 5: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/5.jpg)
“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
![Page 6: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/6.jpg)
make your site work on all (most) mobile devices
![Page 7: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/7.jpg)
![Page 8: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/8.jpg)
1. do nothing
![Page 9: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/9.jpg)
not WAP or text anymore...
![Page 10: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/10.jpg)
mobile browserswill work ok-ish
![Page 11: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/11.jpg)
“But the mobile context...”
![Page 12: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/12.jpg)
2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)
![Page 13: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/13.jpg)
beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
![Page 14: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/14.jpg)
offer users choice:desktop or mobile?
![Page 15: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/15.jpg)
![Page 16: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/16.jpg)
![Page 17: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/17.jpg)
![Page 18: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/18.jpg)
![Page 19: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/19.jpg)
![Page 20: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/20.jpg)
![Page 21: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/21.jpg)
![Page 22: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/22.jpg)
![Page 23: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/23.jpg)
refactored for small screen,not dumbed down for mobile
![Page 24: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/24.jpg)
3. single adaptive site
![Page 25: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/25.jpg)
nothing new...fluid layout, progressive enhancement, graceful degradation
![Page 26: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/26.jpg)
CSS 2 Media Types(screen, print, handheld)
![Page 27: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/27.jpg)
CSS 2.1 Media Types
<link rel="stylesheet" ... media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
![Page 28: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/28.jpg)
CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
![Page 29: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/29.jpg)
CSS 3 Media Queries
● build and extend CSS 2.1 Media Types● more granular control of capabilities● width, height, orientation, color, resolution, …
http://www.w3.org/TR/css3-mediaqueries/
![Page 30: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/30.jpg)
CSS 3 Media Queries
<link rel="stylesheet" ... media="screen and (max-width:480px)" href="...">@import url("...") screen and (max-width:480px);@media screen and (max-width:480px) { // insert CSS rules here}
![Page 31: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/31.jpg)
![Page 32: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/32.jpg)
![Page 33: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/33.jpg)
viewport meta
![Page 34: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/34.jpg)
viewport meta
● desktop: viewport = visible area of browser● mobile: “virtual viewport”, physical pixels, zoom● viewport meta gives hints
![Page 35: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/35.jpg)
viewport meta
<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=320, initial-scale=2.3,user-scalable=no">http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
![Page 36: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/36.jpg)
![Page 37: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/37.jpg)
minimise dataand server requests
(minify JavaScript, combine CSS, …)
![Page 38: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/38.jpg)
minimise data
● data transfer over network can be slow● compress images (PNGCrush)● optimise your HTML (death to div-itis)● minify JavaScript● combine CSS
![Page 39: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/39.jpg)
minimise server requests
● each request has overhead● limit to concurrent requests● caching not reliable (e.g. iPhone > 25Kb)
![Page 40: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/40.jpg)
CSS spritesDave Shea, A List Apartwww.alistapart.com/articles/sprites
![Page 41: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/41.jpg)
width: 50px; height: 50px;background: url(icons.gif) no-repeat -51px 0;
![Page 42: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/42.jpg)
data URLshttp://software.hixie.ch/utilities/cgi/data/data
![Page 43: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/43.jpg)
data URLs
<img width="48" height="48" alt="Redux gravatar" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%00H%00H%00%00%FF% … ">h1 {
background: url("data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01 … ") no-repeat left top;}
![Page 44: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/44.jpg)
native app vs web app
![Page 45: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/45.jpg)
HTML5<!DOCTYPE html>
![Page 46: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/46.jpg)
video, audio and canvas on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
![Page 47: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/47.jpg)
![Page 48: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/48.jpg)
![Page 49: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/49.jpg)
![Page 50: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/50.jpg)
HTML5 (and friends) haslots more APIs for developers
(for powerful client-side apps)
![Page 52: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/52.jpg)
geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) {
/* where's Wally? */var lat = position.coords.latitude;var long = position.coords.longitude;...
}
![Page 53: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/53.jpg)
offline detection...
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
![Page 54: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/54.jpg)
application cache<html manifest=”blah.manifest”>CACHE MANIFESTimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssdata.xmlNETWORK:resources/news.xmlFALLBACK:images/ offline/not-available.png
![Page 55: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/55.jpg)
…and more (coming)WebGL, <device>, Contacts API …
![Page 56: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/56.jpg)
1. do nothing2. separate mobile site3. single adaptive site
![Page 57: Making your site mobile-friendly - DevCSI Reading 21.07.2010](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d1ef0b4c905ca208b4a02/html5/thumbnails/57.jpg)
www.opera.com/[email protected]
people.opera.com/patrickl/presentations/devcsi-mobile_21.07.2010/devcsi-mobile_21.07.2010.pdf