SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Downloaden Sie, um offline zu lesen
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
La Conception Web
dans le Navigateur
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Global Warning
● Budget First et Client Centric
● Pas de prototypage
● Un .psd par device
● Validation de maquettes .jpg
● Multiplication des documents de travail
● Bricolage perpétuel
● Course aux délais
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Cycle de Développement
● Content First
● Tests utilisateurs
● Wireframe = Première itération
● Mobile first puis Responsive
● Maquette graphique avec interactions !
● États de survol, Erreurs sur un formulaire...
● Codeur ET Designer (Style Tiles, Style Guide)
● Développement back en parallèle
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Conception dans
l'Écosystème
● Adaptation du site à son environnement
● CMS
● Framework
● Pré-processeur CSS
● Moteur de template
● Déploiement rapide
● Fonctionnel tôt
● Contenus tôt
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Une Équipe en Symbiose
● Tous les métiers participent à la conception
● Et communiquent
● Process non linéaire, Itérations
● Git everywhere
● Une URL par version
● pour Équipe, Client et Utilisateurs
● Flat organization
● Inconvénient : équipe intégrée ?
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Développement Durable
● Recyclage des éléments produits
● Rien n'est produit en double
● Rien n'est jeté
● Maquettes évoluent en livrables finaux
● Gains de temps pour la qualité
● Contenus, Standards, Accessibilité,
Performance, Référencement, Sémantique,
Qualité du code...
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Ressources Naturelles
● Conception responsive : obtenir une
validation sans maquettes
●
Par Matt Griffin traduit sur Pompage
● Stop Designing Pages
● Par Tom Bamford publié sur Github
● HTML Wireframes
● Par Brad Frost sur son blog
Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net
Merci à tous

Weitere ähnliche Inhalte

Andere mochten auch

Rafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º A
Rafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º ARafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º A
Rafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º Aanaisruiz
 
Rewics2012 mobile-strategy-cirb
Rewics2012 mobile-strategy-cirbRewics2012 mobile-strategy-cirb
Rewics2012 mobile-strategy-cirbCIRB_CIBG
 
La tour infernale_de_las_vegas_j_l_j1
La tour infernale_de_las_vegas_j_l_j1La tour infernale_de_las_vegas_j_l_j1
La tour infernale_de_las_vegas_j_l_j1Dominique Pongi
 
IAUF L'écosystème créatif en Ile de France, 2013
IAUF L'écosystème créatif en Ile de France, 2013IAUF L'écosystème créatif en Ile de France, 2013
IAUF L'écosystème créatif en Ile de France, 2013Daniel Dufourt
 
TELEVISION DIGITAL TDT
TELEVISION DIGITAL TDTTELEVISION DIGITAL TDT
TELEVISION DIGITAL TDTrommeloswaldo
 
célébration de l'an Tamoul au MOCA
célébration de l'an Tamoul au MOCAcélébration de l'an Tamoul au MOCA
célébration de l'an Tamoul au MOCAaureliepandion
 
Estrategias para indagar sobre los conocimientos previos
Estrategias para indagar sobre los conocimientos previosEstrategias para indagar sobre los conocimientos previos
Estrategias para indagar sobre los conocimientos previospelabarba2015
 
PréSentation Take Off
PréSentation Take OffPréSentation Take Off
PréSentation Take OffBruno PANTET
 
Revue de presse_7_presidentielles_sante_hospimedia_sante
Revue de presse_7_presidentielles_sante_hospimedia_santeRevue de presse_7_presidentielles_sante_hospimedia_sante
Revue de presse_7_presidentielles_sante_hospimedia_santeHospimedia
 
Jose humberto rellenado
Jose humberto rellenadoJose humberto rellenado
Jose humberto rellenadoyrebra
 
Sanchez pietat presentació_competic2
Sanchez pietat presentació_competic2Sanchez pietat presentació_competic2
Sanchez pietat presentació_competic2relaciones1
 
Evaluación de la clase de educación física
Evaluación de la clase de educación físicaEvaluación de la clase de educación física
Evaluación de la clase de educación físicadulce140288
 

Andere mochten auch (20)

Rafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º A
Rafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º ARafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º A
Rafael Rey, Alvaro Núñez, Alberto Velasco et Jose Manuel Moreno. 1º A
 
Rewics2012 mobile-strategy-cirb
Rewics2012 mobile-strategy-cirbRewics2012 mobile-strategy-cirb
Rewics2012 mobile-strategy-cirb
 
E82 y-jp.--ail rose
E82 y-jp.--ail roseE82 y-jp.--ail rose
E82 y-jp.--ail rose
 
La tour infernale_de_las_vegas_j_l_j1
La tour infernale_de_las_vegas_j_l_j1La tour infernale_de_las_vegas_j_l_j1
La tour infernale_de_las_vegas_j_l_j1
 
IAUF L'écosystème créatif en Ile de France, 2013
IAUF L'écosystème créatif en Ile de France, 2013IAUF L'écosystème créatif en Ile de France, 2013
IAUF L'écosystème créatif en Ile de France, 2013
 
TELEVISION DIGITAL TDT
TELEVISION DIGITAL TDTTELEVISION DIGITAL TDT
TELEVISION DIGITAL TDT
 
Les principales données géospatiales au Centre GéoStat - GMT-7009 Géomatique...
Les principales données géospatiales au  Centre GéoStat - GMT-7009 Géomatique...Les principales données géospatiales au  Centre GéoStat - GMT-7009 Géomatique...
Les principales données géospatiales au Centre GéoStat - GMT-7009 Géomatique...
 
célébration de l'an Tamoul au MOCA
célébration de l'an Tamoul au MOCAcélébration de l'an Tamoul au MOCA
célébration de l'an Tamoul au MOCA
 
As tu connu2
As tu connu2As tu connu2
As tu connu2
 
23 presidents
23 presidents23 presidents
23 presidents
 
Boite a outils
Boite a outilsBoite a outils
Boite a outils
 
Estrategias para indagar sobre los conocimientos previos
Estrategias para indagar sobre los conocimientos previosEstrategias para indagar sobre los conocimientos previos
Estrategias para indagar sobre los conocimientos previos
 
Lujan
LujanLujan
Lujan
 
PréSentation Take Off
PréSentation Take OffPréSentation Take Off
PréSentation Take Off
 
Revue de presse_7_presidentielles_sante_hospimedia_sante
Revue de presse_7_presidentielles_sante_hospimedia_santeRevue de presse_7_presidentielles_sante_hospimedia_sante
Revue de presse_7_presidentielles_sante_hospimedia_sante
 
Malas jugadas
Malas jugadasMalas jugadas
Malas jugadas
 
Jose humberto rellenado
Jose humberto rellenadoJose humberto rellenado
Jose humberto rellenado
 
Sanchez pietat presentació_competic2
Sanchez pietat presentació_competic2Sanchez pietat presentació_competic2
Sanchez pietat presentació_competic2
 
Evaluación de la clase de educación física
Evaluación de la clase de educación físicaEvaluación de la clase de educación física
Evaluación de la clase de educación física
 
Seguro De Vehiculo Barato
Seguro De Vehiculo Barato
Seguro De Vehiculo Barato
Seguro De Vehiculo Barato
 

Mehr von Normandie Web Xperts

#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...Normandie Web Xperts
 
#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 OfflineNormandie Web Xperts
 
#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHPNormandie Web Xperts
 
#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API FormNormandie Web Xperts
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le webNormandie Web Xperts
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le webNormandie Web Xperts
 
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdJulien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdNormandie Web Xperts
 
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Normandie Web Xperts
 
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Normandie Web Xperts
 
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIIConférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIINormandie Web Xperts
 
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Normandie Web Xperts
 
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousConférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousNormandie Web Xperts
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webNormandie Web Xperts
 
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Normandie Web Xperts
 
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierConférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierNormandie Web Xperts
 
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonConférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonNormandie Web Xperts
 
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Normandie Web Xperts
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherNormandie Web Xperts
 
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetConférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetNormandie Web Xperts
 

Mehr von Normandie Web Xperts (20)

#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
 
#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline
 
#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP
 
#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
 
FlexRox
FlexRoxFlexRox
FlexRox
 
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdJulien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
 
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
 
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
 
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIIConférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
 
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
 
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousConférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
 
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
 
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierConférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
 
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonConférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
 
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
 
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetConférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
 

Conférence #nwx2014 - Alexandre Ronsaut - La conception dans le navigateur

  • 1. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net La Conception Web dans le Navigateur
  • 2. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Global Warning ● Budget First et Client Centric ● Pas de prototypage ● Un .psd par device ● Validation de maquettes .jpg ● Multiplication des documents de travail ● Bricolage perpétuel ● Course aux délais
  • 3. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Cycle de Développement ● Content First ● Tests utilisateurs ● Wireframe = Première itération ● Mobile first puis Responsive ● Maquette graphique avec interactions ! ● États de survol, Erreurs sur un formulaire... ● Codeur ET Designer (Style Tiles, Style Guide) ● Développement back en parallèle
  • 4. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Conception dans l'Écosystème ● Adaptation du site à son environnement ● CMS ● Framework ● Pré-processeur CSS ● Moteur de template ● Déploiement rapide ● Fonctionnel tôt ● Contenus tôt
  • 5. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Une Équipe en Symbiose ● Tous les métiers participent à la conception ● Et communiquent ● Process non linéaire, Itérations ● Git everywhere ● Une URL par version ● pour Équipe, Client et Utilisateurs ● Flat organization ● Inconvénient : équipe intégrée ?
  • 6. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Développement Durable ● Recyclage des éléments produits ● Rien n'est produit en double ● Rien n'est jeté ● Maquettes évoluent en livrables finaux ● Gains de temps pour la qualité ● Contenus, Standards, Accessibilité, Performance, Référencement, Sémantique, Qualité du code...
  • 7. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Ressources Naturelles ● Conception responsive : obtenir une validation sans maquettes ● Par Matt Griffin traduit sur Pompage ● Stop Designing Pages ● Par Tom Bamford publié sur Github ● HTML Wireframes ● Par Brad Frost sur son blog
  • 8. Alexandre Ronsaut – ApolloNet – http://apollonet.fr - @Apollo_Net Merci à tous