Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web

Responsive Web

My talk about Responsive Design at Fred Meetup, Geneva June 6th

Avatar for Sébastien Dussaut

Sébastien Dussaut

June 06, 2013
Tweet

Other Decks in Programming

Transcript

  1. http://www.flickr.com/photos/mroach/3922903520 Responsive design donne la capacité à un contenu de

    s’adapter au medium sur lequel il est consulté. http://www.flickr.com/photos/mroach/3922903520/ samedi 8 juin 13
  2. http://www.flickr.com/photos/ frankieclarke/3184140616/ Responsive design regroupe un ensemble d’outils et techniques

    : • CSS Media Queries • gestion des images • chargement différé des scripts • amélioration progressive samedi 8 juin 13
  3. http://www.flickr.com/photos/mroach/3922903520 Démarche active • éditorial • UI et UX •

    contextes • adaptations http://www.flickr.com/photos/ marcocrupivisualartist/5427768743/ samedi 8 juin 13
  4. http://www.flickr.com/photos/mroach/3922903520 http://www.flickr.com/photos/marcocrupi visualartist/5427768743 En moyenne, jusqu’à 30 à 40% plus

    cher qu’un site non-responsive http://www.flickr.com/photos/captainredstorm/5894912614/ samedi 8 juin 13
  5. • habitudes de travail qui évoluent • impact positif sur

    les développements http://www.flickr.com/photos/meladegypsie/789054974/ samedi 8 juin 13
  6. Gestion des images - switch-company.com • servir des images HD

    // loading HD medias @media (min-resolution: 144dpi) { @import "2x.css"; } samedi 8 juin 13
  7. Gestion des images - switch-company.com • pictogrammes via une police

    de caractères li:before { color: #53565a; content: "m"; // map picto font-family: "SwitchIcons"; font-size: 18px; } samedi 8 juin 13
  8. Gestion des images - switch-company.com • forte compression JPG +

    redimensionnement • dimensions x 1,5 - 2 • compression 30% - 40% samedi 8 juin 13
  9. Gestion des scripts - francine.fr • forte modularisation • séparation

    scripts mobiles / desktop • 2 builds de la bibliothèque principale enderjs samedi 8 juin 13
  10. Gestion des scripts - francine.fr • mise en cache dans

    le localStorage • lazy loading • chargement au besoin Francine.files = [ lib, // main library '/medias/js/francine.js', // common scripts '/medias/js/forms.js', // forms script '/medias/js/autocomplete.js', // autocomplete script // main scripts ]; samedi 8 juin 13