Vérifiez ce guide débutant à la conception Web réactive pour une introduction plus détaillée.

VOUS PARTEZ DE ZÉRO

Développer un site Web entier ou une application Web est un processus difficile. Vous ne saurez pas si le site sera couronné de succès jusqu’à ce qu’il vit et dans le monde, créant ainsi un site distinct mobile ou une application mobile en tandem avec un projet de site Web pourrait être une perte de temps et d’argent grande. Il est plus efficace pour obtenir votre nouveau site fonctionne bien avant de créer un site supplémentaire mobile ou une application.

VOUS VOULEZ GARDER DES COÛTS BAS

Solide solutions adaptées nécessitent la conception et du temps supplémentaires de développement front-end, mais n’a pas trop d’impact du développement d’applications. Elle pourrait prendre environ 20-30 pour cent plus de temps pour développer un site réactif, mais il est encore plus rapide que la création d’un site mobile supplémentaire ou app. Développer un site de cette manière signifie également que vous avez seulement besoin de développer, gérer et entretenir le site un, il peut donc réduire ces coûts aussi.

VOUS VOULEZ QU’IL FONCTIONNE MÊME LORSQUE DE NOUVEAUX APPAREILS SONT LIBÉRÉS

Un site mobile doit être capable de reconnaître le périphérique de l’utilisateur; lorsque de nouveaux périphériques sont libérés, le site doit être mis à jour. Comme la solution réactive ne reconnaît que la largeur du navigateur, aucune nouvelle mise à jour devrait être faite. Cela signifie qu’il est beaucoup plus pérenne et évolutive.

Parlons à travers le processus de création d’un site réactif utilisant un site de l’hôtel par exemple. Cette dernière Septembre, l’Equateur a publié le nouveau site Hôtels Macdonald. 

Hôtels Macdonald sont une chaîne d’hôtel au Royaume-Uni avec 47 hôtels et resorts à travers le Royaume-Uni et l’Espagne. Nous avons créé le nouveau site pour ceux qui comprenaient une structure du nouveau site, le contenu grand hôtel, et un moteur de nouvelle réservation . Voici les étapes que nous avons vécues et aussi quelques considérations que vous devriez penser à la conception d’un site sensible.

Ce sont les étapes clés:

·   Recherche / cadrage: Comprendre les exigences supplémentaires pour un site réactif

•  Wireframing: Grille des structures et des mises en page pour le site envisage différentes largeurs d’écran
• Look and feel: les considérations de style
• La construction du site: questions HTML et CSS

RECHERCHE ET DE CADRAGE

La recherche est toujours une étape très importante dans le processus de conception donc il vaut mieux mettre un peu de considération supplémentaire dans les personnes qui seront en utilisant différents appareils. Comprendre comment ces différents utilisateurs peuvent vouloir utiliser le site Web sur une variété de périphériques vous aidera à décider quelles sont les priorités sur le projet.

• Quels objectifs différents seront un utilisateur sur les appareils ont de différent?

Des questions comme cela commencent à devenir plus redondants. Dans le passé, nous avons supposé que les utilisateurs mobiles ont été axées sur la tâche, par exemple, je veux obtenir l’adresse de l’hôtel, je veux réserver quelque chose rapidement. Mais maintenant les gens sur n’importe quel appareil sont tout aussi susceptibles de naviguer sur Internet tranquillement comme ils sont besoin pour accomplir une tâche rapidement. Il est utile d’examiner si, comme réflexion sur les objectifs des utilisateurs de cette manière pourrait vous aider à hiérarchiser les contenus pour le site, hors de propos de ce dispositif d’aide le visiteur est.

• Quelles sont les considérations techniques ne nous devons faire pour la fonctionnalité et le contenu?

Pensez à la façon des fonctionnalités compliquées peuvent travailler sur différents appareils. Bien qu’un site réactif ne fera que changer le CSS en fonction de la largeur s’il ya des éléments compliqués qui s’appuient fortement sur JavaScript, ils ne peuvent pas se traduisent bien sur un petit appareil et il pourrait être utile cacher ces.

WIREFRAMING

La logique derrière la manière dont les styles devrait changer peut-être un peu difficile à définir et la magie de ça va vraiment sortir en la construction du site, mais nous devons trouver un moyen de commencer à définir les étapes largeur différente de la disposition. Nous choisissons de regarder 3 largeurs d’écran, un ordinateur de bureau, iPad et iPhone. Nous avons estimé ces couverte ce que nos exigences étaient, mais pour votre projet, vous devriez considérer ce largeurs sont important pour vous de penser, vous pouvez même avoir besoin de regarder l’écran plus grand pour des largeurs de l’utilisation d’Internet TV.

À ce stade du projet, vous devriez déjà les modèles clés que vous aurez besoin de fil de fer, mais vous ne devriez pas avoir wireframes pour tous ces modèles dans les différentes largeurs. L’objectif principal ici est d’aider à définir la logique derrière la façon dont le CSS va changer le look de la page, donc se concentrer sur les pages qui ont présentations très différentes. Pour nous, nous avons regardé la page d’accueil, toutes les pages processus de réservation, les pages d’hôtel, des pages offre ainsi que certaines mises en page générique. Chacune de ces configurations couvert nos colonnes, des types de contenu et les fonctionnalités clés.

• Pour commencer

Tout d’abord, définir la structure de la grille pour chaque largeur de clé. Nous avons créé 3 pages pour les largeurs d’écran 1024px (Desktop), 768px (portrait iPad), 320px (portrait iPhone), alors nous avions besoin de définir une structure de grille pour chacune de ces largeurs.

Une structure de grille très simple avec des largeurs de colonnes égales sur chaque mise en page il est plus facile pour nous de planifier pour les composants d’emballage que la largeur changé.

• Création du modèle maître

Comme vous créez chaque filaire dont vous aurez besoin de réfléchir à la manière dont les colonnes et les composants au sein de ces adaptera la largeur de la page et se rétrécit mdashe.g. ce qui arrive quand vous avez moins d’espace? Si vous disposez de quatre colonnes de contenu? Lorsque vous passez à une largeur de trois colonnes? Il devrait toujours y avoir une communication permanente entre le concepteur et le développeur frontale pour répondre à toutes questions sur ce que vous pouvez faire avec les composants visuellement et dans le CSS.

• À partir de la page d’accueil

Vous pouvez vous sentir comme il ya une autre page qui a une plus grande importance que la page d’accueil, mais c’est là que nous avons commencé. Voici notre fil de fer fin originale. Vous pouvez voir la longueur de la page mobile est un peu plus grand en raison du contenu d’emballage au cours d’une colonne.

• Navigation principale

Nous avons créé un simple navigation horizontale en haut qui aurait une largeur fluide à changer avec la taille de l’écran. Comme l’écran réduit les éléments du menu ne se rapprochent, puis les envelopper à la ligne suivante si nécessaire. Cela fonctionne pour le bureau, ordinateur portable et des largeurs de comprimés, mais en allant plus loin, nous voulions créer un menu qui ferait l’affaire des appareils mieux. Cela nous a donné l’renversé le menu sur deux colonnes pour le périphérique mobile.

Autres éléments d’en-tête sont alignés à droite et passer le long voudrais juste que la largeur de page réduit.

Rappelez-vous quand vous êtes le style de la navigation à penser comment il va travailler comme des tailles d’écran les changements. Certains modèles, comme l’utilisation des onglets, peut être difficile de se rendre au travail et de bien paraître comme la largeur de l’écran réduit.

• Pied de page

Notre pied est assez simple, il suffit de penser à ce contenu que vous voulez et comment il va changer à mesure que les changements de largeur et les colonnes de réduire-ce qui pourrait être aussi simple que les composants d’emballage dessous de l’autre.

• D’autres composants

Notre structure simple grille il est plus facile de planifier nos composants. Sur la page d’accueil, nous avons utilisé une barre de défilement horizontale qui avait quatre composantes qui défile sur un clic. Notre mise en tablette gardons cette composante, mais il suffit de modifier uniquement afficher trois éléments, puis sur notre largeur de téléphone, nous avons supprimé la fonctionnalité de défilement complètement et lieu chaque élément affiché à la verticale. Chaque composant de conception peut exiger des comportements différents, donc pensez à la façon dont le visiteur se veulent utiliser le composant sur différentes tailles d’écran. Les utilisateurs de téléphones sont plus confortables défilement vers le bas d’une page à l’aide de petits boutons pour interagir avec la page.

•  Testez immédiatement

Dès que vous avez créé votre première filaire de test sur l’appareil concerné tout de suite. Il est facile d’obtenir l’image sur une page web simple et jetez un oeil à quoi il ressemble et se sent de faire défiler vers le bas. Cela vous permettra de savoir très tôt si votre fil de fer est efficace. Test de cette manière nous a donné des indices très tôt sur ce qui était et n’était pas de travail. Si vous regardez ce fil de fer, vous devriez rapidement voir notre premier numéro.

Comme l’utilisateur navigue à travers le site, ils ne voient ces deux premiers éléments d’une page de navigation & mdashthe et le panneau de recherche. Cela signifie que l’utilisateur peut être sûr si la page a changé, ainsi que là où ils sont réellement sur le site. Cela a été résolu simplement en mettant ces éléments en afficher / masquer des panneaux-permettant à l’utilisateur entrer dans le contenu beaucoup plus rapide.

Ajout de la version tablette et mobile à votre processus de test utilisateur sera vous donner beaucoup d’informations utiles aussi. Maintenant que votre wireframes sont créés, testés, modifiés et approuvés, il est temps pour les faire paraître bonne pour tous vos largeurs d’écran.

LOOK AND FEEL DES VISUELS

Il n’est pas nécessaire de créer des visuels pour chaque fil de fer. L’objectif principal est de couvrir tous les styles qui seront nécessaires pour créer le code HTML et CSS. Il y aura un peu d’un multisegment de wireframes et visuels, certains styles qui seront nécessaires pour le mobile, où il n’y avait pas besoin d’un fil de fer initial.

• Styling la page: Pensez à garder vos styles simples pour votre mobile version ce qui est génial CSS3, c’est que vous n’avez pas besoin de beaucoup d’images pour obtenir de grands effets de style, mais ces encore prendre un peu de temps à charger.
• Réflexion sur la police:

Assurez-vous que les tailles de police vont être lisibles sur chaque appareil. Ils vont devoir être beaucoup plus importante sur l’appareil mobile pour assurer la lisibilité.

Aussi, soyez préparé pour vos visuels à changer quand il est traduit dans la construction du site. Il doit toujours être encore un équilibre entre ce qui semble bon sur une surface plane visuel et ce qui va travailler lorsque le site est en cours de développement. Le site final n’est pas trop loin de notre regard et visuels sentent, jetez un œil ici et vous pouvez comparer avec le site en direct.

LA CONSTRUCTION DU SITE

Construire le HTML et le CSS est un défi qui lui est propre, donc je ne vais pas discuter de ce qui est beaucoup de détails, mais voici quelques petites choses à penser.

•  L’impact des tailles d’image: Le site aura besoin de charger les images en taille réelle, même si le CSS les échelles vers le bas, alors essayez de garder les tailles d’image aussi bas que possible. Il peut y avoir quelques trucs astucieux JavaScript mais de rendre le site plus lisse. Sur ce site nous avons d’abord chargé dans la plus petite taille d’image, et ensuite utilisé JavaScript afin de décider si une plus grande image était alors nécessaire.
•  Utilisez CSS avancées:

Il est important pour obtenir le client derrière l’idée d’utiliser les styles CSS avancés, permettant au site de styles à se dégrader tant les capacités du navigateur ne. Cela vous permet de garder des temps de chargement du site bas.

• Une communication constante est requise: Le projet ira toujours mieux si l’équipe parlent les uns aux autres, donc à la fois concepteur et développeur il est bon de discuter des problèmes et des solutions dès qu’elles se présentent.

Il vaut la peine jeter un œil à notre front développeur fin Jamie Boyd prendre sur le développement de bout devant le site de Macdonald Hotels pour la conception réactive.

Image sur la homepage Booth UX à partir needoptic sur Flickr .

Télécharger la maquette :

https://joli-graphisme.fr/wp-content/uploads/zip/responsive-website-template.zip