Web Development for Mobile: GTUG Talk at Google

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

email

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