SUA Mobile Development
Upcoming SlideShare
Loading in...5
×
 

SUA Mobile Development

on

  • 1,958 views

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

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

Statistics

Views

Total Views
1,958
Views on SlideShare
1,958
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

SUA Mobile Development SUA Mobile Development Presentation Transcript

  • Mobile Web Development Tony Thomas - Student Unions & ActivitiesTuesday, October 25, 11
  • 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 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
  • BrowsersTuesday, October 25, 11On top of all that, there is a variety of browsersSafari MobileWebkitBlackberryOperaFirefoxand yes, IE Mobile
  • Standards CompliantTuesday, October 25, 11Good news. Most of the popular mobile browsers have very good support for web standards
  • 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.
  • ~90% of Mobile Browsers == Webkit Mobile WebkitTuesday, October 25, 11Analytics from homecoming.umn.edu
  • 24% of Desktop Browsers are IE 6 or 7 Desktop IE 6 & 7Tuesday, October 25, 11Desktop analytics for homecoming.umn.edu
  • PC: 100,000,000 Users in 1993 Source: ITU, Mark Lipacis, Morgan Stanley ResearchTuesday, October 25, 11PC: 100M - 1993
  • Desktop Internet: 1,000,000,000 in 2005 Source: ITU, Mark Lipacis, Morgan Stanley ResearchTuesday, October 25, 11PC: 100M - 1993Desktop Internet 1B - 2005
  • 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
  • Smartphones are More Affordable Than EverTuesday, October 25, 11They’re cheap. Sometimes free w/ new or renewed plans.
  • 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?
  • 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.
  • 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.
  • 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.
  • Responsive Web DesignTuesday, October 25, 11One responsive design to rule them all. Page changes according to the dimensions of thescreen.
  • 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?
  • 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/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.
  • 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.
  • 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
  • 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
  • Mobile Detection detectmobilebrowsers.comTuesday, October 25, 11
  • Mobile Detection $redirect = /mobile/; if (!empty($_GET)) { preg_match(/?.*/i, $_SERVER[REQUEST_URI], $get_string); $redirect .= $get_string[0]; }Tuesday, October 25, 11
  • Considerations Fluid Layouts font-size: 100% Proportional margins and padding Fluid imagesTuesday, October 25, 11Fluid images?
  • 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.
  • 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.
  • 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 Fluid Header Image JavaScript to Provide User FeedbackTuesday, October 25, 11
  • JQuery Not officially supported in Mobile Safari Extra Overhead for the Small Amount of Functionality Needed Only 89 KBTuesday, October 25, 11
  • JavaScript height = screen.height;Tuesday, October 25, 11JavaScript: height = screen.height;Used height because of the landscape issue.
  • Screen Heights • 320 • 800 • 960 • #header width: 100%Tuesday, October 25, 11Looked at handset data to come group screen heights into three rough groups
  • 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
  • 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
  • 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
  • User Feedback function send(url) { window.location = url; }Tuesday, October 25, 11Then used a simple redirect
  • Phone NumbersTuesday, October 25, 11Touching “Call Student Unions & Activities” opens phone app
  • Phone Numbers <a href="tel:612-624-4636">Call Student Unions &amp; Activities</a>Tuesday, October 25, 11
  • HomecomingTuesday, October 25, 11
  • Homecoming • Audience focused research • Used JQuery Mobile FrameworkTuesday, October 25, 11
  • JQuery Mobile jquerymobile.com Official JQuery framework Large Community Broad Browser Support EasyTuesday, October 25, 11
  • JQuery Mobile Useful but constraining Markup could be more semantic Cookie cutter websites Slight case of “classitis”Tuesday, October 25, 11
  • JQuery Mobile Requirements HTML5 JQuery JQuery Mobile Library JQuery Mobile StylesheetTuesday, October 25, 11
  • HTML5 data data-role=”page”Tuesday, October 25, 11
  • <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
  • <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
  • Built-in Themes data-theme=”a”Tuesday, October 25, 11Themes a,b,c,d & eDefine and style your own theme
  • Built-in ThemesTuesday, October 25, 11
  • Heavy Lifting Links to AJAX Page Loads Fancy Page Transitions Updated Browser History (Back Button) Styling Long Titles Truncated w/ EllipsesTuesday, October 25, 11
  • 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
  • Testing iPhone & Android SDK’s springbox.com/mobilizer/ Safari Developer Menu (iPhone User Agent String)Tuesday, October 25, 11
  • 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
  • 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