Crise commune dans la conception réactive et comment les résoudre

Sans aucune base solide et des éléments de mise en page aussi flexibles que l'eau, ce n'est même pas de la "conception" au sens traditionnel du terme. La conception réactive s'adapte (et s'adapte) au flux d'appareils sur le marché. Tout le monde expérimente et il n'a jamais été aussi génial d'être un concepteur de sites Web.

Il existe tellement de pratiques de conception réactive qu'il est difficile d'examiner un ensemble et de les appeler les meilleurs. Nous ne pouvons pas avoir une liste de « quoi faire ». Nous pouvons cependant apprendre des erreurs des uns et des autres.

Voici donc ce que j'ai appris en concevant pour un site Web réactif :

Conception pour votre public. Pas vous-même.

Supposons que vous essayez d'atteindre un public majoritairement indien avec un site Web ultra-rapide et brillamment conçu et un excellent UX pour ces utilisateurs mobiles. Il y a 1,2 milliard de personnes là-bas; ce devrait être un succès instantané et massif. Les chiffres eux-mêmes sont en votre faveur. Ou ils le seraient si vous aviez su qu'à peine 13% des gens là-bas ont des téléphones intelligents. (Source : Google Mobile Planet).

Ce n'est qu'une des raisons pour lesquelles apprendre et comprendre votre public est crucial.

La diversité culturelle, l'âge, le sexe, la profession, la langue, les appareils populaires, etc. peuvent être des facteurs très importants qui feront ou détruiront votre marque/site Web.
C'est plus facile qu'il n'y paraît.

Les designers sont connus pour perdre de vue pour qui ils conçoivent.

Donc, si vous n'avez pas d'architecte UX sous la main, vous feriez bien de faire des recherches par vous-même. Cela finira par refléter votre travail, alors ne haussez pas les épaules et dites que ce n'est pas votre fort.

Pour les numéros spécifiques aux mobiles, utilisez Mobile Planet de Google. Interrogez vos clients sur leur audience.

Si vous pouvez vous mettre à la place de votre public, vous serez en mesure de créer des conceptions intuitives et conviviales. Ce n'est pas sorcier, juste la psyché humaine de base.

Un "wireframe" a besoin d'une histoire

Votre projet de conception réactive sera incomplet sans interactions. Il en va de même pour votre maquette.

Votre conception ne sera (probablement) pas un concert d'une page où le contenu apparaît et rien d'autre ne se passe.

Pas d'interactions, pas d'états, pas d'animations ou d'effets : fondamentalement, tout ce qui peut faire de votre site un succès (ou un échec, s'il est utilisé sans réfléchir) est supprimé. Alors que Style Tiles est un classique pour une bonne raison (comme l'a dit son fondateur, "Pour démarrer une conversation autour du design"), il est beaucoup trop simple pour être sophistiqué dans les termes de design d'aujourd'hui.

INVESTISSEZ DU TEMPS DANS LA CRÉATION DE PROTOTYPES INTERACTIFS DE VOS IDÉES. COLLABOREZ SUR CEUX-CI AVANT DE COMMENCER LE DÉVELOPPEMENT FRONT-END.

Ne vous contentez pas de lancer des idées. Vous avez entendu parler du storytelling ?

Racontez une histoire réactive et interactive à vos clients avec rien d'autre que votre prototype et votre intuition.

Utilisez des outils comme Balsamiq, Axure, UXPin, etc. pour créer des versions visuelles de ces "histoires". Caressez leur imagination avec des mots; nourrissez-le avec un prototype bien conçu.
Cela servira à rationaliser votre travail de conception et de développement pour plus tard et vous donnera une piste quelque peu définie à suivre. Et en prime : les premières impressions comptent toujours. Un bon prototype montre que vous êtes enthousiasmé par le projet.

Contenu : premier, visible et adaptable. Toujours

La raison pour laquelle vous devenez réactif est que votre message a une portée plus large en étant uniformément accessible et indépendant de l'appareil.

Vous allez à l'encontre de l'objectif du design réactif en devant masquer votre contenu.

Votre audience mobile va de toute façon télécharger les données, alors à quoi bon les cacher ? Créez un inventaire d'éléments de contenu. Identifiez les éléments qui vont sur toutes les pages et ceux qui vont sur des pages spécifiques. Par exemple, vos boutons CTA peuvent se trouver sur chaque page ou sur des pages spécifiques (comme la page de destination, les pages de ressources associées, etc.).

Vous commencez par mettre les éléments de contenu en premier, puis vous construisez à partir de là. Les cloches et les sifflets vont à la fin.

Tout d'abord : comprenez les objectifs des utilisateurs et ce qu'ils attendent du site Web, puis adaptez votre contenu pour un accès facile sur tous leurs appareils.

Au lieu de simplement presser un article d'un million de mots pour s'adapter à une page mobile, donnez à vos utilisateurs la possibilité de parcourir les informations sans les faire défiler à l'infini. Et les scripts frontaux ou côté serveur ne sont pas la réponse (réelle).

Une bonne façon d'y parvenir est d'utiliser un résumé bref et précis pour l'aperçu .

Laissez l'utilisateur décider s'il veut faire défiler votre contenu pour le reste. TL ; La RD est courante chez tout le monde (même les organisations médiatiques, c'est pourquoi nous obtenons des histoires publiées sans vérification des faits réels et basées sur rien d'autre que du battage publicitaire). Ajoutez donc une section à la fin de votre contenu et rendez-le plus facile.

Deuxièmement : donnez aux utilisateurs des informations complètes au lieu d'une version fragmentée.

Utilisez des colonnes et des polices de caractères réactives. Utilisez Zurb Responsive Tables pour les tableaux de données fluides. Compressez les médias (utilisez le CDN et la mise en cache pour augmenter les performances).
Le contenu est votre message. Assurez-vous qu'il est clair et visible, quelle que soit la taille de l'appareil.

Bonus : le contenu d'abord vous rappelle la hiérarchie du contenu, ce qui rend la conception de la navigation plus fluide.

Respecter les limites et les capacités de l'appareil

Lorsque nous parlons de « mobile d'abord » ou d'« amélioration progressive », comprenons-nous vraiment et nous adaptons-nous au strict minimum ? Voici un aperçu de ce que le "minimum" devrait être :

• Largeur d'écran utilisable : 120 pixels, minimum.
• Prise en charge du langage de balisage : XHTML Basic 1.1 livré avec le type de contenu application/xhtml + xml.
• Encodage des caractères : UTF-8
• Prise en charge des formats d'image : JPEG, GIF 89a.
• Couleurs : 256 couleurs, minimum.
• Prise en charge des feuilles de style : CSS niveau 1, règle CSS niveau 2 @media avec l'ordinateur de poche et tous les types de médias
• HTTP : HTTP/1.0 ou plus récent HTTP1.1
• Script : pas de prise en charge des scripts côté client.

Sur la base de ces spécifications, il n'est pas difficile de créer un design fonctionnel. Le problème est la mise à l'échelle.
Il est bon de considérer les dimensions de l'appareil, mais ce n'est que le début et pas tout. Réduire et normaliser les scripts (performances et expérience), concevoir des interfaces propres avec suffisamment d'espaces blancs (pour tapoter), respecter la connectivité et les limitations de charge des appareils (performances) et toujours tester rigoureusement sont importants ici.

Veuillez alléger la charge

Je ne veux pas insister sur ce sujet (nous avons beaucoup d'opinions à ce sujet), mais il est indéniable que la vitesse de la page est importante pour un meilleur classement et une meilleure expérience utilisateur.

En termes simples : si votre page est lente à se charger, personne ne prendra la peine d'attendre qu'elle se rattrape.

Une approche comme mobile-first fonctionne en fait très bien pour cela. Dans l'amélioration progressive, nous commençons avec le strict minimum de tout : éléments d'interface utilisateur, fonctionnalités et le fait que nous concevons pour les bandes passantes les plus étroites de tous les appareils. Ceux qui décrient encore les mérites de l'approche mobile d'abord conviendront que cela met l'accent sur les performances et la vitesse par rapport à tout le reste .

De plus, et cela ne devrait pas vous être rappelé, vous devez contrôler la taille de vos médias.

Utilisez donc CDN (réalisable pour les sites Web à trafic moyen à élevé) et des techniques de développement back-end qui allègent spécifiquement les charges de page. Utilisez la mise en cache. Améliorez les performances perçues (la rapidité avec laquelle le site "se sent" pour l'utilisateur) en cochant la case appropriée avant d'enregistrer une image JPG pour le Web.

Gardez votre conception mince et soignée (au moins tous vos clients et utilisateurs).

TL ; RD

Voici donc ce que j'ai appris en concevant pour un site Web réactif :

• Conception pour un public. Recherchez un peu et utilisez Google Mobile Planet (et d'autres outils similaires) pour les chiffres.
• Un Wireframe peut être animé par une histoire. 'Prototype' désigne la version préliminaire d'un appareil/système. Faites-en quelque chose qui fonctionne réellement. Utilisez des outils de prototypage interactifs.
• Rendre le contenu visible et adaptable. Ne masquez pas le contenu des mobiles lorsqu'il sera téléchargé de toute façon. S'il y a un article original, ajoutez un court résumé pertinent qui convient mieux à la lecture sur mobile.
• Respectez les limites et les capacités de l'appareil. Mis à part le débat avec la souris / le doigt ou les dimensions, concevez pour les spécifications minimales de l'appareil utilisé par votre public cible.
• Faites attention aux performances. Pas seulement pour de meilleurs classements de recherche, mais aussi pour l'expérience.

Biographie de l'auteur : Lucy Barret est associée à HireWPGeeks Ltd. Elle fournit des services de conversion HTML vers WordPress et dispose d'une équipe de développeurs experts pour l'aider. Elle est également une blogueuse passionnée et aime partager ses connaissances avec la grande communauté de WordPress. Suivez son entreprise sur les réseaux sociaux comme Facebook et Google+.