Rappelez-vous le bon vieux temps? Vous savez de quels jours je parle; Il n'y a pas si longtemps, nous concevions des sites Web à des largeurs fixes. En regardant en arrière maintenant, ils semblent être un moment si simple; un temps plus heureux; un moment où je pouvais réciter chaque police disponible en ligne sans y penser. La vérité est que Responsive Web Design a tout changé. Le monde était plat et maintenant c'est rond, j'étais aveugle et maintenant je vois, le web était en pixels et maintenant, ce sont des pourcentages.
Avec l'introduction de RWD, il est essentiel que nous, en tant que concepteurs, fassions évoluer notre flux de travail pour mieux répondre aux exigences du nouveau site Web. Beaucoup d'entre nous ont exprimé leur frustration sur la façon dont l'approche des pixels fixes de Photoshop ne convient pas pour concevoir les mises en page fluides nécessaires à un site Web réactif, mais aucune alternative utile n'a été proposée. Le monde de la conception Web recherche désespérément un logiciel sur mesure conçu à partir de zéro et conçu pour la RWD. Des produits comme Adobe Reflow sont un bon début, car ils montrent qu’Adobe travaille au moins sur une solution, mais après quelques heures passées avec lui le week-end, je constate qu’il ya encore beaucoup de chemin à faire avant de devenir une solution. ajout utile à mon flux de travail. Étant donné que nous sommes dans la confusion entre un logiciel préhistorique et la promesse de demain, nous devons créer des flux de travail alternatifs pour combler les lacunes de notre logiciel de conception actuel en introduisant d’autres outils et procédures qui aideront à combler le fossé. entre pixel fixe et réactivité fluide.
Ce qui suit n'est en aucun cas une liste de la façon dont les projets de RWD doivent être abordés, mais plutôt comment j'ai adapté mon flux de travail au nouveau paysage.
Je me suis tenu à la frontière entre la fracture Photoshop / Fireworks / Illustrator, car chacun s’était battu pour la suprématie et des témoins innocents avaient été pris dans un feu croisé de pixels. Les concepteurs ont tendance à avoir leur favori et préfèrent mourir lentement, mais admettent qu'un autre logiciel a une fonctionnalité qu'ils pourraient vouloir. Mon point de vue est que vous devez concevoir dans n'importe quel logiciel qui vous permet de travailler le plus efficacement possible et d'explorer vos idées rapidement, que ce soit Photoshop, Powerpoint ou Paint.
C'est presque sans importance que vous choisissez car il ne devrait s'agir que d'un point de départ pour expérimenter rapidement différentes configurations. Personnellement, je préfère Fireworks car il coche plus de cases de ce que je veux dans un logiciel. J'essaie de ne pas être trop coincé dans les détails à ce stade et j'essaie vraiment de prendre quelques décisions préliminaires sur la mise en page et la structure, un peu comme certaines structures filaires élégantes.
Tout ce qui doit être dit à propos de l'utilisation de Lorem Ipsum dans les maquettes de sites a été dit, alors n'hésitez pas à me faire confiance et, si possible, à utiliser du contenu réel. Dans la mesure du possible, utilisez le contenu des dernières années, écrivez votre propre contenu ou utilisez les paroles de «Candle in the wind», mais n'utilisez pas Lorem ipsum. Si vous n'utilisez pas de contenu réel, il sera difficile de voir à quels points de rupture certains éléments doivent être ajustés.
C'est juste la largeur à laquelle je souhaite commencer car il est proche d'une petite expérience de bureau, qui est ensuite facile à utiliser pour des écrans plus grands et vers le bas pour des expériences tablette / mobile. Certaines personnes préfèrent élargir leurs activités tandis que d’autres préfèrent concevoir le mobile en premier, cela revient simplement à ce qui fonctionne pour vous.
Le RWD concerne les conteneurs fluides qui se développent et se réduisent pour remplir la zone disponible du navigateur. Par conséquent, la conception en pourcentages plutôt que de pixels garantit que vos conceptions sont proportionnées au navigateur et nécessitent moins de points de rupture.
In-Design a tendance à être ouvert en arrière-plan, ce qui me permet de trouver facilement et rapidement un pourcentage d'un élément à base de pixels. InDesign est idéal pour gérer ce type de calculs et vous pouvez facilement déterminer la taille d’un élément 428 x 333 pixels à 46% de sa largeur initiale, tout en conservant ses proportions ou peut-être 27% de sa largeur en secondes. Les résultats vous sont toujours donnés en pixels, vous pouvez donc revenir dans le logiciel que vous concevez et créer ce conteneur en pixels, sachant qu'il sera relatif au pourcentage de l'espace de travail que vous avez défini.
Si vous pensez que je parle de l'utilisation de contenu réel dans vos conceptions, vous devriez m'entendre continuer concevoir des styles de typographie dans Photoshop (ou équivalent). La typographie sera très différente dans le navigateur par rapport aux packages Adobe habituels, ce qui signifiera plus de travail pour vous en modifiant le design une fois qu'il sera construit.
Epargnez-vous les maux de tête et utilisez des applications comme typecast.com pour expérimenter et créer vos styles de police avec. Une fois que vous êtes satisfait de la présentation et du style de votre typographie, vous pouvez exporter l'intégralité de votre espace de travail en tant que fichier PNG transparent à placer dans vos maquettes de conception. Vous n'aurez pas besoin d'installer les polices de votre choix sur votre système, car il ne s'agira que d'une image, mais vous ne pourrez pas non plus la modifier sans revenir à la conversion.
À ce jour, vous devriez presque avoir votre conception à 1000px de large (ou quelle que soit la largeur que vous avez choisie au début) complétée par les largeurs des conteneurs qui contiennent vos différents contenus traduits en pourcentages. Je commencerais maintenant à créer une grille sur mesure qui reproduit les largeurs de conteneur que j'utilise dans ma conception. Donc, si j'ai une barre latérale de 30% de largeur et une zone de contenu de 55% de mon navigateur avec 5% de remplissage de part et d'autre, ma grille peut ressembler à 5%, 30%, 5%, 55% et 5%.
Vous pouvez utiliser des applications comme Gridset Pour créer votre grille personnalisée, je préfère utiliser InDesign car vous pouvez regrouper des éléments et les redimensionner proportionnellement.
Je prends maintenant ma grille créée à l'aide d'InDesign et je la colle dans un document de 1600 pixels de large (ou de la largeur maximale que vous voulez voir sur votre site). Je commence ensuite à redimensionner ma grille plus large et plus étroite par incréments de 100 pixels jusqu’à 300 pixels de large. À chaque incrément, je vérifie la largeur de chaque conteneur de contenu et vérifie qu'il est toujours assez grand pour contenir son contenu. Lorsque j'arrive à une largeur qui rend un conteneur trop petit, je modifie simplement la grille pour l'adapter. Donc, si à 800px de large la barre latérale que j'avais créée à 30% de la largeur du navigateur devenait trop étroite, je pourrais ajouter 10% supplémentaires, ce qui en fait maintenant 40% de la largeur de mon navigateur et assez large pour héberger son contenu .
La chose essentielle à retenir est que si vous agrandissez un conteneur, vous devez rendre un autre conteneur plus étroit de la même quantité pour conserver la largeur totale de 100%. C'est le meilleur moyen que j'ai trouvé pour définir des points d'arrêt (le point auquel votre disposition changera), car vous n'ajoutez qu'un autre point d'arrêt lorsque le contenu est interrompu et non la largeur d'un nouveau périphérique. Cette procédure peut prendre beaucoup de temps, car vous obtiendrez 14 aperçus différents de votre grille, qui passera de 300 à 1600 pixels, mais c’est la meilleure façon de vérifier la façon dont votre conception examinera les différentes largeurs d’écran avant développement.
Une autre option consiste à utiliser un outil comme Adobe Reflow Cela vous permet également d'ajouter du contenu aux conteneurs, puis de faire glisser votre espace de travail et d'afficher l'échelle des éléments. Vous pouvez également déterminer vos points d'arrêt en redimensionnant votre espace de travail jusqu'à la rupture du contenu et en ajoutant simplement une requête multimédia. Reflow est toujours en version bêta publique et peut être téléchargé depuis ici .
Après avoir redimensionné vos conceptions par incréments de 100 pixels, vous avez identifié quelques largeurs auxquelles le contenu se brise et l'a rectifié en ajoutant un point d'arrêt. Vous pouvez maintenant retourner dans le logiciel dans lequel vous avez créé les conceptions originales et modifier la disposition de votre conception en fonction de la largeur que vous avez identifiée comme points de rupture. Cela signifie que vous ne concevez que 2, 3 ou 4 mises en page différentes (en fonction de la complexité de votre grille et du nombre de points d'arrêt dont vous avez besoin) qui couvriront de 300 à 1600 pixels.
Si vous avez suivi ce processus, vous devriez maintenant avoir un ensemble de dispositions correspondant à vos points de rupture, un document qui montre comment votre grille est composée de pourcentages de la largeur du navigateur et de la façon dont elle se réduit pour des écrans plus petits styles de typographie déjà créés et testés dans le navigateur. Cela devrait être un point fort pour un développeur de commencer à construire vos conceptions avec précision et sans avoir à gérer le contenu plus tard.
Ce processus peut sembler très long, mais sans un outil spécifique conçu entièrement pour RWD, c'est le meilleur moyen que j'ai trouvé pour tester facilement ma mise en page responsive en utilisant un logiciel non réactif et communiquer clairement mes idées à un développeur. C'est loin d'être le seul et unique moyen d'aborder un projet de RWD, mais c'est le meilleur que j'ai trouvé.
Qu'est-ce que le design réactif a changé dans votre flux de travail? Quels conseils partageriez-vous? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image en flux via Shutterstock.