This is a presentation I've given a couple of times in the past couple of months. I've seen such a huge amount of interest in this area, and because it's so new and things are changing so rapidly, there a few experts and many students (I am one of the latter)! It's clearly the biggest growth area of tech right now and one I just love. -Jared White, Creative Director http://siteshine.com

1. POST-PC
Website Development in a Mobile, Touch-Based World
Jared White
Creative Director, Siteshine

2. WHY THIS MATTERS

3. WHY THIS MATTERS
iPhone

4. WHY THIS MATTERS
iPhone
110m

5. WHY THIS MATTERS
iPhone
110m
3%
Browser
Usage

6. WHY THIS MATTERS
iPhone iPad
110m
3%
Browser
Usage

7. WHY THIS MATTERS
iPhone iPad
110m
3%
Browser
Usage
25m

8. WHY THIS MATTERS
iPhone iPad
110m
3% 2%
Browser Browser
Usage Usage
25m

9. WHY THIS MATTERS
iPhone iPad Android
110m
3% 2%
Browser Browser
Usage Usage
25m

10. WHY THIS MATTERS
iPhone iPad Android
120m
110m
3% 2%
Browser Browser
Usage Usage
25m

11. WHY THIS MATTERS
iPhone iPad Android
120m
110m
3% 2% 3%
Browser Browser Browser
Usage Usage Usage
25m

12. PUT IN PERSPECTIVE...
iPhone iPad Android
<2007 <2010 <2008

13. PUT IN PERSPECTIVE...
iPhone iPad Android
<2007 <2010 <2008
0

14. PUT IN PERSPECTIVE...
iPhone iPad Android
<2007 <2010 <2008
0 0

15. PUT IN PERSPECTIVE...
iPhone iPad Android
<2007 <2010 <2008
0 0 0

16. 2000
FACT: Global mobile data traffic in 2010 was
three times the size of all global Internet traffic
(fixed and mobile) in the year 2000
Source: Cisco

17. 2000 2010
FACT: Global mobile data traffic in 2010 was
three times the size of all global Internet traffic
(fixed and mobile) in the year 2000
Source: Cisco

18. ADD IT ALL TOGETHER...

19. 2011
1 in 10 users are using a
mobile device to browse the web

20. 2011
1 in 10 users are using a
mobile device to browse the web

21. A LITTLE ABOUT ME...

22. WHO IS THIS GUY?
• I've
been in the computer/
web field for 14 years
• Self-taught graphics designer
• LearnedHTML & CSS in
the bad old browser wars
WANTED days
• PHP and I go way back, but
I'm a Rails kid now

23. WHO IS THIS GUY?
• Founded Siteshine in 2009
•I bill myself as a
“Creative Director”
which is a fancy word for
Jack-of-all-Trades
WANTED •Ifollow 37signals’ Get Real
approach whenever I can

24. Think Different.

25. Mobile
!=
Traditional
Think Different.

26. TRADITIONAL
You're Sitting. You're Using a Mouse/Trackpad.
You Have Resizable Windows. It's Anti-Social.

27. MOBILE
You're on the Go. You're Using Your Fingers.
You Have a Fixed Screen. It's More Social.

28. MOBILE
You're on the Go. You're Using Your Fingers.
You Have a Fixed Screen. It's More Social.

29. WHAT'S THIS MEAN FOR
WEB DEVELOPERS?
• Yourhave you rework your
content for mobile use cases.
• Youhave to intercept Javascript
touch events rather than clicks.
• You have to design for fixed
screen sizes while accounting
for device orientation.

30. TRADITIONAL CONTENT

31. MOBILE CONTENT

32. Don't forget about forms!
MOBILE CONTENT

33. Don't forget about forms!
MOBILE CONTENT

34. Don't forget about forms!
MOBILE CONTENT

35. TRADITIONAL: HOVER/CLICK

36. TRADITIONAL: HOVER/CLICK

37. MOBILE: GESTURE

38. MOBILE: GESTURE

39. TRADITIONAL: FIXED-WIDTH

40. MOBILE: PORTRAIT/LANDSCAPE

41. ASIDE...
USA Today website SUCKS
compared to iPad app!

42. ATTENTION WEB DESIGNERS:
iOS App Developers may eat your lunch.

43. HEY, WHICH SIDE AM I ON?
I've seen great mobile sites and lousy apps.
And visa-versa.
I'm on the side of great design.
If you can design a mobile site as cool as an app,
GO FOR IT.

44. 4 AREAS TO FOCUS ON
• JS Events: Stop using onmouse* events and start using
ontouch* and ongesture* events.
• Orientation: Use CSS and Javascript to detect changes
from portrait to landscape and back again.
• Viewport: Lock in 100% zoom. Hide the chrome.
• HTML5: Your ticket to the outside (hardware) world.

45. 1st AREA TO FOCUS ON
• JS Events: Stop using onmouse* events and start using
ontouch* and ongesture* events.
ontouchstart ongesturestart
ontouchmove ongesturechange
ontouchend ongestureend

46. 1st AREA TO FOCUS ON
• JS Events: Stop using onmouse* events and start using
ontouch* and ongesture* events.
Example

47. 1st AREA TO FOCUS ON
• JS Events: Stop using onmouse* events and start using
ontouch* and ongesture* events.
ontouchstart
ontouchend
ontouchmove
Example

48. 1st AREA TO FOCUS ON
• JS Events: Stop using onmouse* events and start using
ontouch* and ongesture* events.
Remember!
Some platforms like iOS exhibit a delay for onclick.
For best user experience, ditch the onclicks and
intercept ontouchend instead.

49. 2nd AREA TO FOCUS ON
• Orientation: Use CSS and Javascript to detect changes
from portrait to landscape and back again.
CSS - iPhone Javascript
/* Portrait */
@media screen and (max-width: 320px) onorientationchange
{
.panel { width: 300px; } var ori = window.orientation;
}
if (ori == 0 || ori == 180) {
/* Landscape */ // Portrait
@media screen and (min-width: 321px) }
{ else if (ori == 90 || ori == -90) {
.panel { width: 460px; } // Landscape
} }
Also (orientation: portrait/landscape)

50. 3rd AREA TO FOCUS ON
• Viewport: Lock in 100% zoom. Hide the chrome.
HTML
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Javascript
window.addEventListener("load", function() {
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});

51. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.

52. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.

53. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.
Semantics Offline & Storage Device Access
Connectivity Multimedia 3D Graphics & FX
?
Performance &
CSS3 And it's still evolving!
Integration

54. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.
Device Access

55. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.
Device Access
Geolocation
function start_geolocation() {
navigator.geolocation.getCurrentPosition(geo_handler);
}
function geo_handler(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Do something cool
}

56. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.
Device Access
Accelerometer
window.ondevicemotion = function(e) {
var accelerationX = event.accelerationIncludingGravity.x;
var accelerationY = event.accelerationIncludingGravity.y;
var accelerationZ = event.accelerationIncludingGravity.z;
}

57. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.
Device Access
Camera: Still & Video

58. 4th AREA TO FOCUS ON
• HTML5: Your ticket to the outside (hardware) world.
Device Access
Camera: Still & Video
C omi ng So on!

59. AND DON'T FORGET
THE MOST IMPORTANT
THING...

60. NO FLASH!
Really. Just kill it now.

61. -webkit -transform
<video
>
<au dio>
<ca
ry nv
jQue as>
JAVASCRIPT, CANVAS, SVG, CSS3,
HTML5 VIDEO, AND H.264
ARE YOUR FRIENDS

62. -webkit -transform
<video
>
<au dio>
<ca
ry nv
jQue as>
JAVASCRIPT, CANVAS, SVG, CSS3,
HTML5 VIDEO, AND H.264
ARE YOUR FRIENDS

63. WHAT ABOUT
FRAMEWORKS?

64. SPEED UP THE PROCESS
• jQuery – you should be using this anyway!
• jQuery Mobile – new layer built on top of jQuery
• jQTouch – a similar alternative also based on jQuery
• TouchSwipe – a lightweight, awesome jQuery plugin
• Sencha Touch – heavy-duty webapp framework
• M-Project, Rhomobile, etc. – choose your flavor

65. SPEED UP THE PROCESS
• What about popular CMS platforms?
• WP Touch – oft-used theme for WordPress
• OnSwipe – iPad-optimized theme for WordPress
• Mobile Joomla! – extensions for Joomla!
• iUI, Others – themes for Drupal

66. JQUERY MOBILE

67. JQUERY MOBILE

68. JQUERY MOBILE

69. JQUERY MOBILE

70. JQUERY MOBILE
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/
jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

71. JQUERY MOBILE

72. MY PREDICTION
I could be wrong, but...

73. 2020
25%-50% of your site visitors
will be using Post-PC mobile devices

74. NOW GO MAKE SOME
COOL STUFF
Questions?
jared@siteshine.com
@WebDevJared
Thank you.