0
POST-PCWebsite Development in a Mobile, Touch-Based World                 Jared White             Creative Director, Sites...
WHY THIS MATTERS
WHY THIS MATTERSiPhone
WHY THIS MATTERS       iPhone110m
WHY THIS MATTERS       iPhone110m         3%       Browser        Usage
WHY THIS MATTERS       iPhone    iPad110m         3%       Browser        Usage
WHY THIS MATTERS       iPhone          iPad110m         3%       Browser        Usage                 25m
WHY THIS MATTERS       iPhone          iPad110m         3%              2%       Browser         Browser        Usage     ...
WHY THIS MATTERS       iPhone          iPad      Android110m         3%              2%       Browser         Browser     ...
WHY THIS MATTERS       iPhone          iPad         Android                                 120m110m         3%           ...
WHY THIS MATTERS       iPhone          iPad         Android                                 120m110m         3%           ...
PUT IN PERSPECTIVE...  iPhone     iPad   Android<2007      <2010    <2008
PUT IN PERSPECTIVE...    iPhone     iPad   Android<2007        <2010    <20080
PUT IN PERSPECTIVE...    iPhone       iPad   Android<2007        <2010      <20080            0
PUT IN PERSPECTIVE...    iPhone       iPad       Android<2007        <2010          <20080            0          0
2000 FACT: Global mobile data traffic in 2010 wasthree times the size of all global Internet traffic     (fixed and mobile) i...
2000 2010 FACT: Global mobile data traffic in 2010 wasthree times the size of all global Internet traffic     (fixed and mobi...
ADD IT ALL TOGETHER...
2011  1 in 10 users are using amobile device to browse the web
2011  1 in 10 users are using amobile device to browse the web
A LITTLE ABOUT ME...
WHO IS THIS GUY?         • Ive             been in the computer/          web field for 14 years         • Self-taught   gr...
WHO IS THIS GUY?         • Founded     Siteshine in 2009         •I   bill myself as a          “Creative Director”       ...
Think Different.
Mobile     !=  TraditionalThink Different.
TRADITIONALYoure Sitting. Youre Using a Mouse/Trackpad.You Have Resizable Windows. Its Anti-Social.
MOBILEYoure on the Go. Youre Using Your Fingers. You Have a Fixed Screen. Its More Social.
MOBILEYoure on the Go. Youre Using Your Fingers. You Have a Fixed Screen. Its More Social.
WHATS THIS MEAN FOR  WEB DEVELOPERS?       • Yourhave you rework your        content for mobile use cases.       • Youhave...
TRADITIONAL CONTENT
MOBILE CONTENT
Dont forget about forms! MOBILE CONTENT
Dont forget about forms! MOBILE CONTENT
Dont forget about forms! MOBILE CONTENT
TRADITIONAL: HOVER/CLICK
TRADITIONAL: HOVER/CLICK
MOBILE: GESTURE
MOBILE: GESTURE
TRADITIONAL: FIXED-WIDTH
MOBILE: PORTRAIT/LANDSCAPE
ASIDE...USA Today website SUCKS compared to iPad app!
ATTENTION WEB DESIGNERS: iOS App Developers may eat your lunch.
HEY, WHICH SIDE AM I ON?  Ive seen great mobile sites and lousy apps.                And visa-versa.        Im on the side...
4         AREAS TO FOCUS ON• JS   Events: Stop using onmouse* events and start using               ontouch* and ongesture*...
1st         AREA TO FOCUS ON• JS   Events: Stop using onmouse* events and start using               ontouch* and ongesture...
1st         AREA TO FOCUS ON• JS   Events: Stop using onmouse* events and start using               ontouch* and ongesture...
1st         AREA TO FOCUS ON• JS   Events: Stop using onmouse* events and start using               ontouch* and ongesture...
1st         AREA TO FOCUS ON• JS   Events: Stop using onmouse* events and start using               ontouch* and ongesture...
2nd AREA TO FOCUS ON• Orientation: Use         CSS and Javascript to detect changes                       from portrait to...
3rd       AREA TO FOCUS ON• Viewport: Lock   in 100% zoom. Hide the chrome.                            HTML     <meta name...
4th     AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.
4th     AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.
4th      AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.      Semantics       Offline & Storage   ...
4th     AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.    Device Access
4th     AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.    Device Access                        Ge...
4th      AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.    Device Access                      Acc...
4th     AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.    Device Access            Camera: Still ...
4th     AREA TO FOCUS ON• HTML5: Your   ticket to the outside (hardware) world.    Device Access            Camera: Still ...
AND DONT FORGETTHE MOST IMPORTANT      THING...
NO FLASH! Really. Just kill it now.
-webkit -transform                           <video                                  > <au dio>                           ...
-webkit -transform                           <video                                  > <au dio>                           ...
WHAT ABOUTFRAMEWORKS?
SPEED UP THE PROCESS•   jQuery – you should be using this anyway!•   jQuery Mobile – new layer built on top of jQuery• jQT...
SPEED UP THE PROCESS•   What about popular CMS platforms?•   WP Touch – oft-used theme for WordPress•   OnSwipe – iPad-opt...
JQUERY MOBILE
JQUERY MOBILE
JQUERY MOBILE
JQUERY MOBILE
JQUERY MOBILE<!DOCTYPE html><html>    <head>    <title>Page Title</title>    <link rel="stylesheet" href="http://code.jque...
JQUERY MOBILE
MY PREDICTION  I could be wrong, but...
2020  25%-50% of your site visitorswill be using Post-PC mobile devices
NOW GO MAKE SOME   COOL STUFF      Questions?    jared@siteshine.com    @WebDevJared     Thank you.
Upcoming SlideShare
Loading in...5
×

Post PC - Website Development in a Mobile, Touch-based World

7,224

Published on

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

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
7,224
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Post PC - Website Development in a Mobile, Touch-based World"

    1. 1. POST-PCWebsite Development in a Mobile, Touch-Based World Jared White Creative Director, Siteshine
    2. 2. WHY THIS MATTERS
    3. 3. WHY THIS MATTERSiPhone
    4. 4. WHY THIS MATTERS iPhone110m
    5. 5. WHY THIS MATTERS iPhone110m 3% Browser Usage
    6. 6. WHY THIS MATTERS iPhone iPad110m 3% Browser Usage
    7. 7. WHY THIS MATTERS iPhone iPad110m 3% Browser Usage 25m
    8. 8. WHY THIS MATTERS iPhone iPad110m 3% 2% Browser Browser Usage Usage 25m
    9. 9. WHY THIS MATTERS iPhone iPad Android110m 3% 2% Browser Browser Usage Usage 25m
    10. 10. WHY THIS MATTERS iPhone iPad Android 120m110m 3% 2% Browser Browser Usage Usage 25m
    11. 11. WHY THIS MATTERS iPhone iPad Android 120m110m 3% 2% 3% Browser Browser Browser Usage Usage Usage 25m
    12. 12. PUT IN PERSPECTIVE... iPhone iPad Android<2007 <2010 <2008
    13. 13. PUT IN PERSPECTIVE... iPhone iPad Android<2007 <2010 <20080
    14. 14. PUT IN PERSPECTIVE... iPhone iPad Android<2007 <2010 <20080 0
    15. 15. PUT IN PERSPECTIVE... iPhone iPad Android<2007 <2010 <20080 0 0
    16. 16. 2000 FACT: Global mobile data traffic in 2010 wasthree times the size of all global Internet traffic (fixed and mobile) in the year 2000 Source: Cisco
    17. 17. 2000 2010 FACT: Global mobile data traffic in 2010 wasthree times the size of all global Internet traffic (fixed and mobile) in the year 2000 Source: Cisco
    18. 18. ADD IT ALL TOGETHER...
    19. 19. 2011 1 in 10 users are using amobile device to browse the web
    20. 20. 2011 1 in 10 users are using amobile device to browse the web
    21. 21. A LITTLE ABOUT ME...
    22. 22. WHO IS THIS GUY? • Ive been in the computer/ web field for 14 years • Self-taught graphics designer • LearnedHTML & CSS in the bad old browser warsWANTED days • PHP and I go way back, but Im a Rails kid now
    23. 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-TradesWANTED •Ifollow 37signals’ Get Real approach whenever I can
    24. 24. Think Different.
    25. 25. Mobile != TraditionalThink Different.
    26. 26. TRADITIONALYoure Sitting. Youre Using a Mouse/Trackpad.You Have Resizable Windows. Its Anti-Social.
    27. 27. MOBILEYoure on the Go. Youre Using Your Fingers. You Have a Fixed Screen. Its More Social.
    28. 28. MOBILEYoure on the Go. Youre Using Your Fingers. You Have a Fixed Screen. Its More Social.
    29. 29. WHATS 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. 30. TRADITIONAL CONTENT
    31. 31. MOBILE CONTENT
    32. 32. Dont forget about forms! MOBILE CONTENT
    33. 33. Dont forget about forms! MOBILE CONTENT
    34. 34. Dont forget about forms! MOBILE CONTENT
    35. 35. TRADITIONAL: HOVER/CLICK
    36. 36. TRADITIONAL: HOVER/CLICK
    37. 37. MOBILE: GESTURE
    38. 38. MOBILE: GESTURE
    39. 39. TRADITIONAL: FIXED-WIDTH
    40. 40. MOBILE: PORTRAIT/LANDSCAPE
    41. 41. ASIDE...USA Today website SUCKS compared to iPad app!
    42. 42. ATTENTION WEB DESIGNERS: iOS App Developers may eat your lunch.
    43. 43. HEY, WHICH SIDE AM I ON? Ive seen great mobile sites and lousy apps. And visa-versa. Im on the side of great design.If you can design a mobile site as cool as an app, GO FOR IT.
    44. 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. 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. 46. 1st AREA TO FOCUS ON• JS Events: Stop using onmouse* events and start using ontouch* and ongesture* events. Example
    47. 47. 1st AREA TO FOCUS ON• JS Events: Stop using onmouse* events and start using ontouch* and ongesture* events. ontouchstart ontouchend ontouchmove Example
    48. 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. 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. 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. 51. 4th AREA TO FOCUS ON• HTML5: Your ticket to the outside (hardware) world.
    52. 52. 4th AREA TO FOCUS ON• HTML5: Your ticket to the outside (hardware) world.
    53. 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 its still evolving! Integration
    54. 54. 4th AREA TO FOCUS ON• HTML5: Your ticket to the outside (hardware) world. Device Access
    55. 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. 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. 57. 4th AREA TO FOCUS ON• HTML5: Your ticket to the outside (hardware) world. Device Access Camera: Still & Video
    58. 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. 59. AND DONT FORGETTHE MOST IMPORTANT THING...
    60. 60. NO FLASH! Really. Just kill it now.
    61. 61. -webkit -transform <video > <au dio> <ca ry nv jQue as> JAVASCRIPT, CANVAS, SVG, CSS3, HTML5 VIDEO, AND H.264 ARE YOUR FRIENDS
    62. 62. -webkit -transform <video > <au dio> <ca ry nv jQue as> JAVASCRIPT, CANVAS, SVG, CSS3, HTML5 VIDEO, AND H.264 ARE YOUR FRIENDS
    63. 63. WHAT ABOUTFRAMEWORKS?
    64. 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. 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. 66. JQUERY MOBILE
    67. 67. JQUERY MOBILE
    68. 68. JQUERY MOBILE
    69. 69. JQUERY MOBILE
    70. 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. 71. JQUERY MOBILE
    72. 72. MY PREDICTION I could be wrong, but...
    73. 73. 2020 25%-50% of your site visitorswill be using Post-PC mobile devices
    74. 74. NOW GO MAKE SOME COOL STUFF Questions? jared@siteshine.com @WebDevJared Thank you.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×