Upload
niklofr
View
718
Download
2
Embed Size (px)
DESCRIPTION
Créer un site web c'est bien, faire en sorte qu'il soit responsive c'est mieux, c'est même vital. Alors qu'est-ce que lel Responsive Design.
Citation preview
RESPONSIVE DESIGN
Etat des lieux
L’utilisation que nous avons d’internet est en train de changer radicalement. D’un usage scientifique et militaire à ses débuts, internet est devenu peu à peu grand public, mais toujours confiné aux bureaux.
En 1992, IBM conçoit le premier smartphone, mais les normes de connection doivent évoluer et nous ne sommes qu’au début de la téléphone mobile.
En 2007, Apple lance le premier Iphone, qui grâce à son succés commercial va démocratiser les smartphones.
Aujourd’hui l’internet mobile est en passe de surpasser les connections traditionnelles depuis un ordinateur «classique» de bureau, ordinateur portable compris. Ces nouvelles habitudes vont modifier profondément et durablement tout le marketing et la création des sites.
Etat des lieux
TAUX DE PENETRATION SMARTPHONE EN
EUROPE DE 60% À HORIZON 2015 (SOURCE MORGAN STANLEY RESEARCH JUIN 2012)
2011 2012 2013 2014 2015 2016
100%
75%
50%
25%
0%
Smartphones
Téléphones mobiles
Téléphones mobiles Low-Cots
Marché mondial des téléphones mobiles. Source : IHS iSuppli Research Août 2012
Etat des lieux
24 MILLIONS DE FRANÇAIS POSSÉDENT
UN SMARTPHONE
57%UTILISENT LEUR SMART-PHONE TOUS LES JOURS
22 MILLIONS D’UTILISATEURS
WEB MOBILE
77%NE SORTENT JAMAIS
SANS LEUR SMARTPHONE
Etat des lieux
58%DES VISITEURS ARRIVENT SUR UN
SITE VIA UN APPAREIL NOMADE
61%DES VISITEURS VIA MOBILE
QUITTENT LE SITE LORSQU’IL N’EST PAS OPTIMISÉ
96%DES SITES SONT
NON OPTIMISÉS POUR LE MOBILE
48%QUITTENT LE SITE AVEC UNE MAUVAISE IMAGE
Etat des lieux
La révolution de la mobilité ne s’arrête pas aux smartphones. En avril 2010, Apple lance l’Ipad, une tablette tactile permettant de naviguer sur internet, visualiser des vidéos, jouer, lire des journaux ou des livres.
D’abord sceptiques, les industriels ont vite revu leur copie. Le succés est tel que tous lancent des tablettes. Les tablettes s’implantent rapidement dans les foyers à très grande vitesse. Il a fallut 8 ans à Internet pour toucher 10% des consommateurs, les tablettes n’ont eu besoin que de 2 ans pour y arriver.
Les ventes de tablettes sont de 121 millions en 2012, on prévoit 416 millions d’unités pour 2015. Le taux de croissance annuel est de 28%.
Il se vendra plus de tablettes que de PC en 2016.
77%DES UTILISATEURS DE TABLETTE
DECLARENT REDUIRE L’USAGE DE LEUR PC
6 MILLIONSDE TABLETTES DEVRAIENT ÊTRE VENDUES EN FRANCE EN 2013
Quelles incidences sur les sites
La mobilité entraine un bouleversement des usages, on peut communiquer partout, visualiser un site internet où que l’on soit. Mais voilà, les écrans des plate-formes mobiles possèdent une résolution moins élevée que celle d’un écran d’ordinateur, et la surface visible est plus petite.
Visiter un site internet non optimisé sur un smartphone est vite pénible, on est vite obligé de scroller, zoomer et parfois les liens ne sont pas optimisés pour une utilisation tactile.
Le site devient vite illisible. Il faut alors trouver des solutions. Plutôt que de créer plusieurs sites compatibles avec les différentes résolutions, l’approche du responsive design consiste à créer un seul site mais qui sera compatible quelque soit la taille de l’écran tout en gardant le même contenu.
Surface de contact d’un doigt
Le Responsive Design
Dans sa définition la plus simple, le responsive web design correspond à un site conçu pour s’adapter aux différentes tailles d’écran et aux différents terminaux permettant d’afficher le site (navigateur, tablette, mobile, télé connectée…).
Les colonnes, la taille des images et polices peuvent s’ajuster, se déplacer, s’effacer. Peu à peu, au lieu de construire des sites mobiles séparés et tablettes, on commence à repenser les sites avec un modèle unique qui les rends compatibles avec toutes les plates-formes.
Le Responsive Web Design amène une solution pratique et économique à cette situation. En effet, il permet de créer une seule et unique interface, fluide, qui affiche le site sous sa meilleure forme, et ce, peu importe la taille de l’écran.
2 Colour Greyscale 2 Colour Greyscale,[with subtle gloss]
2 Colour Greyscale,[with less-subtle gloss]
2 Colour Red 2 Colour Red,[with subtle gloss]
2 Colour Red,[with less-subtle gloss]
2 Colour Green 2 Colour Green,[with subtle gloss]
2 Colour Green,[with less-subtle gloss]
2 Colour Blue 2 Colour Blue,[with subtle gloss]
2 Colour Blue,[with less-subtle gloss]
liquidicityliquidicity
© 2007 Go Squared Ltd. All Rights Reserved.These grads were made and are distributed for free by Go Squared Ltd. You may use them as you wish, but mentioning us or buying a Square would go down really well.
Les benefices
Un rendu parfait du site quelque soit la plateforme
Pas besoin de zoomer sur les plus petites résolutions
Expérience utilisateur optimisée
Toutes les pages sont visibles sur toutes
les plate-formes
GAIN DE TEMPS AMÉLIORATION DU RÉFÉRENCEMENT
ECONOMIE SITE PLUS PERFORMANT
Exemples
Exemples
Exemples