Responsive Web

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

Transcript

1. Responsive Web Meetup Genève 6 juin 2013 - Nomades Advanced Technologies samedi 8 juin 13
2. l’agence front-end Développement front-end Responsive design switch-company.com samedi 8 juin 13
3. 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
4. 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
5. 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
6. 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
7. http://www.flickr.com/photos/ mrjones4u/8648147077/ Plus petit dénominateur commun ? samedi 8 juin 13
8. http://www.flickr.com/photos/ mrjones4u/8648147077/ Adaptabilité du contenu Media Queries samedi 8 juin 13
9. http://www.flickr.com/photos/ mrjones4u/8648147077/ Plus petit dénominateur commun : • Media Queries • Gestion des images samedi 8 juin 13
10. • habitudes de travail qui évoluent • impact positif sur les développements http://www.flickr.com/photos/meladegypsie/789054974/ samedi 8 juin 13
11. http://www.flickr.com/photos/ neilgundel/1700936372/ Chaque projet est unique… samedi 8 juin 13
12. http://www.flickr.com/photos/ xden/3598769929/ … et a ses propres besoins, contraintes et possibilités samedi 8 juin 13
13. Gradation • site • terminaux • budget • temps http://www.flickr.com/photos/ johnidis/8641860140/ samedi 8 juin 13
14. Gestion des images - switch-company.com • 4 approches différentes samedi 8 juin 13
15. Gestion des images - switch-company.com • servir des images HD // loading HD medias @media (min-resolution: 144dpi) { @import "2x.css"; } samedi 8 juin 13
16. Gestion des images - switch-company.com • images de décoration en sprite + via Javascript samedi 8 juin 13
17. 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
18. Gestion des images - switch-company.com • forte compression JPG + redimensionnement • dimensions x 1,5 - 2 • compression 30% - 40% samedi 8 juin 13
19. Gestion des scripts - francine.fr • 2 approches distinctes samedi 8 juin 13
20. Gestion des scripts - francine.fr • forte modularisation • séparation scripts mobiles / desktop • 2 builds de la bibliothèque principale enderjs samedi 8 juin 13
21. 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
22. Merci pour votre attention ! • Twitter : @sdussaut @switch_company • switch-company.com samedi 8 juin 13