Date post: | 23-Dec-2014 |
Category: |
Documents |
Upload: | jonathanpath |
View: | 3,096 times |
Download: | 0 times |
RESPONSIVE WEBDESIGN
@jonathanpath // #rwdiesa
?
RESPONSIVE WEBDESIGN
@jonathanpath // #rwdiesa
RESPONSIVE WEBDESIGNLE DESIGN QUI S’ADAPTE A TOUTES LES SITUATIONS (OU PAS)
@jonathanpath // #rwdiesa
DEFINITION
@jonathanpath // #rwdiesa
Vrai ou Faux ? Le responsive design consiste à faire en sorte qu’un site puisse s’afficher correctement sur
ordinateurs, tablettes et mobiles.
DEFINITION
@jonathanpath // #rwdiesa
Vrai ou Faux ? Le responsive design consiste à faire en sorte qu’un site puisse s’afficher correctement sur
ordinateurs, tablettes et mobiles.
On peut faire mieux
DEFINITION
@jonathanpath // #rwdiesa
Un site responsive est potentiellement capable de se transformer en un site adapté pour :
Tablettes
Mobiles
Aveugles
IE6
Lunettes Google
TV
tout en gardant la même url
ATTENTION
@jonathanpath // #rwdiesa
Avant d’être des stars du responsive,soyons des stars du HTML/CSS
MAUVAIS EXEMPLE
@jonathanpath // #rwdiesa
Un site responsive qui aurait mieux valut ne pas l’être
MAUVAIS EXEMPLE
@jonathanpath // #rwdiesa
Un site qui aurait mieux valut être responsive ?
Lundi 6 novembre au soir, je recherche «Obama» sur Google. Le premier résultat est un article de TF1, je clique, et là...
1. STATISTIQUES
@jonathanpath // #rwdiesa
Pour savoir pourquoi, à quel niveau et dans quels cas faire du responsive
Les statistiques suivantes sont extraites de différentes études ou outils de statistiquessur le mobile, les tablettes et les internautes en France et dans le monde. De ce fait, il pourrait y avoir certaines disparités.
1.1 TAILLES ET APPAREILS
@jonathanpath // #rwdiesa
1366x768
1280x800
1920x1080
1600x900
1024x768
1440x900
1280x768
1680x1050
1680x1050
320x480
768x1024
Dans le monde entier - Source : W3Counter
De plus en plus de tailles d’écran différents
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : Inmobi
Comment accédons-nous au web?
utilisent leur mobile comme unique source Internet
59% 34% Monde France
1.2 MOBILE
@jonathanpath // #rwdiesa
Uniquement en France - Source : Inmobi
Quelle plateforme pour surfer ?
29% Uniquement via mobile
30% Surtout via mobile
32% Autant via PC que mobile
9% Surtout via PC
1.2 MOBILE
@jonathanpath // #rwdiesa
Dans le monde entier - Source : DCI
Futur prometteur?
Mobinautes Internautes Et ensuite?
2013Mobinautes > Internautes1,9
milliard
800 millions2009
2015
2009
2015 1,6 milliard
1,4 milliard
1.2 MOBILE
@jonathanpath // #rwdiesa
Equipement et connexions des français
Valeurs en millions - Source : Analyse de l’agence Dagobert / ARCEP / Médiamétrie
85% 40%
65M 55M 26MPopulation Mobile Smartphone
29%
19MMobinautes
20%
13MMobinautes très actifs
Constructeurs Marché smartphone
Samsung 27,3 %
Apple 25,2 %
Nokia 15,8 %
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : ComScore 2012
Part de marché smartphones des constructeurs en France
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : DCI (Monde) - StatCounter (France)
Part de marché des navigateurs mobiles
...
22% 21% 20% 11% 26%
37% 2% 46% 1% 14%
Monde
France
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : Our Mobile Planet 2012
Lieux d’utilisation du smartphone en France
Domicile
Travail Déplacement Magasin
Restaurant Transports
Aéroport
Ecole
Café
Cabinet
On peut imaginer l’utilisateur comme 1 œil & 1 pouce (une bébé dans la main, en train de faire les courses...) -Luke Wroblewsi / Mobile First
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : Our Mobile Planet 2012
Satisfaction relative à la consultation de sites web sur un smartphone
Il y a des sites que j’ai carrément arrêté de visiter sur mobile tellement c’est la galère.-Anonyme, discussion de couloir
19%Pas du tout
36%Pas vraiment
29%Indifférent
14%Satisfait
3%Tout à fait
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : Inmobi
M-commerce
des internautes ont acheté en lignevia leur mobile en mai 2012
53% 39% Monde France
1.2 MOBILE
@jonathanpath // #rwdiesa
Source : Livre Mobile First
Web vs Applications
7%8%BlackberryiPhone
14%Web
Part des Utilisateurs Twitter qui accèdent au réseau
sur Mobile
4%Autres
...
1.2 MOBILE
@jonathanpath // #rwdiesa
Attention à bien interpréter les statistiques
Ce n’est pas parce qu’il y a beaucoup de mobinautes
qu’il vont aller visiter tous les sites que vous allez faire
1.3 TABLETTES
@jonathanpath // #rwdiesa
Source : GFK
Haute croissance en France
3 millions
201220112010
1.5 millions440 000
1.3 TABLETTES
@jonathanpath // #rwdiesa
Source : GFK
Comportements
70%des utilisateurs l’utilisent
pendant qu’ils regarde la télé
57%des utilisateurs l’utilisent
dans leur lit
1.3 TABLETTES
@jonathanpath // #rwdiesa
Source : GFK
T-commerce en France
40%achètent en ligne
chaque moispréfèrent acheter sur tablettes
que sur ordinateur
50%
2. MOBILE FIRST
@jonathanpath // #rwdiesa
L’essor du mobile a déclenché l’approche du responsive webdesign
2.1 EXIGENCES
@jonathanpath // #rwdiesa
Source : StrangeLoop
Cela vaut le coup d’optimiser
1 secondede chargement en plus
4s maxle temps que 60%
sont prêts à attendre
12sle temps de
chargement moyen
-10% de pages vues
2.2 CONNEXIONS MOYENNES
@jonathanpath // #rwdiesa
Source : Akamai 2012
En France en 2012
2,5Mb/s
4.8 Mb/s
débi
t trè
s va
riabl
e (m
étro
, cam
pagn
e, w
ifi)
2.3 CAS PRATIQUE
@jonathanpath // #rwdiesa
Source : Tests personnels & sur Akamai
Temps de chargement de la version mobile face à la version bureau
2x plus longResponsive
2x plus long 1.5x plus long EgalitéVersion mobilePas d’adaptations Pas d’adaptations
Egalité 1.5x plus long 3x plus rapide EgalitéVersion mobile Responsive Version mobile Responsive
2.3 GARDER L’ESSENTIEL
@jonathanpath // #rwdiesa
Une fois que les gens utilisent la version mobile, il n'est pas rare qu'ils réclament que la version de bureau soit "aussi simple"
- Luke Wroblewsi dans le livre Mobile First
2.3 GARDER L’ESSENTIEL
@jonathanpath // #rwdiesa
On commence un site en par pensant aux contraintes mobile
écrans petits
Temps de chargementplus long
Focus sur les fonctionnalités les plus importantes
Zones cliquables plus grandes
Pas d’effet de survol
Zones cliquables plus grandes
Ergonomie inspirée des applications
ContraintesSolutions
2.3 MOBILE FIRST
@jonathanpath // #rwdiesa
Exemple avec Flickr
2.4 RESPONSIVE OU PAS ?
@jonathanpath // #rwdiesa
Analyse de sites / Battles 1 contre 1
Facebook SmashingMagazine Ebay Pages jaunes
Comment ça marche? L’équipe Wikipédia FNAC
Louis Vuitton Météo France Microsoft Awwwards
2.4 RESPONSIVE OU PAS ?
@jonathanpath // #rwdiesa
Battles 1 contre 1
- définir l’utilisateur mobile/tablette type : • Comment l’utilisateur peut-il arriver sur le site?• Quelles informations cherche-t-il?• Où peut-il être? (dans les transports? dans son lit? au boulot?)
- quelles sont les adaptations qui ont été faites ?
- est-ce que les bons choix ont été fait ?
2.5 ERGONOMIE MOBILE
@jonathanpath // #rwdiesa
C’est vous les experts / proposez une version mobile par groupes de 4
- Carte de france interactive : http://leboncoin.fr/ - Carousel : http://www.sho.com/sho/home - Tarifs : http://wufoo.com/signup/ - Formulaire avancé : https://order.emporiumpies.com/ - Galerie photo : http://500px.com/team - Fenêtre modale : http://gonefreelancing.com/ (cliquer sur “more”) - Liste de pays : http://www.ikea.com/
2.5 NOUVEAU PROCESS
@jonathanpath // #rwdiesa
de création de maquettes design / wireframes
RESPONSIVEDATING
PROJETS
@jonathanpath // #rwdiesa
Première approche
PROJET
@jonathanpath // #rwdiesa
de création de maquettes design / wireframes
- Blog de recettes de cuisine - Site institutionnel d’une startup qui créé des applications Facebook - Site d’actualité - Site plein écran pour une marque avec un effet parallaxe - Portfolio - Site d’un évènement web - Site d’un photographe - Site d’un restaurant - Application avec géolocalisation - Site d’un film - Site d’une association - Ou de votre choix?