Welcome!

What are we going to talk about?

• Since 2010, we've entered into a new phase in web design and development. The Responsive idea was conceived to solve a problem. Technology always evolves, trends always change. Now websites grow in their ambition and complexity, we are not longer building pages, we are building dynamic and interactive Responsive web applications.

• We are going to share advanced and emerging techniques for improving Responsive applications. Focusing on "The Good Parts", avoiding the classic pitfalls, with the emphasis on latest trends and revealing what RWD really can do for you.

Responsive Web Design:

Case study: RWD images

• "BBC";
• widthDetector.js;
• "FilamentGroup": Picturefill.js;
  • + No server-side components.
  • - Not valid syntax.
  • - media queries
  • - matchmedia
  • - HTML5 Custom Data Attributes (data-*)
  • - Not bandwidth test
• "Washington Post Mobile" Foresight.js hi-res/responsive img
  • + devicePixelRatio
  • + Bandwidth test
• The old Progressive image loading;
• .WebP image format.
  • Demo;
  • Can I use it?;
  • Community recommendation;

Case study: RWD video

• Video (HTML5 video)
  • - external embed videos needs to use <iframe> instead <video>
• Video (iframe + intrinsic ratio)
  • - can't dynamically load external videos because you don't know how the aspect-ratio would be
• Video (iframe + FitVids.js)
  • - embed videos using <iframe> instead <video>
  • + create a wrapper around the iframe to preserve the aspect ratio.

Case study: Performance

• Mobile First development and Mobile First Design
  • Treat Performance As Design
  • Focus only the most important data
• Progressive Enhancement:
  • JS as a feature: js no-js; or hasClass; or clientInformation;
  • Feature detection: Modernizr and has.js
    • Targeting DOM Objects navigator.connection.type; clientInformation; IE10; Chrome27; full list.
    • Targeting JavaScript API matchMedia; or enquire.js ECMAScript5/6; 'use strict'; JSON parsing; (Thanks Douglas Crockford !)
    • Targeting CSS CSS @support; Modernizr + @support;
  • Conditional loading: Yepnope; @media queries image as conditional;
  • Dynamic function loading (Lazy Loading)

"As web creators we need to see performance as design", @elementByIdea

Case study: Testing Tools

• Browser based Testing Tools
  • quirktools
  • responsinator
  • Browserstack RWD
  • Sauce Labs
• Brand Simulators: iOS, Android, Blackberry, etc.
• Testing performance
  • webpagetest
  • mobitest
• Remote debugging: Android. iOS.
• Real devices testing
• Automated Test:
  • Using JasmineJS (Leo Fibonacci example).

Case study: Measure units and pixel perfect on Responsive

• Pixel-perfect tools for RWD;
• Pixel-perfect Vs. Proportion-perfect
• Going beyond simple pixel-width conditions
• Relative length units: vw, vh, px, pt, %, em, rem and fluidflex.js;
• Fluid font without js;

Case study: CSS3 hot topics

• flexbox;
  • Can I use it?
  • Community recommendation?
  • Different versions
    • "Old" Flexbox; and "New" Flexbox;
      • v.2009: display: -prefix-box; or property box-{*}
      • v.2011: display: flexbox; or flex() function
      • v.2012: display: flex; and flex-{*} properties
  • flexbox playground
• box-sizing;
  • Can I use it?
  • Community recommendation?
• :not;

Case study: HTML5 hot topics

• SVG
  • Can I use it?
  • Community recommendation?
• SVG Resolution Independence;
• SVG as background;
• SVG using PNG as fallback;
• SVGZ the compressed SVG format (one-third of the non-compressed version, @stopsatgreen)
• SVG Data URIs Conversion tool
• SVG optimizer {1} {2}
• icons and background for ALL devices: Grunticon
• Embed media queries inside SVG images, @andreasbovens

Case study: HTML5 hot topics

• rely on native support (h5f)
• WAI-ARIA Landmarks (Web Accessibility Initiative Accessible Rich Internet Applications)
  • Can I use it?
• HTML5 Application Cache
  • Can I use it?
  • Community recommendation?
• HTML5 voice recognition.

Case study: Using icon webfonts instead of images

• RWD Fonts
  • font awesome
  • entypo
  • icomoon.io
  • HTML entities
  • Hand made: 'Icon Set'

One more thing...

RWD is not effortless, but it's worth it.

It's requires a lot of effort to create a Future-friendly Web.

Gratitude!

Questions?

• Further questions:
  • @leolaneseltd
  • www.leolanese.com/spainjs/
  • www.leolanese.com/blog/
• My other presentations:
  • Building a Responsive Future-Friendly Web (London, UK)
  • ScotlandJS Conference (Edinburgh, Scotland)
  • JSconf Conference (Buenos Aires, Argentina)
• Special Thanks to:
  • Gilad Maayan, Developer Relations Sauce Labs