Your SlideShare is downloading. ×
0
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Shadow sxsw 20120505
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Shadow sxsw 20120505

825

Published on

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.

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.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
825
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SXSW: How to Boost YourMobile WorkflowBruce Bowman, Sr. Product Manager, Web Pro ServicesGreg Rewis, Principal Worldwide EvangelistMar 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 devicesAll 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 NOTAll 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
  • 19. Your Browser Lies...!!! • Browsers do not necessarily report their true size on mobile devices
  • 20. 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
  • 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 • Test it at assortedgarbage.com/presario/ screentest_v.html
  • 22. Multiscreen Development in the Real World
  • 23. Introducing Adobe Shadow
  • 24. 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
  • 25. 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
  • 26. Competitive Landscape • Partial solutions • Solutions for single vertical platform
  • 27. 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
  • 28. Shadow in action:20+ devices Synchronously Browsing
  • 29. demoshttp://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadowhttps://blogs.adobe.com/cantrell/archives/2012/05/a-complete-tour-of-adobe-shadow-in-10-minutes-including-integration-with-livereload.html
  • 30. 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
  • 31. 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
  • 32. 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

×