BDConf 2013

This year I had the opportunity to present at Breaking Development. I’ve attended twice previously and always come away with more ideas and inspiration than I can feasibly find time to implement.

Hard Rock Hotel, San Diego The conference was held in the Hard Rock Hotel in San Diego. Quite a different venue than the bio-domes of past BD conferences.

My Presentation

The title was “Before the @mq: Making the decisions that make a site responsive”. I essentially demoed how some sites deal with images to increase performance. The first example was the BBC’s mobile site and how it loads images for individual articles. The second was West Virginia University’s carousel. I’d like to thank Tom Maslen of the BBC and Dave Olsen of WVU for their feedback and willingness to answer questions. Lastly, I discussed how we took the inital load of ND.edu and reduced it from over 3 MB to under 400 KB.

Video

Slide Deck

I have only come here seeking knowledge, things they would not teach me of in college. - The Police

I’m not the greatest note-taker by any means, but below are what I have from the other presentations.

Luke Wroblewski

One Design to Rule Them All

  • Sketchnotes by Lane Halley
  • Tablets category as “mobile” is up for interpretation
  • There are smartphones with higher res than tablets
  • Palm/Lap/Desktop categories
  • Most active use is 3-5” phones
  • We no longer know what’s a touch interface
  • Netflix uses “distance from screen” for design decisions

Summary:

  1. Support a continuum of screens
  2. Account for hi-res
  3. Optimize for touch
  4. Support cursor and keyboard

Peter McLachlan

Visit-Speed: Page Speed is Only the Beginning

  • Notes by @LukeW
  • <link rel="dns-prefetch" href="">
  • It’s the only way to beat latency
  • Resources to pre-fetch: DNS, HTML, images, javascript, CSS (especially DNS)
  • Local Storage is faster than browser cache
  • Pre-fetch other resources only after current page is finished
  • Make smart decisions on client side by looking at what people are using/doing
  • CSS/JS are smaller than images and better candidates for pre-fetching

Barbara Bermes

Embracing Performance in Today’s Multi-Platform Macrocosm

  • Notes by @LukeW
  • Comparing mobile to native is like comparing dept store suit to taylored
  • use AMD
  • Each http request costs around 200ms
  • Focus on performance optimization during build

James Williamson

Is Flexbox the Future of Layout?

  • Notes by @LukeW
  • Flexbox allows for horizontal, vertical and baseline alignment
  • Source-order independent
  • Flexbox 2012 syntax is now stable
  • Can use now, but need to use 2009 and 2012 syntax and vendor prefixes
  • When defining a flex container, all direct children and flex items; specify row or column
  • Images as a flex item resolves to zero
  • Don’t overuse it
  • Understand flex-basis
  • Flex item margins DON’T collapse (even vertically)
  • Comment by Paul Irish on Flexbox performance

Divya Manian

Next Generation Layout on the Web

  • Slides
  • Center content vertically with flexbox
  • Widows/Orphans - specify word count; it’s only a recommendation to the browser
  • CSS Regions allow the flow of conent from one element to another
  • shape-inside/shape-outside: create polygon for content

Jason Grigsby

Adaptive Input

  • Notes by @LukeW
  • TV interface: Larger text and fewer words
  • TV interface: Should be a grid (support d-pad interaction)
  • Most js libraries split their desktop and mobile js widgets
  • The web never had a fixed canvas, but we adopted standard sizes anyway
  • Input represents a much bigger challenge than screen size
  • Web speech API works in Chrome
  • moreawesomeweb.com
  • geolocation is a form of input
  • demos of voice input using the Web Speech API bit.ly/15bVSz5 bit.ly/1dQFaY2
  • No hover state on mobile?
  • Pointer events spec normalizes touch and mouse
  • You’re designing for user need not for a specific form factor or input

Cameron Moll

Pitfalls & Triumphs of the Cross-Screen Experience

  • Notes by @LukeW
  • Slides
  • 77% of mobile searches happen at home or work (Google study)
  • 31% of US adults own a tablet
  • Moll’s Law: The best interface is the one that’s within reach
  • Discrete: An experience on one screen independet of, but ideally cohesive with, experiences on other screens
  • Up to 49% email themselves a lik for continuing the activity on another device
  • Don’t stereotype devices or their owners
  • Don’t fall prey to the convenience of device silos
  • Use abstract terms instead of mobile/tablet/desktop silos
  • Respect users’ mental models, aesthetically and functionally
  • Don’t unforgivingly force your app on your users
  • Use vertical media queries if necessary

Eric Bidelman

Web Components: a new way of building web apps

  • Notes by @LukeW
  • Web components allow us to create or own custom tags
  • Can create full apps inside a tag
  • Extend standard elements: is=”mega-button”
  • Encapsulate functionality
  • Building blocks of web components
    • Shadow DOM
      • markup/style encapsulation
      • can inspect shadow dom by enabling it in dev tools
    • HTML Templates
      • Chunks of inert markup for later use
      • <template/>
      • Parsed, not rendered
      • Hidden from document
      • can contain external style sheet links
    • Custom Elements
      • named in x-foo format
      • can contain javascript with callbacks
      • “extends” on standard elements
    • HTML Imports
      • link rel “import” in head then used in html with custom tag
      • Package, distribute, share, reuse
      • Not available in any browser (polyfill availabile)
    • MDV - data binding
  • http://www.polymer-project.org/

Ben Callahan

Prototyping Style

  • Notes by @LukeW
  • Slides
  • Linear process and RWD didn’t play well together
  • A “1 deliverable” workflow is centered on iteration
  • Use tools you are comfortable with to establish teh aesthetic
  • http://froont.com/
  • If you’re designing in the browser, be sure you’re fluent in the medium
  • Group improvisation when building
    • requires individual team members to be great, humble and empathetic
  • If you can’t so “no”, it’s not collaboration
  • Create guidelines instead of rigid processes
  • Invest in people over process

Hampton Catlin

How to Build The Right Thing

  • Notes by @LukeW
  • Quality w/o clear understanding is meaningless
  • Don’t just complain about problems, fix it
  • Take the simplest approach you think will work
  • Solutions only come from problems
  • Whatever is driving you crazy, you’re not the only one
  • Do something cool

Dennis Kardys

Practical UX for Mobile: A Future Friendly Approach to Communicating Your Ideas

  • Notes by @LukeW
  • It’s up to those with the best understanding of the technology to lead the way
  • Comics and storyboards for scenarios
  • Design systems breed modular markup and CSS
  • Pace the conversatin and try to focus on one thing at a time
  • UX is a result, not a document
  • http://robotregime.com/

Sara Wachter-Boettcher

Mobile Content(ment): Turning Disruption into Transformation

  • Notes by @LukeW
  • Business’ are trying to treat web and mobile as an add-on
  • Our new job is playing a “bridge”. Guide people from the old to the new.
  • We spend more time creating walls than bridges
  • Content is a pain, but we can use it to our advantage
  • Choose participation, not just presentation. Include stake-holders and users early in the process.
  • Your site can’t be user-centered if your content is self-centered

Ilya Grigorik

Optimizing the Critical Rendering Path: hard facts and implications

  • Notes by @LukeW
  • Slides
  • 85% of users expect mobile sites to load as fast or faster than desktop sites
  • Speed is a feature
  • Google wants every page to render within 1 second
  • latency is the biggest bottle-neck of the network request
  • 3g will be the dominant network around the world through this decade
  • TCP Slow Start is a feature, not a bug
  • 50% of the 1000ms budget is in network latency overhead
  • Must account for TCP slow start
  • Flush the header first so you can parse html incrementally
  • screen cannot be rendered until dom and css are rectified
    • Rendering is blocked on CSS
    • Get CSS down the client as fast as possible
  • javascript can query (and modify) the DOM
  • load js as async
    • async assures the browser that you’re not going to modify the DOM
  • Goal: render the useful part of the page in one second, not the WHOLE page
  • Inline the above the fold CSS and JS
  • Defer non-critical assets
  • Put all of your critical assets on the same domain
  • Move critical css into document head
  • use Chrome Audits tool