L'univers du web

RéSi@W
RéSI@W
Sylvain LEREBOURG
211 rue des sports
27500 CAMPIGNY

Site internet dédié, application native ou responsive

Actuellement, il existe 3 techniques pour diffuser 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 solution présente des avantages et des inconvénients.

Site internet dédié

Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal pour écrans de bureau, un site pour smartphones, un site pour tablettes, etc...

Avantages et inconvénients des sites dédiés
Avantages Inconvénients
La possibilité d'affiner précisément la structure du site et ses contenus en regard du périphérique utilisé Le contenu dupliqué
La possibilité de cibler et de s'adapter à des fonctionnalités variées La maintenance de plusieurs versions de site et de plusieurs adresses web

Application native

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

Avantages Inconvénients
Avantages et inconvénients des applications natives
La prise en charge facilitée de fonctionnalités natives Le coût du développement, des licences, et de la maintenance pour chaque système d'exploitation
Un installation possible sur son périphérique Un contenu non indexable par un moteur de recherche web classique
Une optimisation sur le périphérique (ergonomie, performances, densité de pixels) La mise à jour de l'application nécessite une action de l'utilisateur

Site internet responsive

Le Responsive Web Design (RWD) est un ensemble de techniques qui permet de concevoir des sites Internet s'adaptant automatiquement à tous les écrans, de manière transparente pour l'utilisateur, et garantissant une homogénéité des contenus.

Avantages Inconvénients
Avantages et inconvénients du responsive web design
Une expérience utilisateur optimale liée au confort de lecture et de navigation.
Il est aujourd’hui possible d’identifier la résolution d’un écran, mais pas sa taille physique. Or, sur des écrans de tailles très différentes, la résolution peut être la même.
Les contenus : textes, images, vidéos sont redimensionnées et s'adaptent à la dimension des divers écrans. Il est difficile de contourner les limites ergonomiques et de performances des navigateurs web.
Coûts de développement réduits.
Créer un site en Responsive Design est contraignant.
Contenus indexables par les moteurs de recherche. Faire du responsive, c'est… plus long que de ne rien faire (25% du temps supplémentaire)
Responsive Web Design (RWD)

Statique, liquide, adaptative ou responsive ?

Techniquement, il existe 4 concepts de mises en page de sites internet : les sites statiques, liquides, adaptatifs et responsive.

Design statique

La mise en page statique existe depuis longtemps, c’est ce qu’il y a de plus traditionnel. Le site a une largeur définie à la conception, 1024 pixels de large par exemple. Si la fenêtre du navigateur est plus large que le site, il y aura du blanc ou un arrière plan sur les côtés. Par contre, si la fenêtre du navigateur est moins large que le site, il y aura une barre de défilement horizontal qui apparaîtra en bas de la fenêtre pour pouvoir accéder à la partie qui déborde, ce qui n’est pas très ergonomique.

Design liquide

Dans une mise en page liquide (ou fluide), les largeurs des différents éléments, principalement les colonnes, sont exprimées en pourcentage, ce qui fait que le site s’adapte de façon automatique à la taille de l’écran ou de la fenêtre du navigateur. la largeur du site et des colonnes qui le composent sera toujours proportionnelle à la largeur de la fenêtre du navigateur. Ce design n’est pas très adapté aux très grandes tailles d’écrans ni aux très petites tailles.

Design adaptatif

Un design adaptatif utilise les Media Queries CSS3 pour prévoir plusieurs mises en page différentes pour différentes tailles d’écrans. Lorsque la fenêtre du navigateur est redimensionnée, à chaque franchissement d’une largeur d’écran définie par les Media Queries, la mise en page correspondante est utilisée pour afficher le site.

Design responsive

Un design responsive, tout comme un design adaptatif, prévoit plusieurs mises en page différentes pour différentes tailles d’écrans, toujours à l’aide des Media Queries CSS3, mais chacune de ces mises en page est fluide (ou liquide). Cela permet de toujours utiliser de façon optimale la largeur d’affichage disponible, quelle que soit la taille de l’écran ou de la fenêtre du navigateur.

Le site liquidapsive.com vous permet d'avoir un aperçu de ces 4 types de web design. En haut à droite, un menu déroulant propose de choisir le type de web design. Vous n’avez plus qu’à redimensionner la fenêtre de votre navigateur pour voir comment le site réagit.

Conteville