RESPONSIVE WEBDESIGN   BEST PRACTICES    FEWEB / mardi 5 mars 2013       Grégoire Hoin @gregone         Benoît Vrins @exibit
1Il nest pas de vent favorablepour celui qui ne sait où il va.- SENEQUE
CONTEMPORARYCOMMUNICATION    @spade_be    spade.be
GUE/NGLhttp://guengl.eu/
La Ligue de l’Enseignementhttp://ligue-enseignement.be/
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
LES FRAMEWORKS CSSComplets (UI) :• Bootstrap (ex-twitter)• Foundation (ZURB)• InuitCSS,... et bien d’autres
LES FRAMEWORKS CSSGrille uniquement:• Golden Grid• LESS Framework• ...
LES FRAMEWORKS CSS        Le vôtre?  Grille: 61 lignes de CSS (non-minifiée)
6 DEVELOPPER“MOBILE FIRST”
Exemple:ContenuEn mobile, un lienvers du contenuadditionnel:
Desktop: Contenu additionnel chargé en AJAX
Lire plus sur le sujet:http://filamentgroup.com/lab/ajax_includes_modular_content/
https://github.com/filamentgroup/Ajax-Include-Pattern/
OPTIMISATIONS
OPTIMISATIONS
Aller plus loin
MERCI @gregone @exibit spade.be
RWD - Best practices par Gregoire Hoin et Benoit Vrins
Prochain SlideShare
Chargement dans…5
×

RWD - Best practices par Gregoire Hoin et Benoit Vrins

898 vues

Publié le

Présentation des bonnes pratiques Responsive par Grégoire Hoin et Benoît Vrins - http://www.spade.be

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

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

Aucune remarque pour cette diapositive

RWD - Best practices par Gregoire Hoin et Benoit Vrins

  1. 1. RESPONSIVE WEBDESIGN BEST PRACTICES FEWEB / mardi 5 mars 2013 Grégoire Hoin @gregone Benoît Vrins @exibit
  2. 2. 1Il nest pas de vent favorablepour celui qui ne sait où il va.- SENEQUE
  3. 3. CONTEMPORARYCOMMUNICATION @spade_be spade.be
  4. 4. GUE/NGLhttp://guengl.eu/
  5. 5. La Ligue de l’Enseignementhttp://ligue-enseignement.be/
  6. 6. 2RWD = ADAPTÉ POURTOUS LES PROJETS?
  7. 7. RWD VS. NATIF
  8. 8. • Plateformes multiples: iOS, Android, Window Phone, ...• Besoins de fonctionnalités Natives, puissance de calcul?• Support et Evolution• Positionnement et Marketing sur l’AppStore
  9. 9. RWD VS. SITE MOBILE
  10. 10. • UA sniffing• Structure des URL• Split du focus technologique• Split du focus utilisateur
  11. 11. ?WEBVIEW OU SITE MOBILE:VOUS UTILISEZ AUSSI DES TECHNIQUES SIMILAIRES
  12. 12. 3IMPLICATIONS DANS LA GESTION DE PROJET
  13. 13. Soyez prêts à changerd’habitudes.Ne vous reposez pas sur vosacquis.
  14. 14. Nos méthodes ne sont plustoutes adaptées.C’est l’occasion de les faireévoluer.
  15. 15. L’expertise en Responsiven’existe pas (encore).Ré-apprenons, tous ensemble.
  16. 16. #FAILApprenez par l’erreur(et celles des autres).Soyez prêts à travailler un peuplus au début.
  17. 17. 4CONTENU & PRIORITÉS
  18. 18. “ Si votre design fonctionnepour les extrêmes, lentre-deuxsera déjà résolu ”-Tom Kelley (IDEO)
  19. 19. Avec l’augmentation des taillesd’écrans, et les layouts fixes,nous nous sommes habitués àremplir.
  20. 20. Allez à l’essentiel.Les variations de tailles vontvous aider à forcer les choix. Valable aussi auprès des clients
  21. 21. Exemple :
  22. 22. 5IA & UX
  23. 23. DESIGN ≠ PSD ≠ WIREFRAME
  24. 24. L’experience que l’on conçoit,c’est le site web que l’utilisateurfinal voit et utilise.
  25. 25. Préparez vous à changer vosdélivrables...
  26. 26. Prototypez en HTML/CSSsi possible.
  27. 27. Si vous faites des wireframesstatiques, prévisualisez au moinsles extrêmes.
  28. 28. Passez du mockup au HTML/CSS plus tôt dans le process.
  29. 29. Ou designez dans le browser
  30. 30. ?WEB APP OU GROS PROJET ? STYLEGUIDE !
  31. 31. SMACSS ( & OOCSS, ...)
  32. 32. FRAMEWORK CSS + GRILLE FLUIDE
  33. 33. LES FRAMEWORKS CSSComplets (UI) :• Bootstrap (ex-twitter)• Foundation (ZURB)• InuitCSS,... et bien d’autres
  34. 34. LES FRAMEWORKS CSSGrille uniquement:• Golden Grid• LESS Framework• ...
  35. 35. LES FRAMEWORKS CSS Le vôtre? Grille: 61 lignes de CSS (non-minifiée)
  36. 36. 6 DEVELOPPER“MOBILE FIRST”
  37. 37. Exemple:ContenuEn mobile, un lienvers du contenuadditionnel:
  38. 38. Desktop: Contenu additionnel chargé en AJAX
  39. 39. Lire plus sur le sujet:http://filamentgroup.com/lab/ajax_includes_modular_content/
  40. 40. https://github.com/filamentgroup/Ajax-Include-Pattern/
  41. 41. OPTIMISATIONS
  42. 42. OPTIMISATIONS
  43. 43. Aller plus loin
  44. 44. MERCI @gregone @exibit spade.be

×