Share
Aujourd'hui, je vais vous présenter le point de vue d'Adobe sur le Responsive Web Design. Dispositions fluides dans Dreamweaver CS6. Ces nouveaux outils permettent aux concepteurs de construire visuellement leurs dispositions réactives, d'abord mobiles, tandis que Dreamweaver gère tous les calculs flexibles en arrière-plan. Nous allons jeter un coup d'oeil…
Laissez-moi commencer par vous révéler un petit secret; J'adore les perturbations. J'adore quand quelque chose de nouveau se présente qui remet en question tout ce que nous pensions être vrai, l'attache dans une petite balle et le jette à terre. C'est un de ces moments et j'adore ça. J'adore.
La perturbation a été «Responsive Web Design» et «Mobile First», qui ont été présentés pour la première fois à une industrie du Web peu méfiante en 2010. Pensez-y, les concepts de Mobile First et de Responsive Design ne sont vraiment pas restés sur votre radar jusqu'à environ un an depuis. Ensuite, la perturbation est arrivée.
Avant d’entrer dans les nouvelles fonctionnalités de Dreamweaver CS6 qui répondent à ces deux concepts, il est important que nous comprenions ce qui s’est passé et comment cette perturbation a conduit à cette série de didacticiels..
Tout a commencé pour moi il y a environ deux ans. Je parlais lors d'un événement Adobe Education Leaders organisé au siège d'Adobe à San Jose et expliquais comment les enseignants devaient se réveiller et commencer à transférer activement ce que j'avais alors appelé la conception et le développement «Multiscreen» dans leurs classes..
Mon épiphanie autour de cela s’était produite en novembre 2009 dans le siège arrière d’un taxi traversant Pékin. Lorsque je suis monté dans la cabine, un écran à l'arrière du siège avant s'est éclairé et j'ai pu interagir avec le contenu. À bien des égards, ce n'était rien de plus qu'une tablette verrouillée dans le siège, le contenu étant introduit sans fil dans l'appareil. C’est le moment où j’ai vraiment compris le pouvoir des appareils mobiles, car ma première réaction a été: «C’est le genre de choses que mes élèves créent.»
À peu près au même moment où je m'entendais à Pékin, en novembre 2009, Luke Wroblewski songeait sur son blog à développer une stratégie de stratégie mobile d'abord en matière de conception de sites Web. Quelques mois plus tard, sa réflexion a vraiment explosé lorsque sa présentation de Mobile First a été publiée sur Linked IN Tech Talks en mai 2010. Ce lien vidéo a été rapidement transmis à la communauté avec un message «Vous devez vérifier ceci.» simple: Oubliez le bureau, les gens. Commencez par concevoir la version mobile du site, puis commencez à penser au bureau..
Cela a renversé tout le processus de conception Web, inversé le processus et réarrangé ses molécules. Voici la chose: ça avait du sens.
Lors de la conception pour mobile, la meilleure pratique commune consistait à créer une version mobile du site afin de garantir la cohérence de l'expérience. Cette conception était généralement une version compacte du site de bureau. Si Flash était impliqué, cela signifiait également de nombreuses versions du projet destinées à une variété de lecteurs et de périphériques Flash Light. Un seul voyage au Device Central, maintenant abandonné, a suffi à me convaincre que ce n’était pas une excellente façon de faire les choses. Tout le flux de travail mobile était si compliqué et complexe que je ne pouvais pas m'empêcher de penser que ce que nous essayions de faire était d'utiliser un marteau dans une situation où un tournevis était la meilleure approche. Ma question la plus courante à propos de cela était de s’exclamer: il doit y avoir un meilleur moyen de le faire..
Il se trouve qu'il y avait.
En mai 2010, Ethan Marcotte a publié un article assez intéressant sur Alistapart. Intitée Responsive Design, la prémisse était, encore une fois, assez simple: le contenu doit s’adapter au support qui l’affiche, plutôt que l’inverse..
Cette idée avait aussi un sens et résonne encore à ce jour.
Les choses se sont vraiment accélérées en 2011. Ethan et Luke défendent leurs projets avec succès. HTML 5 gagne du terrain dans le secteur, puis du tremblement de terre. Quelques semaines après sa conférence annuelle des utilisateurs, Adobe Max, Adobe a largué sa bombe. Ils annoncent qu'Adobe tire profit du développement mobile sur la plate-forme Flash. Pour mettre cette annonce en contexte, considérez ceci: La conférence Max de 2010 avait tellement mis l’accent sur Flash mobile qu’elle distribuait librement les Blackberries, les droïdes et Google TV compatibles Flash aux participants..
Je ne trouvais pas cela très surprenant que Adobe se désiste, mais la réaction du secteur allait de «le monde se termine» à «ne l’a jamais utilisé de toute façon, alors quel est le problème». Ce que Adobe n'a pas fait, c'est de tuer Flash parce qu'Apple le détestait. Cela a tué Flash dans l’espace mobile car, eux aussi, avaient compris: Il doit exister un meilleur moyen de le faire, et Luke et Ethan montraient comment.
Ce qui a vraiment attiré mon attention, c’est que Adobe a clairement expliqué que, une fois que les débris ont cessé de rebondir, ils passaient à HTML 5 ou, comme ils l’appelaient à présent, à The Expressive Web. Edge, introduit en août 2011, est une réponse. Le nouvel amour d'Adobe pour le langage HTML est évident avec un nouveau site qui est un gros gros câlin en HTML et Dreamweaver CS6, qui est sorti des rues plus tôt cette année, commence également la migration dans cette direction..
L'un des ajouts vraiment intéressants à Dreamweaver CS6 est Fluid Grids, qui, d'une certaine manière, utilise simultanément les approches de Ethan et de Luke en matière de conception de pages Web. Si vous commencez tout juste à explorer les concepts de Mobile First et de Responsive Design, alors Fluid Grid Layouts est un bon point de départ car, en tant qu'éditeur visuel, Dreamweaver vous permet de voir ce que vous faites et comment les modifications apportées à l'ondulation CSS depuis un smartphone. , sur une tablette et atterrir sur le bureau.
Lorsque j'ai commencé à explorer cette nouvelle fonctionnalité, j’ai honnêtement pensé que la disposition de la grille fluide était un joyau caché. Après avoir passé du temps à les entourer, j'ai réprimé cet enthousiasme. Je ne pouvais pas m'empêcher de penser que c'était un travail en cours. Cela ressemblait plus à une très bonne première tentative qu'à un ajout solide à la gamme et je suppose que ce sera une fonctionnalité de Dreamweaver CS6 régulièrement mise à jour via le Creative Cloud..
Dreamweaver vous permet de voir ce que vous faites et comment les modifications apportées à l'ondulation CSS depuis un smartphone, sur une tablette et sur le bureau
Les dispositions de la grille fluide reposent clairement sur le Responsive Web Design d’Ethan Marcotte (le livre et l’article qui a conduit au livre). Cette fonctionnalité vous permet de spécifier trois grilles de fluide: une pour les dispositions de mobile, de tablette et de bureau. Chaque grille peut avoir 2-24 colonnes; une largeur de gouttière commune entre les colonnes et vous pouvez spécifier la largeur de la grille sur chaque écran.
Vous ajoutez ensuite des éléments div de présentation de grille fluide pour construire votre page dans la présentation mobile. (Mobile First) L'étape suivante se situe carrément dans la catégorie «brillant»: vous pouvez redimensionner les éléments de chacune des dispositions, les aligner sur la grille, puis déplacer facilement des éléments individuels pour s'asseoir et jouer agréablement les uns avec les autres. Cette opération est effectuée en mode Création ou en mode Live. En outre, Dreamweaver calcule automatiquement le pourcentage de largeur des éléments et des marges avec quatre décimales..
Ce calcul est basé sur la formule de Ethan de cible / contexte = résultat. Un bon exemple de ceci serait la largeur de colonne. Supposons que vous avez une largeur de page de 1232 pixels et que vous décidez que chaque colonne doit avoir une largeur de 350 pixels. Pour obtenir la largeur de colonne de fluide, divisez 350 (la cible) par 1232 (la Le contexte) = 0,28409091. Vous déplaceriez ensuite les deux décimales vers la droite pour un résultat de 28.409091. Le calcul de la mise en page Fluid Grid de Dreamweaver réduira les deux derniers chiffres pour un résultat de 28,4090%. Ce calcul s’applique à tout ce qui a des numéros «durs» comme la taille de la police, la marge, le remplissage, etc..
Les CSS créées par les modèles de grille fluides utilisent des largeurs en pourcentage et des valeurs flottantes. Elles produisent donc des modèles qui s’adaptent à toutes les tailles d’écran. Ces styles sont construits sur la base du «mobile first» et fonctionnent même dans les navigateurs qui ne comprennent pas les requêtes multimédia. Pour ceux d'entre vous qui débutent dans le Responsive Web Design, cette seule fonctionnalité suffit à vous faire entrer dans le jeu..
En tant que travail en cours, il y a naturellement des «problèmes».
Par exemple, Dreamweaver ne dispose pas d'un moyen immédiatement évident de vous indiquer quelle requête multimédia contrôle une règle de style particulière. Vous pouvez y arriver assez rapidement, mais c'est un peu frustrant au début. Quelques utilisateurs de Dreamweaver ont signalé un autre problème: la fonctionnalité ne prend pas en charge les éléments d'imbrication pour créer des mises en page plus complexes. Parmi les autres caractéristiques manquantes, citons l’incapacité à utiliser des classes au lieu d’ID et il serait plutôt agréable d’utiliser des éléments sémantiques tels que entête ou bas de page.
Il y a également quelques "pièges" dans le processus qui vont mordre l'imprudent et quelques hypothèses faites sur la largeur de l'écran mobile sont un peu plus larges. Je vais en traiter plusieurs au cours de cette série.
Néanmoins, les dispositions de grille fluide de Dreamweaver devraient plaire à ceux d'entre vous qui commencent à entrer dans le jeu RWD.
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!
Accentsconagua