Design best practice for a re-usable CSS - your front devs will say thanks

Responsive Webdesign: not as simple as they are trying to make you think it is.

Responsive Web Design...


This is just the begining

"Real life" projects tend to get more messy

The Image Nightmare

- How can something as simple get so complicated ? -


The “fluid image technique”


The High Density Nightmare

"Why are my images so blurry on the iPad3 retina super device ?!"

What about small screen ?

  • Double the size, double the weight
  • Extra set of images for small screens?
  • What about retina mobiles? Tablets?

Is “shrinking” the right image strategy?

"Hacky" technical solutions

  • JavaScript to detect screensize and conditionnaly load images : Zurb Interchange
  • CSS media queries to target screen size and density
  • Server Side language to serve a shrinked version the image

A more "future proof" solution : 2 image formats

<picture> versus <img srcset=" " >

Towards a pixel independent web

CSS3 effects to the rescue

Towards a pixel independent web

Pixel independant format like SVG

Towards a pixel independent web

Font-icon for UI icons

One Step Further

- Embedding third part content -


Websites are not only composed of our client’s content anymore

Iframes, when things get messy

  • Lack of flexibility: fixed width/height
  • Loses ratio when resized
  • No control on what is loaded
  • No control on how it looks

"Hack" videos into something flexible

A container and some CSS to “fixe” a ratio when it resizes

Shrinking is not always the best solution

So what can we do?

We need better APIs

Responsive Navigation

- How do we deal with that one? -


Better information architecture

  • Keep it simple
  • Links inside the text
  • Contextual links at the end

Sticky navigation or not?

The sky is the limit

  • No “perfect” solution
  • Go and get inspiration

On Responsive Forms

- How can we enhance them ? -


Using native standard elements

Using HTML5 form elements to enhance user experience

Beyond mobile forms inputs

Geolocation API

Again, just the tip of the iceberg

Using Touch Capabilities for a Better Experience

- Embrace the medium -


Compensate for lack of “hover” state

Embrace the medium instead of fighting it

Use “common” gestures to enhance experience

Let the content become the interface

Think about hybrids, and devices that don't exist yet !

Rethinking The Way We Generate Content


Because in the end we won’t be the ones to fill our nice responsive web sites, but our clients.

Re-usable well written structured content

  • Well written structured “re-usable blocks”
  • Meta data: to help identify content

Change of mentality and process

  • Content and presentation should be independent
  • End of the “write in Word and copy/paste into the CMS”

We need better content management tools

  • Kill the “one big text area” and single image
  • WYSIWYG that are holding us back
  • Don't fear the tool and communicate

It was a long journey ...

Today is a nice day to start getting ready don’t you think ?

And it's just getting started

Merci beaucoup :)