Les mythes et les réalités du responsive design apérotech 26 février 2013 Oxalide Les mythes et les réalités du responsive web design

Dimension: px

Commencer à balayer dès la page:

Download "Les mythes et les réalités du responsive design apérotech 26 février 2013 Oxalide Les mythes et les réalités du responsive web design"

Denis Lebrun
il y a 8 ans
Total affichages :

1 apérotech 26 février 2013 Oxalide Les mythes et les réalités du responsive web design 1

2 1 PrésentaEon Palpix a La société Agence 100% digitale depuis

3 1 PrésentaEon Palpix b Equipe Palpix 20 personnes 1/3 Dev & Design Des profils expérimentés : moyenne de 8,4 ans d expérience dans le numérique 3

4 1 PrésentaEon Palpix c Quelques références Environ personnes 4

5 2 Quelques chiffres sur le mobile a Une croissance accès mobile exponeneelle Accès FemininBio.com 20,00% 15,00% > 20% janvier ,00% 5,00% < 1% janvier ,00% janv.- 10 mars- 10 mai- 10 juil.- 10 sept.- 10 nov.- 10 janv.- 11 mars- 11 mai- 11 juil.- 11 sept.- 11 nov.- 11 janv.- 12 mars- 12 mai- 12 juil.- 12 sept.- 12 nov.- 12 janv

6 2 Quelques chiffres sur le mobile b Des pics pendant l été et les vacances 25% * *Accès mobile pour le site officiel de l Équipe de France Olympique été

7 2 Quelques chiffres sur le mobile c Mais aussi les soirs et week- ends, idéal pour les achats aaarentcars.com Site de locaeon de voitures de luxe avec réservaeon en ligne 3 langues (français, anglais, russe) % des visites 79% 13% 9% Taux de transfo. Base Importance de proposer une interface uelisateur adaptée au device 7

8 3 ÉvoluEon de notre approche mule- device a 2010 ApplicaEons naeves Sites web opemisés Site tradieonnel Smartphones TableDes Smartphones TableDes Un environnement complet et performant mais des coûts de développement et maintenance importants 8

9 3 ÉvoluEon de notre approche mule- device b 2012 ApplicaEons naeves Site RWD Smartphones TableDes Ecrans larges Smartphones TableDes Une expérience uelisateur opemisée suivant les environnements pour un développement simplifié 9

10 4 Le RWD, c est nouveau! La problémaeque n est pas nouvelle Design fluide vs fixe Les ouels existent depuis plusieurs années Non Ex: Sports.fr en

11 5 Le RWD = redimensionnement de l interface MulEplicaEon des supports ET des usages (tacele, mobilité, ) Le RWD : une nouvelle manière de penser l interface d un site web Design et ergonomie adaptés automaequement Pas uniquement Contenu Cible Support Exemple de la navigaeon 11

12 6 Le RWD, la solueon miracle? a Développement / maintenance 1 code unique : «one set of markup» Pas de nouveau langage à maîtriser Pas de déteceon de navigateur/plateforme Paramétrages des serveurs limités 1 url = pas de redirec6on Process de déploiement simplifié +30% * design +60% * développement HTML/CSS/JS *Surcoût esimé 12

13 6 Le RWD, la solueon miracle? b MarkeEng Améliore la consommaeon du site (pages vues/visite et taux de rebond) +30% * PV/V Facilite l analyse d audience site- centric Taux de conversion améliorés (vs. site web tradi6onnel) E- mailings et Newsleyers opemisés (17% des mails sont ouverts via mobile Etude Return Path) +37% * Taux d ouverture newsleder *Chiffres FemininBio 13

14 6 Le RWD, la solueon miracle? c SEO 1 seul domaine Pas de redirect en fonceon du user- agent Pas de duplicate content Stratégie linking simplifiée Linking naturel (notamment RS) opemisé 6 juin 2012 * «This is Google s recommended configuraion.» *Webmaster central blog 14

15 7 Limites idenefiées et solueons travaillées a Performances Problèmes idenefiés Chargement des ressources Poids des images DétecIon de la bande passante SoluEons préconisées/travaillées Bonnes praiques de développement ExtrapolaIon - > écran réduit = bande passante limitée Chargement condiionnel + Lazy loading SoluEon future : Network InformaEon API (working draz) 15

16 7 Limites idenefiées et solueons travaillées b Publicité Problèmes idenefiés Emplacements Tailles et formats variés Iframes SoluEons préconisées/travaillées PosiIonnement adapté Redimensionnement en CSS Afficher un format différent en foncion de la taille de l écran Impliquer les partenaires dans la logique responsive 16

17 7 Limites idenefiées et solueons travaillées c Ergonomie Problèmes idenefiés Manque de place Certains contenus non visibles FoncIonnalités supprimées SoluEons préconisées/travaillées RéorganisaIon de l interface Accès différent au contenu caché Les foncionnalités s adaptent au support 17

18 8 Le RWD, une solueon pragmaeque «Le mieux est parfois l ennemi du bien» Beaucoup d avantages pour un coût addieonnel limité Idéal à penser au moment d une refonte Analyser l équilibre : avantages uelisateurs / coût addieonnel / chiffre d affaires - > dans certains cas, un site opemisé peut se jusefier 18

19 Merci! Michaël Amand Directeur général Aurore Hamon Directrice du développement web Thierry Langlois Responsable de l intégraion thierry.langlois@palpix.com 19

Documents pareils

AGENCE DE COMMUNICATION INTERACTIVE BIEN INTERPRETER LES STATISTIQUES DE FREQUENTATION D'UN SITE WEB

AGENCE DE COMMUNICATION INTERACTIVE BIEN INTERPRETER LES STATISTIQUES DE FREQUENTATION D'UN SITE WEB MM Création 32 Avenue de Wagram 75 008 Paris Tél : 01 45 74 76 00 Fax : 01 45 74 95 06 E-mail : jn@mmcreation.com