Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.
3. Au programme de cette session
⦿ Un rappel sur le RWD
⦿Pourquoi le fonctionnement actuel pose
problème
⦿Comment améliorer ce process
⦿ Des astuces pour réussir
⦿Comment Soat peut vous aider
⦿Une conclusion
9. Objectifs
⦿ Mieux comprendre les problèmes du
fonctionnement actuel
⦿Avoir des pointeurs pour progresser
⦿Découvrir des pistes à creuser
⦿ Savoir par où commencer
33. 1 site dédié aux ordinateurs de bureau !
(desktop)
34. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !
35. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !
1 site dédié aux tablettes…
36. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !
1 site dédié aux tablettes…
1 site dédié aux TV ?
37. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !
1 site dédié aux tablettes…
1 site dédié aux TV ?
Oups le PDG a acheté une montre
connectée !
38. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !
1 site dédié aux tablettes…
1 site dédié aux TV ?
Oups le PDG a acheté une montre
connectée !
100. Navigation vers sites
externes
Recherche sur le site
Navigation interne
Promotion des évènements
Liste des
formations
Liste des articles
de blog
Liste des
évènements
Liste des news
logo
202. A venir :
Un livre blanc détaillant
le contenu de cette présentation
Hinweis der Redaktion
Pas de code dans cette présentation
Pas vous convaincre
Autres prez pour ça !
Nous allons parler Process !
Assez drôle : légende décision
1 seule décision dans le workflow…
Principe #1 : s'adapter à l'écran
Pas suffisant
Ergo différente sur mobile & desktop
Tactile
kinect
voix
Contexte de l'utilisateur
Utilisation métro (hors ligne) cliché
Utilisation maison (wifi/canapé) majoritaire
Changer en fonction de la localisation
changer en fonction de l'éclairage (media queries 4)
Le RWD pas tout seul : changer son mode de penser
Penser au mobile en premier
+ de contraintes !
Meilleurs design sous la contrainte
+ facile de rajouter que de retirer
Penser son site autour du contenu
Ce qui compte c'est le contenu du verre pas sa forme
Ne pas designer sans une idée clair du contenu final
Rien n'est magique en informatique et donc pas le RWD
Pas simplement rajouté un framework ou quelques directives de code dans votre site
Rien n'est magique en informatique et donc pas le RWD
Pas simplement rajouté un framework ou quelques directives de code dans votre site
Rien n'est magique en informatique et donc pas le RWD
Pas simplement rajouté un framework ou quelques directives de code dans votre site
Objectif #1 : diminuer la frustration
1 seul site = 1 ergo = 1 design
Pas besoin de tout réapprendre
+ facile pour l'utilisateur
Réveillez vous !
Comment on fait dans la plus part des projets
On fait des wireframes
Très visuel en général
Avant même de savoir quel contenu on veut mettre dedans
2. Le designer fait une maquette visuelle
En image sous photoshop
1 maquette par écran
Sans visualisation des enchainements d'écrans, animations, etc.
3. On donne tout ça aux intégrateurs/développeurs
4. Pouf on a un site !
C'est magique
Personne ne sais trop comment ça marche
Si on regarde dans le détail
On liste ses besoins
C'est la liste au père noel de tous les intervenants
On fait tout rentrer dans un ecran de taille fixe 1280px
Le designer rend ça jolie en rajoutant des couleurs et en fait une image
L'intégrateur découpe l'image et la transforme en site web en mesurant les espacement, etc.
Et puis on superpose les 2 pour comparer
Anecdote : client qui imprime et superpose sur son écran
Ca a toujours marché pourquoi changer ?
Différentes tailles d'écran…
Version desktop : 1 wireframe
Et une maquette
Version tablette : 1 deuxième wireframe
Et une autre maquette
Version mobile : 1 troisième wireframe
Et toujours plus de maquettes
Combien de pages ?
Combien de tailles d'écrans ?
Trop de combinaisons
Combien de pages ?
Combien de tailles d'écrans ?
Trop de combinaisons