Web Development for Mobile: GTUG Talk at Google

Mobile Web Development
Estelle Weyl
http://standardista.com
http://evotech.net/blog
@estellevw

Native or Web???
2
Source: Jonathan Stark

With HTML5 & CSS3
4

http://findmebyip.com/litmus/

CSS2.1

CSS3
Unfinished, 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
Opacity
10
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
email
url
12
Tel
Number
Range
search

Input Behavior
13
Keyboard support ≠ Input Type Support

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
✔
14

Mobile Simulators
15

Debugging?
Switch user agent to iPhone / Other
Use Web Inspector to debug
16

Firebug for Mobile?
Settings > Safari > Developer > Debug Console
17
Android Debug Bridge (ADB)

Beautiful bookmarks
<link rel="apple-touch-icon" href="/iphoneicon.png" />
apple-touch-icon.png
(or apple-touch-icon-precomposed.png)
18

Android bookmarks
<link rel="apple-touch-icon" href="/iphoneicon.png" />
apple-touch-icon.png
19

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)
20

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" />
21

@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 */
}
22

@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)
23

iPad
Portrait & 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)
24

Hide the Title bar
<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
}
</script>
26

Don’t reinvent the wheel
27

Sencha Touch
28
http://glyphish.com/
http://graffletopia.com/stencils

29
http://10k.aneventapart.com

32
Gradients

http://www.westciv.com/tools/gradients/
33

34
text-shadow: color leftoffsettopoffset 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%;
}
38

CSS3 Selectors
:nth-of-type()
tr:nth-of-type(even) td{
background-color: #dedede;
}
41

42
Transforms
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);

43
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);
}

44
Transitions
transition-property
transition-duration
transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()
transition-delay

45
Multiple Transitions
or ‘all’

46
Animation

47
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 || infinite
animation-direction
alternate || normal

Thanks.
Estelle Weyl
Twitter: @estellevw
Blog: http://www.standardista.com
http://evotech.net/blog
48

Credits
http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen
49

http://www.standardista.com	5828
http://translate.googleusercontent.com	16
http://www.enfew.com	4
http://xianguo.com	4
http://webcache.googleusercontent.com	4
http://ind3x.tumblr.com	3
http://xss.yandex.net	2
https://www.goodsmiles.info	1
http://www.techgig.com	1
http://www.netvibes.com	1
http://safe.tumblr.com	1
https://www.standardista.com	1

Web Development for Mobile: GTUG Talk at Google

by Estelle Weyl on Aug 13, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 5,866

Statistics

Web Development for Mobile: GTUG Talk at Google — Presentation Transcript