My presentation at the recent Open Camp in Dallas, TX Is your content ready to go mobile? Is your audience spending more time viewing your site on their iPhone then a desktop? If they're not, they will be soon. Mobile is exploding, and to make sure your message is getting across to the largest audience, you need to make sure you're giving mobile user the best experience. Jeremy will go over tips, tricks, examples - along with some easy ways to get your site ready for a mobile audience.

1. Taking Your
Content Mobile 30 minute quick intro...
Dallas Open Camp 2010
http://www.flickr.com/photos/87919923@N00/346563918/

2. HELLO!

3. Jeremy Johnson
Director of User Experience for
gamestop.com
@jeremyjohnson
I mobile

4. Taking Your
Content Mobile
*

5. blogs
micro-blogs
magazines
marketing
brochure
information
video
photos
e-commerce
applications

6. blogs
micro-blogs
magazines
marketing
brochure
information
video
photos
e-commerce Needs custom
applications experience...

7. How many of
you have a
website?

8. How many of you
have a mobile
website?

9. Do I need a
mobile website?

10. Do I need a
mobile website?
Maybe?!

11. pre 2007
http://www.marco.org/980434663

12. Today

13. 100+ Million

14. http://www.lukew.com/ff/entry.asp?1174

15. !"#$%&'(&#'$)'*+&',$%%&-'.//'"0'12.-*/+"0&)
!"#$%&'"("&)*(+,+(+-.&/0&12
34&56678&92
!"#
%&#
+,-./,.- ((#
((#
$"#
'%#
0112
)!#
)*#
$$#
'3#
4567-85,
)3#
%*#
)# 0;;<=>?26/8?./2
!!# 0;;<=@7/-1A5,.
98:.5 "&# 0;;<8BA5,.
'$# 0;;<0,:/58:
2$:%*-;&!$/+<-&!-=+"&!"%>-(?<"*-&@ 92
@ 3"04$5&0*$.%'6'7-"/-$&*.-8
3"/8-$9+*':';<<='>+&'?$&%)&0'3"2/.08
"Gill, David" <David.Gill@nielsen.com>

16. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201001-201008

17. “I’m just playing around”
goal vs. leisure
“I need to find a pizza joint”

18. leisure
leisure
mix goal
“only”
http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html

23. leisure
leisure
mix goal
“only”
http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html

24. http://openca.mp/

26. www.jeremyjohnsononline.com

27. Lets get started!
tic tic tic
http://www.flickr.com/photos/mar00ned/

28. Do I need a
mobile website?
You may
already
have one!

29. tumblr.com
raisingrobots.com

30. posterous.com
23hd.com

31. Wordpress
jeremyjohnsononline.com

32. Wordpress.com
warmhotchocolate.com

33. twitter
twitter.com/jeremyjohnson

34. 0

35. Directing mobile
traffic.
http://www.flickr.com/photos/42961457@N04/4036087411/

36. detect script
yoursite.com
m.yoursite.com

37. detect script
yoursite.com
m.yoursite.com
iphone.yoursite.com

38. http://mobile.tutsplus.com/tutorials/html5/mobile-browser-detection/

39. <?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if(preg_match('/iPhone|Android|Blackberry/i', $agent)){
header("Location: mobile.html");
exit;
}
?>
http://mobile.tutsplus.com/tutorials/html5/mobile-browser-detection/

40. http://detectmobilebrowser.com/

41. http://code.google.com/p/php-mobile-detect/

42. The WURFL is an XML configuration file which
contains information about capabilities and
features of many mobile devices.
http://wurfl.sourceforge.net/

43. Lets look at
some options!
http://ffffound.com/image/2f1c04e45f116d294ac0d667d68cce6ac9073de0

44. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

45. Strategy #1: Code well and do nothing special for mobile
Strategy #2: Make a separate “mobile” site
Strategy #3: Build mobile-aware adaptive sites
The hardest to pull-off methodology is the one that can bring the best of all worlds to
your site visitors. A fully mobile-aware site has adaptive content that reacts to device
capabilities, and is therefore future-proof as it tests features rather than sniffing
browsers.
http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

46. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

47. hosted
sites that are hosted, with ready-
to-go mobile versions served up
automatically.

48. +
• easy
• no setup
• auto updates

49. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

50. plug-ins
plug-in site theme
these CMS plug-ins, once
installed give you options and
themes to make your site
mobile ready.
http://www.bravenewcode.com/products/wptouch-pro/

51. plug-ins
http://www.bravenewcode.com/products/wptouch-pro/

52. http://crowdfavorite.com/wordpress/plugins/wordpress-mobile-edition/

53. http://mobilepress.co.za/

54. http://www.wptap.com/

55. http://mobiforge.com/running/story/the-dotmobi-wordpress-mobile-pack

56. +
• pretty easy
• minor setup
• available for a wide
selection of CMS
• ability to customize

57. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

58. e-commerce Needs custom
applications experience...

62. 01. <ul class="rounded">
02. <li><a class="blog-­‐
title" href="#livetest">Post Title</a><br /
>
03. <div class="month">Jun</div>
04. <div class="date">30</div>
05. <p class="post-­‐
author">By: <i>Connor Zwick</i></p>
06. <p class="post-­‐
description">This is a short description. H
ere will be a short excerpt of the post, fo
r the viewer to judge if he or she wants to
read more.</p></li>
07. </ul>
http://mobile.tutsplus.com/tutorials/html5/mobile-wordpress-theming-day-2/

63. +
• total control
• you’ll learn a lot
• explore new mobile
interactions

64. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

65. themes / templates
mobile
theme
site
desktop
theme
templates that have specifically
formatted designs and markup
for mobile devices.
http://www.bravenewcode.com/products/wptouch-pro/

66. http://www.blogohblog.com/wordpress-mobile-theme/

67. http://themeforest.net/item/simple-mobile/110202?redirect_back=true&ref=wpexplorer&clickthrough_id=11329982

68. http://drupal.org/project/nokia_mobile

69. http://themeforest.net/item/mobility-wordpress-theme-for-web-and-ipad/103273

70. +
• free/cheap
• OK selection
• tested

71. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

72. style-sheets
CSS 1 CSS 2
HTML
separate CSS layer specifically
for mobile devices

73. As early as 1998, the HTML 4 specification offered ways to link to different style sheets
depending on the devices targeted, including handheld media:
<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>
CSS included a similar feature via @media:
@media screen { /* rules for computer screens */ }
@media handheld { /* rules for handheld devices */ }
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

74. http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/

75. +
• only extra CSS /
style sheets

76. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

77. adaptive-layouts
yoursite.com yoursite.com
layouts that use media-query
to detect size of the browser,
and adjust appropriately.

78. http://colly.com/comments/carry_on_responsively/

81. “Over several days he forcibly
manipulated the layout with CSS
media queries, and in turn created initial
dynamic layouts for certain desktop
browser widths, and various orientations
of iPad and iPhone.”
http://colly.com/comments/carry_on_responsively/

86. +
• street cred
• only extra CSS / style
sheets
• consistent design

87. hosted
plug-ins
custom dev
themes / templates
style-sheets
adaptive-layouts
auto-generate

88. auto-generate
detect script
yoursite.com
auto-generate
mobile site
a mobile version is “scraped”
from your desktop site and
generated on the fly.

89. http://mobify.me/

91. http://www.google.com/gwt/n

92. http://bmobilized.com/

93. http://www.usablenet.com/

94. +
• no changes to your
site
• zero need for any IT
involvement
• quick! (but
sometimes dirty...)

95. Tracking!
http://www.flickr.com/photos/34838158@N00/3370167184/

96. http://analytics.percentmobile.com/

97. https://www.google.com/analytics

98. Testing
http://www.flickr.com/photos/93607538@N00/4271429/

99. http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2

100. http://www.opera.com/mobile/demo/

101. Extra!
http://www.flickr.com/photos/33859819@N00/342958601/

102. http://i.tinysrc.mobi/http://mysite.com/myimage.png
http://tinysrc.net/

103. http://www.sencha.com/

104. http://nicolasgallagher.com/demo/pure-css-social-media-icons/

105. http://www.svgcharts.net/Example.aspx?type=line

106. http://www.zingchart.com/flash-and-html5-canvas/#sidebyside-hbar-1

107. http://www.apple.com/html5/

108. questions?

109. www.jeremyjohnsononline.com
thanks!
jeremy johnson
@jeremyjohnson