From mobile browser to mobile app

2,770 views

Published on

A presentation I gave at D2WC on workflow for creating an experience that spans mobile web to mobile app.

Published in: Technology, Business
  • Be the first to comment

From mobile browser to mobile app

  1. The New Responsive Design Workflow: From Mobile Web to Mobile App
  2. Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
  3. The New Responsive Design Workflow: From Mobile Web to Mobile App
  4. Responsive Design
  5. The Good:Scaling down content
  6. The BadHow do you http://www.20thingsilearned.com/en-US/home scale rich sites?
  7. Long Live the m-dot (sort of)
  8. But what about users thatwant an app?
  9. Additional functionalityWhat is an Isolated app? Experience One click away
  10. Worried about app fatigue?http://loveandleftovers.blogspot.com/2012/04/iphone-app-fatigue.html
  11. The best ofboth worldsBrought to you by HTML5
  12. Create a consistent mobile experience for web and app Re-use all the The goals of code and assetsthe workflow: that you can Provide a seamless transition between web and app
  13. What makes all of this possible?
  14. Design for mobile web first
  15. Mobile web should be your first design because its going to be the backbone of your mobile experience.
  16. Think about a cross-platform look and feel right off the bat. If youre going to take this to mobileapp, you want a look and UI that is unique so youdont get trapped in something that looks too iOS or too Android.
  17. What paradigms work best for that kind of UI? List or tab-based UIs tend to have very native- specific look and feel
  18. Springboard
  19. Metaphor
  20. Other elements and controls? This.
  21. What about a “full” responsive design? PC, tablet, mobile? In general, why? This is a mobile-first design. Not a watered down desktop design.
  22. Mobile Web Development
  23. To Framework or not to Framework?
  24. jQuery Mobile and Bootstrap
  25. Developing to the device’s experience. http://jquerymobile.com/test/docs/pages/page-transitions.html
  26. Testing - a huge PITA
  27. Hooray Shadow!
  28. Design:Starting on Native
  29. Think about what features you’re going to add. Are they features that require UI or enhancements?
  30. The beauty of the HTML model: Laying in PhoneGap
  31. PhoneGap provides access to device APIs but letsyou build your UI in HTML/JS/CSS. It packages up into a native, store-ready app.
  32. PhoneGap APIs map pretty closely to the W3C standards that haven’t been ratified yet
  33. So when some of this ends up in the browser, we can reuse a lot of our code (in theory).
  34. Developing for the (Phone)Gap
  35. You can actually ship your PhoneGap codewithin your mobile web app if you want to with the onDeviceReady event.
  36. Testing with Weinre
  37. So now we’ve built this cross platform experience, what about deployment?
  38. Native SDKs are teh suck
  39. PhoneGap Build!!!
  40. Ryan Stewart Web Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
  41. Fin.

×