Share
Cela fait presque un an que la tablette d'Apple, l'iPad, a été distribuée aux foules d'adorateurs adorant les gadgets. Steve Jobs a récemment effectué une visite très appréciée à San Francisco pour dévoiler la deuxième génération de cet appareil parmi de nombreuses tablettes Android, notamment le Motorola Xoom et le Galaxy Tab de Samsung. Ces appareils arrivent entre les mains de millions d’utilisateurs et deviennent rapidement des appareils offrant un grand potentiel de navigation..
Dans un article précédent sur Webdesigntuts +, nous avions abordé le thème du "nouveau repli" et expliqué comment la vague de nouveaux appareils (des téléphones mobiles aux tablettes en passant par les téléviseurs haute définition) avait brisé la notion d'environnement d'écran unique que les concepteurs Web pouvaient créer. planifier pour.
Du côté des ordinateurs de bureau / portables de l’industrie de l’informatique (PC), les moniteurs ont commencé à s’agrandir considérablement il ya quelques années? et la conception Web a commencé à refléter cette tendance en 2009-2010 avec de grandes conceptions de paysages, des images grand format et des arrière-plans riches en textures. Nous pouvons appeler ce mouvement la "mise à l'échelle" de la conception Web pour le grand écran.
Remarque: Pour les besoins de cet article, nous allons faire référence à tous les ordinateurs de bureau dotés de moniteurs dédiés (vous savez, ces gros monstres assis sur le bureau des personnes). Oui, même les ordinateurs de bureau de marque Apple seront appelés "PC" pour la durée de cet article. C'est bon, tu peux respirer maintenant.
Depuis le début de 2010 cependant, la diversité des écrans a également commencé une réduire processus. Les fabricants de périphériques ont commencé à ajouter une foule de nouvelles résolutions d'écran, la plupart plus petites. Comme nous l'avons vu avec les tendances lorsque les écrans grandissent, nous constatons également une tendance similaire pour ces nouveaux appareils plus petits; En tant que tel, la conception Web a considérablement changé en ce sens que de nouvelles tailles d'écran avec de nouvelles méthodes de saisie deviennent radicalement des acteurs majeurs des forces motrices des tendances de la conception Web..
Dans cet article, nous examinerons quelques changements majeurs que les concepteurs Web ont dû effectuer pour gagner la compatibilité des tablettes et savoir comment procéder de la même manière. Nous allons également jeter un coup d'œil à quelques exemples intéressants de ces sites conviviaux pour tablettes..
Voyons l'un des points évidents liés à l'expérience utilisateur: lorsque vous naviguez sur un écran tactile, vous devez utiliser un doigt. En naviguant sur un ordinateur, on peut avoir la précision d'une souris.
La principale différence dans la conception d'un expérience utilisable pour chaque plate-forme est la proportion. La navigation sur une tablette doit être plus facile et plus grande que sur un PC? Cela signifie que les concepteurs doivent atteindre le "juste milieu" (être assez gros pour naviguer facilement sur une tablette, mais pas trop gros pour paraître ridicule sur un ordinateur) ou avoir un site séparé dédié à la tablette qui utilise une feuille de style différente (et même une autre mise en page) tout à fait.
La plupart des utilisateurs d’ordinateurs personnels ont l’une des rares résolutions communes sur les écrans d’environ 15? - 24 ?. Certains ont des écrans beaucoup plus grands, mais très peu en ont de plus petits. L'iPad, en contraste, a un 9,7? écran à une résolution de 1024x768 et la plupart des tablettes Android entrent à 7?.
Cependant, les résolutions 1024px ne sont pas extrêmement rares pour les tablettes ou les PC. La vraie différence que nous devons noter est la ?de toute façon est la bonne façon? attitude des comprimés avec accéléromètres intégrés. L'iPad gère ce changement assez bien en réduisant les conceptions à largeur fixe pour les adapter à la largeur de 768px, ou, bien sûr, en ajustant celles ayant une largeur de fluide adaptée aux nouvelles dimensions..
Néanmoins, le concepteur Web moyen a un problème unique: il ne peut pas prédire l’environnement dans lequel une personne consultera son site..
La question est: quelle est la solution à ce problème? Méthodes de conception adaptative sont la solution principale, car les développeurs utilisent le CSS adaptatif pour indiquer uniquement si un appareil est d'une marque, d'un navigateur ou d'une résolution donnés.
Le problème est, il n'y a pas qu'une seule résolution supplémentaire ajoutée dans le mélange? Il y en a une pléthore. Les méthodes CSS / JavaScript adaptatives fonctionnent bien pour quelques appareils, mais il s’agit d’une méthode encombrante que je doute que la plupart des développeurs voudraient utiliser. Je veux dire, voudriez-vous concevoir votre site Web vingt fois avant son lancement pour tous les différents appareils disponibles? Je sais que je ne le ferais pas.
De ce fait, les mises en page fluides deviendront probablement plus courantes, car elles s’adapteront automatiquement aux nouvelles résolutions qui leur sont présentées sans le besoin fastidieux de feuilles de style multiples..
Comme nous l'avons dit précédemment, les accéléromètres intégrés signifient que l'écran d'une tablette n'a pas de résolution définie. Grâce à ce changement de résolution avec peu d’effort et aux nouveaux mécanismes de défilement par inertie, il n’ya pas de pli définitif.
Quel est le pli? Le pli est fondamentalement le point de coupure entre ce que l'utilisateur peut voir et ce qu'il ne peut pas voir avant le défilement. C’est un terme tiré de l’idée du journal plié et qui a été utilisé dans la conception Web pour définir la visibilité. Les utilisateurs jugent ce qu'ils peuvent voir et à quelle vitesse ils le perçoivent.
Cependant, le problème est qu’il ya trop de navigateurs à prendre en compte. Le tableau ci-dessous a été utilisé dans l'article de Shaun Cronin sur le pli pour illustrer le large éventail de résolutions utilisées pour visiter WebDesignTuts +. Comme vous pouvez le constater, il existe plus de navigateurs qu’il n’est possible de prendre en compte dans un flux de travail normal, et les appareils mobiles ont contribué à ce nombre..
Le problème réside dans le fait que le pli est adaptatif sur chaque périphérique lorsque celui-ci tourne. C'est une histoire très similaire à celle ci-dessus sur le fluide et la largeur.
Vous avez probablement entendu dire: Apple n'aime pas Flash. Aucun des appareils Apple fonctionnant sous iOS n'a la technologie Flash intégrée, ni possible à installer. Cela signifie que certaines parties du Web sont tout simplement incompatibles avec un iPad..
Il faut dire que l'utilisation courante des sites Web Flash est rare aujourd'hui, mais les éléments de site Web utilisent toujours la norme. Par exemple, beaucoup de vidéos sur des sites semi-populaires ne sont pas disponibles sur iPad. Cependant, des sites vidéo plus populaires tels que YouTube intègrent lentement HTML5. C'est la solution préférée d'Apple par rapport à Adobe Flash. La cinquième révision de HTML propose une sélection de nouveaux éléments pouvant être proposés comme alternatives aux utilisations principales de Flash, telles que la distribution vidéo et audio. Et grâce à la mise en œuvre de sites tels que YouTube et CNET, il est clair que cette transition se produit.
La plupart des gens peuvent penser que ce n'est pas nécessaire. Mais après seulement un an d'existence entre les mains du public, l'iPad a déjà acquis une large part de marché de la navigation, de sorte qu'il devient presque plus important que de considérer les utilisateurs d'IE 6..
?C'est presque comme si le dimensionnement n'avait pas d'importance sur les tablettes.?
iPad exécute le navigateur Safari basé sur le Webkit, sous forme mobile. Comme nous en avons discuté dans la section précédente, Safari pour iPad est très compatible avec HTML5, mais tombe dans quelques zones. La typographie est une chose car, bien que l'iPad prenne en charge le rendu SVG, il ne prend pas en charge les autres services de rendu de texte utilisant le format Flash ou même Cufon d'Adobe..
Les pseudo-classes populaires ne peuvent pas être utilisées pour créer des effets tels que le survol de liens en raison du manque de curseur.
Cependant, l'iPad supprime les barrières entre l'utilisateur et le contenu, le zoom avant et arrière étant beaucoup plus facile. C'est presque comme si le dimensionnement n'avait pas d'importance sur les tablettes.
Dites au revoir aux applications Web: Éloignons-nous de l'exemple spécifique de l'iPad pour un moment. Regardons plutôt l'image dans son ensemble. Il existe des centaines de milliers d'applications sur l'App Store, dont plus de 65 000 sont spécifiques à l'iPad. Un nombre croissant d'applications est également disponible sur le marché Android (la plupart d'entre elles sont des applications de type copy-cat des versions d'iApp). Bien qu’il soit évident qu’il n’y aura pas de déclin des sites Web, il se peut très bien qu’il y ait un déclin de applications Web en échange d'applications qui résident uniquement sur un appareil.
Qu'est-ce que ça veut dire? Cela signifie qu'une application Web que vous avez utilisée une fois en accédant à un site Web particulier va probablement disparaître ou devenir redondante - à sa place, il s'agira d'une application réelle sur votre appareil. Votre navigateur cessera d’être le moyen principal d’accéder aux informations.
Dites au revoir à l'interface utilisateur centrée sur la souris: Il y aura probablement un passage de la navigation verticale de précision aux types décontractés et occasionnels. Toutes les applications Web qui nécessitent la précision d'un curseur sont remplacées par des homologues natifs beaucoup plus fluides sur une tablette. Mais pour les petites marques, il y a de grandes chances pour qu'elles redessinent leur application Web pour s'adapter aux dimensions d'une tablette..
Les tablettes introduisent une toute nouvelle catégorie d'appareils à prendre en compte par les concepteurs Web. Certains ne font que rattraper la montée en puissance de la navigation sur smartphone et ont maintenant cinq ou six nouvelles résolutions à prendre en compte. Les navigateurs de ces appareils sont certainement des éléments à prendre en compte et ma prédiction est que, dans un an ou deux, les sites n'auront pas de version iPad mais que nous verrons des sites universels comme des applications..
Dites bonjour à l'interface utilisateur centrée sur l'application: Je ne vais pas dire que le doigt sera le nouveau facteur déterminant dans la conception de sites Web, car les souris (les souris?) Ne s'en vont pas de si tôt. Bien sûr, dans une génération ou deux, nous pourrions tous contrôler des sites Web avec nos doigts, nos yeux et même des ondes cérébrales? mais jusque-là, la souris / le curseur restera le principal outil d'interaction avec les sites Web..
Ce que je dirai plutôt, c'est que les sites Web vont commencer à prendre de plus en plus d'influence de la part des concepteurs d'applications - cela signifie de plus gros boutons, une plus grande typographie, une utilisation significative des dégradés et des textures et des mises en page moins compliquées. Sans plus attendre, examinons les principaux éléments d’une conception efficace de la tablette:
La plupart des points principaux que nous allons aborder ici peuvent être résumés en une brillante déclaration:
Si la conception Web est Lego, la conception iPad doit être Duplo
- Oliver Reichenstein
Si vous avez déjà joué avec Legos (et quel concepteur de sites Web ne l’a pas fait?!), Ce message ne manquera pas de s’atteindre. Concevoir des tablettes, c'est un peu comme concevoir du papier quadrillé pour les petits enfants qui utilisent ces crayons jumbo pour dessiner des images, c'est-à-dire que vous voulez rester simple et grand..
Les petits caractères (et je parle du type Itty Bitty que nous aimions utiliser en 2005) ne sont tout simplement pas lisibles sur une tablette. Bien sûr, vous pouvez zoomer? mais si vous avez une longueur de ligne trop longue, le texte est encore assez difficile à lire, sauf si vous allez faire défiler chaque ligne de texte..
De même, le gros texte peut également désactiver les tablettes. Un texte trop volumineux oblige les utilisateurs à faire défiler plus souvent que nécessaire. La réponse est un texte "tout à fait juste", comme pourrait le dire Goldilocks. Cela ne signifie toutefois pas simplement trouver la taille de police parfaite; Cela signifie trouver la combinaison parfaite de la police, de la taille, de la hauteur et de la longueur de la police..
Je suis sûr que nous pourrons en faire un article complet à l'avenir - mais pour le moment, votre guide devrait être de créer un schéma de typographie facile à lire et amusant à lire..
Cela va sans dire, mais ces petites icônes de 16px par 16px ne le coupent pas sur une tablette lorsque le doigt moyen peut facilement cliquer sur un espace d'environ 20px. Comme pour les types, cela ne signifie pas que les boutons doivent être génériques pour être utilisables. Il est facile d'appuyer avec les doigts sur les bons boutons, mais les internautes sur le PC ne doivent pas avoir l'impression d'utiliser une souris Playskool..
Au milieu des années 2000, les concepteurs ont commencé à utiliser des textures simplement parce qu'ils le pouvaient. Tout va bien, mais cela ne marque pas vraiment un score élevé en termes de facilité d'utilisation.
Alors, quels sont significatif textures et dégradés? Pour le dire simplement, ce sont des effets visuels qui soulignent et facilitent la convivialité d’un site. Par exemple, un bouton peut avoir un subtil dégradé pour le rendre "pressable". Une texture d'arrière-plan peut ressembler à de la fibre de carbone sombre pour faire ressortir davantage l'avant-plan. C’est un autre cas où nous pourrions écrire un article complet sur ce seul sujet, mais en utilisant le bon sens. Si une texture ou un dégradé n'offre aucune valeur significative, vous pouvez probablement vous en débarrasser..
Je ferai attention à celui-ci car les dispositions "moins compliquées" ne signifient pas moins de colonnes, moins de variété, ni de grilles moins intéressantes. Cela dit, si vous avez déjà essayé d’utiliser le système de gestion WordPress sur un iPad, vous saurez exactement de quoi je parle. Les mises en page compliquées nécessitent qu'un utilisateur zoome constamment sur des informations particulières pour pouvoir les lire (et encore moins les utiliser)..
De meilleures dispositions signifient une approche plus réfléchie de la conception de votre site. Si votre site ne comporte pas de vignette pour chaque publication, n'essayez-vous pas de forcer une mise en page pilotée par une image? et inversement, si votre site utilise beaucoup d'images, utilisez une mise en page qui complète ce côté de votre contenu plutôt que d'essayer de toujours placer un extrait de 40 mots à côté de chaque image..
Des mises en page moins compliquées vous permettent de vous débarrasser des métadonnées inutiles qui encombrent nos sites de nos jours? au lieu de lister les date, tags, catégories, icônes de médias sociaux, auteur et tout le reste vous pouvez penser, faites plus de place pour ce qui est vraiment important: votre contenu principal!
Maintenant que nous savons ce qui rend un site optimisé pour les tablettes, jetons un coup d'œil à une poignée de sites qui l'ont déjà fait. Les sites ci-dessous conviennent parfaitement à un iPad, qu’ils soient utilisés en mode portrait ou paysage ou en éléments HTML5..
Accentsconagua