A presentation I gave at D2WC on workflow for creating an experience that spans mobile web 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/ryanstewart
Based in Seattle
Things 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 Bad
How 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 that
want an app?

9. Additional
functionality
What 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 of
both worlds
Brought to you
by HTML5

12. Create a
consistent
mobile
experience for
web and app
Re-use all the
The goals of
code and assets
the 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
it's going to be the backbone of your mobile
experience.

16. Think about a cross-platform look and feel right
off the bat. If you're going to take this to mobile
app, you want a look and UI that is unique so you
don't 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 lets
you 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 code
within 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/ryanstewart
Based in Seattle
Things I Like:
Beer
Mountaineering/Hiking/Backpacking
Geolocation/Mapping stuff

41. Fin.