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.
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Shadow sxsw 20120505
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!!!
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
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
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
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
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