Web Development for Mobile: GTUG Talk at Google

1.
Mobile Web DevelopmentEstelleWeylhttp://standardista.comhttp://evotech.net/blog@estellevw

2.
Native or Web???2Source:Jonathan Stark

4.
With HTML5 &CSS34

5.
http://findmebyip.com/litmus/

6.
CSS2.1

7.
CSS3Unfinished, but wellsupported

8.
iPhone/Android = WebkitNoCross browser testing!!!

9.
CSS3Mobile Webkit Supports all of CSS3Mobile Webkit Supports HTML5almost^much of^

10.
CSS3 PropertiesCSS3 SelectorsHSLA/ RGBAMultiple backgroundsBackground-sizeBorder-radiusBorder-imageText ShadowBox Shadow Opacity10Text-overflow

11.
Gradients

12.
Transforms

13.
Columns

14.
Animations

15.
Transitions

16.
Border-image

17.
Reflections

18.
@font-faceHTML5 APIsLocal StorageSessionStorageWebSQL dBOffline ApplicationsGeoLocationpostMessage11Query selector ??

19.
Drag & Drop

20.
<canvas>, <svg>, <audio>,<video>

21.
Web FormsHTML5 <input>Typesdate /time / datetime / datetime-local / month / weekemail url12Tel

22.
Number

23.
Range

24.
searchInput Behavior13Keyboard support≠ Input Type Support

25.
iPhone v. Androidv. desktopInput file type does Not work on iPhone. <a href=“tel:14155551212>Call me</a>mailto: opens mail applicationgoogle maps, iTunes and Youtube links open widgets on iPhoneview source debugger✔14

26.
Mobile Simulators15

27.
Debugging?Switch user agentto iPhone / OtherUse Web Inspector to debug16

28.
Firebug for Mobile?Settings> Safari > Developer > Debug Console17Android Debug Bridge (ADB)

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

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

31.
Mobile web appsettings<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

32.
Targeting MobileViewport:<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

33.
@media queries min-width

34.
max-width

35.
device-width

36.
min-device-width

37.
max-device-width

38.
orientation

39.
-webkit-min-device-pixel-ratio@media screenand (max-device-width: 480px){ /* small screen CSS here */ } 22

40.
@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

41.
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)24

42.
25

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

44.
Don’t reinvent thewheel27

45.
Sencha Touch28http://glyphish.com/http://graffletopia.com/stencils

46.
29http://10k.aneventapart.com

47.
30

48.
31

49.
32Gradients

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

51.
34text-shadow: color leftoffsettopoffsetblur;

52.
35

53.
36

54.
37

55.
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

56.
39

57.
40

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

59.
42Transformstranslate() -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);

60.
43rotate() -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);}

61.
44Transitionstransition-propertytransition-durationtransition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()transition-delay

62.
45Multiple Transitionsor ‘all’

63.
46Animation

64.
47Animation animation-name, animation-duration, animation-timing-function ease,linear, ease-in-out, ease-in, ease-out, cubic-bezier() animation-delay animation-iteration-countn || infinite animation-direction alternate || normal

65.
Thanks.Estelle WeylTwitter: @estellevwBlog:http://www.standardista.comhttp://evotech.net/blog48

66.
Creditshttp://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen49

Web Development for Mobile: GTUG Talk at Google

More Related Content

What's hot

Viewers also liked

Similar to Web Development for Mobile: GTUG Talk at Google

Recently uploaded

Web Development for Mobile: GTUG Talk at Google

Editor's Notes