Mobile experiences

Jonas Päckos Mobile @pekkosexperiences

This is not the WebSlide Credit: http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web

Web This is the Web Web Web Web Web Web Web Web Text Web WebWeb Web

Smart Phones pass PC vs. Smartphone Shipments PC Sales Smartphones passed PC shipments in Q42010 700 Global Shipments in MM SMARTPHONES 600 500 PCS 400 Q42010 2012E 300 200 100 0 2005 2006 2007 2008 2009 2010E 2011E 2012E 2013E Source: http://www.smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc- Source: http://bit.ly/gIqKm9 Source: http://bit.ly/g5ktGq 10 sales-for-the-first-time-in-history/Slide Credit: http://www.lukew.com/dmwe.pdf

Thank You, Steve

the smartphone era begins... original the iPhone 2007Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

brings touch, gestures and the real web... web touch iPhone 3G iPhone 2007 2008Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

native apps and the rise of Android... android apps iPhone 3GS iPhone 3G 2007 2008 2009Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

whither feature phones, and the further rise of Android... htc g-ﬁve samsung web os iPhone 4 iPhone 3G 3GS 2007 2008 2009 2010Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5... 3G 3GS 4 2008 2009 2010 2011Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

the bleeding edge... + ish via ChinaopportunitySlide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server

On the go Limited bandwidth One-thumbed and one-eyedPhoto Credit: http://www.ﬂickr.com/photos/junglearctic/5978794556/

84% at home80% during miscellaneous times during the day74% waiting in lines64% at workSource: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/Photo Credit: http://www.ﬂickr.com/photos/laughingsquid/3033724807/

mobile is also used to time-shift 59% 59% ...and%follow%up% ...and follow up sometimes visit sometimes a website on on%a%PC on the PC visit a site their mobile on mobile phone Time Shift Source: YahooSource: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

...and 34% 34% follow up and follow-up visit a a web site visit site on on a on mobile the PC a PC on mobile phone Time Shift Source: YahooSource: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

67% 23% 16% 9%Source: http://www.gstatic.com/ads/research/en/2011_TheMobileMovement.pdf

Twitter 55% Facebook 33% http://www.slideshare.net/HanWang3/69309864-kpcbinternettrends2011Photo Credit: http://www.ﬂickr.com/photos/mika/4198063912/

10% of visitors on mobile devices

steep increase since last year

Are we offering anythingmobile yet?

https://twitter.com/#!/lukew/status/126110249760460800

Location Based ServicesPhoto Credit: http://blog.afﬁliatewindow.com/wp-content/uploads/2011/11/M-Commerce-The-Complete-Picture2.pdf

Quick Response CodePhoto Credit: http://www.ﬂickr.com/photos/waynesutton/5094463490/

ARAugmented Reality

Near Field CommunicationPhoto Credit: http://www.ﬂickr.com/photos/georgo10/3286708793/

http://twitter.com/#!/jamespearce/status/44882337254744064

App or Web?

App• Access address book, SMS, camera, audio input and other sensors• Location detection, Device orientation• Run processes in background• Monetize on app stores and in- app purchases

Web• Location detection, Device orientation• Harder to get on users home screen• Web don’t require users to download updates

http://twitter.com/#!/bryanrieger/statuses/26479742726

Native appsincrease web useon mobile devices

Links don’t open apps, they go to web pages

App or Web?

App and Web!

NativeHybrid AppsWeb

Hybrid AppDownloaded from app store Stored on device Launched like an app

Hybrid App Same capabilities as native apps(almost) Indistinguishable from a native app

Hybrid AppHTML, CSS, Javascript frameworks jQuery Mobile Sencha TouchTitanium Appcelerator Phone Gap

Hybrid App Reuse code between different platformsLoad pages from your website, or implement the entire UI in HTML

Web AppWeb apps are similiar to mobile web sites, but is tailor- made for the mobile platformMobile-device-centric interfaces with bigger hit areas, optimised for touch

http://twitter.com/#!/stephenhay/status/23350345962889216

Mobile experience

‘‘ Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile. — Jakob Nielsenhttp://www.useit.com/alertbox/mobile-redesign.html

http://twitter.com/#!/wilto/statuses/63284673723375616

‘‘ Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile. — Jakob Nielsenhttp://www.useit.com/alertbox/mobile-redesign.html

Device

84% at home80% during miscellaneous times during the day74% waiting in lines64% at workSource: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/Photo Credit: http://www.ﬂickr.com/photos/laughingsquid/3033724807/

Context

http://twitter.com/#!/nstop/status/124561806671888384

http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

i love it! nice and clean look, easy to navigate and easy to read. well done! but... can you put a bit more news on there?http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

i love it! nice and clean look, easy to navigate and easy to read. well done! but... can you put a bit more news on there?...that "Sorry, this article isnt yet available on the mobile site"message was bloody annoying. Ended up having to install a browserthat spoofs the user agent and renders the full desktop sitehttp://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

i love it! nice and clean look, easy to navigate and easy to read. well done! but... can you put a bit more news on there?...that "Sorry, this article isnt yet available on the mobile site"message was bloody annoying. Ended up having to install a browserthat spoofs the user agent and renders the full desktop siteThere should be a text only version of the site for those of us whodont like the busyness of the main site and are never going towatch the videoshttp://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website

...and 34% 34% follow up and follow-up visit a a web site visit site on on a on mobile the PC a PC on mobile phone Time Shift Source: YahooSource: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

People get upset when they can’t access the same information across multiple devices

People get upset when they can’t access the same information across multiple devices Don’t dumb it down for mobile

FocusPhoto Credit: http://www.ﬂickr.com/photos/hussain_quantum/2087578696

1024 x 768 320 x 480

‘‘ Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters most. — Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1117

http://twitter.com/#!/stephenhay/status/32906711018766339

Focushttp://imgs.xkcd.com/comics/university_website.png

Bullshit Bullshit BullshitContent

‘‘ If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the Web site. We agreed that this was the most important set of features and content for our customers and business -why should that change with more screen space? — Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1117

Mobile first

Explore / Play Lookup / Find Edit / CreateCheckin / Status Mobile behaviorsPhoto Credit: http://www.ﬂickr.com/photos/carbonnyc/5140154965

Mobilebehaviors

Content overnavigation

Content overnavigationDead end!

Content overnavigation

Fixedmenu

Embracethe input

Do websites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Do websites need to be experiencedexactly the same in every browser? http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

Do websites need to be experiencedexactly the same on every device?

OneWeb

‘‘ One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. — W3Chttp://www.w3.org/TR/mobile-bp/#OneWeb

Photo Credit: http://www.ﬂickr.com/photos/londonannie/4904832807/lightbox/

Fluid gridsPhoto Credit: http://www.ﬂickr.com/photos/londonannie/4904832807/lightbox/

Fluid grids Flexible imagesPhoto Credit: http://www.ﬂickr.com/photos/londonannie/4904832807/lightbox/

No, not Browser SniffingPhoto Credit: http://www.ﬂickr.com/photos/timdorr/2096272747/

Fluid grids Flexible images Media queriesPhoto Credit: http://www.ﬂickr.com/photos/londonannie/4904832807/lightbox/

http://mediaqueri.es/

Mobile FirstResponsive Web Design

Strategy

StrategyStructured Content First Mobile Experience FirstProgressive Enhancement

StrategyStructured Content First Mobile FirstProgressive Enhancement

StructuredContent First

MOBILE WEBSITE WEB MOBILE APPS SOCIAL TABLET MEDIA APPS CONTENTMICROSITES PRINT BLOGS EMAIL INTRANET

MOBILE WEBSITE WEB MOBILE APPS SOCIAL TABLET MEDIA APPSProperly structured content CONTENT is portable to future platforms MICROSITES PRINT BLOGS EMAIL INTRANET

Mobile First

ProgressiveEnhancement

Content is both available to and usable by anyonePhoto Credit: http://www.ﬂickr.com/photos/clagnut/315554083

Solid HTML markupPhoto Credit: http://www.ﬂickr.com/photos/clagnut/315554083

Basic CSS to every browserPhoto Credit: http://www.ﬂickr.com/photos/clagnut/315554083

Advanced CSS to capable browsers and devicesPhoto Credit: http://www.ﬂickr.com/photos/clagnut/315554083

Media queries@media screen and (min-device-width: 480px) and (orientation: landscape) { ...}

Modernizr — testing for capabilities.box { background-color: rgb(127,127,127);}.borderradius .box { border-radius: 6px;}

Vendor prefixes.box { background-color: rgb(127,127,127);}.borderradius .box { -moz-border-radius: 6px; /* Mozilla */ -webkit-border-radius: 6px; /* Webkit */ -o-border-radius: 6px; /* Opera */ -ms-border-radius: 6px; /* IE */ border-radius: 6px;}

LESS – LESS CSS code.rounded-corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; -o-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius;}#header { .rounded-corners;}#footer { .rounded-corners(10px);}

LESS – generated CSS#header { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}#footer { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

Add Javascript unobtrusively to enhance the user experiencePhoto Credit: http://www.ﬂickr.com/photos/clagnut/315554083

“Basic”Slide Credit: http://ﬁlamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf

Slide Credit: http://ﬁlamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf

Does all this sound easy?Photo Credit: http://www.ﬂickr.com/photos/chelsea_nj/4223680604

http://twitter.com/#!/ﬂing/status/50320128524550144

Challenges? Mobile First RWD may require a redesign Large technical challenges Javascript libraries are just beginning to evolve Waiting for the ground-breaking redesigns The technique is still youngPhoto Credit: http://www.ﬂickr.com/photos/chelsea_nj/4223680604

http://mobilewebbestpractices.com/ http://futurefriend.ly/ Resources

Thank You. Jonas Päckos Twitter: @pekkos http://about.me/pekkos

Mobile experiences

by Jonas Päckos

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 298

Statistics

Mobile experiences Presentation Transcript

http://www.iphone-entreprise.com	297
http://translate.googleusercontent.com	1