SlideShare une entreprise Scribd logo
Responsive Design
L’indispensable révolution des outils et processus
Un projet web typique
Chef de projet
Graphiste / DA
Intégrateur / Dev front
Développeur / Dev back
Un projet web typique
Abstrait
(Phase optimiste)
Wireframe
PSD
Intégration
Développement

Concret
(Phase réaliste)
Inconvénients
Chacun travaille isolément, l’un après l’autre
Le chiffrage se fait souvent à l’aveugle
Plus c’est concret, plus il y a de problèmes
Plus on avance, plus les problèmes coûtent cher
Redesigning Times.com
“Managing more than 200 PSD files is not only tedious, but
it can produce minor discrepancies between comps of the
same page at different breakpoints.”

AppendTo.com
http://appendto.com/case-study/responsive-design-time-com
Refonte du site Times.com
“Manipuler plus de 200 fichiers PSD est non seulement
fastidieux mais risque également d’engendrer des
incohérences mineures entre les maquettes d’une même page
à différentes largeurs d’écran.”

AppendTo.com
Refonte du site Times.com
“Manipuler plus de 200 fichiers PSD est non seulement
Eu des
fastidieux mais risque également d’engendrer ph
ém
ism
incohérences mineures entre les maquettes d’une même page
e
à différentes largeurs d’écran.”

AppendTo.com
Inconvénients du responsive
Pas de Media Queries avant IE9
Nombre de maquettes = écrans x breakpoint
Plus de code, pour tous les clients
Redimensionnement des images par le navigateur
Responsive l'indispensable révolution des outils et processus
Le responsive... Trop compliqué ?
Avec le fonctionnement usuel,
oui
L’indispensable (r)évolution
des processus et des outils

http://bradfrostweb.com/blog/post/this-is-the-web/
Processus
Penser mobile dès le début
www.pompage.net/traduction/mobile-d-abord
Outils
Concevoir dans le navigateur ET Photoshop
Photoshop n’est pas adapté au responsive
Le lissage des polices est différent dans les
navigateurs
Le navigateur permet de tester hover/focus
Les deux outils sont complémentaires
Processus
Le responsive : un processus, pas une option
Travailler en équipe, par itérations
Impliquer le client
Privilégier la régie au forfait
www.pompage.net/traduction/conceptionresponsive-obtenir-validation-sans-maquettes
Processus
Concevoir des guides de style
Ni trop génériques ni trop spécifiques
Rapides à produire
Permettent d’itérer rapidement

http://styleguid.es/
Outils
Déterminer les points de rupture en fonction du
contenu, pas des appareils

http://www.lukew.com/
Outils
Frameworks :
Utiles pour prototyper dans le navigateur
Étudier leur fonctionnement, leur code
Ne prendre que ce dont on a besoin
Outils
Media Queries
Les définir en em : blog.cloudfour.com/theems-have-it-proportional-media-queries-ftw/
CSS sans media queries pour IE<9 :
jakearchibald.github.io/sass-ie/
Définir les dimensions en % pour que le site
s’adapte entre deux points de rupture
Outils
Performances
Limiter les WebFonts sur mobile
Ne charger les grandes images que sur
grand écran
Intégrer les pictos en base-64 (avec compass
par exemple)
Supprimer l’inutile (carrousels...) sur desktop
également
Questions, retours
d’expérience ?

Contenu connexe

Tendances

Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeursWebmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
:ratio
 
Websico dp-fr-7a63
Websico dp-fr-7a63Websico dp-fr-7a63
Websico dp-fr-7a63
charlydeparis
 
La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013
La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013
La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013
IDEM-Normandie
 
Human talks-bootstrap
Human talks-bootstrapHuman talks-bootstrap
Human talks-bootstrap
Mathieu Le Gac
 
Présentation webmaker
Présentation webmakerPrésentation webmaker
Présentation webmaker
flore_mozfr
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
Daniel Roch - SeoMix
 
Coding : Kit de survie pour les futurs entrepreneurs (Session 2)
Coding : Kit de survie pour les futurs entrepreneurs (Session 2)Coding : Kit de survie pour les futurs entrepreneurs (Session 2)
Coding : Kit de survie pour les futurs entrepreneurs (Session 2)
Stéphanie Hertrich
 

Tendances (7)

Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeursWebmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
 
Websico dp-fr-7a63
Websico dp-fr-7a63Websico dp-fr-7a63
Websico dp-fr-7a63
 
La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013
La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013
La formation à distance à la CUC-Cherbourg - Rencontre IDEM du 28 mars 2013
 
Human talks-bootstrap
Human talks-bootstrapHuman talks-bootstrap
Human talks-bootstrap
 
Présentation webmaker
Présentation webmakerPrésentation webmaker
Présentation webmaker
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
Coding : Kit de survie pour les futurs entrepreneurs (Session 2)
Coding : Kit de survie pour les futurs entrepreneurs (Session 2)Coding : Kit de survie pour les futurs entrepreneurs (Session 2)
Coding : Kit de survie pour les futurs entrepreneurs (Session 2)
 

En vedette

Wie finde ich meinen „google drive
Wie finde ich meinen „google driveWie finde ich meinen „google drive
Wie finde ich meinen „google drive
web20virtuelleph
 
Arbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQLArbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQL
Lenz Grimmer
 
Presentacion con fotos 2010 segunda
Presentacion  con fotos 2010 segundaPresentacion  con fotos 2010 segunda
Presentacion con fotos 2010 segunda
DP Málaga
 
Berlin
BerlinBerlin
Berlin
YPEPTH
 
Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...
Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...
Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...
Ivan Meissner
 
Marketing y promoción de la salud
Marketing y promoción de la saludMarketing y promoción de la salud
Marketing y promoción de la salud
Olga Navarro
 
Lettre de Nicolas Sarkozy au peuple Français
Lettre de Nicolas Sarkozy au peuple FrançaisLettre de Nicolas Sarkozy au peuple Français
Lettre de Nicolas Sarkozy au peuple Français
Dominique Dord
 
Luxembourg- une présentation
Luxembourg- une présentationLuxembourg- une présentation
Luxembourg- une présentation
Esther Vieira
 
Permission Marketing et ciblage comportemental
Permission Marketing et ciblage comportementalPermission Marketing et ciblage comportemental
Permission Marketing et ciblage comportemental
PetitMowgli
 
Cd a 3a apresentacao
Cd a 3a apresentacaoCd a 3a apresentacao
Cd a 3a apresentacao
Jnausch
 
Infobörse veranstaltungskalender bis ende des jahres
Infobörse veranstaltungskalender bis ende des jahresInfobörse veranstaltungskalender bis ende des jahres
Infobörse veranstaltungskalender bis ende des jahres
nives mestrovic
 
Primeiras fotos coloridas
Primeiras fotos coloridasPrimeiras fotos coloridas
Primeiras fotos coloridas
Luiza Goes
 
iBeacon : une technologie mobile au secours des ventes en magasins
iBeacon : une technologie mobile au secours des ventes en magasinsiBeacon : une technologie mobile au secours des ventes en magasins
iBeacon : une technologie mobile au secours des ventes en magasins
APOCOPE an Atsukè company (http://www.atsuke.com)
 
Guide pratique bureau_enseignement_decembre_2008
Guide pratique bureau_enseignement_decembre_2008Guide pratique bureau_enseignement_decembre_2008
Guide pratique bureau_enseignement_decembre_2008
guest57927e
 
Et le français dans tout ça #47
Et le français dans tout ça #47Et le français dans tout ça #47
Et le français dans tout ça #47
Florence Augustine
 
La Fermentation Alcoolique
La Fermentation AlcooliqueLa Fermentation Alcoolique
La Fermentation Alcoolique
jeanpyXD
 
U1 tema 4 teoría del conocimiento
U1   tema 4 teoría del conocimientoU1   tema 4 teoría del conocimiento
U1 tema 4 teoría del conocimiento
Jean Vaudenay
 
Sous le radar
Sous le radarSous le radar
Sous le radar
Andre Gunthert
 
Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0
Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0
Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0
APOCOPE an Atsukè company (http://www.atsuke.com)
 

En vedette (20)

Wie finde ich meinen „google drive
Wie finde ich meinen „google driveWie finde ich meinen „google drive
Wie finde ich meinen „google drive
 
Arbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQLArbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQL
 
Presentacion con fotos 2010 segunda
Presentacion  con fotos 2010 segundaPresentacion  con fotos 2010 segunda
Presentacion con fotos 2010 segunda
 
Hungria
HungriaHungria
Hungria
 
Berlin
BerlinBerlin
Berlin
 
Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...
Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...
Qualimatest - Die automatische Qualitätskontrolle bei der spanenden Metallver...
 
Marketing y promoción de la salud
Marketing y promoción de la saludMarketing y promoción de la salud
Marketing y promoción de la salud
 
Lettre de Nicolas Sarkozy au peuple Français
Lettre de Nicolas Sarkozy au peuple FrançaisLettre de Nicolas Sarkozy au peuple Français
Lettre de Nicolas Sarkozy au peuple Français
 
Luxembourg- une présentation
Luxembourg- une présentationLuxembourg- une présentation
Luxembourg- une présentation
 
Permission Marketing et ciblage comportemental
Permission Marketing et ciblage comportementalPermission Marketing et ciblage comportemental
Permission Marketing et ciblage comportemental
 
Cd a 3a apresentacao
Cd a 3a apresentacaoCd a 3a apresentacao
Cd a 3a apresentacao
 
Infobörse veranstaltungskalender bis ende des jahres
Infobörse veranstaltungskalender bis ende des jahresInfobörse veranstaltungskalender bis ende des jahres
Infobörse veranstaltungskalender bis ende des jahres
 
Primeiras fotos coloridas
Primeiras fotos coloridasPrimeiras fotos coloridas
Primeiras fotos coloridas
 
iBeacon : une technologie mobile au secours des ventes en magasins
iBeacon : une technologie mobile au secours des ventes en magasinsiBeacon : une technologie mobile au secours des ventes en magasins
iBeacon : une technologie mobile au secours des ventes en magasins
 
Guide pratique bureau_enseignement_decembre_2008
Guide pratique bureau_enseignement_decembre_2008Guide pratique bureau_enseignement_decembre_2008
Guide pratique bureau_enseignement_decembre_2008
 
Et le français dans tout ça #47
Et le français dans tout ça #47Et le français dans tout ça #47
Et le français dans tout ça #47
 
La Fermentation Alcoolique
La Fermentation AlcooliqueLa Fermentation Alcoolique
La Fermentation Alcoolique
 
U1 tema 4 teoría del conocimiento
U1   tema 4 teoría del conocimientoU1   tema 4 teoría del conocimiento
U1 tema 4 teoría del conocimiento
 
Sous le radar
Sous le radarSous le radar
Sous le radar
 
Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0
Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0
Les tests utilisateurs avec TestFlight d'Apple sous iOS8.0
 

Similaire à Responsive l'indispensable révolution des outils et processus

Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
atelier111
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
SOAT
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
AleskaVargas2
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Mohammed JAITI
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
Olivier Dommange
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
Groupe Neper
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
Philippe YONNET
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
YounesOuladSayad1
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
Arnaud Héritier
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
Greg Hoin
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
Olivier Dommange
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
YounesOuladSayad1
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
FullSIX Group
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
dev et admin sys : une cohabitation simplifiée
dev et admin sys : une cohabitation simplifiéedev et admin sys : une cohabitation simplifiée
dev et admin sys : une cohabitation simplifiée
Nicolas Silberman
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
Emmanuel Hugonnet
 

Similaire à Responsive l'indispensable révolution des outils et processus (20)

Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
GestionAIR
GestionAIRGestionAIR
GestionAIR
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
dev et admin sys : une cohabitation simplifiée
dev et admin sys : une cohabitation simplifiéedev et admin sys : une cohabitation simplifiée
dev et admin sys : une cohabitation simplifiée
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
 

Plus de Goulven Champenois

Du code… génétique - Forum beta.gouv juin 2024
Du code… génétique - Forum beta.gouv juin 2024Du code… génétique - Forum beta.gouv juin 2024
Du code… génétique - Forum beta.gouv juin 2024
Goulven Champenois
 
TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
Goulven Champenois
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)
Goulven Champenois
 
Objectif : zéro déchet
Objectif : zéro déchetObjectif : zéro déchet
Objectif : zéro déchet
Goulven Champenois
 
Attention Déchets
Attention DéchetsAttention Déchets
Attention Déchets
Goulven Champenois
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?
Goulven Champenois
 
UX et santé
UX et santéUX et santé
UX et santé
Goulven Champenois
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !
Goulven Champenois
 
Pour un Web inclusif
Pour un Web inclusifPour un Web inclusif
Pour un Web inclusif
Goulven Champenois
 
Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)
Goulven Champenois
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016
Goulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
Goulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
Goulven Champenois
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masques
Goulven Champenois
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
Goulven Champenois
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention danger
Goulven Champenois
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)
Goulven Champenois
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Goulven Champenois
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniques
Goulven Champenois
 

Plus de Goulven Champenois (19)

Du code… génétique - Forum beta.gouv juin 2024
Du code… génétique - Forum beta.gouv juin 2024Du code… génétique - Forum beta.gouv juin 2024
Du code… génétique - Forum beta.gouv juin 2024
 
TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)
 
Objectif : zéro déchet
Objectif : zéro déchetObjectif : zéro déchet
Objectif : zéro déchet
 
Attention Déchets
Attention DéchetsAttention Déchets
Attention Déchets
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?
 
UX et santé
UX et santéUX et santé
UX et santé
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !
 
Pour un Web inclusif
Pour un Web inclusifPour un Web inclusif
Pour un Web inclusif
 
Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masques
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention danger
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniques
 

Responsive l'indispensable révolution des outils et processus

  • 2. Un projet web typique Chef de projet Graphiste / DA Intégrateur / Dev front Développeur / Dev back
  • 3. Un projet web typique Abstrait (Phase optimiste) Wireframe PSD Intégration Développement Concret (Phase réaliste)
  • 4. Inconvénients Chacun travaille isolément, l’un après l’autre Le chiffrage se fait souvent à l’aveugle Plus c’est concret, plus il y a de problèmes Plus on avance, plus les problèmes coûtent cher
  • 5. Redesigning Times.com “Managing more than 200 PSD files is not only tedious, but it can produce minor discrepancies between comps of the same page at different breakpoints.” AppendTo.com http://appendto.com/case-study/responsive-design-time-com
  • 6. Refonte du site Times.com “Manipuler plus de 200 fichiers PSD est non seulement fastidieux mais risque également d’engendrer des incohérences mineures entre les maquettes d’une même page à différentes largeurs d’écran.” AppendTo.com
  • 7. Refonte du site Times.com “Manipuler plus de 200 fichiers PSD est non seulement Eu des fastidieux mais risque également d’engendrer ph ém ism incohérences mineures entre les maquettes d’une même page e à différentes largeurs d’écran.” AppendTo.com
  • 8. Inconvénients du responsive Pas de Media Queries avant IE9 Nombre de maquettes = écrans x breakpoint Plus de code, pour tous les clients Redimensionnement des images par le navigateur
  • 10. Le responsive... Trop compliqué ? Avec le fonctionnement usuel, oui
  • 11. L’indispensable (r)évolution des processus et des outils http://bradfrostweb.com/blog/post/this-is-the-web/
  • 12. Processus Penser mobile dès le début www.pompage.net/traduction/mobile-d-abord
  • 13. Outils Concevoir dans le navigateur ET Photoshop Photoshop n’est pas adapté au responsive Le lissage des polices est différent dans les navigateurs Le navigateur permet de tester hover/focus Les deux outils sont complémentaires
  • 14. Processus Le responsive : un processus, pas une option Travailler en équipe, par itérations Impliquer le client Privilégier la régie au forfait www.pompage.net/traduction/conceptionresponsive-obtenir-validation-sans-maquettes
  • 15. Processus Concevoir des guides de style Ni trop génériques ni trop spécifiques Rapides à produire Permettent d’itérer rapidement http://styleguid.es/
  • 16. Outils Déterminer les points de rupture en fonction du contenu, pas des appareils http://www.lukew.com/
  • 17. Outils Frameworks : Utiles pour prototyper dans le navigateur Étudier leur fonctionnement, leur code Ne prendre que ce dont on a besoin
  • 18. Outils Media Queries Les définir en em : blog.cloudfour.com/theems-have-it-proportional-media-queries-ftw/ CSS sans media queries pour IE<9 : jakearchibald.github.io/sass-ie/ Définir les dimensions en % pour que le site s’adapte entre deux points de rupture
  • 19. Outils Performances Limiter les WebFonts sur mobile Ne charger les grandes images que sur grand écran Intégrer les pictos en base-64 (avec compass par exemple) Supprimer l’inutile (carrousels...) sur desktop également