RESPONSIVEDESIGN
EtatdeslieuxL’utilisation que nous avons d’internet est en train de changerradicalement. D’un usage scientifique et milita...
EtatdeslieuxTAUXDEPENETRATIONSMARTPHONEENEUROPEDE60%ÀHORIZON2015(SOURCEMORGANSTANLEYRESEARCHJUIN2012)2011 2012 2013 2014 2...
Etatdeslieux24MILLIONSDEFRANÇAISPOSSÉDENTUN SMARTPHONE57%UTILISENT LEUR SMART-PHONE TOUS LES JOURS22MILLIONSD’UTILISATEURS...
Etatdeslieux58%DES VISITEURS ARRIVENT SUR UNSITE VIA UN APPAREIL NOMADE61%DES VISITEURS VIA MOBILEQUITTENT LE SITE LORSQU’...
EtatdeslieuxLarévolutiondelamobiliténes’arrêtepasauxsmartphones. Enavril 2010, Apple lance l’Ipad, une tablette tactile pe...
QuellesincidencessurlessitesLa mobilité entraine un bouleversement des usages, on peutcommuniquer partout, visualiser un s...
LeResponsiveDesignDans sa définition la plus simple, le responsive web designcorrespond à un site conçu pour s’adapter aux...
LesbeneficesUn rendu parfait du sitequelque soit la plateformePas besoin de zoomer surles plus petites résolutionsExpérien...
Exemples
Exemples
Exemples
Prochain SlideShare
Chargement dans…5
×

Responsive design

3 863 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 863
Sur SlideShare
0
Issues des intégrations
0
Intégrations
485
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Responsive design

  1. 1. RESPONSIVEDESIGN
  2. 2. EtatdeslieuxL’utilisation que nous avons d’internet est en train de changerradicalement. D’un usage scientifique et militaire à ses débuts,internet est devenu peu à peu grand public, mais toujoursconfiné aux bureaux.En 1992, IBM conçoit le premier smartphone, mais lesnormes de connection doivent évoluer et nous ne sommesqu’au début de la téléphone mobile.En 2007, Apple lance le premier Iphone, qui grâce à son succéscommercial va démocratiser les smartphones.Aujourd’hui l’internet mobile est en passe de surpasser lesconnections traditionnelles depuis un ordinateur «classique»de bureau, ordinateur portable compris. Ces nouvelleshabitudes vont modifier profondément et durablement toutle marketing et la création des sites.
  3. 3. EtatdeslieuxTAUXDEPENETRATIONSMARTPHONEENEUROPEDE60%ÀHORIZON2015(SOURCEMORGANSTANLEYRESEARCHJUIN2012)2011 2012 2013 2014 2015 2016100%75%50%25%0%SmartphonesTéléphones mobilesTéléphones mobiles Low-CotsMarché mondial des téléphones mobiles.Source : IHS iSuppli Research Août 2012
  4. 4. Etatdeslieux24MILLIONSDEFRANÇAISPOSSÉDENTUN SMARTPHONE57%UTILISENT LEUR SMART-PHONE TOUS LES JOURS22MILLIONSD’UTILISATEURSWEB MOBILE77%NE SORTENT JAMAISSANSLEURSMARTPHONE
  5. 5. Etatdeslieux58%DES VISITEURS ARRIVENT SUR UNSITE VIA UN APPAREIL NOMADE61%DES VISITEURS VIA MOBILEQUITTENT LE SITE LORSQU’ILN’EST PAS OPTIMISÉ96%DES SITES SONTNON OPTIMISÉS POUR LE MOBILE48%QUITTENT LE SITE AVECUNE MAUVAISE IMAGE
  6. 6. EtatdeslieuxLarévolutiondelamobiliténes’arrêtepasauxsmartphones. Enavril 2010, Apple lance l’Ipad, une tablette tactile permettantde naviguer sur internet, visualiser des vidéos, jouer, lire desjournaux ou des livres.D’abord sceptiques, les industriels ont vite revu leur copie.Le succés est tel que tous lancent des tablettes. Les tablettess’implantentrapidementdanslesfoyersàtrèsgrandevitesse. Ilafallut8ansà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évoit416millionsd’unitéspour2015.Letauxde croissanceannuelest de 28%.Il se vendra plus de tablettes que de PC en 2016.77%DES UTILISATEURS DE TABLETTEDECLARENT REDUIRE L’USAGEDE LEUR PC6MILLIONSDE TABLETTES DEVRAIENT ÊTREVENDUES EN FRANCE EN 2013
  7. 7. QuellesincidencessurlessitesLa mobilité entraine un bouleversement des usages, on peutcommuniquer partout, visualiser un site internet où que l’onsoit. Mais voilà, les écrans des plate-formes mobiles possèdentune 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 estvite pénible, on est vite obligé de scroller, zoomer et parfois lesliens 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 lesdifférentes résolutions, l’approche du responsive designconsiste à créer un seul site mais qui sera compatible quelquesoit la taille de l’écran tout en gardant le même contenu.Surface de contact d’un doigt
  8. 8. LeResponsiveDesignDans sa définition la plus simple, le responsive web designcorrespond à un site conçu pour s’adapter aux différentestaillesd’écranetauxdifférentsterminauxpermettantd’afficherle 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 sitesmobiles séparés et tablettes, on commence à repenser les sitesavec un modèle unique qui les rends compatibles avec toutesles plates-formes.Le Responsive Web Design amène une solution pratiqueet économique à cette situation. En effet, il permet de créerune seule et unique interface, fluide, qui affiche le site sous sameilleure 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. 9. LesbeneficesUn rendu parfait du sitequelque soit la plateformePas besoin de zoomer surles plus petites résolutionsExpérience utilisateuroptimiséeToutes les pagessont visibles sur toutesles plate-formesGAIN DE TEMPS AMÉLIORATION DU RÉFÉRENCEMENTECONOMIE SITE PLUS PERFORMANT
  10. 10. Exemples
  11. 11. Exemples
  12. 12. Exemples

×