Downloaded 57 times
![Separate Mobile Site
Used to be the way to do it
When devices had very limited
browsers
More maintenance
What about new devices?
Device detection scramble
Usually means a redirect [BAD]](https://image.slidesharecdn.com/developingformobility-110421004849-phpapp01/85/Developing-for-Mobility-30-320.jpg)
Uploaded byScotty Logan
Developing for Mobility
This document discusses designing websites for mobility. It provides an overview of mobile web usage statistics and trends. It also covers various design considerations for mobile websites such as responsive design, progressive enhancement, and performance optimization techniques like image resizing and testing on actual devices. The document promotes a mobile-first approach to design and outlines Stanford's mobile aware web project.
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Developing for Mobility
- 1.
- 2. Who Are We? BrianYoung Scotty Logan Interface Designer IT Architect & Web Developer First web page: 1998 First web page: 1993 First web server: 1998 First web server: 1994
- 3. Previously... search for #bdconfon twitter & slideshare
- 4. Twitter We’ll make referencesto twitter Everyone at #bdconf uses twitter Scotty @scottylogan Brian @auracreations We’re tweeting now Search for #suitoh11
- 5. Warning Mobile developers sometimesuse naughty words
- 6. Quick Survey Do youhave... iPhone (iPod Touch?) iPad Android (tablet?) Blackberry Palm Pre / Win Phone 7 / smartphone “dumb” / “feature” phone
- 7. Quick Survey How manyof you are web developers or designers? mobile web developers or designers? native mobile app developers? managers of any of the above
- 8. Why Mobile Matters Mobileweb access > non-mobile by 2015 Average iPhone user only spends 45% of his on- device time making voice calls
- 9. Why Mobile Matters 25%in US only use mobile web; 70% in Egypt 59% of people have viewed website on phone, then followed up on desktop 34% have done the reverse @stephanierieger #bdconf
- 10. NetDB by OS iPhone Android WindowsMobile iPad Symbian iPod WebOS Blackberry Windows Phone 7
- 11. NetDB Active byOS iPhone 5000 Android Windows Mobile 3750 iPad 2500 Symbian iPod 1250 WebOS Blackberry 0 Windows Phone 7 April 2011 July 2011
- 12. www.stanford.edu March - April2011 iPhone 20000 Android Win Mobile / WP7 15000 iPad 10000 Symbian iPod 5000 WebOS Blackberry 0 Other April 2011 July 2011
- 13. US Mobile Market Oct ‘10 Jan ‘11 May ‘11 30% 22.5% 15% 7.5% 0% Samsung LG Motorola RIM Apple Other http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
- 14. US Smartphone Market Oct ‘10 Jan ‘11 May ‘11 40% 30% 20% 10% 0% Google RIM Apple Microsoft Palm Other http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
- 15. Global Mobile Market 2009 2010 2011 40% 30% 20% 10% 0% Nokia Samsung LG RIM Apple Sony E.Motorola ZTE HTC Huawei Others Gartner, February 2011
- 16. Global Smartphone Market 2009 2010 2011 50% 37.5% 25% 12.5% 0% Symbian Google RIM Apple Microsoft Other Gartner, February 2011
- 17. Speed Matters 17% ofpeople will not wait more than 5 seconds for a mobile web site to load Gomez “When Seconds Count”
- 18. Speed Matters Google breaksdown mobile users into 3 behavior groups Repetitive now Bored now Urgent now
- 19. Where is mobileused? 82% of mobile web use at home Waiting in line Most tablet use 6pm - 10pm (in bed?) @lukew #bdconf
- 20. Mobile Browser Environment GoodBrowsers Not So Good Browsers iOS, Android, Feature phones and Opera Mobile, everything else new Blackberry, No support for WebOS HTML5, CSS3 or JS Support most of WP7 for now :-( HTML5, CSS3, JS @ppk's mobile browser feature compatibility list http://www.quirksmode.org/mobile/
- 21. Mobile is Personal Anywhere,anytime access Access to user location, camera, address book, phone functionality, etc. Touch and gesture control Even babies can play games on the iPad
- 22. Apps What is anApp? Everyone wants Apps Do you really need one? Native or Web App?
- 23. Native App Coded inmultiple languages, tools: Objective C and XCode (iOS) Eclipse and Java or C++ (Android) ??? and J2ME (Blackberry, older devices) Web tool & Javascript, CSS and HTML (WebOS) .Net Studio and C# (Windows Phone 7) Code cannot be reused across platforms :( In app stores, with 300,000 other apps
- 24. Web App Coded inHTML5, CSS 3, and Javascript Do it once and available everywhere Can be installed on phone Can be cached locally even work offline Access to local storage No access to camera, contacts, etc (yet)
- 25. Hybrid Solutions Wrap yourweb app in a native app Device access (camera, contacts, etc) Available in app stores Open source PhoneGap Commercial Appcelerator Titanium (fewer devices)
- 26. Still need aweb site Visitors and other non local users Search Returns links Google does not distinguish between desktop or mobile sites Feature phones Phones you don't build for
- 27. We like themobile web
- 28. So do thesepeople
- 29. Next BDConf iscoming
- 30. Separate Mobile Site Usedto be the way to do it When devices had very limited browsers More maintenance What about new devices? Device detection scramble Usually means a redirect [BAD]
- 31. Progressive Enhancement Deliver a simple site Enhance it based on the capabilities of the browser Media Queries Feature detection (Modernizr) JavaScript CSS3 features
- 32. Responsive Design Website shoulddisplay content reasonably regardless of device resolution / orientation fluid grids, CSS 3 layouts content priority is maintained content adjusted to the viewable space text scaled to maintain content readability Ethan Marcotte’s article http://www.alistapart.com/articles/responsive-web-design/
- 33. Ethan was mostlyright He was wrong about images Suggested using largest needed image Letting the browser resize Really bad for performance Jason Grigsby: resize images on server http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
- 34. Mobile First! Luke (@lukew)Wroblewski's Mobile First Talk http://www.lukew.com/ff/entry.asp?1137 Mobile constraints improve design Limited screen real estate on mobile One distracted eyeball, one fat finger Cut the crap, present only the most important content Better usability = Better experience!
- 35.
- 36. or is itContent First? Site Architecture Many people ignore and forget this Using all your content might not be the answer But mobile users often want it all What do mobile users need on your site? Use analytics
- 37. Why Analytics? Mind readingis no way to base fundamental content decisions @stephanierieger #bdconf
- 38. Accessibility IfI can't use your awesome website... It's not really that awesome, is it? @stephanierieger #bdconf Make content accessible by everyone Content accessibility > Presentation styles
- 39. Viewports Mobile browsers defaultto 960px wide but scaled down Fine for desktop sites, not for mobile sites Set the viewport... carefully
- 40. Bad Viewports Pinch andZoom to
- 41. Good Viewports Pinch andZoom to
- 42. Performance and Optimization Mobiledevices often suffer from Low bandwidth High latency Unreliable connectivity Slower processors Browsers only use 2,4, or 6 connections to a site
- 43. How Pages areFetched iOS 4.3 uses up to 4 connections
- 44. How Pages areFetched Android 2.2 uses up to 11 connections!
- 45. Performance Rules Aggregate andminimize your CSS and Javascript But look at all those images!
- 46. Images Resize images onthe server WURFL has tools for this http://tinysrc.net/ For images used in CSS Base64 encode images, embed in CSS Use CSS sprites
- 47. Testing Emulators / simulatorswork, up to a point May need Mac and Windows hosts Test with real devices On real networks (3g, Starbucks wifi) In real conditions Outside in sunshine In classrooms
- 48. Managing a MobileSite Content Management and Maintenance Use database or CMS to manage content Reuse and publish content to multiple locations Web Analytics Track usage and behavior Justify the need for mobile optimized sites Continual Improvement
- 49. Mobile Aware WebProject SGG funded project, with participants from IT Services University Communications Student Affairs Develop guidelines and tools Develop reference sites, including http://www.stanford.edu/m http://itopenhouse.stanford.edu
- 50. What we're considering JQueryMobile for mobile framework UI elements Base style Modernizr for feature detection Media queries for screen size detection Simple backend device classification mod_rewrite regular expressions FTW!
- 51. Mobile Framework Showcase Examplesof mobile aware web developed using a mobile framework JQuery Mobile http://commencement.stanford.edu/m JQ Touch http://www.stanford.edu/m Sencha Touch http://www.stanford.edu/group/itopenhouse/m
- 52.
- 53. Resources http://www.breakingdc.com/speakers yiibu.com (@stephanierieger) lukew.com (@lukew) Tools and Frameworks jquerymobile.com, sencha.com, etc @grigs, @snookca, @ppk, etc: https://twitter.com/#!/scottylogan/mobile
- 54. Image Credits flickr.com/photos/jschumacher/4273428108/ flickr.com/photos/kenjonbro/3796564454 flickr.com/photos/mattgrimm/2391244100/ flickr.com/photos/daveknapik/402730950/ flickr.com/photos/wessexarchaeology/321370565/ flickr.com/photos/radioflyer007/4117675229 flickr.com/photos/soldiersmediacenter/3729394795/ flickr.com/photos/wscullin/3770015203/ flickr.com/photos/50101005@N03/4607048471/ flickr.com/photos/mountain-top/3144841264 flickr.com/photos/eszter/478947769/ flickr.com/photos/mniemand/3338678704 flickr.com/photos/cote/67919646 flickr.com/photos/nodomain1/306390955 flickr.com/photos/benlanc/4786607582/ flickr.com/photos/danielfoster/2206175625 flickr.com/photos/johanl/5619897608/ flickr.com/photos/andersondotcom/482150154 flickr.com/photos/johanl/4424185115/ flickr.com/photos/konch/4974020028 flickr.com/photos/antmcneill/4686147794 flickr.com/photos/jemsweb/4363548805 flickr.com/photos/kaioshin/3085642914/ flickr.com/photos/subtleness/18765167/ flickr.com/photos/23379658@N05/3650125866/ flickr.com/photos/jillclardy/3651849999/ flickr.com/photos/schmish/4090562160/ flickr.com/photos/nocallerid_man/3638360458 flickr.com/photos/kitkaphotogirl/3516722887 flickr.com/photos/bslavin/2260190207 flickr.com/photos/peterblanchard/3387759956 flickr.com/photos/dullhunk/202872717/
- 55.
Editor's Notes
- #2 \n
- #3 [twitter]starting the mobile web talk, with co-presenter @auracreations[/twitter]\n\n
- #4 [twitter]describing the awesomeness of #bdconf[/twitter]\n\n
- #5 \nhttp://www.flickr.com/photos/jschumacher/4273428108/\n\n
- #6 [twitter]I used naughty words before doing mobile development; now I use more[/twitter]\n\nhttp://www.flickr.com/photos/mattgrimm/2391244100/\n\n
- #7 http://www.flickr.com/photos/wessexarchaeology/321370565/\n\n
- #8 did any one web developers / designers drop their hands when asked about mobile? Guess what... you’re mobile developers / designers\n\nhttp://www.flickr.com/photos/wessexarchaeology/321370565/\n\n
- #9 Morgan Stanley, via http://mashable.com/2010/04/13/mobile-web-stats/\n\nhttp://www.flickr.com/photos/soldiersmediacenter/3729394795/\n
- #10 Morgan Stanley, via http://mashable.com/2010/04/13/mobile-web-stats/\n\nhttp://www.flickr.com/photos/50101005@N03/4607048471/\n
- #11 iPhone - >9,300 (~82%)\niPad - 348\nWindows Mobile - 636\nAndroid - 871\n\nIncludes old devices no longer in use\nbased on user selected OS in NetDB\ndoes not include “builtin” OS choice\n\nhttp://www.flickr.com/photos/eszter/478947769/\n\n
- #12 No Windows Phone 7 or Blackberry showing up\nAgain - not including “built-in” OS\n\nProblematic time for comparison - lots of users are away from campus\n\nhttp://www.flickr.com/photos/eszter/478947769/\n
- #13 Safari (iPhone, iPad, Android/Webkit) is now 3% of total homepage traffic\nGoogle Analytics does not break out Windows Mobile and Windows Phone 7\nOnly includes browers with javascript enabled\n\nhttp://www.flickr.com/photos/eszter/478947769/\n
- #14 http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n\n
- #15 http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
- #16 http://reviews.cnet.com/8301-19736_7-20031147-251.html\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
- #17 http://reviews.cnet.com/8301-19736_7-20031147-251.html\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
- #18 [twitter]Gomez When Seconds Count report http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf[/twitter]\n\nhttp://upload.wikimedia.org/wikipedia/commons/d/d0/FA-18_Hornet_breaking_sound_barrier_%287_July_1999%29.jpg\n\n
- #19 Repetitive now - deleting mail in the morning\nBored now - need something to do while in line, waiting for meeting to start, etc.\nUrgent now - I’m running late, which gate is my plane leaving from?\n\nhttp://www.flickr.com/photos/benlanc/4786607582/\n\n
- #20 http://www.flickr.com/photos/johanl/5619897608/\n\n\n
- #21 [twitter]@ppk’s mobile browser feature compatibility list http://quirksmode.org/mobile/[/twitter]\nPeople don't really surf the web using the bad browsers, unless they have to\n\nhttp://www.flickr.com/photos/johanl/4424185115/\n \n
- #22 http://www.flickr.com/photos/antmcneill/4686147794\n\n
- #23 Brian Fling @fling #bdconf offers clients a web app for less than full cost, because it’s the right thing to do; client always choose to pay more for a native app\n\nhttp://www.flickr.com/photos/kaioshin/3085642914/\n\n
- #24 http://www.flickr.com/photos/23379658@N05/3650125866/\n\n
- #25 Well, mostly everywhere... might need some tweaks\nInstalled web pages have icons like regular apps\nW3C and others are working on device APIs; security remains an issue (for regular web pages)\n\nThere’s standardization work on device APIs at http://www.wacapps.net/web/portal too\n\nhttp://www.flickr.com/photos/schmish/4090562160/\n\n
- #26 [twitter]native app wrappers for web apps: http://phonegap.com/ and http://appcelerator.com/[/twitter]\nAlso Rhombile, but it uses a custom language\n\nhttp://www.flickr.com/photos/kitkaphotogirl/3516722887\n
- #27 SEO is all about links\nWhile you can create links to apps (on most devices), they’ll fail horribly if the user doesn’t have the app installed\n\n
- #28 \n
- #29 \n
- #30 \n
- #31 There may be cases where you have to do this\n\nWe’ll talk about redirects shortly\n\nhttp://www.flickr.com/photos/peterblanchard/3387759956\n\n\n\n
- #32 [twitter]lynx is the ultimate test of content first / progressive enhancement[/twitter]\n\n\n
- #33 [twitter]Original Responsive Web Design article: http://www.alistapart.com/articles/responsive-web-design/[/twitter]\n\nhttp://www.flickr.com/photos/kenjonbro/3796564454\n\n
- #34 [twitter]@grigs’ response to responsive design: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/[/twitter]\n\nhttp://www.flickr.com/photos/daveknapik/402730950/\n\n
- #35 [twitter]@lukew’s mobile first talk http://www.lukew.com/ff/entry.asp?1137[/twitter]\n\nhttp://www.flickr.com/photos/radioflyer007/4117675229\n\n
- #36 \n
- #37 http://www.flickr.com/photos/wscullin/3770015203/\n\n
- #38 http://www.flickr.com/photos/mountain-top/3144841264\n
- #39 While you’re redesigning your site, make sure you keep it accessible\nAvoid fixed viewports\n\nhttp://www.flickr.com/photos/mniemand/3338678704\n
- #40 http://www.flickr.com/photos/nodomain1/306390955\n
- #41 Some frameworks do this; many tutorials suggest this\nWorks more like a native app!\n
- #42 Lets user pinch and zoom to see details, or to make controls more readable and more accessible\n
- #43 RFC2616 (HTTP 1/.1 specification), section 8.1.4 "Practical Considerations" states:\nA single-user client SHOULD NOT maintain more than 2 connections with any server or proxy\n\nhttp://www.flickr.com/photos/danielfoster/2206175625\n
- #44 [twitter]Use firebug in firefox, or the web console in Safari / Chrome to see requests made by browser[/twitter]\n\nThis is from blaze.io, but Firebug in Firefox and the web console in Safari / Chrome also provide similar tools\n\n
- #45 This is from blaze.io, but Firebug in Firefox and the web console in Safari / Chrome also provide similar tools\n\n
- #46 [twitter]Aggregate & minimize CSS & Javascript, using tools like http://developer.yahoo.com/yui/compressor/ http://refresh-sf.com/yui/[/twitter]\n\n
- #47 tinysrc and wurfl cache images\n[twitter]Base64 encoding images: http://www.websiteoptimization.com/speed/tweak/inline-images/[/twitter]\n[twitter]CSS sprites: http://www.alistapart.com/articles/sprites/[/twitter]\n\nhttp://www.flickr.com/photos/andersondotcom/482150154\n
- #48 iOS simulator is part of XCode\nAndroid emulator on Linux, Mac, Windows\nUse desktop browsers with performance tools\nUse YSlow, etc.\n\nhttp://www.flickr.com/photos/konch/4974020028\n\n\n
- #49 http://www.flickr.com/photos/jemsweb/4363548805\n
- #50 [twitter]Mobile Aware Web Project http://www.stanford.edu/dept/its/projects/mobile/aware/info/ [/twitter]\n\nhttp://commencement.stanford.edu (June 2011)\nhttp://stanfordwho.stanford.edu (Summer 2011)\nhttp://itservices.stanford.edu (Summer 2011)\nhttp://events.stanford.edu (Summer 2011)\nhttp://news.stanford.edu (Summer 2011)\nhttp://explorecourses.stanford.edu (Summer 2011)\nacademic calendar on registrar site (Summer 2011)\n\nhttp://www.flickr.com/photos/subtleness/18765167/\n\n
- #51 [twitter]Modernizr - http://www.modernizr.com/ [/twitter]\n[twitter]http://detectmobilebrowser.com/ generate detection scripts for common languages, and mod_rewrite[/twitter]\n\n\nhttp://www.flickr.com/photos/jillclardy/3651849999/\n\n
- #52 http://www.flickr.com/photos/nocallerid_man/3638360458\n\n
- #53 \n
- #54 [twitter]useful mobile sites: http://yiibu.com/ http://lukew.com/ http://quirksmode.com/ [/twitter]\n[twitter]Scotty’s mobile list: https://twitter.com/#!/scottylogan/mobile [/twitter]\n\nhttp://www.flickr.com/photos/bslavin/2260190207\n\n
- #55 \n
- #56 http://www.flickr.com/photos/dullhunk/202872717/\n\n