Developing for Mobility

Designing for Mobility

Who Are We?Brian Young Scotty LoganInterface Designer IT Architect& Web DeveloperFirst web page: 1998 First web page: 1993First web server: 1998 First web server: 1994

Previously...search for #bdconf on twitter & slideshare

TwitterWe’ll make references to twitterEveryone at #bdconf uses twitter Scotty @scottylogan Brian @auracreationsWe’re tweeting now Search for #suitoh11

WarningMobile developers sometimes use naughty words

Quick SurveyDo you have... iPhone (iPod Touch?) iPad Android (tablet?) Blackberry Palm Pre / Win Phone 7 / smartphone “dumb” / “feature” phone

Quick SurveyHow many of you are web developers or designers? mobile web developers or designers? native mobile app developers? managers of any of the above

Why Mobile MattersMobile web access > non-mobile by 2015Average iPhone user only spends 45% of his on-device time making voice calls

Why Mobile Matters25% in US only use mobile web; 70% in Egypt59% of people have viewed website on phone,then followed up on desktop34% have done the reverse@stephanierieger #bdconf

NetDB by OSiPhoneAndroidWindows MobileiPadSymbianiPodWebOSBlackberryWindows Phone 7

NetDB Active by OSiPhone 5000AndroidWindows Mobile 3750iPad 2500SymbianiPod 1250WebOSBlackberry 0Windows Phone 7 April 2011 July 2011

www.stanford.eduMarch - April 2011 iPhone 20000 Android Win Mobile / WP7 15000 iPad 10000 Symbian iPod 5000 WebOS Blackberry 0 Other April 2011 July 2011

US Mobile Market Oct ‘10 Jan ‘11 May ‘11 30% 22.5% 15% 7.5% 0% Samsung LG Motorola RIM Apple Otherhttp://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share

US Smartphone Market Oct ‘10 Jan ‘11 May ‘11 40% 30% 20% 10% 0% Google RIM Apple Microsoft Palm Otherhttp://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share

Global Mobile Market 2009 2010 201140%30%20%10%0% Nokia Samsung LG RIM Apple Sony E.Motorola ZTE HTC Huawei Others Gartner, February 2011

Global Smartphone Market 2009 2010 2011 50%37.5% 25%12.5% 0% Symbian Google RIM Apple Microsoft Other Gartner, February 2011

Speed Matters17% of people will not wait more than5 seconds for a mobile web site to load Gomez “When Seconds Count”

Speed MattersGoogle breaks downmobile usersinto3 behavior groupsRepetitive nowBored nowUrgent now

Where is mobile used?82% of mobile web use at homeWaiting in lineMost tablet use 6pm - 10pm (in bed?)@lukew #bdconf

Mobile Browser EnvironmentGood Browsers 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 @ppks mobile browser feature compatibility list http://www.quirksmode.org/mobile/

Mobile is PersonalAnywhere, anytime accessAccess to user location, camera, addressbook, phone functionality, etc.Touch and gesture controlEven babies can play games on the iPad

AppsWhat is an App?Everyone wants Apps Do you really need one?Native or Web App?

Native AppCoded in multiple 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

Web AppCoded in HTML5, CSS 3, and JavascriptDo it once and available everywhereCan be installed on phoneCan be cached locally even work ofﬂineAccess to local storageNo access to camera, contacts, etc (yet)

Hybrid SolutionsWrap your web app in a native appDevice access (camera, contacts, etc)Available in app storesOpen source PhoneGapCommercial Appcelerator Titanium (fewer devices)

Still need a web siteVisitors and other non local usersSearch Returns links Google does not distinguish between desktop or mobile sitesFeature phonesPhones you dont build for

We like the mobile web

So do these people

Next BDConf is coming

Separate Mobile SiteUsed to be the way to do it When devices had very limited browsersMore maintenanceWhat about new devices? Device detection scrambleUsually means a redirect [BAD]

Progressive Enhancement Deliver a simple site Enhance it based on the capabilities of the browser Media Queries Feature detection (Modernizr) JavaScript CSS3 features

Responsive DesignWebsite should display content reasonablyregardless of device resolution / orientation ﬂuid grids, CSS 3 layouts content priority is maintained content adjusted to the viewable space text scaled to maintain content readabilityEthan Marcotte’s articlehttp://www.alistapart.com/articles/responsive-web-design/

Ethan was mostly rightHe was wrong about images Suggested using largest needed image Letting the browser resize Really bad for performanceJason Grigsby: resize images on serverhttp://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

Mobile First!Luke (@lukew) Wroblewskis Mobile First Talk http://www.lukew.com/ff/entry.asp?1137Mobile constraints improve design Limited screen real estate on mobile One distracted eyeball, one fat ﬁngerCut the crap, present only the most importantcontentBetter usability = Better experience!

Desktop vs Mobile

or is it Content First?Site Architecture Many people ignore and forget thisUsing all your content might not be theanswer But mobile users often want it allWhat do mobile users need on your site?Use analytics

Why Analytics?Mind reading is no way to basefundamental content decisions @stephanierieger #bdconf

Accessibility If I cant use your awesome website... Its not really that awesome, is it? @stephanierieger #bdconfMake content accessible by everyoneContent accessibility > Presentation styles

ViewportsMobile browsers default to 960px wide but scaled downFine for desktop sites, not for mobile sitesSet the viewport... carefully

Bad ViewportsPinch and Zoom to

Good ViewportsPinch and Zoom to

Performance and OptimizationMobile devices often suffer from Low bandwidth High latency Unreliable connectivity Slower processorsBrowsers only use 2,4, or 6 connectionsto a site

How Pages are Fetched iOS 4.3 uses up to 4 connections

How Pages are Fetched Android 2.2 uses up to 11 connections!

Performance RulesAggregate and minimize your CSS and Javascript But look at all those images!

ImagesResize images on the server WURFL has tools for this http://tinysrc.net/For images used in CSS Base64 encode images, embed in CSS Use CSS sprites

TestingEmulators / simulators work, up to a point May need Mac and Windows hostsTest with real devices On real networks (3g, Starbucks wiﬁ)In real conditions Outside in sunshine In classrooms

Managing a Mobile SiteContent Management and Maintenance Use database or CMS to manage content Reuse and publish content to multiple locationsWeb Analytics Track usage and behavior Justify the need for mobile optimized sitesContinual Improvement

Mobile Aware Web ProjectSGG funded project, with participants from IT Services University Communications Student AffairsDevelop guidelines and toolsDevelop reference sites, including http://www.stanford.edu/m http://itopenhouse.stanford.edu

What were consideringJQuery Mobile for mobile framework UI elements Base styleModernizr for feature detectionMedia queries for screen size detectionSimple backend device classiﬁcation mod_rewrite regular expressions FTW!

Mobile Framework ShowcaseExamples of mobile aware web developed using amobile framework JQuery Mobile http://commencement.stanford.edu/m JQ Touch http://www.stanford.edu/m Sencha Touch http://www.stanford.edu/group/itopenhouse/m

More Code!http://tinyurl.com/3oyutom

Resourceshttp://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

Image Creditsflickr.com/photos/jschumacher/4273428108/ flickr.com/photos/kenjonbro/3796564454flickr.com/photos/mattgrimm/2391244100/ flickr.com/photos/daveknapik/402730950/flickr.com/photos/wessexarchaeology/321370565/ flickr.com/photos/radioflyer007/4117675229flickr.com/photos/soldiersmediacenter/3729394795/ flickr.com/photos/wscullin/3770015203/flickr.com/photos/50101005@N03/4607048471/ flickr.com/photos/mountain-top/3144841264flickr.com/photos/eszter/478947769/ flickr.com/photos/mniemand/3338678704flickr.com/photos/cote/67919646 flickr.com/photos/nodomain1/306390955flickr.com/photos/benlanc/4786607582/ flickr.com/photos/danielfoster/2206175625flickr.com/photos/johanl/5619897608/ flickr.com/photos/andersondotcom/482150154flickr.com/photos/johanl/4424185115/ flickr.com/photos/konch/4974020028flickr.com/photos/antmcneill/4686147794 flickr.com/photos/jemsweb/4363548805flickr.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/3638360458flickr.com/photos/kitkaphotogirl/3516722887 flickr.com/photos/bslavin/2260190207flickr.com/photos/peterblanchard/3387759956 flickr.com/photos/dullhunk/202872717/

Developing for Mobility

by Scotty Logan on Apr 21, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 16

Statistics

Developing for Mobility Presentation Transcript

https://itarch.stanford.edu	8
http://lanyrd.com	5
http://dhanpalani.posterous.com	3