“We want an App!” Øyvind Malin - @oyvindmal Oslo WordpressMeetup – 13. july 2011
Agenda Whygo mobile? Different ways to be present onthe mobile platform Demos and samples How to make Wordpress mobile friendly Make yourwebsite mobile friendly right now?
About Studiedinteraction design at NITH Playingaroundwith web since 1999 Startedfoucsingonthe mobile platform in recentyears Frontend Developer at BEKK
Some terms Customer (in thispresentation) is theend user. Company (in thispresentation) is thecompany providing the service I useiPhoneand otheriDevices as samples buttheprinciplesaresimilaronotherplatforms.
Three different types ofapps(simplified)
Three different types ofapps Informationalapps Utilityapps
Three different types ofapps iPhone used as sample | * Dependingonplatform and device
-”Wewant an APP!””
What to offer? Doesthecustomerneedthis? Does it addvalue for thecustomer? Does it addvalue for thecompany? Can it save thecompanymoney?
Wrapping the existing web app in a mobile friendly skin
Wrapping existing solution Pros Shorter development time Easier to maintain Content can be targeted to multiple platforms Cons Information overflow Bad user experience (possibly)
Tailoring content for the mobile platform
Tailoring content for the mobile platform Pros Good user experience Direct and concrete information to the customer Cons Longer development time Harder to maintain Content must be targeted at a specific platform
Let’s get ready to rumble?
Mobile != Desktop
8 out of 10 uses their mobile phone in the free time
This means The typical usage time could 2-5 minutes (i.e while waiting at an intercection) Quick and direct information Limited bandwidth Usually 3g or Edge If the user can’t get the information they want in this timespan. They have to look somewhere else.
But this isn’t always true
Other user situations Transportation Taxi, Train, Bus, Boat etc. This means -> The typical usage time could be longer from 20 minutes up to several hours. You must also serve these users Providing links to more detailed information
iPad != iPhone
“iPad'snot mobile…next question”-Mark Zuckerberg
Tablets Larger screen Different usecases Used more like a laptop …But also on the go So you need to support both separate
Whatsupweb.net Page about web development and user experience. New version coming ultimo 2011 Tailored versions for phones and tablets Targeting most phones and iPad “Read it later” Showcase for mobile tailoring web pages Looking for guest writers
Testing in Safari Using the developer bar you can get Safari (5 and newer) to identify as Mobile safari(http://macs.about.com/od/usingyourmac/qt/safaridevelop.htm ) Resize the window to match iPhone viewport(http://davidchambersdesign.com/resize-browser-window-to-match-iphone-viewport-dimensions )
Testing in simulator/emulator Simulators/emulators are almost always available for free download: iPhone/iPad – http://developer.apple.com Windows Phone – http://create.msdn.com Android – http://developer.android.com
Statistics Usage statistics for smartphones and tablets in Norway can be found at http://labs.finn.no/
Mobile firstStart off as if you were making a mobile website even if no mobile version is plannedhttp://www.lukew.com/ff/entry.asp?933
Summary Everybody (almost) can go mobile. But not with anything Content Context is king Give your users what they need and expect in every situation Mobile web will be suitable in many cases