Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

late night revisions

  • Loading branch information...
commit c9d8ad436c51e10a57ed0ba5dc1d0863a88e402c 1 parent 49b83ab
Geoff Bishop authored
View
314 index.html
@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
- <title>Responsive Design with PBS</title>
+ <title>How PBS is Maximizing Reach with Responsive Design</title>
<meta name="description" content="Responsive Design with PBS">
<meta name="author" content="Dave Ackerman and Geoff Bishop">
@@ -34,296 +34,132 @@
<div class="slides">
<section data-state="blue">
- <h1>Responsive Design with PBS</h1>
+ <h2>Maximizing Reach with Responsive Design </h2>
<ul>
- <li class="fragment"><strong>Geoff Bishop</strong> - <small>Product Manager, <i>PBS</i></small></li>
- <li class="fragment"><strong>Dave Ackerman</strong> - <small>Designer/Front-End Developer, <i>Modus Create</i></small></li>
- <li class="fragment"><a href="http://www.twitter.com/gabishop">@gabishop</a> - <a href="http://www.twitter.com/dmackerman">@dmackerman</a></li>
+ <li><strong>Geoff Bishop</strong> - <small>Director, Mobile & Emerging Platforms <i>PBS</i></small> : <a href="http://www.twitter.com/gabishop">@gabishop</a></li>
</ul>
- <img src="lib/img/logos.png" />
+ <img src="lib/img/pbs_logo.png" />
</section>
<!-- Geoff -->
+ <!-- Geoff -->
<section data-state="purple">
- <h2>Our Mobile Offering</h2>
+ <h2>Our Brands</h2>
+ <img style="" src="lib/img/logos2.png">
+ </section>
+ <section data-state="purple">
+ <h2>PBS Mobile State of the Union (August)</h2>
<ul>
- <li class="fragment">3 Video Apps for iPhone & iPad (Kids + GA)</li>
+ <li class="fragment">Video Apps for iPhone & iPad (Kids + GA)</li>
<li class="fragment">69M mobile streams per month</li>
<li class="fragment">Thats 27% of hours total hours watched (and growing)</li>
<li class="fragment">48% of streams (and growing)</li>
</ul>
</section>
- <!-- Geoff -->
- <section data-state="purple">
- <h2>Our Brands</h2>
- <img style="" src="lib/img/logos2.png">
- </section>
- <!-- Geoff -->
- <section data-state="purple">
- <h2>Our Stack</h2>
- <img style="width:500px;" src="lib/img/pbs_infra.png">
- </section>
- <!-- Geoff -->
<section data-state="purple">
<h2>The Problem</h2>
<ul>
<li class="fragment">Underserving users on non-iOS platforms</li>
- <li class="fragment">We Need to be everywhere to satisfy our mission (PBS content to anyone with internet connection)</li>
- <li class="fragment">Saw Responsive Design as potential vehicle for solving</li>
+ <li class="fragment">Lack of resources for multi-platform native strategy</li>
+ <li class="fragment">Saw Responsive Design as a solution</li>
</ul>
</section>
- <!-- Geoff -->
<section data-state="purple">
- <h2>Project Goals</h2>
+ <h2>The Reality - User's Entertainment Preferences</h2>
<ul>
- <li class="fragment">Be the <em>first</em> to offer ad-supported feature-length video on the mobile web browser</li>
- <li class="fragment">Serve that video as fast and reliably as Vimeo & Youtube</li>
+ <li class="fragment">Nearly double prefer Web vs Native <small style="font-weight: normal;font-size: 12px;"><i>(OPA Survey - June '12)</i></small></li>
+ <li class="fragment">60% Prefer Mobile Web (40% native)<small style="font-weight: normal;font-size: 12px;"><i>(MDG & multiple sources - June '12)</i></small></li>
+ <li class="fragment">100% YoY increase in Mobile Web Traffic to PBS Video</li>
</ul>
- </section>
+ </section>
<!-- Geoff -->
<section data-state="purple">
- <h2>Organizational Challenges</h2>
+ <h2>Project Goals</h2>
<ul>
- <li class="fragment">Great App stack (Python/Django), but relatively immature APIs</li>
- <li class="fragment">Development all time-shifted</li>
- <li class="fragment">Designers not trained on CSS (<span style="text-decoration:line-through">yay</span> mocks!)</li>
+ <li class="fragment">Be the <em>first</em> to offer feature-length video on the mobile web browser</li>
+ <li class="fragment">Serve that video as fast and reliably as Vimeo & Youtube</li>
</ul>
- </section>
+ </section>
<!-- Geoff -->
<section data-state="purple">
<h2>The Plan</h2>
<ul>
<li class="fragment">Convince Org we're just building a "Mobile Website"</li>
<li class="fragment">Started with smartphone &amp; tablet-only breakpoints</li>
- <li class="fragment">Sneak in a "Desktop" breakpoint (more on that later)</li>
- <li class="fragment">Train designers&developers as we go</li>
+ <li class="fragment">Train designers &amp; developers as we go</li>
+ <li class="fragment">Deal with desktop later</li>
</ul>
- </section>
- <section data-state="blue">
- <h2 class="fragment">So, how's it going?</h2>
- <h2 class="fragment">And now here's Dave...</h2>
- </section>
- <!-- Dave Starts -->
- <section>
- <h2>"Mobile First" Mindset @ PBS</h2>
- <ul>
- <li class="fragment">Unfortunately for existing projects, mainly a pipedream.</li>
- </ul>
- </section>
-
- <section>
- <h2>
- Learn to love (and test on) your devices <br />
- <small style="font-weight: normal;font-size: 16px;">even the shitty ones</small>
- </h2>
-
- <img style="border-radius: 20px;" src="lib/img/device-love.png">
- <p><small><a href="http://www.flickr.com/photos/lukew/6171377827/in/photostream/">source</a></small></p>
- </section>
-
- <section>
- <h2>Is responsive design right for me?</h2>
- <ul>
- <li class="fragment">Much harder to make an existing project responsive.</li>
- <li class="fragment">Think about your content strategy.</li>
- <li class="fragment">A dedicated mobile website could be a better, more efficient solution.</li>
- </ul>
</section>
-
- <section>
- <h2>Your website, or app, probably isn't as simple as this:</h2>
- <img src="lib/img/site.png">
- </section>
-
- <section>
- <h2>Design Challenges</h2>
+ <!-- Geoff -->
+ <section data-state="alert">
+ <h2>Organizational Challenges</h2>
<ul>
- <li class="fragment">Dynamic content, content wrapping, font scaling</li>
- <li class="fragment">On mobile, <code>:hover</code> is no longer relevant.</li>
- <li class="fragment">HTML source order, content reflowing</li>
- <li class="fragment">Mobile browsers use whatever font they want</li>
- <li class="fragment"><strong>Navigation paradigms across platforms</strong></li>
+ <li class="fragment">Dev team time-shifted</li>
+ <li class="fragment">"Traditional" design - dev handoff (<span style="text-decoration:line-through">yay</span> mocks!)</li>
+ <li class="fragment">hand-waiving Product Manager</li>
</ul>
- </section>
-
- <section>
- <h2>Users don't do this:</h2>
- <iframe width="420" height="315" src="http://www.youtube.com/embed/9yfp0z1WJHE" frameborder="0" allowfullscreen></iframe>
- <p>Resizing the browser is not a user interaction!</p>
</section>
-
- <section>
- <h2>"3 pillars" of responsive design.</h2>
- <ul>
- <li class="fragment">Media Queries</li>
- <li class="fragment">Flexible Images</li>
- <li class="fragment" style="text-decoration: line-through">Flexible Grids</li>
- <p class="fragment">Grid is a misleading term. Not every responsive site has to be built on a grid.</p>
- </ul>
+ <section data-state="blue">
+ <h3 style="padding-top:3.5em;">How'd we do?</h3>
</section>
-
- <section>
- <h2>Iterative Workflow</h2>
- <p>What worked well for us: (may not work well for you)</p>
- <ul>
- <li class="fragment">Have developers stub out HTML/CSS prototypes</li>
- <li class="fragment">TEST your prototypes across devices, find out where it breaks</li>
- <li class="fragment">Circle back with designers, reference the style guide, clean up visuals</li>
- <li class="fragment">TEST your prototypes across devices, find out where it breaks</li>
- </ul>
- </section>
-
<section data-state="blue">
- <h2><img src="lib/img/ps.png" /> <br />PSDs are...</h2>
- <ul>
- <li class="fragment">Slow to create</li>
- <li class="fragment">Static</li>
- <li class="fragment">Hard to quickly iterate on</li>
- <li class="fragment">Don't show web interactivity</li>
- </ul>
- <p class="fragment"><strong>There is too much interactivity and too many possible screen sizes to make flat design comps workable!</strong></p>
+ <h2 style="padding-top:3.5em;">Now in Public Beta! <a href="http://m.video.pbs.org" target="_blank">&nbsp;video.pbs.org&nbsp;</a></h2>
</section>
-
- <section>
- <h2>The Ideal Front-End Developer</h2>
- <ul>
- <li class="fragment">Understands design principles</li>
- <li class="fragment">Knows when a breakpoint should be added. Adds it.</li>
- <li class="fragment">Circles back with the designer for design related questions.</li>
- </ul>
- </section>
-
- <section>
- <h4>Ok, so what do designers deliver to develoeprs?</h4>
- <p class="fragment"><strong>A style guide!</strong></p>
- <p class="fragment">You can make one of those with <a href="https://github.com/adactio/Pattern-Primer/">Pattern Primer</a>!<br/>
- <img src="lib/img/primer.png" /></p>
- </section>
-
- <section data-state="green">
- <h2>Technology "Stack" & Tips</h2>
- <ul>
- <li class="fragment">Building a website responsively builds on fluid width principles + breakpoints.</li>
- <li class="fragment">Leverage emerging JS/CSS strategies</li>
- </ul>
+
+ <!-- Geoff -->
+ <section data-state="alert">
+ <h3 style="padding-top:3.5em;">Performance</h3>
+ </section>
+ <!-- Geoff -->
+ <section data-state="alert">
+ <h2>Last Month - Gradually scaled up traffic</h3>
+ <img style="border-radius: 5px;" src="lib/img/1mthroughput.png" />
</section>
-
- <section data-state="blackout">
- <img src="lib/img/sass-logo.png" />
- <img src="lib/img/compass-logo.png" />
- <h4>Use SASS + Compass</h4>
- <p>Both invaluable tools for building modern, clean, cross-browser CSS</p>
-
- <div class="links">
- <small><a href="http://compass-style.org/">compass-style.org</a><br />
- <a href="http://sass-lang.com/">sass-lang.com</a></small>
- </div>
- </section>
-
- <section data-state="blackout">
- <h4>Convert pixel widths to percentages with SASS</h4>
- <pre><code class="small" contenteditable>$maxWidth: 1024px; // container width
-.sidebar { percentage(300px/$maxWidth) } // 29.297%</code></pre>
+ <section data-state="alert">
+ <h2>Load increased</h3>
+ <img style="border-radius: 5px;" src="lib/img/1mload.png" />
</section>
-
- <section data-state="blackout">
- <h4>Define your breakpoints as variables</h4>
- <pre><code class="small" contenteditable>$iPhonePortrait: 320px;
-$iPhoneLandscape: 480px;
-$Kindle: 600px;
-$iPadPortrait: 768px;
-$iPadLandscape: 1024px;
-
-@media all and (min-width: $iPadPortrait) and (max-width: $iPadLandscape) {
- // code I want to only apply on these 2 devices
-}
-</code></pre>
- </section>
-
- <section data-state="blackout">
- <h4>Size elements with border-box</h4>
- <pre><code class="small" contenteditable>// import Compass CSS3 libraries
-import 'compass/css3';
-
-* { @include box-sizing(border-box); }</code></pre>
-
-<p><code>border-box</code> sizing allows us size element widths without worrying about padding.</p>
-
-<pre><code class="small" contenteditable>.leftDiv { width: 30%; float: left; padding: 2em; }
- .rightDiv { width: 70%; float: left; padding: 2em; }
-</code></pre>
-
-
- <div class="links">
- <p><small><a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">border-box details</a></small></p>
- </div>
+ <section data-state="alert">
+ <h2>Happy Users?</h3>
+ <img style="border-radius: 5px;" src="lib/img/satis.png" />
</section>
-
- <section data-state="blackout">
- <h4>Use the right meta viewport tag!</h4>
- <pre><code contenteditable>meta name="viewport" content="width=device-width"</code></pre>
-
- <div class="links">
- <p><small><a href="http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html">quirksmode.org reference</a></small></p>
- </div>
- </section>
-
- <section data-state="blackout">
- <h4>Convert pixels to ems with SASS</h4>
- <pre><code contenteditable>// Default font size in pixels if not overridden.
-$baseFontSize: 16;
-
-// Convert PX units to EMs.
-@function pem($pxval, $base: $baseFontSize) {
- @return #{$pxval / $base}em;
-}
-
-.h2 { @include pem(12) } // 12/16 = .75em
-</code></pre>
+ <section data-state="alert">
+ <h2>Comparing to Industry - Server</h3>
+ <img style="border-radius: 5px;" src="lib/img/compare2.png" />
+ </section>
+ <section data-state="alert">
+ <h2>Comparing to Industry - End User</h3>
+ <img style="border-radius: 5px;" src="lib/img/compare1.png" />
+ </section>
+ <!-- Geoff -->
+ <section data-state="soothe">
+ <h3 style="padding-top:3.5em;">Next stop... be <i>really</i> responsive</h3>
+ </section>
+ <section data-state="soothe">
+ <h2>re-envision the desktop</h2>
+ <img style="border-radius: 5px;" src="lib/img/desktop_ss.png" />
</section>
-
- <section data-state="blackout">
- <img src="lib/img/modernizr.png" />
- <h4>Use <a href="http://modernizr.com/">Modernizr</a> to deal with old, crappy phone browsers</h4>
- <h4>Use <a href="https://github.com/scottjehl/Respond/">Respond.js</a> to polyfill media query support for sh*t browsers. </h4>
- </section>
-
- <section data-state="blackout">
- <h4>Use <a href="http://responsejs.com/">Response.js</a> to perform code block swapping, load images based on screen width, and more.</h4>
- <pre><code class="small">&lt;body data-responsejs='{
- "create": [
- { "breakpoints": [0,320,481,641,961,1025,1281], "mode": "src", "prefix": "src" },
- { "breakpoints": [0,320,481,641,961,1025,1281], "mode": "markup", "prefix": "r" }
- ]}'
-&gt;
-</code></pre>
- <pre><code class="small">&lt;img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example"&gt;</code></pre>
- <pre><code class="small">&lt;data-r320="markup @ 320+" data-r961="markup @ 961+"&gt;</code></pre>
- </section>
-
<section>
- <h2>Sweet Testing Tools</h2>
+ <h2>Is responsive design right for me?</h2>
<ul>
- <!-- <li><a href="http://mediaqueri.es/">http://mediaqueri.es/</a></li> -->
- <li><a href="http://labs.adobe.com/technologies/shadow/"><strong>Adobe Shadow</a></strong></li>
- <li><a href="http://www.browserstack.com/"><strong>Browser Stack</strong></a></li>
+ <li class="fragment">Much harder to make an existing project responsive.</li>
+ <li class="fragment">Be prepared to sell it</li>
+ <li class="fragment"><b>A dedicated mobile website could be a better, more efficient solution.</b></li>
+ </ul>
+ </section>
+ <section data-state="blue">
+ <h1>Want more?</h1>
+ <ul>
+ <li>Lots of Tech/Design Sauce - Dome Theatre @ 1pm</li>
+ <li><strong>Dave Ackerman</strong> - <small>Engineer @ <i>Modus Create</i></small> - <a href="http://www.twitter.com/dmackerman">@dmackerman</a></li>
</ul>
+ <img src="lib/img/logos.png" />
</section>
-
- <section data-state="blackout">
- <img src="lib/img/demo.png" />
- <h2>LIVE DEMO</h2>
- </section>
-
</div> <!-- end stories -->
-
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
-
</div>
-
<!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
<script src="lib/js/head.min.js"></script>
-
<script>
// Load the main reveal.js script
head.js( 'js/reveal.js', function() {
View
BIN  lib/img/1mload.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/1mthroughput.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/compare1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/compare2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/desktop_ss.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/mc_logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/page_load.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/pbs_logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/img/satis.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  potential slide images/MobileSiteorAppIG.jpeg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  potential slide images/Screen Shot 2012-09-12 at 2.26.35 PM.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.