How to Boost Your Mobile Workflow session at SXSW, presented by Bruce Bowman, Sr. Product Manager, Adobe Shadow, and Greg Rewis, Principal Worldwide Evangelist, Adobe Systems.

1. SXSW: How to Boost Your
Mobile Workflow
Bruce Bowman, Sr. Product Manager, Web Pro Services
Greg Rewis, Principal Worldwide Evangelist
Mar 12, 2012

2. It’s a Multiscreen World
It wasn’t too long ago that we could reliably predict
the screen size of a client’s computer

3. It’s a Multiscreen World
It wasn’t too long ago that we could reliably predict
the screen size of a client’s computer
1024x768 was “standard”
800x600 was the “fallback”

4. It’s a Multiscreen World
It wasn’t too long ago that we could reliably predict
the screen size of a client’s computer
1024x768 was “standard”
800x600 was the “fallback”
n d sma ller!
Screens have gotten much larger... a

5. One Size Doesn’t Fit All
• When we think of “screens”, we tend to think only in terms of
computers – and when we say “browser” you immediately think
of the one you surf with on your desktop/laptop computer

6. One Size Doesn’t Fit All
• When we think of “screens”, we tend to think only in terms of
computers – and when we say “browser” you immediately think
of the one you surf with on your desktop/laptop computer
• But the web is making its way onto a variety of non-PC screens
with vastly different screen sizes and resolutions
• Kindle
• Smartphones
• Tablets
• Televisions and set-top boxes
• Gaming consoles
• ...and even Refrigerators!!!

7. One Size Doesn’t Fit All
• When we think of “screens”, we tend to think only in terms of
computers – and when we say “browser” you immediately think
of the one you surf with on your desktop/laptop computer
• But the web is making its way onto a variety of non-PC screens
with vastly different screen sizes and resolutions
• Kindle
• Smartphones
• Tablets
• Televisions and set-top boxes
• Gaming consoles
• ...and even Refrigerators!!!

8. In a Not-So-Distant Future

9. A New Mantra For A New World
• An experience designed for a traditional PC
screen quickly becomes unusable on many of
these other devices

10. A New Mantra For A New World
• An experience designed for a traditional PC
screen quickly becomes unusable on many of
these other devices
All web experiences do not have to be the same!

11. A New Mantra For A New World
• An experience designed for a traditional PC
screen quickly becomes unusable on many of
these other devices
SHOULD NOT
All web experiences do not have to be the same!

12. Take It Or Leave It
• Every web experience should adapt to the
medium on which it is being viewed

13. Take It Or Leave It
• Every web experience should adapt to the
medium on which it is being viewed
• It’s perfectly acceptable to leave off – or even
add – features to address a device/screen’s
shortcomings or capabilities

14. Take It Or Leave It
• Every web experience should adapt to the
medium on which it is being viewed
• It’s perfectly acceptable to leave off – or even
add – features to address a device/screen’s
shortcomings or capabilities
• Delivering a different experience can be
achieved through two unique methods
• Browser sniffing
• Responsive Design

15. What’s That Smell?
• Browser sniffing uses Javascript to ask the browser
about its environment, such as which version of the
browser is requesting the page

16. What’s That Smell?
• Browser sniffing uses Javascript to ask the browser
about its environment, such as which version of the
browser is requesting the page
• In theory, this means that a different CSS file could be
delivered to a specific browser

17. What’s That Smell?
• Browser sniffing uses Javascript to ask the browser
about its environment, such as which version of the
browser is requesting the page
• In theory, this means that a different CSS file could be
delivered to a specific browser
• In reality, this is unreliable and has numerous
drawbacks
• Javascript is required
• Browsers can masquerade
• You must maintain your detection

18. Responsive Design – the Theory

20. Your Browser Lies...!!!
• Browsers do not necessarily report their true
size on mobile devices

21. Your Browser Lies...!!!
• Browsers do not necessarily report their true
size on mobile devices
• Use <meta name="viewport"
content="width=device-width"> to force the
browser to report its true size

22. Your Browser Lies...!!!
• Browsers do not necessarily report their true
size on mobile devices
• Use <meta name="viewport"
content="width=device-width"> to force the
browser to report its true size
• Test it at assortedgarbage.com/presario/
screentest_v.html

23. Multiscreen Development in the Real World

24. Introducing Adobe Shadow

25. Adobe Shadow Labs Release 1
•For web designers and developers working
on mobile web projects who need workflow
efficiency
•Synchronous browsing
•Remote Inspection for devices

26. Why Adobe Shadow?
• World changing for web pros
• Increased demand for mobile content
• Radical changes to workflows
• Ever changing device landscape
• Multiple platforms & browsers
• CSS3 & HTML5

27. Competitive Landscape
• Partial solutions
• Solutions for single vertical platform

28. How Does Adobe Shadow Work?
• Adobe Shadow downloaded onto desktop
• Adobe Shadow client installed onto devices
• Synchronized browsing on mobile devices
• Iterative development
• See layout changes across devices
• Target a device for remote inspection
• See changes instantly, on the device

29. Shadow in action:
20+ devices Synchronously Browsing

30. demos
http://tv.adobe.com/watch/adobe-
technology-sneaks-2012/adobe-shadow
https://blogs.adobe.com/cantrell/
archives/2012/05/a-complete-tour-of-
adobe-shadow-in-10-minutes-including-
integration-with-livereload.html

31. Pricing & Availability
• Adobe Shadow Labs Release 1
• March 7, 2012 on Adobe Labs
• Supports Windows, Mac, iOS, Android, and
HTML, CSS, and JavaScript workflows
• Expected Final Product
• Second half 2012
• Adobe Store
• Also in Adobe Creative Cloud

32. Conclusion
• Easy pairing and synchronized browsing for
efficient multi-device preview
• Remote inspection and debugging of devices
• An ideal add-on for any text editor/IDE
• Does not need to be used with an Adobe
product
• Delivers on Adobe’s HTML5 strategy by
providing tooling support for the changing
landscape of the open web

33. Links...
• Labs: http://www.adobe.com/go/shadow
• Google Play: http://www.adobe.com/go/sd_android_app
• iTunes Store: http://www.adobe.com/go/sd_ios_app
• Chrome Web Store: http://www.adobe.com/go/sd_chrome_app
• Shadow Team Blog: http://blogs.adobe.com/shadow
• Adobe TV: http://tv.adobe.com/watch/adobe-technology-
sneaks-2012/adobe-shadow
• Facebook: https://www.facebook.com/AdobeShadow
• Twitter: http://twitter.com/AdobeShadow
• FAQs: http://forums.adobe.com/docs/DOC-1674
• Known Issues: http://forums.adobe.com/docs/DOC-1675
• Community Forums: http://forums.adobe.com/community/labs/
shadow