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

  • 5,759 views
Uploaded 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, …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,759
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. POST-PCWebsite Development in a Mobile, Touch-Based World Jared White Creative Director, Siteshine
  • 2. WHY THIS MATTERS
  • 3. WHY THIS MATTERSiPhone
  • 4. WHY THIS MATTERS iPhone110m
  • 5. WHY THIS MATTERS iPhone110m 3% Browser Usage
  • 6. WHY THIS MATTERS iPhone iPad110m 3% Browser Usage
  • 7. WHY THIS MATTERS iPhone iPad110m 3% Browser Usage 25m
  • 8. WHY THIS MATTERS iPhone iPad110m 3% 2% Browser Browser Usage Usage 25m
  • 9. WHY THIS MATTERS iPhone iPad Android110m 3% 2% Browser Browser Usage Usage 25m
  • 10. WHY THIS MATTERS iPhone iPad Android 120m110m 3% 2% Browser Browser Usage Usage 25m
  • 11. WHY THIS MATTERS iPhone iPad Android 120m110m 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 <20080
  • 14. PUT IN PERSPECTIVE... iPhone iPad Android<2007 <2010 <20080 0
  • 15. PUT IN PERSPECTIVE... iPhone iPad Android<2007 <2010 <20080 0 0
  • 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. 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. ADD IT ALL TOGETHER...
  • 19. 2011 1 in 10 users are using amobile device to browse the web
  • 20. 2011 1 in 10 users are using amobile device to browse the web
  • 21. A LITTLE ABOUT ME...
  • 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. 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. Think Different.
  • 25. Mobile != TraditionalThink Different.
  • 26. TRADITIONALYoure Sitting. Youre Using a Mouse/Trackpad.You Have Resizable Windows. Its Anti-Social.
  • 27. MOBILEYoure on the Go. Youre Using Your Fingers. You Have a Fixed Screen. Its More Social.
  • 28. MOBILEYoure on the Go. Youre Using Your Fingers. You Have a Fixed Screen. Its More Social.
  • 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. TRADITIONAL CONTENT
  • 31. MOBILE CONTENT
  • 32. Dont forget about forms! MOBILE CONTENT
  • 33. Dont forget about forms! MOBILE CONTENT
  • 34. Dont 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? 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. 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 its 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 DONT FORGETTHE 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 ABOUTFRAMEWORKS?
  • 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 visitorswill be using Post-PC mobile devices
  • 74. NOW GO MAKE SOME COOL STUFF Questions? jared@siteshine.com @WebDevJared Thank you.