Share
En ce début d’année 2015, c’est le moment idéal pour aborder «L’état de la conception de sites Web réactifs»..
Nous allons revenir sur ce que nous savons à propos de RWD, de ce qui a été laissé de côté ces derniers temps, des nouvelles astuces que nous pouvons intégrer à notre jeu aujourd'hui et de ce qui nous attend à l'horizon..
Avant de commencer, définissons d'abord ce que nous entendons par «conception de sites Web réactifs»..
Lorsque, dans son article sur A List Apart, Ethan Marcotte avait initialement inventé ce terme il y a cinq ans, il avait cité les grilles fluides, les images flexibles et les requêtes des médias comme trois «ingrédients techniques» de RWD..
L'illustration d'accompagnement immortelle de Kevin CornellCependant, il a immédiatement qualifié ces spécifications en disant:
"... mais cela nécessite aussi une façon de penser différente."
Depuis cet article de 2010, nous avons assisté à une évolution constante de la technologie utilisée par les utilisateurs pour accéder à Internet, ainsi qu'à l'émergence de plusieurs nouveaux ingrédients techniques pouvant être ajoutés à notre boîte à outils de développement..
Nous utilisons toujours des grilles fluides, des images flexibles et des requêtes multimédia, mais ces trois choses seules ne constituent plus une image complète de ce qu’implique le Responsive Web Design..
La technologie et les techniques de conception de sites Web étant en perpétuelle mutation, la définition de RWD devrait idéalement nous donner une autre façon de penser ce sera tout aussi applicable après cinq autres années de changement comme aujourd'hui.
À mon avis, cette façon de penser peut se résumer comme suit.
"Responsive Web Design est une approche de la création de sites Web pouvant répondre à tous les dispositifs de navigation Web connus, avec interaction de contenu et d'interface utilisateur optimisée dans la mesure du possible pour tous les visiteurs. "
En nous concentrant sur la façon de penser qui sous-tend la conception Web réactive plutôt que sur des ingrédients techniques spécifiques, nous restons libres de rechercher les meilleurs nouveaux moyens de créer des sites réactifs dans le paysage en constante évolution de notre secteur..
Bien que beaucoup de choses aient changé dans RWD, il y en a aussi qui sont restées essentiellement les mêmes et que de nombreux développeurs accepteront d'être de bonnes pratiques..
Voici certains des aspects les plus largement acceptés de la RWD actuelle telle que nous la connaissons.
Nous savons tous que nous devons définir une liste de résolutions d'affichage possibles, dans la mesure où vous optez pour le bras, plusieurs densités de pixels et différentes tailles de fenêtres d'affichage..
Nous devons prendre en charge plusieurs méthodes de saisie, par exemple dire au revoir à la dépendance vis-à-vis de la souris et rendre les éléments de l'interface utilisateur faciles à toucher.
Nous devons utiliser les requêtes multimédia pour déployer des ajustements dans nos mises en page, au besoin..
Nous savons que les points d'arrêt doivent être placés non pas à des largeurs prédéterminées, mais plutôt au point où la conception “se brise” et nécessite un ajustement..
Nos images doivent être de taille fluide afin qu'elles ne soient ni trop grandes ni trop petites pour différentes tailles d'écran.
D'autres supports, tels que les lecteurs vidéo et audio, doivent également se comporter de la même manière fluide.
Nous devons inclure une balise méta de la fenêtre d'affichage (et, à l'avenir, l'équivalent CSS) pour que nos mises en page se comportent comme nous le souhaitons:
Quelques philosophies et technologies ont été intégrées dans la conception de sites Web adaptatifs ou, du moins, pas tout à fait exclues, mais sont progressivement délaissées par de nouvelles solutions..
Considérez la collection suivante de périphériques de navigation Web:
Gardez à l’esprit que cette liste est entièrement composée de cas d’utilisation actuels et réels..
Supposons que mon site propose un ensemble de fonctionnalités de taille plus petite, conviviales au toucher et spécifiques au mobile, ainsi que des fonctionnalités de conception de taille supérieure, dépendantes de la souris et spécifiques au bureau. À quelle largeur dois-je définir des requêtes multimédia pour déployer mes fonctionnalités «mobile» et «de bureau» afin que tous les utilisateurs de ces périphériques aient une expérience de premier ordre?
Notre liste couvre une poignée d'exemples différents, mais il existe des centaines, voire des milliers de cas d'utilisation supplémentaires qui jettent des clés supplémentaires dans les travaux..
La réalité est qu’aujourd’hui, il n’ya plus de distinction claire entre les appareils mobiles et les ordinateurs de bureau. Le meilleur moyen d’aller de l’avant est donc de prendre en charge simultanément toutes les méthodes de navigation Web connues..
Si vos sites sont entièrement conçus pour répondre à tous les cas d'utilisation connus, et pas seulement à ceux définis traditionnellement comme mobile et poste de travail, vous avez créé la forme de réactivité la plus étendue possible..
Tout d'abord, nous avons cessé d'essayer de créer des mises en page à pixels fixes entièrement dans Photoshop, car elles n'étaient ni suffisamment fluides ni suffisamment flexibles pour prendre en charge le nouveau spectre d'exigences de visualisation..
Maintenant, nous commençons également à abandonner la création de dispositions de pixels fixes dans notre code, pour la même raison. En construisant plutôt nos mises en page en utilisant une combinaison de rem, em et % valeurs, nos sites restent toujours totalement évolutifs et flexibles.
Avec l'approche des unités flexibles, les conceptions peuvent être agrandies et réduites de manière uniforme en modifiant une valeur de base unique. Les paramètres de police et de zoom du navigateur des utilisateurs peuvent être entièrement respectés et pris en charge. Plusieurs problèmes de taille de fenêtre peuvent être résolus immédiatement. Plus important encore, la lisibilité et l'accessibilité du contenu peuvent toujours être maintenues.
Les infrastructures frontales «Big 2» débarquent déjà du Good Ship PX et embarquent pour leurs vols à destination de l'unité flexible..
Bootstrap 4 est en préparation et sera entièrement rem / em / % basé, laissant derrière px configurations basées sur Bootstrap 3. Et Foundation 5 a déjà achevé sa transition vers le travail avec des unités flexibles.
Le temps de la bonne vieille unité px que nous connaissons tous si bien au fil des ans tire à sa fin..
Il se pourrait bien qu’il se retrouve bientôt dans une chaise confortable dans la maison de retraite, à côté de ses vieux amis de l’époque glorieuse., Support IE6 et en-têtes Flash animés.
En parlant de Flash…
Certes, nous avons peut-être vu disparaître des en-têtes Flash animés il y a quelque temps, mais nous voyons toujours des vidéos, des diaporamas et des jeux dépendants de Flash apparaître régulièrement. Je ne parle pas seulement de petits sites d'amateurs: je vois des sites majeurs et à forte fréquentation qui affichent toujours ce message si vous n'utilisez pas Flash et n'essayez pas de regarder leurs vidéos:
Il est très courant que les appareils mobiles ne prennent pas en charge Flash. Il n'est donc pas sûr de s'y fier pour fournir du contenu..
En fait, pour des raisons principalement de sécurité et de stabilité, les navigateurs Web commencent à moins prendre en charge les plug-ins tels que Flash, Silverlight et Java, au profit d'une technologie alternative fonctionnant uniquement via des inclusions de navigateur natif..
Le moment est venu de laisser les médias se glisser dans les diapositives et de passer à une nouvelle ère de techniques d'affichage multimédia..
Certaines de ces technologies sont presque toutes neuves et d'autres existent depuis un certain temps mais ne cessent de s'améliorer, mais elles ont toutes un point commun: elles sont des entrées dans le monde des RWD qui vont au-delà de la focalisation initiale sur les grilles flexibles et les images fluides. et questions des médias.
Ce n'est pas parce que Flash et ses homologues sont sur la pente descendante que nous ne pouvons toujours pas avoir de belles choses. La vidéo, l'audio, l'animation, et même la 3D et les jeux complets sont encore très présents dans le mix grâce à HTML5 et aux goodies CSS3 et JavaScript intégrés au mixage..
Là où nous avions des plugins de navigateur, nous avons maintenant des lecteurs audio et vidéo HTML5 natifs, une animation CSS3, des outils tels que Google Web Designer, Canvas, WebGL et une liste toujours croissante de nouveautés intéressantes..
Le nouvel élément HTML5 et éléments.
Cela nous permet de vérifier la taille de la fenêtre et la densité de pixels de l'appareil, puis de charger la version la plus appropriée d'une image en fonction des résultats..
Ce n'est pas encore complètement supporté nativement dans les navigateurs, cependant il existe un très solide polyfill nommé Picturefill (de Scott Jehl, l'homme derrière Responsible Responsive Design) qui permet
Pour en savoir plus sur le fonctionnement de tout cela, consultez la rubrique Astuce: comment utiliser une image HTML5 pour des images réactives.
Pourquoi avoir des icônes de taille fixe alors que vous pouvez avoir une liberté de redimensionnement totale en modifiant le paramètre de taille de police dans CSS?
Grâce à d'incroyables bibliothèques de polices Web telles que Font Awesome, Entypo, Typicons et plus, vous pouvez avoir toutes sortes d'images sur vos sites, des fusées aux trombones, en passant par les logos de médias sociaux. Mais comme elles sont livrées sous forme de polices et non d'images, vous pouvez les recolorer et les redimensionner via CSS.
Cela signifie que vous pouvez vous assurer que vos icônes répondent bien à la taille de la fenêtre dans laquelle elles se trouvent, toujours agréables et faciles à voir et à interagir selon les besoins..
Flexbox est en passe de résoudre nombre des maux de tête les plus importants que les concepteurs de sites Web tentent de réprimer depuis des années.
Il n’ya qu’un problème: les taux d’utilisation des navigateurs qui ne le prennent pas en charge sont encore trop importants dans de nombreux cas d’utilisation pour que Flexbox puisse fonctionner pleinement. Si vous travaillez sur un projet qui exclut la prise en charge d'IE8, IE9 et Opera Mini, lancez-vous.
Cependant, CanIUse.com fixe le pourcentage d'utilisation globale de ces trois navigateurs à 3,18%, 2,13% et 2,82% respectivement. Il n’existe pas non plus de solution de secours fiable pour Flexbox à la minute. Cela signifie que sur un site avec un trafic moyen à intense, vous voyez des centaines, voire des milliers d'utilisateurs, se retrouver chaque mois sur un site endommagé..
Nous voulons tous que Flexbox devienne la norme en matière de gestion de la présentation afin de pouvoir cesser d'imaginer des moyens d'effectuer des tâches de présentation relativement simples. Dès que les trois marques rouges restantes de ce graphique CanIUse disparaîtront, tout est prévu..
Nous avons parlé de composants Web il y a quelques instants, et ils nous guettent toujours comme la voie de l'avenir, et nous rapprochons de jour en jour de la percée dans le grand public.
Plus tôt nous avons mentionné le vidéo, l'audio et image éléments et leur utilité pour la conception Web réactive. Lorsque les composants Web entreront en vigueur, chacun d'entre nous sera effectivement en mesure de créer des éléments personnalisés, comme ceux-ci, pour n'importe quel objectif à remplir. En plus de cela, les composants Web seront partageables, ce qui signifie qu'il y a une quantité pratiquement illimitée de nouveaux éléments réactifs qui peuvent devenir utilisables dans nos conceptions..
Cela démocratise essentiellement HTML, qui est un peu énorme.
S'il y a un nouvel élément dont le monde pourrait vraiment tirer parti, nous n'aurons pas besoin d'attendre la mise en œuvre du navigateur. Il suffit de voir un développeur open source mettre en place quelque chose et prendre la décision généreuse de partager son travail..
Par exemple, nous avons mentionné précédemment que RWD nécessite un placement de média flexible, notamment en permettant aux médias intégrés iframe tels que les vidéos YouTube de s'adapter et de conserver leur rapport hauteur / largeur..
Le développeur Joselito Junior a créé et ouvert un composant Web qui fait exactement cela, en utilisant ce code HTML simple:
En savoir plus sur cette nouvelle technologie fascinante dans Comment créer vos propres éléments HTML avec des composants Web.
Étant donné que la technologie évolue constamment, il est extrêmement important pour nous de rester concentrés sur les objectifs sous-jacents de la conception Web réactive, et de ne pas être trop attachés à une manière unique de faire les choses. De cette manière, nous nous assurons d'être toujours ouverts à la découverte de nouvelles façons de créer de meilleures expériences pour les utilisateurs de nos sites..
Pour ce faire, nous devons toujours garder nos oreilles à la terre, à l’écoute des tout derniers développements en matière de navigation Web et de techniques de conception Web..
Si vous souhaitez perfectionner vos techniques de conception Web réactives, vous pouvez consulter mon cours Responsive Web Design Revisited. En un peu plus de deux heures, je vais vous expliquer tout ce que vous devez savoir pour créer un site Web réactif complet avec des techniques de pointe. Les deux premières vidéos sont gratuites, alors allez-y, obtenez un aperçu du site que vous allez créer, et tout ce que vous apprendrez..
Passez une excellente année 2015 et découvrez un site Web réactif en constante évolution!
Accentsconagua