SXSW: How to Boost YourMobile WorkflowBruce Bowman, Sr. Product Manager, Web Pro ServicesGreg Rewis, Principal Worldwide Ev...
It’s a Multiscreen World It wasn’t too long ago that we could reliably predict the screen size of a client’s computer
It’s a Multiscreen World It wasn’t too long ago that we could reliably predict the screen size of a client’s computer     ...
It’s a Multiscreen World It wasn’t too long ago that we could reliably predict the screen size of a client’s computer     ...
One Size Doesn’t Fit All  • When we think of “screens”, we tend to think only in terms of   computers – and when we say “b...
One Size Doesn’t Fit All  • When we think of “screens”, we tend to think only in terms of   computers – and when we say “b...
One Size Doesn’t Fit All  • When we think of “screens”, we tend to think only in terms of   computers – and when we say “b...
In a Not-So-Distant Future
A New Mantra For A New World • An experience designed for a traditional PC  screen quickly becomes unusable on many of  th...
A New Mantra For A New World   • An experience designed for a traditional PC    screen quickly becomes unusable on many of...
A New Mantra For A New World   • An experience designed for a traditional PC    screen quickly becomes unusable on many of...
Take It Or Leave It  • Every web experience should adapt to the   medium on which it is being viewed
Take It Or Leave It  • Every web experience should adapt to the   medium on which it is being viewed  • It’s perfectly acc...
Take It Or Leave It  • Every web experience should adapt to the   medium on which it is being viewed  • It’s perfectly acc...
What’s That Smell? • Browser sniffing uses Javascript to ask the browser  about its environment, such as which version of t...
What’s That Smell? • Browser sniffing uses Javascript to ask the browser  about its environment, such as which version of t...
What’s That Smell? • Browser sniffing uses Javascript to ask the browser  about its environment, such as which version of t...
Responsive Design – the Theory
Your Browser Lies...!!!  • Browsers do not necessarily report their true   size on mobile devices
Your Browser Lies...!!!  • Browsers do not necessarily report their true   size on mobile devices  • Use <meta name="viewp...
Your Browser Lies...!!!  • Browsers do not necessarily report their true   size on mobile devices  • Use <meta name="viewp...
Multiscreen Development in the Real World
Introducing Adobe Shadow
Adobe Shadow Labs Release 1   •For web designers and developers working    on mobile web projects who need workflow    effic...
Why Adobe Shadow?  • World changing for web pros  • Increased demand for mobile content  • Radical changes to workflows  • ...
Competitive Landscape  • Partial solutions  • Solutions for single vertical platform
How Does Adobe Shadow Work?  • Adobe Shadow downloaded onto desktop  • Adobe Shadow client installed onto devices  • Synch...
Shadow in action:20+ devices Synchronously Browsing
demoshttp://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadowhttps://blogs.adobe.com/cantrell/archives/2012/05/...
Pricing & Availability   • Adobe Shadow Labs Release 1   • March 7, 2012 on Adobe Labs   • Supports Windows, Mac, iOS, And...
Conclusion  • Easy pairing and synchronized browsing for   efficient multi-device preview  • Remote inspection and debuggin...
Links... • Labs: http://www.adobe.com/go/shadow • Google Play: http://www.adobe.com/go/sd_android_app • iTunes Store: http...
Shadow sxsw 20120505
Shadow sxsw 20120505
Upcoming SlideShare
Loading in...5
×

Shadow sxsw 20120505

830

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.

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

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

No notes for slide

Shadow sxsw 20120505

  1. 1. SXSW: How to Boost YourMobile WorkflowBruce Bowman, Sr. Product Manager, Web Pro ServicesGreg Rewis, Principal Worldwide EvangelistMar 12, 2012
  2. 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. 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. 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. 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. 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. 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. 8. In a Not-So-Distant Future
  9. 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. 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. 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. 12. Take It Or Leave It • Every web experience should adapt to the medium on which it is being viewed
  13. 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. 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. 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. 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. 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. 18. Responsive Design – the Theory
  19. 19. Your Browser Lies...!!! • Browsers do not necessarily report their true size on mobile devices
  20. 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. 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. 22. Multiscreen Development in the Real World
  23. 23. Introducing Adobe Shadow
  24. 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. 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. 26. Competitive Landscape • Partial solutions • Solutions for single vertical platform
  27. 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. 28. Shadow in action:20+ devices Synchronously Browsing
  29. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×