Conception et défis techniques pour le contenu du site Web mobile - mannequins

La question de l'accessibilité mobile émerge dans chaque domaine de la création d'un site web, affectant la taille et le type des images, le schéma de couleurs que vous appliquez sur votre site et le type de structure de navigation que vous choisissez.

Il ne s'agit pas de souligner tous les différents défis posés par la taille des appareils mobiles. Voici deux solutions possibles pour fournir un contenu Web:

• Requêtes médiatiques: Vous pouvez présenter le même contenu dans des navigateurs de taille normale et mobiles, mais afficher ce contenu différemment en utilisant différentes feuilles de style CSS. Par exemple, le contenu présenté dans trois colonnes dans un moniteur de taille normale peut être présenté dans une colonne dans une fenêtre mobile (plus étroite) (écran).

  Plusieurs requêtes de média peuvent être configurées pour un site. Ils sont définis par la taille de la fenêtre d'affichage d'un utilisateur. Ainsi, par exemple, vous pouvez créer une feuille de style affichant le contenu de votre site dans des tablettes, une autre affichant le site sur un téléphone mobile en mode paysage (horizontal) et une autre pour un téléphone mobile en mode portrait (vertical).

  Il est peu probable que vous créiez plus de deux ou trois versions de votre site au premier abord, mais le nombre de styles que vous pouvez définir pour un seul site est illimité.

• jQuery Mobile: Vous pouvez créer un site complètement différent pour les utilisateurs mobiles. L'option jQuery Mobile implique la création d'un contenu distinct pour un site mobile que ce qui est présenté aux visiteurs du moniteur en taille réelle.

Les requêtes multimédias et jQuery Mobile sont à votre portée. Ni l'un ni l'autre ne nécessite l'embauche de programmeurs ou de connaissances avancées en conception de sites Web. Cela dit, lorsque vous décidez de franchir le pas et de créer une version mobile de votre site (à l'aide de requêtes média ou de jQuery Mobile), vous devrez consacrer du temps et de l'énergie à trouver l'une ou l'autre de ces approches.

Il s'agit de faire prendre conscience de la façon dont la différence de taille entre une fenêtre pleine taille et une fenêtre mobile affecte tous les aspects de la conception de page et de la technologie, y compris ces problèmes:

• La différence la plus immédiate et la plus évidente entre la navigation sur ordinateur de bureau et ordinateur portable et la navigation mobile est que les fenêtres mobiles (les écrans de visualisation) sont plus petites. La différence de taille entre les médias de taille réelle et les appareils mobiles a des implications radicales pour la conception du site: Les pages mobiles évitent généralement d'utiliser des colonnes.

  • La conception de pages de bâtiment avec une «sous-structure» en colonnes est souvent essentielle pour rendre le contenu accessible et invitant sur des pages en taille réelle. Les liens doivent souvent être plus grands sur les appareils mobiles pour être accessibles.

  • Les minuscules liens sont difficiles à toucher par les gros doigts, et donc différentes techniques de liaison (telles que les gros boutons cliquables au lieu de lignes étroites) sont souvent utilisées dans le design mobile. Les images doivent être beaucoup plus petites dans les appareils mobiles.

  • Il y a une dimension qualitative quand il s'agit de choisir et de rogner des versions d'images qui apparaissent sur un site mobile. Les concepteurs sont souvent bien servis pour recadrer des photos plus serrées pour un appareil mobile. Par exemple, une photo d'une personne de la tête aux pieds qui fonctionne bien sur un moniteur en plein écran peut être plus agréable si elle est recadrée en un simple coup de tête pour les appareils mobiles. Les formulaires sont configurés différemment sur les appareils mobiles.

  • Certains champs de saisie qui fonctionnent correctement sur un ordinateur portable (comme les boutons radio et les cases à cocher) sont difficiles à utiliser sur un petit appareil à écran tactile. Au lieu de cela, les curseurs (barres avec un curseur déplaçable) et les commutateurs flip (avec un ensemble oui / non d'options) rendent les formulaires plus faciles à remplir sur un appareil mobile. Problèmes d'éclairage et de couleur:

    

• Les appareils mobiles sont beaucoup plus susceptibles d'être utilisés à l'extérieur que les ordinateurs de bureau ou même les ordinateurs portables. Et, l'intensité de l'éclairage sur les appareils mobiles est inférieure à celle des ordinateurs à écran plus grand. Cela pose des défis particuliers pour la création de sites adaptés aux mobiles. Les schémas de couleurs qui fonctionnent bien sur des moniteurs grandeur nature - dans des environnements intérieurs relativement sombres - peuvent s'avérer frustrants ou inutiles sur un appareil mobile en plein soleil. Évitez les schémas de couleurs comme les nuances de gris (ou les nuances subtiles de n'importe quelle couleur) sur les appareils mobiles.

  Vitesse de téléchargement:

• Vous avez entendu les annonces: "Notre 4G est si rapide! "Bla, bla, bla. Voici les choses minces: Les appareils mobiles, s'ils ne fonctionnent pas sur un réseau Wi-Fi, chargent les pages beaucoup plus lentement que les ordinateurs de bureau et les ordinateurs portables, que ces appareils soient branchés à Internet ou connectés au Wi-Fi. Et, comme vous l'avez deviné, cela a des implications stratégiques pour la présentation du contenu pour les visiteurs mobiles. Les pages mobiles étant plus longues à charger, vous devez éviter que les utilisateurs naviguent d'une page à l'autre.

  Plug-ins mobiles (et leur absence):

• La différence la plus connue entre le portable et l'ordinateur portable est peut-être que les iPhones et les iPad ne prennent pas en charge la vidéo Flash. Oui, les fichiers Flash Video (FLV) sont largement utilisés pour distribuer la vidéo en ligne, mais ces fichiers sont interdits pour les appareils mobiles Mac. Ces utilisateurs verront un message comme celui de Hulu ici.