смартфоны и планшетники. веб разработка помимо...
Post on 15-May-2015
2.124 Views
Preview:
TRANSCRIPT
СМАРТФОНЫ И ПЛАНШЕТНИКИMOBILE-FRIENDLY ВЕБ-РАЗРАБОТКА ПОМИМО ДЕСКТОПА
Patrick H. Lauke / RIT++ Conference 2011 / Moscow / 25 April 2011
mobile web is increasingly important
we need a website optimised for iPhone
oh, und another onefor the iPad
“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
sites that work on (almost) all mobile devices
what exactly is a “mobile device”?
3 approaches
1. do nothing
not WAP or text anymore...
modern mobile browserswork ok with “normal” sites
“but the mobile context...”
“Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two
separate designs — typically with fewer features for mobile.”www.useit.com/alertbox/mobile-redesign.html
2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)
внимание: browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
let the user decide:desktop or mobile?
refactored for small screen,not dumbed down for mobile
3. single adaptive site
nothing new...fluid layout, progressive enhancement, graceful degradation
www.alistapart.com/articles/dao
The Sage “... accepts the ebb and flow of things, Nurtures them, but does not own them,”
Tao Te Ching; 2 Abstraction
adaptive layouts
CSS 2.1 Media Types
Media types
all brailleembossed handheldprint projectionscreen speechtty tv
CSS 2.1 Media Types<link rel="stylesheet" ... media="print" href="...">
@import url("...") print;
@media print { // insert CSS rules here}
CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
CSS 3 Media Queries
● extend concept of CSS 2.1 Media Types● more granular control of capabilities
http://www.w3.org/TR/css3-mediaqueries/
Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
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}
Multiple media queries@media screen and (max-width:480px) { // screen device and width < 480px }
@media screen and (max-width:980px) { // screen device and width < 980px }
@media screen and (min-width:980px) { // screen device and width > 980px }
www.alistapart.com/articles/responsive-web-design
www.themaninblue.com/writing/perspective/2004/09/21
“not a magic bullet...”
viewport meta
physical vs virtual pixels
mobile devices lie(to better serve the user)
viewport metasuggests sizing to mobile browser
viewport meta<meta name="viewport" content="width=320,user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Viewport properties
width initial-scaleheight minimum-scaleuser-scalable maximum-scale
<meta name="viewport" content="width=550">
<meta name="viewport"content="width=device-width">
+
@media screen and (…) { … }
CSS Device Adaptation@viewport { width: device-width;}
@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}
dev.w3.org/csswg/css-device-adapt
Momentan nur in Opera Mobile 11 beta mit -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom
touch interfaces
:hoveronmouseover(...)onmouseout(...)
no hover ontouch devices*
*but some devices/browsers fake it
:focusonfocus(...)onblur(...)
no focus ontouch devices*
*only after an actual click
touch events
window.addEventListener('touchstart', function(e){ … }, true);window.addEventListener('touchmove', function(e){ … }, true);window.addEventListener('touchend', function(e){ … }, true);
e.touches[0].pageX; e.touches[0].pageY; …
progressive enhancement:mouse, keyboard and touch events
multimedia
video, audio und canvaswithout plug-ins
(Java / Flash / Silverlight absent from some devices)
geolocation
navigator.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;...
}
progressive enhancement:geolocation in addition to other
methods (IP address look-up, form, ...)
online/offline
application cache, localStorage/sessionStorage,
WebSQL, IndexDB
…and more (work in progress)WebGL, device API, orientation …
adaptive techniquesnot just for “mobile”
twitter.com/#!/stephenhay/status/23350345962889216
1. do nothing2. separate mobile site3. single adaptive site
Спасибоwww.opera.com/developer
patrick.lauke@opera.com
top related