BIEN DÉMARRER AVEC LERESPONSIVE WEBDESIGN   Paris Web 2012 / samedi 20 octobre          Grégoire Hoin @gregone            ...
1RESPONSIVE WEB DESIGN        WTF ?
BIENVENUE EN 2012 !
THANK YOU M. MARCOTTE
Aller plus loin
The Boston Globehttp://bostonglobe.com
dConstructhttp://2012.dconstruct.org/
2RWD = ADAPTÉ POURTOUS LES PROJETS?
RWD VS. NATIF
• Plateformes multiples: iOS, Android, Window Phone, ...• Besoins de fonctionnalités Natives, puissance de calcul?• Suppor...
RWD VS. SITE MOBILE
• UA sniffing• Structure des URL• Split du focus technologique• Split du focus utilisateur
?WEBVIEW OU SITE MOBILE:VOUS UTILISEZ AUSSI DES TECHNIQUES SIMILAIRES
3IMPLICATIONS DANS LA  GESTION DE PROJET
Soyez prêts à changerd’habitudes.Ne vous reposez pas sur vosacquis.
Nos méthodes ne sont plustoutes adaptées.C’est l’occasion de les faireévoluer.
L’expertise en Responsiven’existe pas (encore).Ré-apprenons, tous ensemble.
#FAILApprenez par l’erreur(et celles des autres).Soyez prêts à travailler un peuplus au début.
4CONTENU & PRIORITÉS
“ Si votre design fonctionnepour les extrêmes, lentre-deuxsera déjà résolu                ”-Tom Kelley (IDEO)
Avec l’augmentation des taillesd’écrans, et les layouts fixes,nous nous sommes habitués àremplir.
Allez à l’essentiel.Les variations de tailles vontvous aider à forcer les choix.           Valable aussi auprès des clients
Exemple :
5IA & UX
DESIGN ≠ PSD ≠ WIREFRAME
L’experience que l’on conçoit,c’est le site web que l’utilisateurfinal voit et utilise.
Préparez vous à changer vosdélivrables...
Prototypez en HTML/CSSsi possible.
Si vous faites des wireframesstatiques, prévisualisez au moinsles extrêmes.
Passez du mockup au HTML/CSS plus tôt dans le process.
Ou designez dans le browser
?WEB APP OU GROS PROJET ?      STYLEGUIDE !
SMACSS ( & OOCSS, ...)
FRAMEWORK CSS + GRILLE FLUIDE
6C’EST L’HISTOIRE DE DEUX        SITES WEB
MARS 20111er gros projet RWD
• Design “Desktop-First”• Grilles Fixes• Media Queries par TYPE de device• Media Queries “Desktop First” (320,480, 768, 10...
Food Drink Europehttp://fooddrinkeurope.com/
• LOURD!• Process très long• Beaucoup de bugs• Pas très maintenable
JUIN 2012Même client, nouveau projet RWD
• Design hybride: 1 comp > browser• Mobile-first• Grille fluide• Media queries liées aux éléments dedesign.
Sustainability - Food Drink Europehttp://sustainability.fooddrinkeurope.eu/
• Incassable• Léger, performance• Délais beaucoup plus courts• Client très satisfait.
7PARLONS BUDGET
Plus cher qu’un projettraditionnel.
Mais :•Avantage par rapport à unecombinaison site desktop + site mobile•Avantage vs. Apps Natives multiples•Economies d’éc...
EN PRATIQUE !
8PROTOTYPONS DANS LE    NAVIGATEUR
Outils :•BoilerPlate + Framework CSS http://www.initializr.com/ http://twitter.github.com/bootstrap/ http://foundation.zur...
9CODONS UN SITE EN RWD
Outils :•Un éditeur de texte évolué
MERCI @gregone @exibit spade.be
Bien Démarrer avec le Responsive Web Design
Prochain SlideShare
Chargement dans…5
×

Bien Démarrer avec le Responsive Web Design

1 639 vues

Publié le

[FR] Les slides de notre atelier à Paris Web 2012

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 639
Sur SlideShare
0
Issues des intégrations
0
Intégrations
23
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Bien Démarrer avec le Responsive Web Design

  1. 1. BIEN DÉMARRER AVEC LERESPONSIVE WEBDESIGN Paris Web 2012 / samedi 20 octobre Grégoire Hoin @gregone Benoît Vrins @exibit
  2. 2. 1RESPONSIVE WEB DESIGN WTF ?
  3. 3. BIENVENUE EN 2012 !
  4. 4. THANK YOU M. MARCOTTE
  5. 5. Aller plus loin
  6. 6. The Boston Globehttp://bostonglobe.com
  7. 7. dConstructhttp://2012.dconstruct.org/
  8. 8. 2RWD = ADAPTÉ POURTOUS LES PROJETS?
  9. 9. RWD VS. NATIF
  10. 10. • Plateformes multiples: iOS, Android, Window Phone, ...• Besoins de fonctionnalités Natives, puissance de calcul?• Support et Evolution• Positionnement et Marketing sur l’AppStore
  11. 11. RWD VS. SITE MOBILE
  12. 12. • UA sniffing• Structure des URL• Split du focus technologique• Split du focus utilisateur
  13. 13. ?WEBVIEW OU SITE MOBILE:VOUS UTILISEZ AUSSI DES TECHNIQUES SIMILAIRES
  14. 14. 3IMPLICATIONS DANS LA GESTION DE PROJET
  15. 15. Soyez prêts à changerd’habitudes.Ne vous reposez pas sur vosacquis.
  16. 16. Nos méthodes ne sont plustoutes adaptées.C’est l’occasion de les faireévoluer.
  17. 17. L’expertise en Responsiven’existe pas (encore).Ré-apprenons, tous ensemble.
  18. 18. #FAILApprenez par l’erreur(et celles des autres).Soyez prêts à travailler un peuplus au début.
  19. 19. 4CONTENU & PRIORITÉS
  20. 20. “ Si votre design fonctionnepour les extrêmes, lentre-deuxsera déjà résolu ”-Tom Kelley (IDEO)
  21. 21. Avec l’augmentation des taillesd’écrans, et les layouts fixes,nous nous sommes habitués àremplir.
  22. 22. Allez à l’essentiel.Les variations de tailles vontvous aider à forcer les choix. Valable aussi auprès des clients
  23. 23. Exemple :
  24. 24. 5IA & UX
  25. 25. DESIGN ≠ PSD ≠ WIREFRAME
  26. 26. L’experience que l’on conçoit,c’est le site web que l’utilisateurfinal voit et utilise.
  27. 27. Préparez vous à changer vosdélivrables...
  28. 28. Prototypez en HTML/CSSsi possible.
  29. 29. Si vous faites des wireframesstatiques, prévisualisez au moinsles extrêmes.
  30. 30. Passez du mockup au HTML/CSS plus tôt dans le process.
  31. 31. Ou designez dans le browser
  32. 32. ?WEB APP OU GROS PROJET ? STYLEGUIDE !
  33. 33. SMACSS ( & OOCSS, ...)
  34. 34. FRAMEWORK CSS + GRILLE FLUIDE
  35. 35. 6C’EST L’HISTOIRE DE DEUX SITES WEB
  36. 36. MARS 20111er gros projet RWD
  37. 37. • Design “Desktop-First”• Grilles Fixes• Media Queries par TYPE de device• Media Queries “Desktop First” (320,480, 768, 1024, 1280)
  38. 38. Food Drink Europehttp://fooddrinkeurope.com/
  39. 39. • LOURD!• Process très long• Beaucoup de bugs• Pas très maintenable
  40. 40. JUIN 2012Même client, nouveau projet RWD
  41. 41. • Design hybride: 1 comp > browser• Mobile-first• Grille fluide• Media queries liées aux éléments dedesign.
  42. 42. Sustainability - Food Drink Europehttp://sustainability.fooddrinkeurope.eu/
  43. 43. • Incassable• Léger, performance• Délais beaucoup plus courts• Client très satisfait.
  44. 44. 7PARLONS BUDGET
  45. 45. Plus cher qu’un projettraditionnel.
  46. 46. Mais :•Avantage par rapport à unecombinaison site desktop + site mobile•Avantage vs. Apps Natives multiples•Economies d’échelle en terme depublication de contenu
  47. 47. EN PRATIQUE !
  48. 48. 8PROTOTYPONS DANS LE NAVIGATEUR
  49. 49. Outils :•BoilerPlate + Framework CSS http://www.initializr.com/ http://twitter.github.com/bootstrap/ http://foundation.zurb.com/•Un éditeur de texte évolué
  50. 50. 9CODONS UN SITE EN RWD
  51. 51. Outils :•Un éditeur de texte évolué
  52. 52. MERCI @gregone @exibit spade.be

×