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.

1. RESPONSIVEDESIGN

2. Etatdeslieux
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.

3. Etatdeslieux
TAUXDEPENETRATIONSMARTPHONEEN
EUROPEDE60%ÀHORIZON2015
(SOURCEMORGANSTANLEYRESEARCHJUIN2012)
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

4. Etatdeslieux
24MILLIONS
DEFRANÇAISPOSSÉDENT
UN SMARTPHONE
57%
UTILISENT LEUR SMART-
PHONE TOUS LES JOURS
22MILLIONS
D’UTILISATEURS
WEB MOBILE
77%
NE SORTENT JAMAIS
SANSLEURSMARTPHONE

5. Etatdeslieux
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

6. Etatdeslieux
Larévolutiondelamobiliténes’arrêtepasauxsmartphones. 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’implantentrapidementdanslesfoyersàtrèsgrandevitesse. Il
afallut8ansàInternetpourtoucher10%desconsommateurs,
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
416millionsd’unitéspour2015.Letauxde croissanceannuel
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
6MILLIONS
DE TABLETTES DEVRAIENT ÊTRE
VENDUES EN FRANCE EN 2013

7. Quellesincidencessurlessites
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

8. LeResponsiveDesign
Dans sa définition la plus simple, le responsive web design
correspond à un site conçu pour s’adapter aux différentes
taillesd’écranetauxdifférentsterminauxpermettantd’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.

9. Lesbenefices
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

10. Exemples

11. Exemples

12. Exemples