Jeudi 14 février. 17h30 19h30 à Embrun. «Responsive Design ou rendre son site accessible sur tous supports!» Pascal SERRES PIMENT ROUGE

Transcription

1 Jeudi 14 février 17h30 19h30 à Embrun «Responsive Design ou rendre son site accessible sur tous supports!» Pascal SERRES PIMENT ROUGE Jeudi 14 février

2 Qu est-ce que le Responsive Design? C est l adaptation de son site Internet sur l ensemble des terminaux (ordinateurs, mobiles, tablettes, télés connectées) quelque soit la résolution et l orientation de l écran (paysage et portrait). Jeudi 14 février

3 Rien ne vaut un exemple pour comprendre Jeudi 14 février

4 Pourquoi faire son site Internet en Responsive Design? Parce que le nombre de Smartphones et Tablettes ne cesse d augmenter Parce que le nombre de taille d écrans augmente également et on ne sait pas se que nous réserve le futur (e-tv, e-lunettes, ) Et que les habitudes des internautes sont en train de changer. Jeudi 14 février

5 En quelques chiffres? LES SMARTPHONES 85% des Français détiennent un mobile 40% des Français détiennent un Smartphone (+27% en l espace de 6 mois) 73% des détenteurs de Smartphone sont considérés comme des mobinautes 77% des possesseurs de Smartphones ont internet illimité dessus 77% des possesseurs de Smartphone se rendent au moins une fois par mois sur des réseaux sociaux depuis leur mobile 75% des possesseurs de Smartphone utilisent leur mobile en magasin 53% sont prêts à payer avec leur mobile en magasin 89% des possesseurs de mobiles ont déjà vu un QR code 42% en ont déjà scannés 45% des possesseurs de mobiles connaissent la technologie NFC 51% l ont déjà utilisée Jeudi 14 février

6 En quelques chiffres? LES TABLETTES au 3 ème trimestre 2012, 1 foyer sur 10 possède une tablette tactile en France, soit 3 millions de foyers possesseurs de tablette pour 4,5 millions de tablettes vendues. Les foyers les plus équipés en tablette sont tout d abord ceux qui hébergent un, voire plusieurs enfant(s) de moins de 25 ans, ou comptent au moins 4 personnes : 1 sur 5 possède une tablette tactile. des foyers relativement jeunes mais potentiellement dotés d un certain pouvoir d achat : 17,5% des foyers dont le chef de famille est âgé de 35 à 49 ans. le mode d accès à Internet se fait à 90% par Wifi, et à 10% via 3G - 80% des possesseurs préfèrent utiliser leur tablette plutôt que l ordinateur à la maison - temps d utilisation de la tablette : 21% dans un lit - 30% devant la télévision - 10% avec des amis - 13% dans d autres endroits Jeudi 14 février

7 Les Conseils pour la réalisation de son site en Responsive Design (pour les tablettes et smartphones) 1 Une mise en page SIMPLE Supprimer tous les effets superflus (transitions d images, systèmes d accordéon 2 Quelles tailles d écrans cibler? 3 tailles d écrans est le minimum Jeudi 14 février

8 Les Conseils pour la réalisation de son site en Responsive Design (pour les tablettes et smartphones) 3 Une mise en page FLEXIBLE Travailler la mise en page de son site Internet en BLOCS. Utiliser une grille de 12 ou 16 colonnes. Jeudi 14 février

9 Les Conseils pour la réalisation de son site en Responsive Design (pour les tablettes et smartphones) 4 Pensez MOBILES! N oubliez pas que les Mobinautes sont MOBILES, c est à dire que l utilisation de son Smartphone et donc de sa navigation sur internet, est différente qu à la maison. Pensez que les débits Internet sont beaucoup plus faible à ce jour Que le mobinaute cherche une information précise dans 80% des cas et pour 75% d entres eux localement. Privilégier donc les informations indispensables : adresse, localisation, heures d ouverture, actualités importantes, promotions, Jeudi 14 février

10 Ce qu il ne faut pas faire! 1 Faire afficher tout son site sur les petits écrans En effet, plus de 60% des informations d un site ne sont pas utiles pour les Mobinautes. 2 Afficher des photos GRANDS FORMATS en fond Ok pour les tablettes, mais NIET pour les Smartphone 3 Enlever tous les effets visuellement JOLIS Transitions d images, systèmes d accordéons, 4 Bien sûr, plus d animations FLASH! 5 Diminuer la taille de sa police de caractère Le but étant d être lu rapidement, cela ne sert à rien de diminuer la police. Mieux vaut «scroller» que de grossir l écran (qui serait un comble pour un site en Responsive). 6 Ne pensez pas QUE SMARTPHONE En priorité pensez à votre site dans sa version grande taille pour ordinateur Jeudi 14 février

11 Un exemple souvent utilisé en Responsive sur le Web mais qui est plutôt un contre-exemple! Office de Tourisme de Saint-Etienne Jeudi 14 février

12 Jeudi 14 février

13 Jeudi 14 février

14 Jeudi 14 février

15 Jeudi 14 février

16 Un site bien organisé La ville de Roger - Arkansas Jeudi 14 février

17 Ecran ordi Tablette portrait Jeudi 14 février

18 Smartphone paysage Smartphone portrait Jeudi 14 février

19 Les limites du Responsive Design 1. C est beaucoup plus long qu avant pour mettre en place le site Internet 2. Plus de connaissances et plus de technique 3. Un coût plus élevé 4. Moins de créativité 5. Le cas des images est délicat 6. Le temps de chargement est souvent augmenté 7. Plus de code, plus de mises à jour 8. Plus de différences entre navigateurs et supports Jeudi 14 février

20 Toutes les informations sur le site : Prochain RDV Jeudi 21 mars 2013 À Briançon Au CRET M-COMMERCE Jeudi 14 février