Shadow sxsw 20120505

SXSW: How to Boost YourMobile WorkﬂowBruce 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!!!

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 snifﬁng • Responsive Design

What’s That Smell? • Browser snifﬁng 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 workﬂow efﬁciency •Synchronous browsing •Remote Inspection for devices

Why Adobe Shadow? • World changing for web pros • Increased demand for mobile content • Radical changes to workﬂows • 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 workﬂows • Expected Final Product • Second half 2012 • Adobe Store • Also in Adobe Creative Cloud

Conclusion • Easy pairing and synchronized browsing for efﬁcient 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

Shadow sxsw 20120505

by brucebowman on May 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 34

Statistics

Shadow sxsw 20120505 Presentation Transcript

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