rwd - best practices par gregoire hoin et benoit vrins
DESCRIPTION
Présentation des bonnes pratiques Responsive par Grégoire Hoin et Benoît Vrins - http://www.spade.beTRANSCRIPT
![Page 1: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/1.jpg)
RESPONSIVE WEBDESIGNBEST PRACTICES
FEWEB / mardi 5 mars 2013Grégoire Hoin @gregone
Benoît Vrins @exibit
![Page 2: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/2.jpg)
Il n'est pas de vent favorable pour celui qui ne sait où il va.
1
- SENEQUE
![Page 3: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/3.jpg)
CONTEMPORARY COMMUNICATION
@spade_be
spade.be
![Page 5: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/5.jpg)
La Ligue de l’Enseignementhttp://ligue-enseignement.be/
![Page 6: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/6.jpg)
2
RWD = ADAPTÉ POUR TOUS LES PROJETS?
![Page 7: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/7.jpg)
RWD VS. NATIF
![Page 8: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/8.jpg)
• Plateformes multiples: iOS, Android, Window
Phone, ...
• Besoins de fonctionnalités Natives, puissance
de calcul?
• Support et Evolution
• Positionnement et Marketing sur l’AppStore
![Page 9: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/9.jpg)
RWD VS. SITE MOBILE
![Page 10: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/10.jpg)
• UA sniffing
• Structure des URL
• Split du focus technologique
• Split du focus utilisateur
![Page 11: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/11.jpg)
WEBVIEW OU SITE MOBILE: VOUS UTILISEZ AUSSI DES TECHNIQUES SIMILAIRES
?
![Page 12: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/12.jpg)
3
IMPLICATIONS DANS LA GESTION DE PROJET
![Page 13: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/13.jpg)
Soyez prêts à changer d’habitudes.
Ne vous reposez pas sur vos acquis.
![Page 14: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/14.jpg)
Nos méthodes ne sont plus toutes adaptées.
C’est l’occasion de les faire évoluer.
![Page 15: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/15.jpg)
L’expertise en Responsive n’existe pas (encore).
Ré-apprenons, tous ensemble.
![Page 16: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/16.jpg)
#FAIL
Apprenez par l’erreur (et celles des autres).
Soyez prêts à travailler un peu plus au début.
![Page 17: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/17.jpg)
4
CONTENU & PRIORITÉS
![Page 18: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/18.jpg)
![Page 19: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/19.jpg)
Si votre design fonctionne pour les extrêmes, l'entre-deux sera déjà résolu
-Tom Kelley (IDEO)
“”
![Page 20: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/20.jpg)
Avec l’augmentation des tailles d’écrans, et les layouts fixes, nous nous sommes habitués à remplir.
![Page 21: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/21.jpg)
Allez à l’essentiel.
Les variations de tailles vont vous aider à forcer les choix.
Valable aussi auprès des clients
![Page 22: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/22.jpg)
Exemple :
![Page 23: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/23.jpg)
5
IA & UX
![Page 24: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/24.jpg)
DESIGN ≠ PSD ≠ WIREFRAME
![Page 25: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/25.jpg)
L’experience que l’on conçoit, c’est le site web que l’utilisateur final voit et utilise.
![Page 26: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/26.jpg)
Préparez vous à changer vos délivrables...
![Page 27: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/27.jpg)
Prototypez en HTML/CSS si possible.
![Page 28: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/28.jpg)
Si vous faites des wireframes statiques, prévisualisez au moins les extrêmes.
![Page 29: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/29.jpg)
Passez du mockup au HTML/CSS plus tôt dans le process.
![Page 30: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/30.jpg)
Ou designez dans le browser
![Page 31: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/31.jpg)
WEB APP OU GROS PROJET ?STYLEGUIDE !
?
![Page 32: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/32.jpg)
SMACSS ( & OOCSS, ...)
![Page 33: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/33.jpg)
FRAMEWORK CSS+ GRILLE FLUIDE
![Page 34: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/34.jpg)
LES FRAMEWORKS CSS
Complets (UI) : • Bootstrap (ex-twitter)• Foundation (ZURB)• InuitCSS,... et bien d’autres
![Page 35: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/35.jpg)
LES FRAMEWORKS CSS
Grille uniquement: • Golden Grid• LESS Framework• ...
![Page 36: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/36.jpg)
LES FRAMEWORKS CSS
Le vôtre?
Grille: 61 lignes de CSS (non-minifiée)
![Page 37: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/37.jpg)
6
DEVELOPPER “MOBILE FIRST”
![Page 38: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/38.jpg)
Exemple:Contenu
En mobile, un lien vers du contenu additionnel:
![Page 39: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/39.jpg)
Desktop: Contenu additionnel chargé en AJAX
![Page 40: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/40.jpg)
Lire plus sur le sujet: http://filamentgroup.com/lab/ajax_includes_modular_content/
![Page 41: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/41.jpg)
https://github.com/filamentgroup/Ajax-Include-Pattern/
![Page 42: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/42.jpg)
OPTIMISATIONS
![Page 43: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/43.jpg)
OPTIMISATIONS
![Page 44: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/44.jpg)
Aller plus loin
![Page 45: RWD - Best practices par Gregoire Hoin et Benoit Vrins](https://reader033.vdocuments.us/reader033/viewer/2022052600/557e03b2d8b42a07708b518f/html5/thumbnails/45.jpg)
MERCI
@gregone
@exibit
spade.be