Taking Your Content Mobile

4,659 views
4,410 views

Published on

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.

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
4,659
On SlideShare
0
From Embeds
0
Number of Embeds
152
Actions
Shares
0
Downloads
158
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Taking Your Content Mobile

  1. 1. Taking Your Content Mobile 30 minute quick intro... Dallas Open Camp 2010 http://www.flickr.com/photos/87919923@N00/346563918/
  2. 2. HELLO!
  3. 3. Jeremy Johnson Director of User Experience for gamestop.com @jeremyjohnson I mobile
  4. 4. Taking Your Content Mobile *
  5. 5. blogs micro-blogs magazines marketing brochure information video photos e-commerce applications
  6. 6. blogs micro-blogs magazines marketing brochure information video photos e-commerce Needs custom applications experience...
  7. 7. How many of you have a website?
  8. 8. How many of you have a mobile website?
  9. 9. Do I need a mobile website?
  10. 10. Do I need a mobile website? Maybe?!
  11. 11. pre 2007 http://www.marco.org/980434663
  12. 12. Today
  13. 13. 100+ Million
  14. 14. http://www.lukew.com/ff/entry.asp?1174
  15. 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. 16. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201001-201008
  17. 17. “I’m just playing around” goal vs. leisure “I need to find a pizza joint”
  18. 18. leisure leisure mix goal “only” http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html
  19. 19. leisure leisure mix goal “only” http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html
  20. 20. http://openca.mp/
  21. 21. www.jeremyjohnsononline.com
  22. 22. Lets get started! tic tic tic http://www.flickr.com/photos/mar00ned/
  23. 23. Do I need a mobile website? You may already have one!
  24. 24. tumblr.com raisingrobots.com
  25. 25. posterous.com 23hd.com
  26. 26. Wordpress jeremyjohnsononline.com
  27. 27. Wordpress.com warmhotchocolate.com
  28. 28. twitter twitter.com/jeremyjohnson
  29. 29. 0
  30. 30. Directing mobile traffic. http://www.flickr.com/photos/42961457@N04/4036087411/
  31. 31. detect script yoursite.com m.yoursite.com
  32. 32. detect script yoursite.com m.yoursite.com iphone.yoursite.com
  33. 33. http://mobile.tutsplus.com/tutorials/html5/mobile-browser-detection/
  34. 34. <?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/
  35. 35. http://detectmobilebrowser.com/
  36. 36. http://code.google.com/p/php-mobile-detect/
  37. 37. The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices. http://wurfl.sourceforge.net/
  38. 38. Lets look at some options! http://ffffound.com/image/2f1c04e45f116d294ac0d667d68cce6ac9073de0
  39. 39. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  40. 40. 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/
  41. 41. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  42. 42. hosted sites that are hosted, with ready- to-go mobile versions served up automatically.
  43. 43. + • easy • no setup • auto updates
  44. 44. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  45. 45. 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/
  46. 46. plug-ins http://www.bravenewcode.com/products/wptouch-pro/
  47. 47. http://crowdfavorite.com/wordpress/plugins/wordpress-mobile-edition/
  48. 48. http://mobilepress.co.za/
  49. 49. http://www.wptap.com/
  50. 50. http://mobiforge.com/running/story/the-dotmobi-wordpress-mobile-pack
  51. 51. + • pretty easy • minor setup • available for a wide selection of CMS • ability to customize
  52. 52. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  53. 53. e-commerce Needs custom applications experience...
  54. 54. 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/
  55. 55. + • total control • you’ll learn a lot • explore new mobile interactions
  56. 56. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  57. 57. 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/
  58. 58. http://www.blogohblog.com/wordpress-mobile-theme/
  59. 59. http://themeforest.net/item/simple-mobile/110202?redirect_back=true&ref=wpexplorer&clickthrough_id=11329982
  60. 60. http://drupal.org/project/nokia_mobile
  61. 61. http://themeforest.net/item/mobility-wordpress-theme-for-web-and-ipad/103273
  62. 62. + • free/cheap • OK selection • tested
  63. 63. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  64. 64. style-sheets CSS 1 CSS 2 HTML separate CSS layer specifically for mobile devices
  65. 65. 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
  66. 66. http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/
  67. 67. + • only extra CSS / style sheets
  68. 68. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  69. 69. adaptive-layouts yoursite.com yoursite.com layouts that use media-query to detect size of the browser, and adjust appropriately.
  70. 70. http://colly.com/comments/carry_on_responsively/
  71. 71. “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/
  72. 72. + • street cred • only extra CSS / style sheets • consistent design
  73. 73. hosted plug-ins custom dev themes / templates style-sheets adaptive-layouts auto-generate
  74. 74. auto-generate detect script yoursite.com auto-generate mobile site a mobile version is “scraped” from your desktop site and generated on the fly.
  75. 75. http://mobify.me/
  76. 76. http://www.google.com/gwt/n
  77. 77. http://bmobilized.com/
  78. 78. http://www.usablenet.com/
  79. 79. + • no changes to your site • zero need for any IT involvement • quick! (but sometimes dirty...)
  80. 80. Tracking! http://www.flickr.com/photos/34838158@N00/3370167184/
  81. 81. http://analytics.percentmobile.com/
  82. 82. https://www.google.com/analytics
  83. 83. Testing http://www.flickr.com/photos/93607538@N00/4271429/
  84. 84. http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2
  85. 85. http://www.opera.com/mobile/demo/
  86. 86. Extra! http://www.flickr.com/photos/33859819@N00/342958601/
  87. 87. http://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
  88. 88. http://www.sencha.com/
  89. 89. http://nicolasgallagher.com/demo/pure-css-social-media-icons/
  90. 90. http://www.svgcharts.net/Example.aspx?type=line
  91. 91. http://www.zingchart.com/flash-and-html5-canvas/#sidebyside-hbar-1
  92. 92. http://www.apple.com/html5/
  93. 93. questions?
  94. 94. www.jeremyjohnsononline.com thanks! jeremy johnson @jeremyjohnson

×