Affichage optimisé pour tous les écrans

L'internaute ultra connecté

Favorisé par les forfaits Internet hauts débits et les forfaits Internet mobiles toujours plus attractifs, les smartphones de les tablettes tactiles à des prix low cost ont explosé. La tablette tactile s'invite de plus en plus dans les foyers français, avec une progression de 110 % en 1 année. Ils sont aujourd'hui en France, plus de 8 millions à surfer sur cet écran.
Sa progression étant très rapide, le smartphone se généralise. Quatre milliards de personnes dans le monde utilisent un téléphone mobile, dont plus d'un milliard de smartphone.

stucture-site-internet

Source >

Contexte

On constate que les usagés du mobile sont principalement liés au contexte du mobinaute. L'accès au service est conduit par un besoin précis, à un moment particulier, dans un lieu donné. Les services doivent donc être conçus pour répondre à ces attentes contextuelles en termes de Recherche, de Contenus, d'Ergonomie.
L'Internet mobile est aujourd'hui l'unique média conciliant audience, intimité et instantanéité de manière aussi forte, même le Web traditionnel ne permet pas cette instantanéité.

Quelques chiffres

Les Français achètent de moins en moins d'ordinateurs 2016
Le Figaro : En France, les ventes de PC traditionnels baissent en faveur des smartphones ou des modèles hybrides, sauf en milieu professionnel.
Résolution écrans : Stat Counter
Desktop vs Mobile vs Tablet : Stat Counter
Les tablettes dans le monde
Znet >
Mobile vs PC : croissance des "Mobile Fanatics"
Mobilité : Une étude de Thrive Analytics rapporte que les internautes choisissent les appareils mobiles aux ordinateurs pour leurs recherches d'informations locales.
Une nouvelle catégorie d'utilisateurs voit ainsi le jour : les "Mobile Fanatics".
Znet : Chiffres clés : les ventes de mobiles et de smartphones

Étendre son site Internet à l'Internet mobile pourquoi ?

Être plus proche de ses visiteurs, compléter ses offres de service. L'Internet mobile est un moyen pour les sites Internet déjà en ligne de renforcer le contact avec ses visiteurs en proposant un fil d'information en continu. Mais également des services complémentaires, des alertes et de l'information personnalisée.

Á noter également : Depuis le 21 avril 2015 Google pénaliserait les sites non responsive.

Sites Internet : Dédié, Application native ou Responsive ?

Il existe actuellement trois techniques pour publier des contenus Web sur les appareils connectés au réseau Internet : un site Dédié, une Application native et le Responsive web design. Chaque technique présente des avantages et des inconvénients.

Site dédié

Un site Internet dédié consiste à réaliser deux ou plusieurs applications différentes et souvent complèmentaires : un site Internet principal pour écran de bureau, un site pour tablettes, un site pour smartphones etc.

Application native

Une application native est un produit développé spécifiquement dans divers langages informatiques (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).

responsive web design

Un site Internet Responsive web design est un site Internet adaptatif. Concevoir les parcours de navigation en une seule interface auto-adaptable à tous les terminaux. C'est la solution qui sera présentée ici.

site-responsive-design

Le Responsive Web Design c'est quoi ?

Le Responsive Web Design est un ensemble de techniques qui permet de concevoir des sites Internet s'adaptant automatiquement à tous les écrans et garantissant une homogénéité des contenus.

Les Avantages

  • Une expérience utilisateur optimale liée au confort de lecture et de navigation.
  • Les contenus : textes, images, vidéos sont redimensionnées et s'adaptent à la dimension des divers écrans.
  • Coûts de développement réduits.
  • Contenus indexables par les moteurs de recherche.
  • Liens et URL unique, optimum pour les campagnes de promotion

Les bonnes méthodes

Grilles fluides

On parle d'interface fluide lorsque les contenus et la disposition sont élastiques. Les grilles fluides utilisent des blocs en unités relatives pour jouer avec la composition de la page en fonction de la largeur de l'écran.

responsive-web-grilles-fluides

Media Queries

Les Medias queries sont des langages informatiques CSS spécialement destinées aux médias (écrans).
Ils permettent d'adapter dynamiquement le style d'affichage en fonction des périphériques utilisés.

responsive-web-media-queries

Images fluides

Les images dites Responsive s'ajustent automatiquement en fonction de la taille des écrans.
Unités relative
HTML et JqueryPicture
JavaScript - Media queries

responsive-web-design-images-fluides

À quoi ressemble un site Internet responsive sur différents écrans ?

Ci-dessous des copies écrans obtenues depuis une émulation faite sur le site : www.responsinator.com
(Attendez quelques secondes que la page se charge correctement).
Vous pouvez également choisir de redimensionner la fenêtre de votre navigateur et tester le site Internet : Graphcreation.com