apérotech 26 février 2013 Oxalide Les mythes et les réalités du responsive web design 1
1 PrésentaEon Palpix a La société Agence 100% digitale depuis 2005 2
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
1 PrésentaEon Palpix c Quelques références Environ personnes 4
2 Quelques chiffres sur le mobile a Une croissance accès mobile exponeneelle Accès FemininBio.com 20,00% 15,00% > 20% janvier 2013 10,00% 5,00% < 1% janvier 2010 0,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.- 13 5
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é 2012 6
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 100 100 128 234 Importance de proposer une interface uelisateur adaptée au device 7
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
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
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 2005 10
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
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
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
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
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
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
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
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
Merci! Michaël Amand Directeur général michael.amand@palpix.com Aurore Hamon Directrice du développement web aurore.hamon@palpix.com Thierry Langlois Responsable de l intégraion thierry.langlois@palpix.com 19