Share
Il était une fois, dans le domaine de la conception Web, tout ce que vous deviez faire pour rendre vos sites compatibles entre eux était de leur donner une largeur de 960 pixels et de corriger les problèmes apparus dans IE6. Ah, les vieux jours…
De nos jours, Internet est composé de nombreux éléments en mouvement qu'il est presque certain qu'au moins certains de vos utilisateurs finaux vivent des expériences moins que parfaites, en raison de problèmes dont vous n'aviez probablement aucune idée..
Nous venons d'ouvrir les portes d'un tout nouveau cours intitulé «Bombproof Web Design» qui vous aidera à chasser les gremlins sournois qui pourraient se cacher dans les coins d'Internet et faire exploser vos sites quand vous ne les regarderez pas..
Dans cet article, nous allons parcourir 7 façons dont vous pourriez ne pas savoir que vos sites explosent, dont chacun est habilement géré dans le cours Bombproof Web Design.
Si vous pouvez passer en revue ces sept points et affirmer que vos sites sont solides, je serai très impressionné et vous obtiendrez une grande et grande étoile d'or.!
La première façon dont vous ignorez que vos sites explosent est la suivante:
Vous ne le réalisez peut-être pas, mais vos polices Web peuvent en réalité être très différentes d'un système d'exploitation à l'autre, même dans le même navigateur. Par exemple, les trois captures d’écran suivantes sont toutes du même site, avec exactement les mêmes paramètres de police et le même code..
Le premier est pris dans Chrome sur un Mac:
D'accord, tout semble être bien là. Vérifions à nouveau le même site sur Chrome, cette fois via Ubuntu:
Hmm, c'est un regard assez désagréable dans les titres. Vous pouvez à peine distinguer la lettre "s" et les lettres "A" et "e" sont presque fermées. Qu'en est-il de Chrome sous Windows?
Gah, regarde ces artefacts! Chaque courbe de lettre est suspendue et globalement, elle est pixelisée et laide..
Vous pouvez vous faire prendre avec des polices rendues de manière incohérente, voire totalement absentes, de différentes manières, à moins que vous ne disposiez d'un plan pour évaluer et déployer vos choix de typographie..
Même le pire rendu des polices Web rendra vos sites encore plus beaux, comparé aux navigateurs qui ne rendent pas du tout les polices Web, comme Opera Mini. Et les polices Web ne sont pas la seule chose qu'Opera Mini ne rend pas. C'est le même site que vous voyez ci-dessus, cette fois dans Opera Mini:
Comme vous pouvez le constater, pratiquement tout a échoué, hormis les couleurs de base et le texte. Opera Mini est un navigateur mobile conçu pour gérer les sites de manière très légère, ce qui lui permet d'être utilisé sur des périphériques de spécifications inférieures et pour ceux qui tentent de conserver la bande passante ou les ressources système. Malheureusement, une partie de la solution consiste à ne pas prendre en charge toute une gamme de propriétés CSS, en particulier CSS3..
Opera Mini a une base d’utilisateurs petite mais importante. Pour mettre les choses en perspective, les statistiques que j'ai consultées montraient que l'utilisation d'Opera Mini représentait environ un tiers du nombre total d'utilisateurs d'Internet Explorer, et une valeur supérieure à celle du navigateur Android et de Opera Desktop. C'est probablement le navigateur le plus difficile à maîtriser aujourd'hui, mais d'une manière ou d'une autre, vous voudrez avoir un plan..
Sur Firefox, quand vous allez sur Préférences> Contenu vous verrez ceci:
Sur Chrome, quand vous allez à Paramètres> Afficher les paramètres avancés> Contenu Web vous verrez ceci:
Ces deux panneaux de paramètres sont conçus pour permettre aux utilisateurs d'ajuster la taille de la police de leur navigateur à leurs besoins. Les personnes malvoyantes utiliseront généralement ces paramètres pour les aider à lire plus facilement. Ils sont également pratiques pour ceux qui utilisent la télévision de leur salon pour naviguer, ce qui devient de plus en plus populaire..
Il est très courant de définir une taille de police de base pour un site tel que 14px ou 16px contre la html et corps éléments. Toutefois, cela empêche les préférences de taille de police de l'utilisateur de prendre effet. Si un utilisateur a une déficience visuelle, l'impossibilité d'agrandir le texte rend la vie beaucoup plus difficile, ou si la taille de la police a été modifiée pour correspondre à une taille d'affichage particulière, cela peut rendre le texte très difficile à lire.
De plus, si un utilisateur a sélectionné une taille de police autre que celle par défaut, il est important que l'ensemble de votre mise en page puisse évoluer. Vous ne voulez pas vous retrouver avec une mise en page qui soit complètement fausse, car elle ne convient qu'à une seule taille de texte.
Par exemple, voici à nouveau notre même site de démonstration, mais construit sans possibilité d’échelle et avec une taille de police de base fixée à 22px:
Pourtant, avec la mise à l'échelle intégrée dans le code, le même site avec une taille de police définie par l'utilisateur de 22px ressemble à ceci:
Vous ne pourrez peut-être pas voir ce qui se passe dans la capture d'écran ci-dessus, car l'image a été réduite pour tenir dans cette colonne. À première vue, cela pourrait ressembler à la toute première capture d'écran de l'article, mais ce n'est que parce qu'elle a été agrandie proportionnellement aux paramètres de taille de police de l'utilisateur..
Pour vous donner une meilleure idée, voici une section du site à sa taille réelle:
Construire vos sites de cette manière signifie que vous donnez à l'utilisateur la même expérience de visionnage quelles que soient les préférences qu'il a définies dans son navigateur..
Presque tous les concepteurs Web ont déjà fait la transition de la mise en page réservée aux ordinateurs de bureau à la prise en charge des résolutions courantes des tablettes et des téléphones, mais cela ne représente toujours qu'une partie de l'image..
La liste des résolutions possibles aujourd'hui est plus longue que votre bras, et nous devons également prendre en compte la densité de pixels, la partie de l'écran occupée par la fenêtre d'affichage et la taille physique réelle de l'écran..
À l'heure actuelle, vos sites peuvent être visités par les utilisateurs sur des écrans minuscules et gigantesques. Il est presque impossible de prédire quelle combinaison de résolution, de densité de pixels, de taille de la fenêtre d'affichage et de taille physique auront vos visiteurs. Un smartphone de 5 "pourrait avoir exactement la même résolution qu'un téléviseur de 65", mais la navigation sur un site sur chaque appareil est très différente du point de vue de l'utilisateur..
Cela dit, il n’est pas du tout difficile de créer des mises en page totalement flexibles pour tous les écrans. Avec le bon ensemble de principes qui sous-tendent votre code de disposition, tous vos sites seront également à l'aise sur tous les écrans, des téléviseurs à une extrémité du spectre:
Mon propre téléviseur 40 "sur notre site de démonstration, dans une taille totalement confortable pour lire sur le canapé.Aux petites montres intelligentes situées à l'autre bout du spectre, par exemple via l'application WebBrowser pour Sony SmartWatch 2:
Site affiché à la taille réelle de l'application WebBrowser sur Sony Smartwatch 2Il est facile de supposer que tous les utilisateurs disposeront de JavaScript fonctionnel sur lequel nous pouvons absolument compter. JavaScript a tendance à jouer un rôle dans presque tous les sites et, dans certains cas, le contenu est entièrement piloté par des éléments tels que les composants Web et le rendu côté client..
Mais que se passe-t-il si JavaScript n'est pas aussi présent qu'on pourrait le penser??
Il existe en fait de nombreuses raisons pour lesquelles un visiteur peut ne pas voir un site dépendant de JavaScript tel que vous le souhaitiez..
Le résultat est que même si le pourcentage d’utilisateurs qui ne disposent pas de JavaScript entièrement fonctionnel est faible, il est toujours présent et devient de plus en plus important au fur et à mesure de la réussite et de la fluidité de vos sites..
Si vous n'avez pas de plan, au lieu de votre site de rendu côté client ultra rapide et génial, vos visiteurs pourraient voir un tas de HTML non restitué:
Ou au lieu de vos composants Web étonnants, vos visiteurs pourraient voir une mise en page réduite:
Pendant longtemps, les interactions avec les sites Web dépendaient presque entièrement de la souris. Toutefois, vous ne pouvez plus présumer qu'un utilisateur a une souris ou est capable de l'utiliser confortablement. Très souvent, les internautes ne se trouvent pas à un bureau lors de la visite de vos sites, mais au moyen d'un appareil tactile ou du canapé..
Cela signifie que si votre site nécessite des interactions de la souris pour se déplacer, vous constaterez que certains de vos visiteurs ne peuvent jamais accéder à certaines parties de votre site..
Idéalement, les sites devraient être navigables non seulement sans souris, mais aussi spécifiquement conçus pour le clavier. Si vous pouvez naviguer sur votre site à l’aide d’un clavier, il est fort probable que vous le fassiez également sur d’autres périphériques d’entrée, tels que des télécommandes TV ou des contrôleurs de console..
De plus, les personnes à mobilité réduite, telles que les personnes souffrant d'arthrite ou d'accident vasculaire cérébral, par exemple, peuvent préférer naviguer via un appareil d'assistance tel qu'un grand clavier..
Claviers d'assistance. Image reproduite avec l'aimable autorisation de https://www.flickr.com/photos/oregondot/6235420475Et en parlant de vos sites travaillant avec des aides techniques…
Ne vous méprenez pas, je sais que vous avez probablement déjà pris la bonne décision en incorporant les rôles WAI-ARIA dans vos sites et en essayant de les rendre aussi accessibles que possible..
Mais ce que j’ai découvert dans ma propre expérience, c’est que vous pourriez penser que vous avez rendu vos sites accessibles, jusqu’à ce que vous essayiez réellement de: accès de la même manière qu'une personne handicapée doit.
Quelques instants après avoir essayé de naviguer sur le Web avec un lecteur d'écran et un clavier pour la première fois, je me sentais très mal à propos de certains sites que j'avais construits dans le passé, sites que je pensais honnêtement avoir créés conformément aux instructions pour l'accessibilité..
L'un des principaux problèmes rencontrés lors de la tentative de lecture de documents sur Internet était l'absence de rôles de repère optimisés pour WAI-ARIA, qui permettaient aux utilisateurs d'accéder rapidement aux "points de repère" des sites..
Ce que j’ai découvert, c’est que de nombreux sites bien intentionnés ont incorporé des repères WAI-ARIA, mais d’une manière qui, malheureusement, n’a donné aucune information à l’utilisateur qui pourrait l’aider à se repérer dans le site:
Cinq zones de navigation mais pas de zone de contenu principale pour les utilisateurs de lecteurs d’écran où accéder.Certains autres sites bien connus n'ont tout simplement pas utilisé de code d'accessibilité:
Inclure des rôles de référence WAI-ARIA dans votre code est en fait très facile et ajoute seulement quelques minutes à un projet, c'est juste une question de savoir comment les ajouter correctement..
Vous seriez surpris de voir à quel point il est facile d’avoir une base solide d’accessibilité avec quelques techniques simples, telles que l’optimisation de la structure des titres, le contrôle du contraste des couleurs, ainsi que certains des points évoqués plus haut, tels que l’adaptation de la taille de la police et la prise en charge de différentes des dispositifs d'entrée.
Si vous avez coché chaque élément de la liste ci-dessus et que vous vous êtes dit: "Clouez-le déjà", alors, bravo, vous êtes génial! Comme je l'ai dit, vous obtenez une grande étoile d'or pour avoir été épique.
Cependant, si vous vous retrouviez en train de dire "Oh, je ne m'en rendais pas compte" ou "Je ne suis pas sûr d'être couvert à ce sujet", il est fort possible que vos sites explosent sur Internet au moment où nous parlons - et par " exploser "je ne veux pas dire dans le bon genre de manière!
S'il y avait plus d'un de ces points dont vous n'étiez pas au courant, ne vous inquiétez pas. Il est en fait beaucoup plus facile de "Bombproof" que vous ne le pensez. Il s’agit simplement de bien connaître les informations nécessaires et de proposer des solutions simples..
C'est ce que notre nouveau cours "Design Web anti-bombes" vous équipera. Au cours de quinze leçons vidéo faciles à suivre, je vous expliquerai personnellement ce qu'il faut surveiller et les étapes à suivre pour "Bombproof" sur tous vos sites à partir de maintenant..
Les deux premières vidéos sont entièrement gratuites, alors allez-y, jetez un coup d'œil à "Bombproof Web Design":
Regarder 2 vidéos gratuites de Bombproof Web Design
on se verra là bas!
Accentsconagua