Mobile Web                               Development                          Tony Thomas - Student Unions & ActivitiesTue...
Tuesday, October 25, 11iOS, Android, Blackberry, Windows Mobile and othersWell...not webOS anymore.
320 X 240          480 X 800     240 X 260 800 X 480       Motorola       HTC                Motorola      Blackberry HTC ...
BrowsersTuesday, October 25, 11On top of all that, there is a variety of browsersSafari MobileWebkitBlackberryOperaFirefox...
Standards CompliantTuesday, October 25, 11Good news. Most of the popular mobile browsers have very good support for web st...
Source: gs.statcounter.com/#mobile_browser-US-monthly-200812-201108Tuesday, October 25, 11In fact, lumping these standards...
~90% of Mobile                          Browsers == Webkit                     Mobile                                    W...
24% of Desktop                    Browsers are IE 6 or 7                     Desktop                                      ...
PC: 100,000,000 Users                           in 1993            Source: ITU, Mark Lipacis, Morgan Stanley ResearchTuesd...
Desktop Internet:                          1,000,000,000 in 2005            Source: ITU, Mark Lipacis, Morgan Stanley Rese...
Mobile Internet:                          10,000,000,000 by 2020            Source: ITU, Mark Lipacis, Morgan Stanley Rese...
Smartphones are More                    Affordable Than EverTuesday, October 25, 11They’re cheap. Sometimes free w/ new or...
Increase in Mobile                                TrafficTuesday, October 25, 11Mobile devices accessing homecoming.umn.edu...
Responsive Web Design           www.alistapart.com/articles/responsive-web-design/Tuesday, October 25, 11Ethan Marcotte in...
Responsive                                    Architecture                          If a building could change its posture...
alistapart.com/articles/dao/                  “It’s time to throw out the                  rituals of the printed page,   ...
Responsive Web DesignTuesday, October 25, 11One responsive design to rule them all. Page changes according to the dimensio...
Content For Mobile                                     Photo: Dani Ihtatho                                     flickr.com/p...
springjam.umn.eduTuesday, October 25, 11Spring Jam has an award-winning design. Built w/ desktop in mind.Large images.
Traffic Focused On                                  Event                          Spring Jam Mobile Traffic 4/1/10 - 4/1/11...
Media Queries                  @media only screen                and (min-device-width : 320px)                and (max-de...
Media Queries                          Even though, things like header images could be set                          to dis...
Mobile Detection                           detectmobilebrowsers.com                                     xkcd.com/869/Tuesd...
Mobile Detection                           detectmobilebrowsers.comTuesday, October 25, 11
Mobile Detection                          $redirect = /mobile/;                          if (!empty($_GET))               ...
Considerations                          Fluid Layouts                          font-size: 100%                          Pr...
640 X 960          480 X 854            480 X 800               480 X 320            iPhone 4           Motorola          ...
Offline Storage                                                Connectivity/Realtime                                       ...
springjam.umn.eduTuesday, October 25, 11No framework. Markup is pared down and with fewer images and less JavaScript.
Tuesday, October 25, 11
Spring Jam                          Fluid layout                          JQuery                          Mobile Detection...
JQuery                          Not officially supported in Mobile Safari                          Extra Overhead for the S...
JavaScript                          height = screen.height;Tuesday, October 25, 11JavaScript: height = screen.height;Used ...
Screen Heights                     • 320                     • 800                     • 960                     • #header...
Screen Heights        $(a#header-home-link).html(<img src="/sj-        images/mobile/ + directory + /header.png"        al...
Responsive Images                          adaptive-images.com                          z.umn.edu/responsiveimagesTuesday,...
User Feedback                          $(a).bind(click, function()                          {                             ...
User Feedback                              function send(url)                              {                              ...
Phone NumbersTuesday, October 25, 11Touching “Call Student Unions & Activities” opens phone app
Phone Numbers                          <a href="tel:612-624-4636">Call                          Student Unions &amp; Activ...
HomecomingTuesday, October 25, 11
Homecoming                     • Audience focused research                     • Used JQuery Mobile FrameworkTuesday, Octo...
JQuery Mobile                          jquerymobile.com                          Official JQuery framework                 ...
JQuery Mobile                          Useful but constraining                          Markup could be more semantic     ...
JQuery Mobile                                 Requirements                          HTML5                          JQuery ...
HTML5 data                           data-role=”page”Tuesday, October 25, 11
<div data-role="page">                             <div data-role="header">                                 <h1>Page Title...
<div data-role="page">                             <header data-role="header">                                 <h1>Page Ti...
Built-in Themes                            data-theme=”a”Tuesday, October 25, 11Themes a,b,c,d & eDefine and style your own...
Built-in ThemesTuesday, October 25, 11
Heavy Lifting                          Links to AJAX Page Loads                          Fancy Page Transitions           ...
Classitis           <html lang="en" class="ui-mobile landscape           min-width-320px min-width-480px min-           wi...
Testing                          iPhone & Android SDK’s                          springbox.com/mobilizer/                 ...
Recommendations                          use analytics to inform your decisions                          use responsive de...
What are your questions?                          adaptive-images.com                          z.umn.edu/responsiveimages ...
Upcoming SlideShare
Loading in...5
×

SUA Mobile Development

1,595

Published on

My presentation to the Web Standards group at the University of Minnesota on mobile web development and mobile development frameworks.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,595
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SUA Mobile Development

  1. 1. Mobile Web Development Tony Thomas - Student Unions & ActivitiesTuesday, October 25, 11
  2. 2. Tuesday, October 25, 11iOS, Android, Blackberry, Windows Mobile and othersWell...not webOS anymore.
  3. 3. 320 X 240 480 X 800 240 X 260 800 X 480 Motorola HTC Motorola Blackberry HTC Blackberry HTC 360 X 480 240 X 320 Blackberry Blackberry 480 X 320 HTC 360 X 400 Blackberry Blackberry 480 X 360 BlackberryTuesday, October 25, 11320x480 - iPhone 3, Motorola and HTC Handsets640x960 - iPhone4480x800 - HTC, Motorola480x854 - MotorolaPlus a whole variety of other screen dimensionsAND many of those also work in landscape mode
  4. 4. BrowsersTuesday, October 25, 11On top of all that, there is a variety of browsersSafari MobileWebkitBlackberryOperaFirefoxand yes, IE Mobile
  5. 5. Standards CompliantTuesday, October 25, 11Good news. Most of the popular mobile browsers have very good support for web standards
  6. 6. Source: gs.statcounter.com/#mobile_browser-US-monthly-200812-201108Tuesday, October 25, 11In fact, lumping these standards-compliant browsers together, you can see that almost 80%of the mobile browsers out there support web standards.
  7. 7. ~90% of Mobile Browsers == Webkit Mobile WebkitTuesday, October 25, 11Analytics from homecoming.umn.edu
  8. 8. 24% of Desktop Browsers are IE 6 or 7 Desktop IE 6 & 7Tuesday, October 25, 11Desktop analytics for homecoming.umn.edu
  9. 9. PC: 100,000,000 Users in 1993 Source: ITU, Mark Lipacis, Morgan Stanley ResearchTuesday, October 25, 11PC: 100M - 1993
  10. 10. Desktop Internet: 1,000,000,000 in 2005 Source: ITU, Mark Lipacis, Morgan Stanley ResearchTuesday, October 25, 11PC: 100M - 1993Desktop Internet 1B - 2005
  11. 11. Mobile Internet: 10,000,000,000 by 2020 Source: ITU, Mark Lipacis, Morgan Stanley ResearchTuesday, October 25, 11PC: 100M - 1993Desktop Internet 1B - 2005Mobile Internet 10B - 2020
  12. 12. Smartphones are More Affordable Than EverTuesday, October 25, 11They’re cheap. Sometimes free w/ new or renewed plans.
  13. 13. Increase in Mobile TrafficTuesday, October 25, 11Mobile devices accessing homecoming.umn.edu 8/2010 compared to 8/2011 is up 669%.So how do we deal with all these devices and browsers?
  14. 14. Responsive Web Design www.alistapart.com/articles/responsive-web-design/Tuesday, October 25, 11Ethan Marcotte introduced responsive design last year. Inspired by responsive architecture.Buildings change shape in response to their environment.
  15. 15. Responsive Architecture If a building could change its posture, tighten its muscles and brace itself against the wind, its structural mass could literally be cut in half. - Guy NordensonTuesday, October 25, 11If you think of image sizes, server requests and file sizes as “structural mass,” this conceptbegins to make sense for mobile web design.
  16. 16. alistapart.com/articles/dao/ “It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.”Tuesday, October 25, 11Responsive design requires a change in how we think about design for the web. EthanMarcotte referenced this article written in 2000.
  17. 17. Responsive Web DesignTuesday, October 25, 11One responsive design to rule them all. Page changes according to the dimensions of thescreen.
  18. 18. Content For Mobile Photo: Dani Ihtatho flickr.com/people/ihtatho/Tuesday, October 25, 11Mobile design requires tightening the focus of your content as well.Pare it down, simplify.New projects should be built with this in mind. What about taking an existing site and makingit more mobile-friendly?
  19. 19. springjam.umn.eduTuesday, October 25, 11Spring Jam has an award-winning design. Built w/ desktop in mind.Large images.
  20. 20. Traffic Focused On Event Spring Jam Mobile Traffic 4/1/10 - 4/1/11Tuesday, October 25, 11Immediacy. The three points in this spike in mobile traffic for Spring Jam are the days of theevent itself.We focused on events.
  21. 21. Media Queries @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }Tuesday, October 25, 11Allow you to write styles based on a range of screen widths.
  22. 22. Media Queries Even though, things like header images could be set to display:none, the image still loads JavaScript files not required in the mobile version Adding yet another style sheet to overwrite the desktop style sheet added overhead The markup and content needed to be pared down for mobile Screen resolutions a moving targetTuesday, October 25, 11Mobile bandwidth concerns
  23. 23. Mobile Detection detectmobilebrowsers.com xkcd.com/869/Tuesday, October 25, 11As usual xkcd hits the nail on the head. separate site w/ redirect.Redirect on first visit and set a cookie so if they want to go to “full site”, they’re no longerredirected
  24. 24. Mobile Detection detectmobilebrowsers.comTuesday, October 25, 11
  25. 25. Mobile Detection $redirect = /mobile/; if (!empty($_GET)) { preg_match(/?.*/i, $_SERVER[REQUEST_URI], $get_string); $redirect .= $get_string[0]; }Tuesday, October 25, 11
  26. 26. Considerations Fluid Layouts font-size: 100% Proportional margins and padding Fluid imagesTuesday, October 25, 11Fluid images?
  27. 27. 640 X 960 480 X 854 480 X 800 480 X 320 iPhone 4 Motorola HTC Blackberry Motorola 480 X 360 Blackberry 320 X 480 320 X 240 800 X 480 Motorola iPhone 3(GS) HTC Motorola 480 X 800 360 X 480 Blackberry HTC HTC 360 X 400 Motorola Blackberry HTC Blackberry 240 X 320 240 X 260 Blackberry Blackberry HTCTuesday, October 25, 11Images that scale so design can respond to all these various screen resolutions. Morespecifics to come.
  28. 28. Offline Storage Connectivity/Realtime Multimedia Graphics & 3D Effects Device Access Performance & Integration Semantics CSS3/StylingTuesday, October 25, 11A note on HTML5: Don’t believe the hype. It’s not magic. Features and API’s lumped intoHTML5.These things are brands. HTML5 has useful semantics and support for data, but it’s markup.It’s not connectivity, multimedia, 3D, device access, semantics or CSS3. It’s a W3Cspecification.
  29. 29. springjam.umn.eduTuesday, October 25, 11No framework. Markup is pared down and with fewer images and less JavaScript.
  30. 30. Tuesday, October 25, 11
  31. 31. Spring Jam Fluid layout JQuery Mobile Detection Fluid Header Image JavaScript to Provide User FeedbackTuesday, October 25, 11
  32. 32. JQuery Not officially supported in Mobile Safari Extra Overhead for the Small Amount of Functionality Needed Only 89 KBTuesday, October 25, 11
  33. 33. JavaScript height = screen.height;Tuesday, October 25, 11JavaScript: height = screen.height;Used height because of the landscape issue.
  34. 34. Screen Heights • 320 • 800 • 960 • #header width: 100%Tuesday, October 25, 11Looked at handset data to come group screen heights into three rough groups
  35. 35. Screen Heights $(a#header-home-link).html(<img src="/sj- images/mobile/ + directory + /header.png" alt="Student Unions &amp; Activities logo." id="sua-logo" class="logos" />);Tuesday, October 25, 11
  36. 36. Responsive Images adaptive-images.com z.umn.edu/responsiveimagesTuesday, October 25, 11Two techniques that look interestingI haven’t had a chance to try them yet
  37. 37. User Feedback $(a).bind(click, function() { $(.active).removeClass(active); $(this).addClass(active); href = $(this).attr(href); window.setTimeout(send(href), 300); return false });Tuesday, October 25, 11Active state was inconsistent. Set 300 millisecond delay w/ active CSS class to ensure userfeedback
  38. 38. User Feedback function send(url) { window.location = url; }Tuesday, October 25, 11Then used a simple redirect
  39. 39. Phone NumbersTuesday, October 25, 11Touching “Call Student Unions & Activities” opens phone app
  40. 40. Phone Numbers <a href="tel:612-624-4636">Call Student Unions &amp; Activities</a>Tuesday, October 25, 11
  41. 41. HomecomingTuesday, October 25, 11
  42. 42. Homecoming • Audience focused research • Used JQuery Mobile FrameworkTuesday, October 25, 11
  43. 43. JQuery Mobile jquerymobile.com Official JQuery framework Large Community Broad Browser Support EasyTuesday, October 25, 11
  44. 44. JQuery Mobile Useful but constraining Markup could be more semantic Cookie cutter websites Slight case of “classitis”Tuesday, October 25, 11
  45. 45. JQuery Mobile Requirements HTML5 JQuery JQuery Mobile Library JQuery Mobile StylesheetTuesday, October 25, 11
  46. 46. HTML5 data data-role=”page”Tuesday, October 25, 11
  47. 47. <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 -->Tuesday, October 25, 11Example for body from JQuery mobile website
  48. 48. <div data-role="page"> <header data-role="header"> <h1>Page Title</h1> </header><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <footer data-role="footer"> <h4>Page Footer</h4> </footer><!-- /footer --> </div><!-- /page -->Tuesday, October 25, 11Same page, better semantics
  49. 49. Built-in Themes data-theme=”a”Tuesday, October 25, 11Themes a,b,c,d & eDefine and style your own theme
  50. 50. Built-in ThemesTuesday, October 25, 11
  51. 51. Heavy Lifting Links to AJAX Page Loads Fancy Page Transitions Updated Browser History (Back Button) Styling Long Titles Truncated w/ EllipsesTuesday, October 25, 11
  52. 52. Classitis <html lang="en" class="ui-mobile landscape min-width-320px min-width-480px min- width-768px min-width-1024px">Tuesday, October 25, 11This is valid, but messy and not very semantic
  53. 53. Testing iPhone & Android SDK’s springbox.com/mobilizer/ Safari Developer Menu (iPhone User Agent String)Tuesday, October 25, 11
  54. 54. Recommendations use analytics to inform your decisions use responsive design in new sites focus content & pare it down use responsive techniques don’t be afraid of mobile detection use frameworks when they’re helpful use HTML5 if you likeTuesday, October 25, 11
  55. 55. What are your questions? adaptive-images.com z.umn.edu/responsiveimages lukew.com (@lukew) jquerymobile.com z.umn.edu/smartphonematrices detectmobilebrowser.com springbox.com/mobilizer/Tuesday, October 25, 11
  1. A particular slide catching your eye?

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

×