SlideShare a Scribd company logo
1 of 43
“We want an App!” Øyvind Malin - @oyvindmal Oslo WordpressMeetup – 13. july 2011
Why?
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?
Two approaches?
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
My project
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
Some examples
LIVE DEMO
WPTouch
Blackbelt tricks
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
Libraries jQuery Mobile – http://www.jquerymobile.com Sencha Touch – http://www.sencha.com iScroll - http://cubiq.org/iscroll-4
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
Want to go native(ish)? Phonegap offers a way to wrap normal web applications in a native shell Support for most modern platforms including iPhone and Android Offers javascript access to device specific hardware apis
Questions?
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
Øyvind Malin Consultant +47 909 71 598 oyvind.malin@bekk.no

More Related Content

What's hot

TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...
TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...
TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...
TrooMobile
 
Mobile Apps presentation
Mobile Apps presentationMobile Apps presentation
Mobile Apps presentation
Tom Printy
 
7 deadly sins for your app
7 deadly sins for your app7 deadly sins for your app
7 deadly sins for your app
Davide Di Cillo
 

What's hot (20)

Hybrid vs native mobile development – how to choose a tech stack
Hybrid vs native mobile development – how to choose a tech stackHybrid vs native mobile development – how to choose a tech stack
Hybrid vs native mobile development – how to choose a tech stack
 
Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3
 
TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...
TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...
TrooMobile 2014 Capabilities Overview : Mobile and Web App Developer, Orange ...
 
TestElf Informational Presentation
TestElf Informational PresentationTestElf Informational Presentation
TestElf Informational Presentation
 
Understanding The Mobile Patron Webinar
Understanding The Mobile Patron WebinarUnderstanding The Mobile Patron Webinar
Understanding The Mobile Patron Webinar
 
Yellow Nepal - Nepali Startup
Yellow Nepal - Nepali StartupYellow Nepal - Nepali Startup
Yellow Nepal - Nepali Startup
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
UX Super Powers with #ProjectComet
UX Super Powers with #ProjectCometUX Super Powers with #ProjectComet
UX Super Powers with #ProjectComet
 
Android App Development Journey
Android App Development JourneyAndroid App Development Journey
Android App Development Journey
 
Supplee
SuppleeSupplee
Supplee
 
Architecting mobile application
Architecting mobile applicationArchitecting mobile application
Architecting mobile application
 
Achieving quality contraints
Achieving quality contraintsAchieving quality contraints
Achieving quality contraints
 
Mobile Apps presentation
Mobile Apps presentationMobile Apps presentation
Mobile Apps presentation
 
Building an app from scratch
Building an app from scratchBuilding an app from scratch
Building an app from scratch
 
Phone gap
Phone gapPhone gap
Phone gap
 
Rhodes vs Phonegap
Rhodes vs PhonegapRhodes vs Phonegap
Rhodes vs Phonegap
 
7 deadly sins for your app
7 deadly sins for your app7 deadly sins for your app
7 deadly sins for your app
 
PhoneGap Enterprise Viewer
PhoneGap Enterprise ViewerPhoneGap Enterprise Viewer
PhoneGap Enterprise Viewer
 
Increase Chances to Be Hired as Software Developers - 2014
Increase Chances to Be Hired as Software Developers - 2014Increase Chances to Be Hired as Software Developers - 2014
Increase Chances to Be Hired as Software Developers - 2014
 
PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010
 

Similar to "We want an APP!"

Overcoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishingOvercoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishing
Jack Molisani
 
Enough_Software_Guide_16thEdition_Web
Enough_Software_Guide_16thEdition_WebEnough_Software_Guide_16thEdition_Web
Enough_Software_Guide_16thEdition_Web
Marco Tabor
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
Jack Molisani
 

Similar to "We want an APP!" (20)

Wireless Wednesdays: Part 1
Wireless Wednesdays: Part 1Wireless Wednesdays: Part 1
Wireless Wednesdays: Part 1
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Phonegap
PhonegapPhonegap
Phonegap
 
Overcoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishingOvercoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishing
 
Appfolio
AppfolioAppfolio
Appfolio
 
Mobile Developer's Guide To The Galaxy, 14th Edition
Mobile Developer's Guide To The Galaxy, 14th EditionMobile Developer's Guide To The Galaxy, 14th Edition
Mobile Developer's Guide To The Galaxy, 14th Edition
 
EyeMags App Factory Overview
EyeMags App Factory OverviewEyeMags App Factory Overview
EyeMags App Factory Overview
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
DroidCon 2011: Developing HTML5 and hybrid Android apps using PhonegapDroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
DroidCon 2011: Developing HTML5 and hybrid Android apps using Phonegap
 
Mobile app developers guide
Mobile app developers guideMobile app developers guide
Mobile app developers guide
 
Prototype Development in Mobile-Learning Design Research
Prototype Development in Mobile-Learning Design ResearchPrototype Development in Mobile-Learning Design Research
Prototype Development in Mobile-Learning Design Research
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applications
 
Enough_Software_Guide_16thEdition_Web
Enough_Software_Guide_16thEdition_WebEnough_Software_Guide_16thEdition_Web
Enough_Software_Guide_16thEdition_Web
 
Everything you need to know about native application development
Everything you need to know about native application developmentEverything you need to know about native application development
Everything you need to know about native application development
 
Creating Mobile Aps without Coding
Creating Mobile Aps without CodingCreating Mobile Aps without Coding
Creating Mobile Aps without Coding
 
Mobilizing your Drupal Site - Vancouver League of Drupallers
Mobilizing your Drupal Site - Vancouver League of DrupallersMobilizing your Drupal Site - Vancouver League of Drupallers
Mobilizing your Drupal Site - Vancouver League of Drupallers
 
EyeMags Platform V4 release July2015 v1.1
EyeMags Platform V4 release July2015 v1.1 EyeMags Platform V4 release July2015 v1.1
EyeMags Platform V4 release July2015 v1.1
 
Mobile Developer's Guide To The Galaxy 12th Edition
Mobile Developer's Guide To The Galaxy 12th EditionMobile Developer's Guide To The Galaxy 12th Edition
Mobile Developer's Guide To The Galaxy 12th Edition
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

"We want an APP!"

  • 1. “We want an App!” Øyvind Malin - @oyvindmal Oslo WordpressMeetup – 13. july 2011
  • 3. 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?
  • 4. About Studiedinteraction design at NITH Playingaroundwith web since 1999 Startedfoucsingonthe mobile platform in recentyears Frontend Developer at BEKK
  • 5.
  • 6. Some terms Customer (in thispresentation) is theend user. Company (in thispresentation) is thecompany providing the service I useiPhoneand otheriDevices as samples buttheprinciplesaresimilaronotherplatforms.
  • 7. Three different types ofapps(simplified)
  • 8. Three different types ofapps Informationalapps Utilityapps
  • 9. Three different types ofapps iPhone used as sample | * Dependingonplatform and device
  • 11. What to offer? Doesthecustomerneedthis? Does it addvalue for thecustomer? Does it addvalue for thecompany? Can it save thecompanymoney?
  • 13. Wrapping the existing web app in a mobile friendly skin
  • 14. Wrapping existing solution Pros Shorter development time Easier to maintain Content can be targeted to multiple platforms Cons Information overflow Bad user experience (possibly)
  • 15. Tailoring content for the mobile platform
  • 16. 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
  • 17. Let’s get ready to rumble?
  • 19. 8 out of 10 uses their mobile phone in the free time
  • 20. 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.
  • 21. But this isn’t always true
  • 22. 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
  • 25. Tablets Larger screen Different usecases Used more like a laptop …But also on the go So you need to support both separate
  • 27. 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
  • 29.
  • 30.
  • 31.
  • 35. 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 )
  • 36. 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
  • 37. Libraries jQuery Mobile – http://www.jquerymobile.com Sencha Touch – http://www.sencha.com iScroll - http://cubiq.org/iscroll-4
  • 38. Statistics Usage statistics for smartphones and tablets in Norway can be found at http://labs.finn.no/
  • 39. 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
  • 40. Want to go native(ish)? Phonegap offers a way to wrap normal web applications in a native shell Support for most modern platforms including iPhone and Android Offers javascript access to device specific hardware apis
  • 42. 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
  • 43. Øyvind Malin Consultant +47 909 71 598 oyvind.malin@bekk.no

Editor's Notes

  1. http://www.joker.no
  2. http://en.m.wikipedia.org/wiki/norway/
  3. Financial times