Votre premier site web réactif EverWeb 1 : On commence !

This post is also available in: English (Anglais)

EverWeb 2.8, nouvellement sorti, apporte probablement la fonctionnalité la plus excitante et la plus demandée à ce jour : Le web design réactif. Pour ceux qui connaissent EverWeb, vous réaliserez rapidement qu’EverWeb a toujours la même apparence et le même fonctionnement qu’il a toujours eu. Comment créer un site web réactif avec EverWeb ? Cette série d’articles de blog vous guidera du début à la fin. Néanmoins, avant de commencer, nous devons d’abord explorer les concepts de design réactif et de design traditionnel avant de créer notre premier site web réactif …

Qu’est-ce que le web design réactif ?
En un mot, le web design réactif permet aux constructeurs de sites web de créer des pages web évolutives qui s’adapteront automatiquement à l’appareil sur lequel la page est affichée. Cela signifie que vous ne créez qu’une seule page web réactive qui peut ensuite être utilisée sur un ordinateur de bureau, une tablette ou un appareil mobile.

Alors, qu’est-ce que le web design traditionnel ?
Au début de l’ère Internet, la conception de sites web reposait sur des pages à largeur fixe pour les appareils de bureau. Cela convenait, jusqu’à ce que l’arrivée des smartphones conduise à la nécessité de pages web spécialement adaptées à la largeur et à la forme des appareils mobiles. Le boom des smartphones a également conduit les moteurs de recherche, tels que Google, à classer les pages mobiles plus haut que les pages de bureau dans les résultats de référencement.

L’approche « traditionnelle » de la création de sites web signifie donc que vous devez créer une page web pour les appareils de bureau et les tablettes et la page web correspondante pour les appareils mobiles. Lorsque le site web est publié, un code est ajouté pour s’assurer que la page mobile est affichée sur les appareils mobiles et que la page de bureau est affichée sur les ordinateurs de bureau ou les tablettes.

Alors pourquoi ne pas simplement utiliser le design réactif ?
Le web design réactif semble présenter de nombreux avantages, il existe en fait des avantages et des inconvénients pour les deux méthodologies de conception. Pour commencer, vous devrez apprendre les concepts de design réactif et leur application dans EverWeb. Vous aurez peut-être également à repenser la conception future de vos sites web, par exemple. Si vous souhaitez remodeler un site web existant et le rendre réactif, vous devrez inévitablement faire quelques compromis en matière de conception et faire des choix. La solution « évolutive » d’une page de design réactif est également structurée. Obtenir une bonne conception peut prendre plus de temps. Ce que vous voyez sur un appareil de bureau peut sembler génial, mais qu’en sera-t-il un appareil mobile ? Inévitablement, tester votre site et corriger tout problème de conception pour vous assurer qu’il fonctionne correctement dans tous les scénarios prendra probablement plus de temps qu’auparavant.

Voilà le genre de considérations que vous devrez prendre en compte lorsque vous envisagez de recourir à la conception réactive par rapport à la conception traditionnelle. Avant de commencer, il convient de peser vos choix en matière de construction de votre premier site web.

Fonctionnement de la conception Web réactive dans EverWeb
Dans de nombreux cas, l’utilisation d’EverWeb sera aussi simple que d’habitude. Cependant, la création d’un site web réactif adoptera une approche différente, car la conception de sites web réactifs nécessite une structure. Votre contenu est placé dans des « conteneurs » pleine largeur (également appelés « Sections ») qui forment une ligne sur la page plutôt que la forme libre habituelle. Vous pouvez ajouter autant de lignes de largeur que vous le souhaitez sur la page. Chaque rangée s’allonge l’une sous l’autre, en partant du haut de la page. Lorsque vous redimensionnez la page, le contenu de la ligne est automatiquement redimensionné à la largeur actuelle de la page. La hauteur de la ligne s’ajuste également automatiquement pour que tout ce qui reste dans la ligne reste dans la ligne.

De nombreux types d’objet EverWeb tels que le texte, les images, les formes et les widgets peuvent être soit leur largeur normale, soit leur largeur totale. Certains widgets, tels que le widget Responsive Row, ne peuvent avoir que la largeur totale, alors que d’autres ne peuvent jamais être rendus en pleine largeur, tels que les widgets PayPal et Facebook. Dans le design réactif, les widgets et les objets qui ne sont pas définis sur « Largeur » ??doivent être placés dans le widget Responsive Row pour fonctionner correctement. Nous examinerons cela plus en détail dans un futur blog … Le concept de conteneurs pleine largeur est essentiel pour comprendre le design réactif dans EverWeb. Pour le reste, EverWeb fonctionne de la même manière que d’habitude.

Créer un site web réactif dans EverWeb
Maintenant que vous avez eu un aperçu rapide de la conception de sites web réactifs dans EverWeb, commençons par créer un site web réactif ! Il est préférable de commencer avec un projet test afin de pouvoir expérimenter avant de plonger dans un projet complet.

1. Lancez EverWeb et sélectionnez « Create a new website » (Créer un nouveau site Web) dans la fenêtre des Projets.
2. Vous verrez maintenant le sélecteur de modèle de thème. Si vous avez mis à niveau à partir d’une version précédente, vous remarquerez qu’un menu déroulant de filtres s’affiche dans le coin supérieur gauche. Cela vous permet de sélectionner « All Themes » (Tous les thèmes), « Fixed Width Themes » (Thèmes à largeur fixe), « Responsive Themes » (Thèmes réactifs) ou « New Themes » (Nouveaux thèmes). Pour le moment, laissez-le sur « All » (Tous).
3. Dans la colonne de gauche, vous verrez en haut de la liste le modèle de thème « Blank » (Vierge) qui comprend désormais une page « Responsive » (Réactif). Il existe également un nouveau modèle de thème « Blank Responsive » (Réactif Vierge) comprenant des pages vierges « Accueil », « Vidéo », « Image » et « Blog ». Cliquez sur la page « Accueil » puis sur « Sélectionner ».
4. La page réactive a été ajoutée au projet de site web. Vous pouvez vérifier que la page est réactive en consultant la section « Page Layout » (Mise en page) de l’onglet Paramètres de page dans la fenêtre Inspecteur. Vous devriez voir « Réactif » à côté des mots « Mise en page ».
5. En regardant la section « Mise en page », vous remarquerez également que les valeurs « Largeur du contenu » et « Hauteur de l’en-tête » sont grisées, car elles ne sont pas utilisées en web design réactif. La conception web ainsi que les conteneurs pleine largeur sont utilisés à la place.
6. Faites défiler vers le bas de la page. Vous verrez le pied de page. Il comprend, par défaut, un widget Responsive Row placé dans celui-ci. À l’intérieur du widget se trouve l’image « Made with Love with EverWeb » (Conçu par amour avec EverWeb) qui comprend un lien vers le site web everwebapp.com. Comme l’image n’est pas définie sur « Largeur », elle doit être placée dans un widget Responsive Row.

La page est maintenant prête à être ajoutée à des objets pour créer une page réactive. Dans le prochain article de cette série, nous examinerons les outils dont vous aurez besoin pour créer une excellente expérience de page réactive !

Si vous avez une question ou un commentaire à propos de ce blog pour débutants, veuillez-nous en informer dans la section Commentaires ci-dessous. Nous serons ravis de vous aider !

This post is also available in: English (Anglais)