12
RESPONSIVE DESIGN

Responsive design

  • 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

Page 1: Responsive design

RESPONSIVE DESIGN

Page 2: 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.

Page 3: Responsive design

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

Page 4: Responsive design

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

Page 5: Responsive design

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

Page 6: Responsive design

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

Page 7: Responsive design

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

Page 8: Responsive design

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.

Page 9: Responsive design

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

Page 10: Responsive design

Exemples

Page 11: Responsive design

Exemples

Page 12: Responsive design

Exemples