Your SlideShare is downloading. ×
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Post PC - Website Development in a Mobile, Touch-based World
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,203

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, …

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,203
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
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.

    ×