Requirements

Prerequisite knowledge

Vous devez connaitre les concepts fondamentaux du HTML, du CSS et de la conception de sites web réactifs.

 

Products discussed

User level

All

L’un des grands défis que rencontrent aujourd’hui les développeurs Web est la conception de sites web réactifs. Le Responsive Web Design (RWD, conception de sites web réactifs) s’appuie sur de nouvelles fonctionnalités CSS telles que les media queries et les grilles fluides afin d’adapter votre page à différents formats. Les sites créés ne sont plus destinés à un seul format d’écran mais à divers types d’appareils, du smartphone à la tablette en passant par les ordinateurs de bureau. Cependant, la plupart des outils de création standard ne prennent pas en compte ce nouvel environnement.

Acquisition d’Edge Reflow

Si vous êtes membre Creative Cloud, vous pouvez télécharger la version préliminaire (Preview) dès maintenant. Dans le cas contraire, inscrivez-vous à la version gratuite de Creative Cloud pour essayer l’application.

Tout comme Adobe Edge Animate, qui a fait l’objet de plusieurs versions préliminaires avant la sortie de la version 1.0, nous avons choisi de publier Reflow dès les premières phases de son développement. Les fonctionnalités prévues ne sont pas encore toutes disponibles. Il reste peut-être même quelques bugs. Ces versions préliminaires permettent cependant à notre équipe de recevoir et d’intégrer vos commentaires et suggestions. A présent que vous avez pris connaissance de ces quelques avertissements, il est temps de passer aux choses sérieuses !

Pourquoi un tel outil ?

Reflow n’a pas vocation à remplacer Photoshop/Fireworks en termes de création ni Dreamweaver/Edge Code en matière de développement. Son objectif est de vous permettre de découvrir des mises en forme réactives utilisant un code CSS conforme aux normes dans un espace de création basé sur le Web.  Reflow s’inscrit dans la lignée des outils Edge par sa conception légère qui se concentre sur une tâche principale. Il prend actuellement en charge trois éléments de base : les encadrés (obtenus via la balise HTML div), les éléments texte et les images. Cette version préliminaire de Reflow ne permet pas d’ouvrir des documents HTML existants.

Présentation de l’interface

L’interface de Reflow se compose de deux parties élémentaires : la zone de travail et l’inspecteur des propriétés. Intéressons-nous d’abord à la zone de travail. Cette région est divisée, par défaut, en 12 colonnes, ce qui correspond à la tendance actuelle sur de nombreux modèles de pages réactives (figure 1). Pour ajuster la largeur de la zone de travail, faites glisser la poignée située sur le côté droit. Cette action permet de mettre à l’échelle la largeur des colonnes, ainsi que les contenus ajoutés, tout en conservant leurs proportions.

Une règle en pixels se trouve en haut de la zone de travail, sous la barre Media Query.  La barre Media Query affiche chacun des breakpoints de media query (figure 2). Nous étudierons cette fonctionnalité plus en détail dans la suite de l’article.

La barre Zone de travail se trouve en bas de l’interface (figure 3). Elle affiche le chemin d’accès à l’élément sélectionné. Une fois qu’un contenu a été ajouté et que des valeurs de propriété ont été définies pour les différents paramètres de media query, il est possible d’inspecter rapidement le code CSS correspondant à l’aide du bouton <>. Pour accéder au panneau Eléments, cliquez sur l’icône située au début du chemin d’accès de l’élément. Vous avez ainsi la possibilité d’afficher rapidement la structure complète du projet, mais aussi de rendre un élément visible ou invisible. La barre Zone de travail contient également un panneau d’alignement et les commandes de zoom de la page.

L’inspecteur des propriétés se trouve en regard de la zone de travail (figure 4). Il vous permet d’ajuster les paramètres de style et de mise en forme de chaque élément et du conteneur. Au-dessus de l’inspecteur des propriétés se trouvent les trois éléments de conception disponibles dans Reflow (encadré, zone de texte et image), ainsi que l’outil de sélection.

Définition des media queries

Avant de commencer à ajouter du contenu, nous allons définir différentes media queries pour notre création. Conformément à l’approche Mobile First de Luke Wroblewski, nous allons commencer par définir une largeur adaptée à un smartphone.

  1. Définissez une largeur de 320 pixels pour la zone de travail à l’aide de la poignée. Ne vous inquiétez pas si vous n’arrivez pas à définir la largeur au pixel près. Nous procéderons aux ajustements nécessaires par la suite.
  2. Pour ajouter votre media query, cliquez sur le bouton Ajouter une media query situé à droite de la règle. Une barre violette s’affiche alors juste au-dessus de la règle, partant de 0 et se poursuivant jusqu’au côté droit de la surface de travail.
    Le motif de chevrons sur la barre permet d’indiquer si la media query est basée sur la largeur d’écran maximale ou minimale. L’orientation de la media query est définie par défaut en tant que valeur maximale, ce qui correspond à la première approche d’un ordinateur de bureau. Le nombre affiché correspond à la valeur exacte, en pixels, permettant de déclencher la media query.
  3. Si vous n’aviez pas positionné la région à 320 pixels, vous pouvez maintenant déplacer le curseur jusqu’à l’emplacement voulu (ici 320 pixels) ou modifier la largeur dans la fenêtre contextuelle.
  4. Ajoutez un libellé d’affichage en maintenant enfoncé le bouton Ajouter une media query. Conservez une valeur de 320 pixels pour la media query, modifiez sa règle directionnelle, et attribuez-lui un libellé.
  5. Définissez maintenant des media queries supplémentaires pour les écrans d’une largeur de 480 pixels, 768 pixels et 1024 pixels.

Remarque : dans cette version, il est impossible de modifier la couleur utilisée par chaque région.

Ajustement des grilles

Redimensionnez votre zone de travail à 320 pixels. Vous remarquez que les colonnes ont été réduites (figure 6). Nous allons remédier à ce problème.

  1. Revenez dans l’inspecteur des propriétés.
  2. Assurez-vous que le conteneur de votre contenu est bien sélectionné, et modifiez le nombre de colonnes pour passer de 12 à 4.
    Dans l’inspecteur des propriétés, le nombre de colonnes s’affiche maintenant avec un ombrage violet correspondant à la media query associée à cette valeur. Reflow ajoute automatiquement une couleur à tout attribut ou paramètre spécifique à la largeur d’affichage sélectionnée.
  3. Vous pouvez maintenant modifier le nombre de colonnes pour d’autres régions de media query.

Ajout de contenu : encadrés

Nous allons maintenant disposer les premiers éléments de la page d’accueil. Commençons par créer une région « vedette ». L’image « vedette » correspond à l’image principale de la page. Elle doit se distinguer par sa grande taille et son aspect saisissant afin d’attirer le regard.

Pour inclure les différents éléments dont nous aurons besoin pour créer notre région vedette, il nous faut commencer par un élément encadré (correspondant à la balise HTML div).

  1. Sélectionnez l’outil Encadré et cliquez en haut de la page, à gauche de la colonne la plus à gauche.
  2. Etirez l’encadré pour qu’il couvre toute la largeur de la région. A l’heure actuelle, Reflow affiche uniquement les valeurs des marges en haut et à gauche pendant que vous dessinez l’encadré. Définissez la largeur à 100 % à l’aide de l’inspecteur des propriétés.

    Lorsque vous modifiez une valeur, une flèche de menu déroulant s’affiche, ainsi qu’une nouvelle icône. Le menu déroulant vous permet de modifier l’unité choisie pour chaque élément (pixel, pourcentage, em ou auto). L’autre icône vous permet de transmettre la valeur au breakpoint par défaut, afin d’appliquer la propriété à toutes les régions.

Modification de l’arrière-plan

  1. Choisissez l’onglet Style pour accéder aux propriétés d’arrière-plan, de bordure, d’ombre et d’opacité de l’encadré sélectionné.
  2. Définissez une couleur et une image d’arrière-plan pour cet encadré. Reflow prend en charge les trois modèles de couleurs Web : RGBa, Hex et HSLa. Choisissez RGB(44,122,176) comme couleur d’arrière-plan.
  1. Cliquez ensuite sur le bouton Ajouter un calque d’image. Vous accédez ainsi aux contrôles des paramètres pour l’image d’arrière-plan. Ces paramètres concernent la position, la mise à l’échelle, la répétition et la pièce-jointe de l’arrière-plan, ainsi que l’image elle-même (faites glisser une image dans la fenêtre contextuelle ou cliquer dessus pour ouvrir une boîte de dialogue de sélection de fichier). Sélectionnez featured-bg.jpg dans le dossier demo. Reflow crée automatiquement une copie de votre image dans un répertoire img du dossier des actifs, au même niveau que le fichier de projet Reflow enregistré.
  2. Modifiez maintenant quelques propriétés de l’image. Définissez:
    • la position horizontale au centre (ou 50 %)
    • la position verticale en haut (ou 0 %)
    • la propriété de répétition sur Ne pas répéter

Ajout de contenu : texte

Ajoutons maintenant un texte d’introduction dans cette région.

  1. Assurez-vous que la page est définie au breakpoint de 320 pixels.
  2. Sélectionnez l’outil Texte et placez-le à une distance de 15 pixels par rapport au haut et dans l’alignement de la deuxième colonne.
  3. Remplacez le texte par défaut par « Making Conferences Usable ».
  4. Sélectionnez l’onglet Style. (Reflow fait partie de la suite d’outils Edge et intègre donc les polices Edge Web.) Cliquez sur le bouton Police pour afficher le panneau Edge Web Fonts. Sélectionnez la police Lustria dans la catégorie Serif, puis cliquez sur le bouton « Appliquer la propriété à toutes les régions ».
  5. Modifiez la couleur du texte pour la faire passer de noir à blanc, et cliquez à nouveau sur le bouton « Appliquer la propriété à toutes les régions ». Laissez de côté les valeurs de taille pour le moment.
  6. Définissez une épaisseur de police de 700. (En CSS, une épaisseur de 700 correspond à gras, et l’épaisseur normale est fixée à 400.)

Il est aussi possible d’ajouter rapidement une ombre à notre texte en cliquant sur le bouton « Ajouter une ombre ».

  1. Définissez le décalage horizontal à 1 pixel, et le décalage vertical à 2 pixels.
  2. Choisissez la couleur RGB(44,122,176).
  3. Enfin, définissez le flou à 2 pixels.

Il se peut que le texte apparaisse en gris dans la région, mais il s’affichera correctement dans le navigateur.

Prenez maintenant le temps de redimensionner la page à chaque breakpoint. L’affichage de notre texte est loin d’être optimal, n’est-ce pas ? C’est l’occasion de découvrir toute la puissance de Reflow.

  1. Affichez la page avec le breakpoint de 480 pixels. Modifiez maintenant les propriétés suivantes pour l’élément texte :
    • Taille : 100 %
    • Hauteur : auto
    • Marge gauche : 0 %
    • Alignement : Centrer
    • Taille : 2 em

    N’appliquez pas ces valeurs aux autres régions, ce sont des valeurs qui remplacent les valeurs de base pour notre élément texte.

  2. Affichez la page au breakpoint de 320 pixels et procédez aux modifications de propriétés suivantes :

    • Taille : 100 %
    • Hauteur : auto
    • Marge gauche : 0 %
    • Alignement : Centrer
  3. Pour le breakpoint de 768 pixels :
    • Taille : 48,85 %
    • Hauteur : Auto
    • Marge gauche : 12,75 %
    • Alignement : Gauche
  4. Pour le breakpoint de 1024 pixels :
    • Taille : 48,83 %
    • Hauteur : Auto
    • Marge gauche : 10,21 %
    • Alignement : Gauche
  5. Enfin, pour la taille par défaut :
    • Taille : 40,29 %
  6. Pour les écrans plus larges, rétablissez l’alignement du texte à gauche en choisissant un décalage du texte un peu plus important.

Utilisation de l’arborescence des éléments

Le contrôle de l’arborescence des éléments se situe dans la barre Zone de travail. Il affiche le chemin hiérarchique de l’élément sélectionné. Vous pouvez naviguer rapidement vers d’autres éléments du chemin par un simple clic sur ces éléments, mais aussi inspecter les règles media query de l’élément sélectionné en cliquant sur l’icône <>.

Ce panneau vous permet de consulter l’ensemble des propriétés définies par chaque media query.  Vous pouvez toutes les copier dans le Presse-papiers ou simplement le jeu spécifique de règles dont vous aurez peut-être besoin.

Utilisation du panneau Eléments

A gauche de l’arborescence des éléments figure le panneau Eléments. Ce panneau vous permet de voir la totalité du DOM, y compris sa hiérarchie, et de contrôler sa visibilité en cliquant sur l’icône représentant un œil.

Il s’agit d’un puissant outil vous permettant de visualiser la structure de votre projet.

Ajout de contenu : images

Ajoutons une image à notre région vedette.

  1. Rétablissez la largeur par défaut de l’espace de création. Nous disposons ainsi de davantage de place pour positionner notre image correctement.
  2. Sélectionnez l’outil image, puis accédez au fichier hilightedApp-1.png dans le dossier demo. Positionnez l’image à l’emplacement souhaité sur la page.
    Etant donné que nous souhaitons qu’elle figure au sein de notre région vedette, assurez-vous que la bordure de l’encadré s’illumine en bleu afin d’indiquer que l’image sera ajoutée dans ce conteneur et non en dehors.
  3. Placez l’image à une distance de 15 pixels par rapport au haut et le long de la troisième colonne en partant de la droite.

L’une des premières propriétés à modifier est celle qui détermine le flottement à droite. Pour cela, Reflow modifie automatiquement les valeurs de marge afin de tenir compte de notre nouvelle direction de flottement.

  1. Redimensionnez la zone de travail au breakpoint de 768 pixels.
    Vous constatez que l’image interfère avec le texte. Pour cette taille d’écran, nous voudrions que l’image soit réduite.
  2. Dans la propriété de taille de l’image, indiquez une nouvelle valeur correspondant à 25 % de cette région.
    Pour les tailles d’écran de 480 et 320 pixels, nous n’afficherons plus du tout l’image.
  3. Dans le panneau Avancé, remplacez la valeur Bloc de l’option Afficher par Aucun.
    Le contour de l’élément restera visible dans la zone de travail, mais pas l’élément.

Nous disposons, à présent, d’une image réactive au sein de notre élément hero.

Groupement d’éléments

Reflow vous permet aussi de regrouper plusieurs éléments. Cela est particulièrement pratique à mesure que votre création se développe et qu’il devient nécessaire que plusieurs éléments répondent de manière identique.

  1. Rétablissez la taille par défaut de la zone de travail.
  2. Ajoutez un nouvel élément texte sous la ligne de balise.
    Si vous collez un bloc de texte plus conséquent, il est possible qu’il se prolonge sur l’image.
  3. Modifiez la taille de l’élément de texte en indiquant 50 %.
  4. Faites en sorte que la marge gauche soit identique aux lignes de balise.
  5. Répétez cette opération pour chaque région.
  6. Définissez l’aspect de la police, la couleur du texte et les autres propriétés visuelles de votre choix.
    Pour les plus petits écrans, étant donné que l’image du téléphone n’est plus affichée, nous pouvons revoir la largeur de notre élément de texte.
  7. Réaffectez une taille de 100 % pour la région de 320 pixels. Ajoutez 10 pixels de remplissage vers la droite, le bas et la gauche de l’élément.
    Lors du redimensionnement du positionnement, l’affichage de l’image du téléphone ne correspond pas au résultat attendu pour les régions les plus vastes. Pour y remédier, groupez la ligne de balise avec l’autre texte, afin qu’ils figurent dans un seul et même conteneur.
  8. Sélectionnez les deux éléments de texte, puis choisissez Edition > Grouper (ou contrôle-commande G).
  9. Ces éléments sont désormais contenus dans une autre div.
  10. Réajustez si nécessaires les marges et largeurs pour les régions de 480 et 320 pixels.

Remarque : si vous devez réaligner certains éléments, souvenez-vous qu’un panneau prévu à cet effet figure dans la barre Zone de travail.

Aperçu de votre travail

Bien que nous ayons pu voir le résultat de nos efforts sur la zone de travail, ce que nous souhaitons réellement vérifier, c’est comment cela fonctionne dans un navigateur.

  1. Sélectionnez Affichage > Aperçu dans Chrome afin d’ouvrir votre projet dans Google Chrome.

    Remarque : il s’agit toujours d’une version préliminaire et la fonction d’aperçu dans Chrome vise uniquement à vous permettre de partager et de communiquer votre création. La qualité du code n’est pas adaptée à une publication.

  2. Cliquez sur OK.

    Chrome s’ouvre et affiche votre création.

    Le bouton Edge Inspect vous permet aussi de diffuser vers vos périphériques mobiles. Si vous n’êtes pas familier d’Edge Inspect, vous pouvez vous référer à l’article ADC « Browser testing across devices with Adobe Edge Inspect » (Test dans le navigateur sur différents terminaux avec Adobe Edge Inspect).

Actuellement, Reflow ne prend pas en charge l’exportation de la totalité du code HTML et CSS qu’il crée. Pour accéder à la source, affichez l’aperçu de votre projet. Utilisez ensuite les outils de développement Chrome pour voir le code HTML et CSS. Reflow crée trois fichiers : index.html, boilerpate.css et reflow.css.

  • Le fichier index.html inclut le marquage de votre création.
  • Le fichier boilerplate.css est une version du célèbre gabarit HMLT5Boilerplate
  • Le fichier reflow.css contient du code CSS personnalisé et le système de grille

Vous pouvez copier du code à partir de cet aperçu vers votre projet.

Gardez cependant à l’esprit que ce code n’est pas destiné à une publication. Ceci est une version préliminaire. Aussi est-il possible que vous rencontriez certains problèmes.

Etapes suivantes

Testez, jouez et créez avec Edge Reflow. Si vous avez des commentaires ou suggestions, faites-nous en part et aidez-nous à orienter le développement futur de notre produit.  Envoyez vos commentaires à @Reflow. N’hésitez pas à nous indiquer les problèmes que vous rencontrez. Enfin, sachez que nous sommes au début du processus de développement et que l’équipe Reflow effectue rapidement de nouvelles itérations.