Share
Le web tel que nous le connaissons évolue. Dans le passé, les concepteurs et les développeurs n'avaient à se préoccuper que d'un seul média: l'écran d'ordinateur. Au cours des dernières années, cependant, une multitude d'appareils entièrement compatibles avec Internet offrant une multitude de formes et de capacités différentes sont apparues, ce qui signifie que nous devons maintenant concevoir nos sites Web pour qu'ils s'adaptent facilement à autant de tailles d'écran, de formes et de résolutions que vous le pouvez. peut-être penser à.
Notre ancienne approche de disposition de largeur fixe est hors de question maintenant. Alors que faisons-nous? La réponse, mon cher lecteur, réside dans Responsive Web Design.
L'idée de Responsive Web Design, un terme inventé par Ethan Marcotte, est que nos sites Web doivent adapter leur présentation et leur conception à tout appareil qui choisit de l'afficher..
Dans son livre intitulé "Responsive Web Design", il décrit les trois parties d'un site Web adaptatif:
Parce que cet article est destiné aux concepteurs ne pas développeurs, et parce que je ne veux pas marcher sur le contenu d'Ethan, je ne discuterai pas de ces trois choses.
Cependant, il est important pour vous, en tant que concepteur, de comprendre les concepts de base de RWD afin de mieux concevoir des sites Web qui deviendront réactifs une fois codés. Je vous recommande vivement de lire ces trois articles publiés par Ethan: Fluid Grids, Fluid Images et Responsive Web Design..
Si vous n'en lisez qu'une, faites-en la dernière, écrite en mai de l'année dernière. En le lisant, cela a changé ma façon de voir Internet, et je soupçonne bien d’autres comme moi. Le travail d'Ethan n'est rien de moins qu'un génie, et je pense que tous ceux qui vivent du Web devraient être obligés de lire cet article..
Si vous êtes un designer qui seulement dessins, c’est-à-dire que vous n'êtes pas responsable du code HTML et du code CSS du site sur lequel vous travaillez, cela risque de vous échapper. Vous vous demandez peut-être pourquoi vous avez besoin de connaître exactement la conception de sites Web réactifs..
J'ai toujours pensé que celui qui concevrait un site Web devrait être celui qui insufflera de la vie plus tard, via HTML et CSS. Je comprends que ce n’est évidemment pas le cas pour beaucoup de projets, et je respecterais les capacités d’une personne si elle choisissait de le faire. seulement mettre en place le design ou seulement écrire le code.
Il est important de comprendre qu'un site Web n'est pas l'un ou l'autre, c'est un mariage de design et de code, chacun dépendant l'un de l'autre pour créer une expérience transparente. Pour vraiment apprendre à concevoir un site Web, vous doit comprendre comment la conception sera implémentée ultérieurement dans le code, même s'il ne s'agit que d'une compréhension rudimentaire.
Je vous le rappellerai encore: cet article est pour les concepteurs. Dans les paragraphes à venir, j'expliquerai exactement comment, en tant que concepteurs, nous devrions modifier notre façon de concevoir afin de mieux correspondre au processus de création de site Web réactif..
Même si vous ne concevez pas pour Responsive Web Design, vous devriez concevoir avec une sorte de système de grille. En tant que designer moderne et instruit que vous êtes, vous devez déjà avoir une idée de ce que signifie utiliser une grille. Je vais donc sauter les détails volants..
L'un des piliers de la conception Web réactive est la grille fluide. En gros, cela signifie que votre grille, qui était traditionnellement mesurée en pixels, doit maintenant être considérée en termes de pourcentage de la largeur totale de la page. La largeur réelle calculée de chaque colonne d'un site Web réactif change à chaque modification de la taille de la fenêtre du navigateur. Il est impossible de garantir qu'elle soit identique sur différents appareils..
C'est pourquoi tu doit utilisez une grille lors de la conception pour Responsive Web Design. C'est une nécessité, pas une finesse. Vous ne peux pas créer un site Web réactif sans une conception basée sur une grille; c'est tout simplement hors de question, ça ne marcherait pas.
Sachant que votre conception n'aura pas exactement la même mesure en pixels pour chaque colonne que dans votre composition de conception, vous devez prendre quelques autres mesures pour vous assurer que votre grille est correctement mise à l'échelle..
Essayez de ne pas utiliser de bordures texturées dans vos colonnes, comme ceci:
Il serait difficile pour vos développeurs d'utiliser ce genre de choses dans un site Web réactif, car ils ne fonctionneraient pas bien horizontalement. Si vous faites la colonne plus large ou plus mince, les frontières texturées auront du mal.
Les dégradés horizontaux sont une autre option.
Pour la même raison que le point précédent, à savoir l’impossibilité d’échelonner horizontalement, ne le faites pas. Oui, c'est possible avec les nouvelles propriétés CSS3, mais si vous ciblez un public d'utilisateurs moins expérimentés en technologie, beaucoup n'auront pas de navigateur compatible et l'effet sera inutile..
Si vous avez un arrière-plan texturé dans une colonne, assurez-vous qu’il peut être facilement mis en mosaïque.. Faire: utiliser du grain, du grunge, peu importe. Ne pas: utiliser une photo, une illustration ou une image immuable.
En redimensionnant horizontalement votre dessin pour accueillir des écrans plus petits, il arrivera un moment où du texte sur la page sera tout simplement trop gros. Bien sûr, ce titre de 100 pts a fière allure dans votre psd, mais il ne fonctionnera tout simplement pas sur l'écran d'un iPhone, par exemple: il sera trop gros et le texte devra recouvrir plusieurs lignes pour réduire l'impact de votre décision initiale..
Ici, le développeur, à l'aide de requêtes de média CSS, ajustera la taille de la police pour qu'elle s'adapte mieux à l'écran. Il s’agit là d’une décision de conception. En tant que designer, vous devriez donc avoir votre mot à dire.?
Pour aider le développeur ainsi que pour préserver l'intégrité de votre conception d'origine, vous devez choisir le texte de la page qui doit rester constant, c'est-à-dire conserver la même taille quelle que soit la largeur de l'écran et le texte à ajuster. Un bon exemple de texte de taille constante serait un corps de texte ou de petits en-têtes agissant comme une version plus grande du corps de texte..
Vous devriez également décider, concernant le texte qui sera ajusté, Comment il devrait être ajusté.
Ici se trouve le faux façon de le faire: X devrait toujours être 20pt plus grand que y. Cela constitue non seulement un gros problème pour le développeur, mais cela n'a pas de sens pour le canevas responsive, car vous tenez compte d'une constante, une valeur qui ne changera jamais, quelle que soit la taille de l'écran. Pour RWD, il s’agit d’une grave erreur car elle ne prend pas correctement en compte la fluidité inhérente du Web..
Ici se trouve le droite façon de le faire: X devrait toujours être 1,5 fois plus grand que y. De cette façon, accepte que le seul vrai ce qui signifie qu'un dessin sort de la taille de la police, c'est la taille du texte comparé à celui de la page. Une valeur constante, comme 24 pt ou 67 pt, n'a pas de sens.
Une fois que vous avez tout compris, assurez-vous de transmettre cette information au développeur. C’est la seule façon de s’assurer que vos décisions, en tant que concepteur, sont affichées dans la page Web réelle que les téléspectateurs chargeront dans leur navigateur et apprécieront.
La dernière pièce du puzzle Responsive est Media Queries. Si vous n'êtes pas familier, Media Queries est un moyen d'appliquer des règles CSS à la page en fonction de (pour nos besoins) la taille du navigateur qui s'affiche..
L’incroyable puissance de ce logiciel réside dans le fait que vous pouvez ajuster, voire redessiner, l’ensemble de la présentation de votre site Web pour l’adapter à un navigateur plus petit ou plus grand que celui pour lequel vous aviez initialement conçu..
Afin de concevoir au mieux cette éventualité, vous devriez commencer à réfléchir aux différentes parties de votre conception, telles que le contenu principal, la barre latérale, l'en-tête et la navigation, et non comme des pièces d'un puzzle qui doivent rester au même endroit les unes par rapport aux autres. , mais comme modules qui peut être réorganisé, redimensionné et mélangé sans perdre sa signification originale.
Voici un exemple: imaginons que vous conceviez un site Web qui ressemble à ceci (je suis sûr que vous avez déjà travaillé avec des dispositions similaires):
La partie cruciale de cet exemple est l’identification de groupes d’éléments qui doivent rester ensemble pour tout disposition. Par exemple, tous les liens de navigation doivent rester ensemble, sinon ils n'auraient aucun sens. Ceci est un module, une section d'informations qui peut être déplacée parmi les autres modules sans perdre son sens..
Construire votre site avec ces modules en tête permet de facilement imaginer comment votre mise en page s'adaptera à différentes tailles de fenêtres. Par exemple:
Voyez comment, même si les modules se trouvent à des endroits différents, ils affichent toujours les mêmes informations que l'original, simplement sous une forme plus facilement digérée par les appareils mobiles ou d'autres navigateurs de tailles différentes..
Il n’ya rien que vous deviez changer dans votre mise en page pour que cette modularité fonctionne, c’est juste une façon différente de regarder la même image. Espérons toutefois que cette nouvelle perspective vous aidera à prendre des décisions plus éclairées lorsque vous travaillerez sur vos futurs projets de conception..
Comme beaucoup sur Internet, Responsive Web Design est évolutif et non révolutionnaire. C'est tout simplement la prochaine étape naturelle pour le Web, et non une refonte complète de tout. En tant que concepteurs, nous devons continuellement adapter nos flux de travail, et cette fois-ci ne fait pas exception.
Site Web adaptatif est l’avenir, ou du moins, ce sera lorsque les développeurs et les concepteurs l’embrasseront. En tant que concepteurs et développeurs Web, nous sommes les seuls à pouvoir concrétiser cette nouvelle norme. Faites que cela se produise, pour vous, pour moi, pour l'Internet au sens large!
Accentsconagua