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

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

on

  • 3,389 views

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

Statistics

Views

Total Views
3,389
Slideshare-icon Views on SlideShare
3,387
Embed Views
2

Actions

Likes
0
Downloads
5
Comments
0

2 Embeds 2

http://www.slideshare.net 1
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

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

  • POST-PCWebsite Development in a Mobile, Touch-Based World Jared White Creative Director, Siteshine
  • 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 Usage 25m
  • WHY THIS MATTERS iPhone iPad Android110m 3% 2% Browser Browser Usage Usage 25m
  • WHY THIS MATTERS iPhone iPad Android 120m110m 3% 2% Browser Browser Usage Usage 25m
  • WHY THIS MATTERS iPhone iPad Android 120m110m 3% 2% 3% Browser Browser Browser Usage Usage Usage 25m
  • 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) in the year 2000 Source: Cisco
  • 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
  • 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 graphics designer • LearnedHTML & CSS in the bad old browser warsWANTED days • PHP and I go way back, but Im a Rails kid now
  • 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
  • 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 to intercept Javascript touch events rather than clicks. • You have to design for fixed screen sizes while accounting for device orientation.
  • 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 of great design.If you can design a mobile site as cool as an app, GO FOR IT.
  • 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.
  • 1st AREA TO FOCUS ON• JS Events: Stop using onmouse* events and start using ontouch* and ongesture* events. ontouchstart ongesturestart ontouchmove ongesturechange ontouchend ongestureend
  • 1st AREA TO FOCUS ON• JS Events: Stop using onmouse* events and start using ontouch* and ongesture* events. Example
  • 1st AREA TO FOCUS ON• JS Events: Stop using onmouse* events and start using ontouch* and ongesture* events. ontouchstart ontouchend ontouchmove Example
  • 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.
  • 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)
  • 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); });
  • 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 Device Access Connectivity Multimedia 3D Graphics & FX ? Performance & CSS3 And its still evolving! Integration
  • 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 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  }
  • 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;   }
  • 4th AREA TO FOCUS ON• HTML5: Your ticket to the outside (hardware) world. Device Access Camera: Still & Video
  • 4th AREA TO FOCUS ON• HTML5: Your ticket to the outside (hardware) world. Device Access Camera: Still & Video C omi ng So on!
  • AND DONT FORGETTHE MOST IMPORTANT THING...
  • NO FLASH! Really. Just kill it now.
  • -webkit -transform <video > <au dio> <ca ry nv jQue as> JAVASCRIPT, CANVAS, SVG, CSS3, HTML5 VIDEO, AND H.264 ARE YOUR FRIENDS
  • -webkit -transform <video > <au dio> <ca ry nv jQue as> JAVASCRIPT, CANVAS, SVG, CSS3, HTML5 VIDEO, AND H.264 ARE YOUR FRIENDS
  • WHAT ABOUTFRAMEWORKS?
  • 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
  • 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
  • JQUERY MOBILE
  • JQUERY MOBILE
  • JQUERY MOBILE
  • JQUERY MOBILE
  • 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>
  • 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.