Estelle Weylhttp://standardista.comhttp://evotech.net/blog
@estellevw
Mobile Web Development
Native or Web???Native Web Depends
Cosmetics ✔
Functionality
✔
Development
✔
Testing ✔
Distribution ✔
Payment ✔
Support ✔
Source: Jonathan Stark
With HTML5 & CSS3Native Web
Cosmetics ✔ ✔
Functionality ✔ ✔*
Development ✔
Testing ✔
Distribution ✔
Payment ✔
Support ✔
http://findmebyip.com/litmus/
CSS2.1
CSS3Unfinished, but well supported
iPhone/Android = Webkit
No Cross browser testing!!!
CSS3
Mobile Webkit Supports all of CSS3
Mobile Webkit Supports HTML5
almost
^
^much of
CSS3 Properties CSS3 Selectors
HSLA / RGBA
Multiple backgrounds
Background-size
Border-radius
Border-image
Text Shadow
Box Shadow
Opacity10
Text-overflow
Gradients
Transforms
Columns
Animations
Transitions
Border-image
Reflections
@font-face
HTML5 APIs
Local Storage
Session Storage
WebSQL dB
Offline Applications
GeoLocation
postMessage
11
Query selector ??
Drag & Drop
<canvas>, <svg>, <audio>, <video>
Web Forms
HTML5 <input> Types
date /time / datetime / datetime-local / month / week
url
12
Tel
Number
Range
search
Input Behavior
Keyboard support ≠ Input Type Support
14
iPhone v. Android v. desktop
Input file type does Not work on iPhone.
<a href=“tel:14155551212>Call me</a>
mailto: opens mail application
google maps, iTunes and Youtube links open widgets on iPhone
view source debugger ✔
15
Mobile Simulators
16
Debugging?
Switch user agent to iPhone / Other
Use Web Inspector to debug
Firebug for Mobile?Settings > Safari > Developer > Debug Console
Android Debug Bridge (ADB)
Beautiful bookmarks
<link rel="apple-touch-icon" href="/iphoneicon.png" />apple-touch-icon.png
(or apple-touch-icon-precomposed.png)
Android bookmarks
<link rel="apple-touch-icon" href="/iphoneicon.png" />apple-touch-icon.png
Mobile web app settings
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content=“default || black || black-translucent" /> (iPhone only)
21
Targeting Mobile
Viewport:<meta name="viewport" content="width=980”/><meta name="viewport" content="width=device-width”/><meta name="viewport" content="user-scalable=no, width=device-width"/>
Prohibit Zoom / Pinch:<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
22
@media queries min-width max-width device-width min-device-width max-device-width orientation -webkit-min-device-pixel-ratio
@media screen and (max-device-width: 480px){ /* small screen CSS here */ }
@media screen and (???){ …}
Portrait & Landscape (min-width: 320px) and (max-width: 480px)
Portrait & Landscape (min-device-width: 320px) and (max-device-width: 480px)
Portrait & Landscape (max-device-width: 480px)
Landscape only(min-width: 321px) and (max-width: 480px)
Portrait only (max-width: 320px)
iPadPortrait & Landscape (min-device-width: 768px) and (max-device-width: 1024px)
Landscape only(min-device-width: 481px) and
(max-device-width: 1024px) and (orientation: landscape)
Portrait only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)
Hide the Title bar
<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1);
}
}
</script>
Don’t reinvent the wheel
Sencha Touchhttp://glyphish.com/http://graffletopia.com/stencils
29http://10k.aneventapart.com
Gradients
http://www.westciv.com/tools/gradients/
text-shadow: color leftoffset topoffset blur;
foo {
background-image: url(foo.png);
-moz-background-size: 100% 50%; //FF3.6
-o-background-size: 100% 50%; //O 9.5
-webkit-background-size: 100% 50%; //Saf 3.0
background-size: 100% 50%;
}
41
CSS3 Selectors
:nth-of-type()
tr:nth-of-type(even) td{ background-color: #dedede;}
translate() -webkit-transform: translate(15px, -15px); transform: translate(15px, -15px);
translateX() -webkit-transform: translatex(15px); transform: translatex(15px); translateY() -webkit-transform: translatey(-15px);
transform: translatey(-15px); scale() -webkit-transform: scale(1.5, 2); transform: scale(1.5, 2); scaleX() -webkit-transform: scalex(0.5); transform: scalex(0.5); scaleY() -webkit-transform: scaley(2);
transform: scaley(2);
Transforms
rotate() -webkit-transform: rotate(15deg); transform: rotate(15deg)
skew() -webkit-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg); skewX() -webkit-transform: skewx(15deg);
transform: skewx(15deg); skewY() -webkit-transform: skewy(-3deg); transform: skewy(-3deg);
Multiple transforms.enlargen:hover {
-webkit-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0);}
transition-property
transition-duration
transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()
transition-delay
Transitions
Multiple Transitions
or ‘all’
Animation
Animation animation-name, animation-duration, animation-timing-function
ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier() animation-delay animation-iteration-count
n || infiniteanimation-direction
alternate || normal
48
Thanks.
Estelle Weyl
Twitter: @estellevw
Blog: http://www.standardista.com
http://evotech.net/blog
49
Credits
http://www.flickr.com/photos/nrkbeta/3905907681
Marius Arnesen
Recommended
