Shadow sxsw 20120505
Upcoming SlideShare
Loading in...5
×
 

Shadow sxsw 20120505

on

  • 1,012 views

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.

Statistics

Views

Total Views
1,012
Views on SlideShare
970
Embed Views
42

Actions

Likes
3
Downloads
2
Comments
0

2 Embeds 42

http://lanyrd.com 40
http://bundlr.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Shadow sxsw 20120505 Shadow sxsw 20120505 Presentation Transcript

  • SXSW: How to Boost YourMobile WorkflowBruce Bowman, Sr. Product Manager, Web Pro ServicesGreg Rewis, Principal Worldwide EvangelistMar 12, 2012
  • 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 1024x768 was “standard” 800x600 was the “fallback”
  • 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
  • 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
  • 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!!!
  • 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!!!
  • 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 these other devices
  • 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!
  • 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!
  • 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 acceptable to leave off – or even add – features to address a device/screen’s shortcomings or capabilities
  • 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
  • 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
  • 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
  • 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
  • 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="viewport" content="width=device-width"> to force the browser to report its true size
  • 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
  • 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 efficiency •Synchronous browsing •Remote Inspection for devices
  • 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
  • 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 • Synchronized browsing on mobile devices • Iterative development • See layout changes across devices • Target a device for remote inspection • See changes instantly, on the device
  • 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/a-complete-tour-of-adobe-shadow-in-10-minutes-including-integration-with-livereload.html
  • 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
  • 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
  • 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