Guérilla Responsive Design
L’atelier qui vous fera aimer le mobile
(et le reste)
Stéphanie Walter - Flupa UX-Days 2015
Image Jeremy Keith
Slide 2
Slide 2 text
www.inpixelitrust.fr @WalterStephanie
Designer web et mobile, spécialisée en interface – pense
que le CSS est un outil de design
Slide 3
Slide 3 text
En attente d’une expérience similaire quelque soit l’appareil
Des utilisateurs multi-écran
Image Clemens Löcker
Slide 4
Slide 4 text
Et ça c’est « juste » Android en 2014. Je vous laisse imaginer la suite
Fragmentation des tailles d’écran
Slide 5
Slide 5 text
Et puis le reste des zappareils des zinternets
Illustration par Rob Gill
Slide 6
Slide 6 text
Des outils de conception « figés »
Slide 7
Slide 7 text
Un processus pas adapté à l’intégration aux médias
Slide 8
Slide 8 text
Les « vrais » points de rupture dans le média
Slide 9
Slide 9 text
Le Challenge en 1h30
Trouver des modes de conception plus flexibles qui
correspondent aux besoins des médias modernes
Slide 10
Slide 10 text
Disclaimer(s)
Slide 11
Slide 11 text
1. Inventaire de contenus
Slide 12
Slide 12 text
Partir sur des bases solides et identifier les potentiels points bloquants pour
l’intégration
Inventaire des contenus du site
Slide 13
Slide 13 text
La thématique
Nous allons nous intéresser à une page produit
Slide 14
Slide 14 text
2. Priorisation des
contenus
Slide 15
Slide 15 text
Priorisation de contenus
• Ces contenus seront-ils tous présents sur toutes les tailles
d’écran ?
• Ces contenus ont-ils la même priorité quelque soit la taille du
média ?
Image Nick Royer
Slide 16
Slide 16 text
Couleur de l’élément ( de fond/ de texte)
Hiérarchisation visuelle des contenus
Slide 17
Slide 17 text
Taille de l’élément sur la page
Hiérarchisation visuelle des contenus
Slide 18
Slide 18 text
Emplacement de l’élément sur la page
Hiérarchisation visuelle des contenus
Slide 19
Slide 19 text
Gestion des blancs autour de l’élément
Hiérarchisation visuelle des contenus
Slide 20
Slide 20 text
Choix typographiques (graisse, taille, couleur)
Hiérarchisation visuelle des contenus
Slide 21
Slide 21 text
Proposer plus de contenu directement sur grand écran, à la demande sur mobile
Priorisation par taille de média
Slide 22
Slide 22 text
On part des capacités du média le plus bas pour construire au fur et à mesure
Priorisation par taille de média
Slide 23
Slide 23 text
Un accordéon sur petits médias, des onglets sur les plus grands
Priorisation par taille de média
Slide 24
Slide 24 text
Un post-it = un contenu, prioriser sur la page.
Technique 1 : priorisation au post-it
Slide 25
Slide 25 text
Technique 2 :
priorisation en tableau
• Plus « linéaire », moins
flexible, mais un peu plus
rapide et permet la
comparaison
Slide 26
Slide 26 text
3. Création d’un graphique de
points de rupture
Poupée Russe Via Shutterstock
Slide 27
Slide 27 text
Proposer des intervalles d’écran provisoires et points de rupture arbitraires
Le graphique de points de rupture
Slide 28
Slide 28 text
Proposer en priorité des points de rupture primaires (mise en page générale)
Graphique de points de rupture primaires
Slide 29
Slide 29 text
Ajouter au fur et à mesure des points de rupture secondaires
Graphique de points de rupture secondaires
Slide 30
Slide 30 text
Le gros du travail itératif commence ici pour le designer et l’intégrateur
Et ce n’est que le début …
Slide 31
Slide 31 text
Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas de
Modification 3.0 France
www.inpixelitrust.fr @WalterStephanie