Creation page

Créer de belles pages, sans prise de tête

Le mercredi, 05 août 2015

Dans Aide à la création de site

Et si vous profitiez du calme plat de l'été pour donner un coup de neuf à votre site ? Pendant que les enfants planchent sur leur cahier de vacances, voici quelques pistes pour enjoliver vos pages. Ce billet est le résumé d'une conversation que nous avons eu avec un webmaster inscrit à la version BETA du support téléphonique. Nous aurions pu aussi l'intituler "Comment utiliser l'outil de création de page" ou "Réaliser de jolies pages qui s'adaptent à tous les supports" ! Découvrez comment créer des pages bien structurées, dynamiques et faciles à mettre à jour

Quand vous ajoutez une page sur votre site, par défaut un éditeur visuel vous invite à ajouter du texte ou des images.

Editeur visuel

Automatiquement, quand vous voyez cet éditeur par défaut, vous pensez que cela fonctionne comme sur Word ou Writer. Cela y ressemble beaucoup, en effet ! Mais idéalement, il ne faut pas mettre tout votre contenu à la suite dans cet éditeur visuel. Préférez la création de page par blocs, et cela pour plusieurs raisons 

Des pages bien structurées

Si vous créez des pages en mettant tout le contenu dans un seul éditeur visuel, vous aurez inévitablement un souci pour gérer la mise en page. Vous avez déjà remarqué qu'il est difficile de positionner une image à coté d'un paragraphe, ou un texte à coté d'une vidéo ? Après avoir enregistré la page, le rendu coté site n'est pas forcément le même que celui que vous avez dans le manager. C'est normal, le web ne fonctionne pas comme le logiciel Word. Pour vous aider à structurer vos pages, nous vous proposons un système de lignes et de colonnes, pratique par exemple pour mettre 3 images côte à côte ou un texte à coté d'une image.

Exemple colonnes

Facile à mettre à jour

Si vos pages sont bien structurées, elles sont plus simples à mettre à jour. Au moment d'enregister, vous n'allez plus suer à grosses gouttes en vous demandant si votre site va ressembler à ce que vous espérez. Chaque élément à une place et la conserve, les images ne flotteront plus au dessus des paragraphes et ne déborderont plus sur les menus. Si vous avez trois images alignées, vous pourrez les modifier en un clic, ou tout simplement inverser des blocs en les plaçant à l'endroit de votre choix.

Inverser

Des contenus qui s'adaptent à tous les supports

Il ne s'agit pas simplement d'appliquer un thème responsive pour que tout le contenu s'adapte correctement. Il faut faire attention aussi à la façon dont vous allez construire vos pages. Avec l'outil de création de page par blocs, en ajoutant des lignes et des colonnes, vous prenez peu de risque. Si un internaute arrive sur votre site avec une tablette, les cellules s'ajustent automatiquement. A un smartphone, les blocs passent les uns au dessus des autres, c'est prévu avec tous les thèmes responsive. 

Facile disposer

 

Des pages plus aérées, faciles à redimensionner! 

Si vous appuyez sur la touche 'Entrée"  ou "Espace" pour aérer votre contenu, vous risquez de tout décaler ! Sans vouloir paraître trop alarmiste, après quelques enregistrements, vous allez chambouler votre éditeur visuel et vos pages seront désorganisées. Utiliser des lignes et des colonnes, ça permet de conserver les mêmes marges entre vos blocs. Ajoutez du contenu sans vous soucier du résultat final ! Chaque ligne peut comporter jusque 6 colonnes, et vous pouvez les redimensionner à votre guise en pourcentage.

Exemple taille

Des pages plus rapides à charger, donc mieux référencées ? 

On peut dire ça en quelque sorte. Le contenu c'est vous, mais la structure et le code, c'est nous (e-monsite) !  Sans le savoir, en créant des lignes et des colonnes dans vos pages, vous allez créer des pages en DIV (maintenant vous le savez). Le fait d'utiliser ce système est beaucoup plus "propre" que de faire des tableaux, c'est aussi moins lourd en terme de code dans la page et c'est compatible W3C ! Notez que la vitesse de chargement d'un site est un facteur important pour le référencement, et elle dépend du poids des pages, mais aussi des serveurs de votre hébergeur et du code généré par le CMS. Pour ça, pas de souci vous pouvez compter sur les serveurs d'e-monsite, réputés comme étant ceux qui répondent le mieux (testé par websitetoolstester parmi de nombreux CMS). 

Meilleur CMS pour créer un site

Des pages personnalisables

Nous allons maintenant parler de l'apparence de vos pages. Attention, il n'est pas question de gérer le design dans chaque page mais plutôt d'utiliser des styles et des effets, en ajoutant des class sur les lignes et les colonnes. Cette option permet par exemple d'ajouter des effets de survol ou de surbrillance, comme dans l'exemple ci-dessous. Découvrirez comment ajouter des styles dans des pages. Pour les webmasters plus aguérris, vous pouvez aussi créer des class personnalisées.

Survol ligne

Du contenu dynamique !

Chaque module sur votre site permet de présenter des contenus spécifiques. Pour diffuser de l'actualité par exemple, nous vous proposons un module Blog, qui permet d'afficher une listes d'articles, du plus récent au plus ancien. Chaque module dispose de widget, pour afficher les contenus de ces modules dans vos pages ou vos menus. Avec l'outil de création de page, vous pouvez ainsi imaginer afficher la liste des derniers billets du blog dans une page, ou les produits de votre boutique en promotion ou encore les vidéos les plus vues de votre galerie, un player MP3 etc... Des centaines de widgets peuvent être ajoutées dans vos pages et menus, et cela n'est possible qu'en utilisant les lignes et les colonnes. 

Conclusion : vous allez tout simplement être plus efficace !

Que ce soit pour mettre à jour vos pages ou pour les créer, vous serez gagnant à utiliser ce système de lignes et de colonnes. Avec le webmaster du site http://www.slprovence.com/fr/, nous avons vu en quelques minutes que cela peut contribuer à améliorer nettement le rendu visuel d'une page, en peu de temps. Nous sommes à votre disposition en commentaire pour répondre à toutes vos interrogations à ce sujet.

Tout le contenu dans un seul éditeur visuel

Avant

Avec les lignes et les colonnes 

Apres

Pages