Pour qu'un site puisse fonctionner et accueillir des utilisateurs, ses fichiers et ressources doivent être uploadées sur le net. on dit que le site est mis en ligne. Pour ce faire, on va utiliser un type d'ordinateur spécifique, appelé serveur, dont le boulot sera de maintenir votre site sur internet. Un serveur doit fonctionner 24 heures sur 24, 7 jours sur 7, ce qui coûte de l'argent. Plus un serveur est gros et performant, plus ses coûts de fonctionnement augmentent. Pour minimiser les coûts, la solution adoptée par l'immense majorité des propriétaires de site internet est de louer un serveur auprès de plateformes spécialisées. Il existe cependant plusieurs types de serveurs, chacun adaptés en fonction de votre activité.
Le choix de votre hébergement va principalement dépendre du trafic sur votre site web. En effet, plus le nombre de visiteurs sur un site augmente, et plus le serveur va avoir du mal à satisfaire toutes les demandes, si qui peut impacter sa vitesse. Dans certains cas extrèmes, un site web peut purement et simplement narréter de fonctionner. Ce genre de situation peut notamment arriver lorsqu'un évènement conduit un très grand nombre d'utilisateurs à se connecter en même temps sur un site.
Il est légitime de se demander s'il est possible d'héberger soi-même son site internet plutôt que de faire appel à un prestataire externe. Après tout, un serveur n'est qu'un ordinateur modifié. Il est en effet possible de créer et d'administrer son propre serveur, en utilisant par exemple un ordinateur uniquement dédié à cette tâche, ou même en utilisant une partie des ressources son propre ordianteur personnel. Cette option a évidemment pour avantage de vous faire économiser sur vos coûts de fonctionnement, et vous permet de régler vous-même tous les détails de votre serveur. Vous avez ainsi le contrôle sur vos données,
Cependant, l'auto-hébergement nécessite de remplir beaucoup de critères pour être une solution viable, à commencer par vos compétences techniques. Vous devez être très à l'aise avec les notions d'hébergement, car votre serveur devra respecter toutes les règles de sécurité imposées par les moteurs de recherche, comme le protocole HTTPS. Vous devrez également vous assurer que votre ordinateur pourra fonctionner en permanence et avoir une connexion internet d'excellente qualité et parfaitement stable. Enfin, et c'est le plus gros problème, votre ordinateur risque d'être vite dépassé si beaucoup d'utilisateurs commencent à utiliser votre site, ce qui vous forcera à acquérir une machine plus performante, ce qui pose à nouveau le problème du coût.
Au final, même si l'auto-hébergement est possible, c'est une solution difficile à mettre en place, moins fiable (sauf si vous avez déjà du bon matériel), et qui plus est ne vous fera pas économisez tant d'argent que ça; nous allons le voir dans la suite de cet article, louer un petit serveur ne coûte en général pas plus de 50 à 100 euros par an. Si vous souhaitez malgré tout en apprendre plus sur l'auto-hébergment, vous pouvez vous rendre sur à cette adresse.
C'est le type d'hébergement est le plus abordable. Ici, le serveur est partagé entre plusieurs utilisateurs. Pour faire simple, plusieurs site web sont hébergés sur un seul serveur.
L'hébergement mutualisé permet surtout d'économiser sur les coûts. En effet, un serveur coûte cher à faire fonctionner. Cette solution est particulièrement adaptée aux sites qui ont un faible trafic. Il est important de préciser que les performances d'un serveur mutualisé peuvent être très différentes en fonction du prestataire. En effet, il n'y a aucune limite au nombre d'utilisateurs qui partageront votre serveur, et certaines plateformes en profitent, allant parfois jusqu'à héberger plus d'une centaine de sites web sur le même serveur. Inutile de préciser que ceci réduira grandement les performances de votre site. Il est donc primordial de bien choisir sa plateforme d'hébergement.
Pour cette raison, on déconseillait auparavant cette manière de procéder. Mais la situation a énormément évolué ces dernières années, et ce type de serveur peut désormais fournir des performances étonnantes. Un serveur mutualisé bien optimisé et de qualité peut tout à fait accueillir plusieurs milliers de visiteurs par mois sans souffrir de problèmes de ralentissement.
En moyenne, ce type d'hébergement coûte entre 2 et 20 € par mois. Si une plateforme vous propose un coût moins élevé, vous risquez d'avoir un site peu performant. Si le prix est au contraire plus élevé, envisagez de passer à un autre type de serveur.
C'est un type d'hébergement assez similaire au mutualisé, on ne va donc pas s'attarder longtemps dessus. Le serveur reste partagé entre plusieurs utilisateurs, mais fournit à chaque utilisateur un environnement personnalisé. cela signifie qu'il est possible de personnaliser à volonté l'environnement de son serveur.
De manière générale, l'hébergement VPS offre également de meilleure performances : Il est plus rapide, et peut accueillir un plus grand nombre visiteurs. En revanche, le serveur demande plus de maintenance et reste plus difficile à configurer qu'un serveur mutualisé.
En moyenne, ce type d'hébergement coûte entre 6 et 30 € par mois. Si une plateforme vous propose un coût moins élevé, vous risquez d'avoir un site peu performant. Si le prix est au contraire plus élevé, envisagez de passer à un hébergement dédié
Cette fois-ci, vous bénéficiez de votre propre serveur. Votre qualité d'hébergement sera nettement plus élevée, ce qui permettra à vos pages de s'afficher plus rapidement et rendra votre site plus performant de manière générale. Vous pourrez également accueillir un nombre bien plus important de visiteurs. Vous bénéficiez également d'une sécurité optimale.
Il est difficile de savoir précisément combien d'utilisateurs votre site web pourra supporter sans broncher. Ce facteur va principalement dépendre de la RAM que possède votre serveur. Ce n'est pas le seul critère, mais en règle générale, plus vous en avez, plus vous pourrez gérer un trafic important. Il est également possible de diviser son propre serveur pour héberger plusieurs sites web simultanément.
Le principal inconvénient de cette solution est son coût. Vous pouvez rapidement vous retrouver à devoir payer plusieurs centaines d'euros par an; il est donc nécessaire de s'assurer que votre investissement sera rentabilisé. Gardez à l'esprit que les serveurs dédiés d'entrée de gamme sont forcément les moins puissants, ce qui fait que vous n'aurez pas forcément un gain de performance incroyable par rapport à un serveur mutualisé bien optimisé.
Le coût d'un hébergement dédié commence autour de 30€ par mois, mais peut monter à plus de 100€ par mois En fonction des services proposés. Attention, un service plus cher ne rendra pas forcément votre site plus performant. Les offres les plus onéreuses permettent surtout d'accéder à des services annexes, comme la mise à disposition d'une équipe qui s'occupera de l'installation et de la maintenance de votre serveur.
C'est de loin la solution la plus performante, mais aussi la plus chère. Un serveur cloud, ou virtuel, consiste à utiliser plusieurs serveurs pour gérer un seul site web.
L'énorme avantage conféré par cette solution est que votre site peut être répliqué en plusieurs versions identiques à différents endroits dans le monde, ce qui vous permet d'allouer des ressources en fonction de là où le trafic est le plus fort. C'est aussi le type d'hébergement offrant les meilleures performances, la meilleure sécurité, et la meilleure stabilité. Même si l'un de vos serveurs tombe en panne, votre site restera plus ou moins fonctionnel. L'hébergement cloud est surtout utilisé par des entreprises gérant d'immenses bases de données, comme Amazon, Google, ou encore WordPress.
Attention, certaines plateformes proposent des hébergements dits "cloud" à bas prix. Il faut comprendre ici que votre serveur sera dématérialisé (hébergé sur un cloud). C'est un type d'hébergement qu'utilisent déjà un grand nombre de prestataires, et qui est surtout un argument marketing.
Le coût d'un hébergement cloud est difficile à estimer, mais il faudra compter au minimum plusieurs centaines d'euros par mois.
Déterminer votre hébergeur est une étape importante dans la vie de votre site, car ses performances dépendront en partie de ce choix.
Pour savoir quel prestataire vous conviendra le mieux, il est important que sachiez au préalable à quoi sera destiné votre site. En effet, en fonction de votre objectif, vous êtes susceptible d'avoir à gérer un flux plus au moins important de visiteurs. Un site conçu pour présenter une boulangerie n'aura par exemple pas besoin d'être hébergée sur un gros serveur. Un l'inverse, un blog très actif, consulté par des milliers d'internautes chaque mois, devra pooséder des ressources plus importantes.
Pour résumer, si votre serveur ne recevra pas beaucoup de trafic (quelques centaines de personnes par mois), il est conseillé de l'héberger sur un serveur mutualisé. A contrario, si vous pensez que vous aurez beaucoup de trafic, optez pour un serveur dédié
Le choix de votre hébergeur va surtout se faire en fonction de deux critères : votre budget, et les services auxquels vous souhaitez accéder. Un hébergeur peut être plus cher parce qu'il vous permet de bénéficier d'un bon service client en cas de problème, ou parce que vous aurez accès à des services annexes, comme un certificat SSL ou un nom de domaine gratuit. ...
Si vous ne savez pas quoi choisir, nous avons sélectionné 3 prestataires chacun à un budget différent. Nous n'avons aucun partenariat avec ces prestataires, il s'agit simplement à notre sens de la meilleure offre en rapport au budget.
Plutôt que de proposer tous un tas d'offres différentes, O2 switch a choisi de mettre en place un seul forfait unique, à 7€ HT par mois. Le concept est de vous proposer un serveur mutualisé survitaminé, avec notamment jusqu'à 48 Go de RAM (en théorie, du moins), soit bien plus qu'un serveur mutualisé classique; Un serveur O2switch peut aussi facilement gérer plusieurs milliers d'utilisateurs par mois sans broncher. En terme de rapidité, il peut parfois approcher les performances d'un petit serveur dédié. L'offre s'accompagne également d'une tonne de services gratuits, et bénéficie d'une interface de gestion plus claire et détaillée que la plupart des concurrents, même si elle n'est pas parfaite. Autre point important, l'hébergeur web prend en charge l'hébergement WordPress et vous permet de l'installer en quelques clics. Cerise sur le gâteau : l'entreprise est française et bénéficie d'un service client réactif et efficace.
O2Switch comporte tout de même quelque inconvénients avec lesquels il faudra composer, notamment le fait que vous n'ayez accès qu'à un seul service pour un prix unique. Ainsi, vous ne pourrez pas opter pour une solution d'hébergement moins cher, ni à l'inverse choisir d'améliorer votre serveur. A noter également, le prestataire ne propose pas d'abonnement au mois, mais à l'année, ce qui peut en rebuter certains (précisons tout de même que pour bénéficier des meilleurs tarifs, la plupart des hébergeurs encouragent à s'engager sur plusieurs années, ce que ne fait pas 02switch.)
Si vous êtes intéressé par ce prestataire, sachez qu'il est possible de trouver facilement des codes promo en cherchant sur internet, qui permettent de réduire un peu le coût de l'abonnement.
Pour aller sur O2 switch, suivez ce lien
Cet hébergeur très imposant a su construire sa réputation sur deux critères : Un rapport qualité-prix exceptionnel et des performances excellentes. Souvent comparé avec OVH, Hostinger tire son épingle du jeu grâce à des serveurs plus rapides et des prix plus intéressant, ce qui en fait une très bonne option si vous souhaitez créer un site à faible budget, avec des offres commençant à moins de 2 euros par mois, ce qui est assez exceptionnel pour un service de cette qualité. Ce prestataire met à disposition un certain nombre d'outils, et prend également en charge gratuitement le certificat SSL et le nom de domaine. Enfin, Hostinger est également compatible avec la plupart des CMS comme WordPress, Joomla, ou Pretashop
On relèvera cependant plusieurs points négatifs. Pour commencer, Hostinger donne assez peu d'informations sur les caractéristiques de ses serveurs, ce qui peut rendre difficile la comparaison avec la concurrence. Mais le principal inconvénient rest que, même si ce prestataire propose sur le papier des offres très intéressantes, vous devrez faire attention à bien lire tous les petits caractères pour éviter les mauvaises surprises. Sachez par exemple qu'il faudra vous engager sur 4 ans pour bénéficier des meilleurs prix. De plus, tout les outils ne sont pas disponibles pour les offres les moins onéreuses (vous devrez notamment payer vous-même votre nom de domaine). Notons également que les prix affichés augmenteront après la première année.
Malgré tous ces inconvénients, Hostinger reste l'un des hébergeurs les plus efficaces et compétitifs du marché.
Pour aller sur O2 switch, suivez ce lien
C'est le seul prestataire actuellement connu à proposer une offre gratuite. Il s'agit évidemment d'une solution adaptée uniquement si vous avez un site web à faible trafic, mais si vous démarrez votre activité, c'est une option intéressante. L'installation du site et l'administration du serveur seront en revanche plus complexe que sur une option payante, et vous accès au minimum vital.
Notez que le nom de domaine est également gratuit.
Pour aller sur PlanetHoster, suivez ce lien
Vous savez à présent quel type d'hébergement de site préférer en fonction de votre projet :
- Pour un site à faible ou à moyen trafic : Choisissez un serveur mutualisé. Evitez les offres trop alléchantes, au risque de vous retrouver avec de faibles performances. Prévoyez un budget de 4 à 6 euros par mois pour le meilleur rapport qualité-prix. Gardez à l'esprit que ce type de serveur peut tout à faire faire fonctionner un site e-commerce avec plusieurs centaines, voire milliers de visiteurs par mois.
- Pour un site à fort trafic : Choisissez un serveur VPS ou dédié. Préférez un VPS si vous avez un budget limité à 20 euros par mois ou moins. Pour un serveur dédié, le meilleur rapport qualité-prix situe aux alentours de 50 euros par mois.
N'oubliez pas que vous devrez également acheter un nom de domaine pour pouvoir indexer votre site !
Cette formation se concentre avant tout sur les tâches liées à la création de votre site. Il est néanmoins important de faire un apparté sur cet aspecte. Etape souvent ignorée qui peut pourtant vous éviter bien des problèmes par la suite, le maquettage consiste à réaliser une première version concrète de votre site avant de passer au développement.
Concevoir une page web au fil de ses idées est un exercice ardu, et aboutit très souvent à des oublis et des maladresses. Le développement web, comme toute les activité de création, nécessite de pouvoir se concentrer sur une chose à la fois.
Ainsi, faire une maquette de votre site permet de bien ordonner les tâches qui seront à effectuer : quelles pages vous voulez créer, quel(s) sujet(s) elles aborderont, mais aussi les outils que vous aurez besoin d'intégrer, comme un formulaire de contact. C'est aussi l'occasion de créer en parallèle une charte graphique, qui vous permettra de réfléchir à vos couleurs, votre logo, les polices d'écritures ...
Ça peut sembler paradoxal, mais maquetter votre site au préalable vous évitera beaucoup de travail additionnel par la suite en vous évitant d'avoir à faire des changement à répétition. En effet, il est rare que la première version de son site convienne parfaitement; tel élément sera trop petit, ou pas aligné au bon endroit, tel texte sera à placer à un autre endroit... Hors si effectuer des changements sur une maquette se compte en minutes, et même si Oxygen accélère grandement le processus, faire la même chose sur un site web est un travail qui se compte en heures.
Jusqu'ici, nous avons parlé du maquettage comme d'un tout. Mais il existe en réalité plusieurs étapes distincte qui vont à chaque fois préciser de nouveaux éléments.
Temps de conception : Rapide
Dit simplement, c'est le chapitrage de votre site, c'est-à-dire l'étape où vous allez définir quelles pages comportera votre site, et quelle page amènera à quoi. C'est un travail simple à faire, mais absolument cruciale. Aussi, si vous souhaitez consacrer le minimum de temps au maquettage, faites au moins ce travail, qui vous permettra de segmenter les informations de votre site.
Créer l'arborescence d'un site fonctionne un peu de la même manière que la hiérachie des titres, dans le sens où vous allez préciser des pages principales et des pages secondaires :
Gloomaps est un site de référence qui vous permettra de réaliser facilement votre arborescence. Pensez simplement à sauvegarder ou exporter votre arborescence pour éviter de perdre vos modifications.
Vous pouvez également utiliser n'importe quel outil permettant de hiérarchiser vos éléments, ou même travailler sur papier.
Temps de conception : moyen
Aussi appelé maquette basse fidélité, le Wireframe est une version simplifiée d'une maquette, qui sert à poser les bases de chaque page. L'objectif n'est pour le moment pas de réaliser une copie conforme de ce que sera le site, mais plutôt de réfléchir à quelles sections il comportera, et comment elles seront organisées.
On ici prendre soin de détailler les éléments de chaque page, en ajoutant éventuellement les titres et les textes, sans forcément rentrer dans les détails. L'objectif est qu'à la fin de cette étape, vous sachiez :
C'est également à cette étape qu'on va commencer à réfléchir la question des formats d'écran. En effet disposition sur grand écran ne sera peut-être pas adapté à un affichage plus étroit. Cette étape peut être ignorée pour le moment si vous réalisez une maquette par la suite.
Une fois le wireframe terminé, il est déjà plus facile de se lancer dans la création du site, même si certains points restent à préciser.
Vous pouvez également choisir de réaliser cette étape à la main, sur papier
Temps de conception : long
Ce que l'on appelle par défaut maquette de site web est la maquette haute fidélité, dont l'objectif est d'être la fidèle représentation de ce que sera le site web. C'est notamment à cette étape qu'on va réaliser la charte graphique du site :
Pour en savoir plus sur la charte graphique, nous vous conseillons le Guide de la Fabrique du Net qui aborde le sujet de manière complète.
On va également ici accorder une importance particulière aux formats d'écran, en réalisant trois versions différentes de chaque page :
Cette étape est la plus fastidieuse, mais vous permettra également de tester rapidement des idées de conception et de corriger votre mise en page avant de passer au développement. Notez que si vous partez d'un Wireframe, cette étape sera bien plus simple à réaliser.
Si vous avez conçu votre wireframe au préalable, vous aurez ici surtout besoin d 'apprendre à utiliser l'outil que vous avez choisi. Il existe de nombreux tutoriels sur Youtube pour vous aider dans la prise en main du logiciel qui a votre préférence.
Pour vous aider, vous pouvez consulter le guide le guide sur les règles à suivre pour créer une bonne page web.
Lorsque vous mettez votre site web en ligne, il est obligatoire qu'il comporte certaines mentions pour être en accord avec la réglementation européenne, qu'on appelle les mentions légales :
Jusqu'à il y a quelques années, il n'y avait pas vraiment de règlementation précise concernant la récupération des données des utilisateurs, ce qui fait que tout le monde se permettait un peu n'importe quoi.
Pour faire simple, les cookies sont de petits fichiers dont se sert le site web pour avoir des informations pour vous. Lorsque vous allez sur un site web, vous dispatchez ainsi plein de petites informations sans forcément le savoir. Vos préférences d'achat, la ville où vous habitez ... C'est notamment cette mécanique qui va faire que quand vous consultez un site vendant des tondeuse à gazon, vous allez voir apparaître sur d'autres sites plein de pubs vous proposant des tondeuses à gazon.
Et ça, beaucoup en ont allégrement profité en cherchant à aspirer le plus d'informations possible de chaque utilisateur cliquant sur leur site. Alors, en 2018, la CNIL a dit stop, et a durci sa réglementation du RGPD (Réglementation Générale sur le Protection des données). Désormais, si vous cherchez à récupérer des informations de vos visiteurs, vous devez les en informez.
Les problème, c'est que les cookies ne servent pas qu'à renseigner vos préférences. Ce sont notamment eux qui vont par exemple permettre de garder en mémoire votre panier d'achat si vous quittez le site où vous avez commandé. Certains cookies sont même essentiels au bon fonctionnement de votre site. Ainsi, que vous le vouliez ou non, vous êtes obligé de récupérer des informations provenant de vos visiteurs, et donc vous êtes obligé d'afficher ce fameux bandeau de cookies.
Par défaut, nous avons installé un bandeau de cookie simple, qui a l'avantage d'être gratuit à l'utilisation. Il existe d'autres extensions de cookies plus optimisées, mais qui peuvent rapidement être onéreuses. Si vous souhaitez changer de gestionnaire de cookies, vous pouvez le faire en désinstallant l'extension EU Cookies bar. Pour en savoir plus sur l'installation et a désinstallation d'extensions, consultez le guide dédié.
Voici comment accéder à votre bandeau de cookies :
IMPORTANT : pour sauvegarder vos modifications, cliquez sur le bouton Save en bas de page juste avant l'onglet "maybe you like"
Certains styles du bandeau ont été directement conçus à l'aide de CSS personnalisé. Si vous en avez les capacités, vous pouvez modifier ce fichier avec Advanced script (dans l'onglet outils), Dossier CSS, fichier CSS - Barre de Cookies
Certains textes ne sont pas modifiables directement sur l'extension. Pour les modifier, il est nécessaire d'éditer directement les fichiers de l'extension. Nous n'aborderons pas plus en détails cet aspect, car éditer ce genre de fichiers peut rapidement conduire à des bugs. Ne vous aventurez sur ce terrain-là que si vous êtes certains d'en avoir les compétences.
Si vous avez absolument besoin de modifier un texte, vous pouvez nous demander d'effectuer le changement en nous contactant à l'adresse bonjour@tricorn.fr
Par défaut, nous avons créé trois pages différentes :
Voici comment accéder aux pages légales :
Si vous avez besoin d'ajouter une page légale supplémentaire, créez simplement une nouvelle page, puis sélectionnez la catégorie juridique
Si vous avez besoin que les utilisateurs pour accéder à cette page depuis votre site, par exemple en la mettent dans le footer (pied de page), vous devrez en faire un lien cliquable .
Les trois pages légales fonctionnent avec le template juridique, qui spécifie leur apparence. Pour la modifier, vous devrez donc éditer ce template et passer par Oxygen Builder. Pour en savoir sur comment éditer un template sur Oxygen, consultez le guide dédié aux templates
Cette partie n'est à consulter que si vous souhaitez recréer vos pages légales ou votre bandeau de cookies depuis 0, ou si vous partez d'une installation complètement vierge. On supposera ici que vous êtes déjà à l'aise avec :
Si vous avez déjà des pages légales d'installées sur votre site, n'oubliez pas de les supprimer. Pour savoir quels documents sont obligatoire pour respecter le RGP, vous pouvez consulter cet article
Votre page est maintenant prête. Désormais, il vous suffira de donner la catégorie juridique à une page pour que la template s'applique à la page. Le titre et le contenu de la page seront automatique ajouté.
Rajoutez quelques marges ou décorations à votre envie, puis sauvegardez et quittez.
Si vous êtes parti d'un site pré-configuré, il faudra désinstaller l'extension EU Cookies bar au préalable. Vous pouvez également supprimer le bloc de code CSS - Barres de cookies dans le dossier CSS d'Advanced Scripts
Si vous partez de zéro, il vous faudra installer une extension de cookies. Ici, nous sortons du cadre de cette formation, car tout dépendra de l'extension que vous choisirez. Prenez néanmoins en compte quelques informations importantes :
Pour en savoir plus, vous pouvez consulter cet article dédié au RGPD
Si vous partez d'une feuille blanche, il peut être intéressant de faire une maquette au préalable, afin de fixer vos idées avant de commencer à vous lancer dans la création. Pour en savoir plus, consultez le guide dédié au maquettage. Vous pouvez continuer de consulter ce guide en parallèle, qui vous aidera à comprendre comment organiser votre maquette.
Vos pages web, et en particulier votre page d'accueil, doivent permettre de comprendre qui vous êtes, ce que vous faites, comment vous le faites, comment rentrer en contact avec vous ... ça fait beaucoup d'infos à faire passer. Il est donc essentiel de segmenter sa page en plusieurs sections.
Pour améliorer l'expérience utilisateur, il est préférable que l'utilisateur comprenne bien quand est-ce qu'il change de section. Il n'est pas nécessaire de complètement changer de design d'une section à l'autre, mais vous ne pouvez pas vous contenter d'un simple retour à la ligne, ou vous risquer de provoquer des situations où l'utilisateur va se dire "attends, mais depuis quand on a changé de sujet ?"
Un changement de section peut se faire de plusieurs manière :
L'utilisateur qui arrive sur votre site ne vous connaît pas encore. Vous ne pouvez donc pas lui demander immédiatement de signer un devis ou d'acheter quelque chose (sauf si vous savez que l'utilisateur connaît et cherche spécifiquement ce que vous vendez).
En début de page, on va donc plutôt chercher à piquer la curiosité de l'utilisateur, en présentant rapidement comment les avantages, puis on détaillera par la suite les informations.
Votre page d'accueil est celle dont la structure est la plus importante. Elle doit présenter l'intégralité des pages de votre site, sans forcément rentrer dans les détails.
Contrairement aux idées reçues, une page très longue n'est pas un problème, bien au contraire. Plus vous avez de contenu sur votre page d'accueil, mieux c'est, en favorisant notamment votre SEO. Si l'utilisateur ne souhaite plus scroller, il utilisera la navbar pour voir plus en détail la partie qui l'intéresse.
Les autres pages de votre site suivent plus ou moins la même logique (notamment pour le hero), mais leur construction est plus libre. En effet, l'utilisateur qui consulte votre page est probablement déjà intéressé par votre proposition de valeur.
Analysons les principales sections à utiliser; Pour cet exemple, nous utiliserons des sections de notre propre site web.
C'est la 1ère section de la page, généralement très visuelle, avec peu d'informations et une image en pleine page. Son objectif est de susciter l'intérêt et de donner envie à l'utilisateur de voir la suite.
Vous permet de montrer rapidement l'ensemble de votre palette professionnelle, ou une sélection de vos meilleures produits. Cette section s'adresse à la partie de vos utilisateurs allergiques à la lecture, ou qui cherchent simplement à faire au plus simple.
Cette section est le premier "vrai" contact avec l'utilisateur. C'est là que vous allez présenter rapidement en quoi vous êtes celui qu'on devrait choisir et votre proposition de valeur.
C'est une section charnière, car c'est généralement là qu'une partie des utilisateurs vont décider s'ils continuent ou pas leur navigation. Vous ne pouvez donc pas encore vous lancer dans une dissertation, préférez une approche courte et directe.
C'est la première section où vous pouvez expliquer un peu plus dans le détails votre offre. Concentrez-vous sur une section par service (ou catégorie de produit). N'oubliez de bien séparer chaque section de service / produit
Si l'utilisateur a progressé jusqu'à ce stade de votre page, il y a de forte chance qu'il soit intéressé par votre offre. C'est le bon moment pour caler une section invitant à prendre contact ou à remplir un formulaire.
Présent sur toutes vos pages, ils servent de cadres à votre site pour faciliter la navigation de l'utilisateur.
C'est la partie supérieure du site. Elle comprend généralement un logo et une navbar.
C'est la partie inférieure du site. Elle comprend généralement des informations diverses importantes, notamment :
Les call-to-actions, ou CTA, sont des boutons ou des liens invitant l'utilisateur à effectuer une action. Ils sont très intéressants dans une section expliquant en détail votre proposition de valeur, car ils évitent à l'utilisateur intéressé de chercher ou voir plus en détail le produit ou service qui l'intéresse.
Il s'agit cependant de conserver une certaine logique. Evitez de mettre des boutons qui invitent à visiter toutes les pages de votre site, vous risquez de perdre l'utilisateur. Concentrez-vous à la place sur quelques pages, comme votre page de contact, votre service principal, votre boutique ...
Evitez également d'être trop agressif avec vos call-to-action. Mettre un bouton de couleur vive avec écrit en majuscule CONTACTEZ-NOUS risque au contraire de ne pas inciter l'utilisateur à cliquer. Dans les premières sections, invitez plutôt à découvrir votre service plus en détail, et dans les dernières sections, proposer des actions plus concrètes.
Certains sites web prennent le parti de mettre des call-to-action invitant à des actions concrètes directement en début de page. C'est un parti pris qui peut avoir un intérêt si et seulement si vous pensez que l'utilisateur connaît votre offre et veut aller au plus simple.
Les couleurs sont un point central de votre site, car elles participent à son identité graphique. selon celles que vous utilisez, vous pouvez donner un tout autre sens à vos page.
Chaque couleur est associé à des émotions, à la fois positives et négative :
Il n'existe pas de règles absolue pour le nombre de couleurs, si ce n'est de ne pas utiliser toute les palette d'un coup. Evitez donc d'utiliser à la fois du bleu, du jaune, du vert et du violet, ou votre page perdra de l'impact.
Vous n'êtes pas forcément obligé de travailler avec plusieurs couleurs, il est tout à fait possible d'utiliser plusieurs teintes différentes de la même couleur, en utilisant une palette monochrome.
Inversement, rien ne vous empêche de mixer plusieurs couleurs vives ensemble, comme du violet et du orange. Gardez cependant quelques points à l'esprit :
Le plus souvent, on va choisir une couleur principale, qui peut être déclinée en plusieurs teintes, et une couleur secondaire, qui viendra ajouter une touche de diversité. Par exemple, un fond noir et des boutons jaune.
N'hésitez pas à tester plusieurs combinaisons ! Vous pouvez facilement changer vos couleurs Sur Oxygen en utilisant les paramètres de style
Voici quelques sites qui peuvent vous aider à choisir vos couleurs :
C'est le style d'écriture de votre site. Cet aspect peut paraître anodin, mais influe en fait assez fortement sur l'expérience utilisateur. Utiliser une police jugée trop courante ou hors-sujet par vos visiteurs affectera négativement votre crédibilité. A l'inverse, une bonne police améliorera sensiblement l'image que l'utilisateur se fera de votre activité.
Il existe des milliers de polices différentes, et presque autant de catégories. On va donc se concentrer ici sur les plus courantes :
Il est intéressant de varier les polices pour ajouter un peu de vie, mais attention : trop de styles différents donneront un aspect fouillis à votre site, en plus de perdre l'utilisateur. En règle générale, on se contentera de deux polices différentes : une pour les titres, et une pour les textes.
Sur ce point-là, c'est à vous de jouer ! Choisissez une police que vous trouvez intéressante, et mixez-là avec une autre pour voir le résultat. Assurez-vous néanmoins de respecter quelques règles :
N'hésitez pas à tester plusieurs combinaisons. Vous pouvez changez rapidement de police grâce aux paramètres de style. Si une police que vous souhaitez intégrer n'est pas disponible sur Oxygen, Consultez le guide dédié à l'intégration de polices externes.
Voici une liste de sites qui peuvent vous aider à faire votre choix :
Lorsque vous créez vos pages, vous aurez souvent besoin que l'utilisateur effectue un certains nombre d'actions diverses : remplir un formulaire, ouvrir une boutique ou un champ de recherche... Le problème est que vous ne pourrez pas forcément expliquer au préalable comment naviguer sur votre site, et ce pour trois raisons :
Pour régler ce problème, on utilise d'une part des pictogrammes qui vont permettre instantanément de comprendre à quoi sert un bouton, et on va respecter d'autres part des conventions pour placer certains boutons ou créer certains éléments, car les utilisateurs y sont habitués.
Il est préférable de ne pas utiliser ces pictogrammes à d'autres fins pour éviter de perturber l'utilisateur, sauf si vous vous êtes assuré qu'aucune confusion n'est possible (par exemple, pour illustrer un bloc de texte).
A la différence d'une affiche ou d'un visuel statique, un site va devoir s'adapter à de nombreux formats : grand écran, tablette, téléphone ... Il fut une époque où les site web se contentaient d'avoir une version pour ordinateur, mais la majorité des utilisateurs sont aujourd'hui susceptibles de consulter votre site sur téléphone.
Lorsque l'on réalise une page, il est donc crucial de prévoir comment elle s'affichera pour les petits écrans, afin d'éviter que la mise en page présente des bugs d'affichage, voir que la page deviennent carrément inutilisable sur téléphone.
Il serait néanmoins illusoire d'adapter son site parfaitement à l'intégralité des formats qui existent actuellement. Impossible par exemple de prendre en compte tout les formats de téléphone ! Pour que la tâche reste réalisable, on va donc vérifier que le site ne "casse pas" sur une plage de formats définis à l'avance :
Note : Ici, un px n'est pas un pixel, mais une unité de mesure en millimètre. à titre d'exemple, 2350px correspond à un écran de 24 pouces. Pour en savoir plus, consultez le guide dédié aux unités de mesure
Plus simplement, on va considérer que les écrans qui ont un format supérieur à 1920px ou inférieur à 320px sont peu susceptibles d'être utilisés, ou ne changeront pas trop la mise en page. On ne s'en préoccupe pas.
Ces cinq formats, appelés points de casse, n'ont pas été choisi au hasard : Il correspondent généralement au moment précis où la mise en page est susceptible de commencer à faire n'importe quoi. Cela ne veut pas forcément dire qu'il faut absolument éditer tout les points de casse pour chaque page. Si la mise en page reste cohérente lorsqu'on passe du format grande tablette à petite tablette par exemple, inutile de changer quoi que ce soit.
Cet onglet vous permet d'éditer une page web en fonction du format dans lequel il sera affiché. Si vous souhaitez que certains éléments aient un rendu différent en format mobile, par exemple, cliquer sur le bouton correspondant à l'affichage mobile vous permettra d'éditer la page uniquement pour les mobiles.
Les règles d'affichages fonctionnent sur le principe "plus petit que"
Grand écran d'ordinateur : S'applique à tout les formats d'écran
Petit écran d ordinateur : S'applique lorsque l'écran est plus petit que 1920px, c'est à dire les petits ordinateurs. Utile pour visualiser sur les petits ordinateurs, mais très rarement utilisé pour éditer une page.
Grande tablette : S'applique lorsque l'écran est plus petit que 993 px, c'est-à-dire à partir du format tablette
Petite tablette : S'applique lorsque l'écran est plus petit que 768px, c'est à dire les petites tablettes et les téléphones en format paysage.
Téléphone : S'applique lorsque l'écran est plus petit que 480 px, c'est-à-dire pour les mobiles.
Dans l'exemple ci-dessus, nous voulons que les éléments à l'écran s'affichent de manière horizontale pour tous les formats, et de manière verticale à partir du format tablette pour économiser de la place.
Vous disposez également d'une deuxième barre sous la première, fonctionnant de manière similaire. Les formats qui contiennent des réglages additionnels comportent un point vert.
Par défaut, l'affichage sur Oxygen est défini pile sur le point de casse, c'est-à-dire le pixel juste avant le format suivant, afin d'être sûr que la page ne cassera pas juste avant de passer au format du dessous. Mais il possible de changer ça.
Lorsque vous sélectionnez un autre format que celui affiché par défaut, une règle va apparaître en bas de page :
Cette barre vous permet de sélectionner un format précis en déplaçant les deux barres verticales. Sur la photo ci-dessus, par exemple, la taille est fixée sur 769px exactement, car nous sommes en format grande tablette. Mais on peut aussi déplacer le curseur sur environ 850px, par exemple, pour voir le rendu.
Cette option peut être utile si vous avez besoin de prévisualiser le rendu à un certain format, mais il est parfois plus simple de voir comment réagit la page en l'ouvrant directement et en la testant directement sur votre ordinateur.
Votre page est terminée et vous avez bien édité tout les points de casse important ? Alors il est temps de tester votre page. Ouvrez-la comme si vous étiez un utilisateur normal, et étirez-la dans tous les sens, en largeur comme en hauteur, à la recherche de tout comportement bizarre. Par exemple, la page est-elle encore lisible lorsque le navigateur est très large tout en étant écrasé en hauteur ?
Pour faciliter votre séance de test, vous pouvez vous aider de la fonction debug de votre navigateur en appuyant sur F12.
Important : Lorsque vous modifiez la hauteur (height) ou la largeur (width) d'un élément en mettant un pourcentage dans les plus petits formats d'écran, l'unité de mesure s'affichera en %, mais elle est parfois encore en px. Il faudra sélectionner % manuellement.
NB : Ce concept peut est expliqué de plusieurs manières. Nous essayons dans ce cours de faire comprendre cette notion simplement et rapidement, mais il peut exister d'autres manières de le définir.
L'expérience utilisateur, ou UX (acronyme de l'anglais User eXperience) mesure la qualité de l'expérience vécue par un utilisateur. Dans le cas d'un site web, l'UX désigne plus précisément la qualité de l'expérience de navigation. En résumé, on cherche à savoir si les internaute qui sont allés sur votre site ont passé un moment agréable, ou s'ils ont vécu des situations frustrantes et / ou déroutantes au cours de leur navigation. On évalue généralement l'expérience utilisateur sur le plan émotionnel (L'utilisateur est-il satisfait de sa visite sur le site ?) ainsi que sur le plan de l'usabilité (l'utilisateur a-t-il pu utiliser tous les outils du site sans aucun problème ?). En résumé, on cherche à faire en sorte que l'internaute bénéficie de la meilleure expérience de navigation possible.
Pour comprendre comment réaliser un site web de qualité, il est important de différencier deux notions distinctes :
- l'UI design (Interface Utilisateur) se base uniquement sur le plan de l'usabilité, c'est-à-dire ce qui est immédiatement visible. Elle désigne les outils mis à disposition de l'utilisateur. Elle va contribuer à l'expérience utilisateur, mais n'en est pas l'unique facteur.
- l'UX design (Expérience Utilisateur) Ajoute le plan émotionnel. elle englobe l'UI, en ajoutant le ressenti utilisateur, c'est-à-dire sa perception du produit ou service, via ce qu'il voit, entend, toucher ...
Pour visualiser cette différence, prenons un un exemple avec un paquet de biscuits. Ici, L'UI va essentiellement désigner l'emballage du produit, son apparence visuelle, ou la lisibilité des textes. Tous ces aspects du produit peuvent être immédiatement remarqués par l'utilisateur. En revanche, lorsque ce dernier va commencer à utiliser le produit, il va remarquer plusieurs nouveaux éléments : La facilité à ouvrir l'emballage, la sensation au toucher de cet emballage, l'odeur des biscuits, voire même le poids du produit ... Tout ces détails qui semblent insignifiants pris séparément vont en réalité avoir un impact déterminant, et grandement influer sur la satisfaction de l'utilisateur à utiliser le produit.
Faisons le parallèle avec un site web. Ici, l'UI va désigner des éléments comme l'organisation du menu et des différents onglets, l'ergonomie générale ainsi que la facilité de navigation dans le site :
L'UX va englober cette partie de l'analyse, mais également prendre en compte des aspects basés sur le ressenti :
Lorsque l'on conçoit quelque chose, il y parfois une très grande différence entre ce que l'on pense être la situation optimale pour l'utilisateur et la manière dont il utilise effectivement le produit ou service. Parfois, l'individu préfère utiliser des moyens détournés pour atteindre son objectif, qui semblent à première vue moins efficace ou inutilement complexe du point de vue d'un concepteur, mais qui sont bien plus intuitifs et pratique du point de vue de l'internaute. Il est donc essentiels d'étudier le parcours des utilisateur pour être sûr de proposer une interface intuitive.
Pour savoir si votre site souffre également de cette dissonance entre utilisation et conception, il est utile de le faire tester par un panel d'utilisateurs différents. Pour cela, vous pouvez tout à fait demander à quelque uns de vos amis ou votre famille d'utiliser votre site afin d'observer si des tendances d'utilisation étrange apparaissent. Par exemple, un bouton que vous avez bien mis en évidence est peu utilisé, une page qui est atteinte par des moyens que vous n'avez pas envisagé, ou même des différences d'utilisation suivant le profil de la personne ... C'est ce que l'on appelle un test utilisateur.
Il est également important de garder à l'esprit que le web mobile implique généralement d'anticiper de nouveaux comportements et de nouvelles attentes utilisateur. En effet, une version mobile d'un site internet se base souvent sur une autre façon de désigner, qui favorise plus le scroll (Faire rapidement défiler les contenus de chaque page), et une navigation très verticale.
On a tendance à penser que plus on a de choix à sa disposition, mieux c'est. Et bien c'est rarement le cas dans le domaine du web. Il suffit de voir le temps que peuvent passer certains utilisateurs à choisir une série sur une plateforme de streaming pour voir à quel point l'abondance de choix encourage l'hésitation.
Cette logique s'applique tout particulièrement à l'interface de votre site ou à l'utilisation de ses outils. Il est ainsi peu utile, voire contre-productif de donner à vos internautes la possibilité de naviguer de plusieurs manières différentes, ou de multiplier les menus et barres de recherche. Inutile également de proposer vingt options d'abonnement à un service, ou de mettre à disposition dix moyens de paiement différents. Il est important que l'utilisateur n'éprouve pas le sentiment de se retrouver bloqué au cours de sa navigation, mais cela ne doit pas pour autant vous pousser à en faire trop.
Rappelons la règle principale de tout processus de conception : l'expérience utilisateur prime sur tout. Si vous ne mettez pas toute votre énergie à concevoir une expérience qui soit la plus simple, la plus intuitive possible pour l'utilisateur, Vos visiteurs n'auront pas envie de visiter votre site, peu importe que votre site soit parfaitement fonctionnel. Hors, si vos utilisateurs sont nombreux à quitter rapidement votre site (on dit que le taux de rebond est élevé), vous vous exposez à des sanction de la part de Google, qui pensera que votre site est de mauvaise qualité.
Précisons également un autre point important : il est inutile, voir contre-productif de chercher à constamment expliquer aux utilisateurs le rôle de chacun de vos éléments. Il est certes important que vos utilisateurs comprennent à quoi servent tous les boutons à leur disposition, mais en cherchant à tout prix à vous assurer que tous le monde comprenne parfaitement votre interface, vous alourdissez votre page en informations et vous prenez le risque de frustrer l'utilisateur.
Chaque élément doit désigner clairement l'action à effectuer sans avoir à l'expliquer. Si un de vos éléments conduisant à une action ne peut pas être compris par l'internaute sans que vous deviez l'expliquer, il est peut-être plus judicieux de le re-designer complètement.
Cela peut sembler contre intuitif dans un article dédié à l'expérience utilisateur, mais l'originalité vous fera plus de mal que de bien si vous agissez au détriment de l'intuitivité . Dis autrement, si vous cherchez à améliorer au maximum l'expérience de vos utilisateurs, au point d'en oublier l'UI, qui fait la base d'un bon site web.
Lorsque vous désignez votre site, vous aurez probablement beaucoup de bonnes idées, également aussi beaucoup de très mauvaises. Hors, si dix bonnes pratiques améliorent un peu la qualité de votre site, une seule mauvaise pratique peut suffire à le rendre horrible à utiliser aux yeux de vos internautes.
Pour prendre un exemple, imaginons que vous décidiez de donner un nouveau à la page "boutique" et de l'appeler "Voici nos délicieux produits". Cette modification peut sembler intéressante pour se démarquer de la concurrence et faire passer un message plus chaleureux, mais risque fort de rendre vos visiteurs perplexes, car vous ne respectez pas les attentes utilisateur.
Apprenez à renoncer à certaines de vos envies pour éviter de déstabiliser votre site. Oui, cet effet supplémentaire sur votre page d'accueil serait certainement très joli à voir, mais vient ralentir votre site ou compliquer la lecture, alors il vaut mieux l'oublier.
Si vous souhaitez en savoir plus sur comment réaliser des pages convaincantes, vous pouvez consultez le guide dédié aux règles à suivre lors de la création d'une page.
Les unités statiques sont gravées dans le marbre. Elles ne bougent pas en fonction de la taille de la fenètre de navigation.
Posons les bases tout de suite : px ne signifie pas pixel. En effet, en fonction de l'écran, les pixels n'ont pas forcément la même taille, car ils deviennent de plus en plus petits à mesure que le technologie évolue.
La légende veut qu'à l'époque des début du développement web, les pixels étaient bien plus gros, et comme il est impossible de faire une forme d'une taille inférieure à 1 pixel, on a choisi de définir la taille d'un px égale à un pixel de l'époque.
Quoiqu'il en soit, le px est aujourd'hui une unité de mesure comme une autre, utile parce qu'elle est très petite. En effet, un px mesure environ 0,25 millimètre.
Cela signifie qu'un bloc ayant une largeur de 1920px mesurera 50,9 cm, et ce quel que soit l'écran.
Tout comme le px, ces deux unités ont une taille précise. La différence est que cette taille change en fonction de la taille de la police.
Imaginons par exemple que vous cherchiez à mettre un peu de margin autour d'un conteneur. Si la taille de police à l'intérieur du conteneur est de 14px, alors mettre 1em de marge aboutira à une marge de 14px.
le rem fonctionne de la même manière, à la différence qu'elle ne se base pas sur la taille police associée à l'élément, mais sur la taille de police définie quand les paramètres. Ainsi, le rem a une taille prédéfinie pour tout les éléments, tandis que l'em a une taille qui s'adapte en fonction de la taille de police de l'élément.
Ces unités de mesure sont plus techniques, et à utiliser uniquement si vous êtes déjà à l'aise avec le développement web.
Ces unités sont conçues pour varier en fonction de la taille de la fenêtre de navigation. Elle sont particulièrement appropriées si vous souhaitez que votre mise en page s'adapte aussi sur mobile et tablette.
Le % signifie que l'élément aura une taille égale à un certain pourcentage du conteneur parent. Prenons une analogie avec une maison :
Par défaut, le conteneur le plus haut sur une page est le cadre inner content, qui n'est éditable que sur le main. Il a de base une largeur de 100%
ATTENTION : lorsque l'on met une taille en %, Oxygen essaie se base sur la taille du conteneur parent. Si elle n'est pas spécifié :
Ces unités fonctionnent sur le même principe que le %, à la différence, qu'il se base non pas sur le conteneur parent, mais sur la taille de la fenêtre :
C'est la même chose pour le champ height. Notez que ces unités peuvent souvent amener à résultats extrème, surtout dans le cas du vh, il est donc recommandé spécifier des width et height maximum et / ou minimum. Ce sujet est abordé dans le guide sur l'onglet Size et Spacing.
Cette option n'est pas à proprement parler une unité de mesure. En théorie, cela signifie que la largeur de l'élément sera déterminée automatiquement en fonction de son contenu.
En pratique, cette option n'est généralement utilisée que pour pour la margin. mettre la margin de gauche en auto maximisera la marge à gauche.
Dit plus simplement, mettre une margin à gauche alignera l'élément le plus à droite possible, et mettre une margin auto en bas enverra l'élément vers le haut de son conteneur. Bien sûr, s'il n'y a plus d'espace libre, cela ne sert à rien.
Mettre une margin auto sur deux côtés contraire permet de centrer le conteneur.
IMPORTANT : Avant de commencer cet article, il est conseillé d'avoir consulté au préalable le cours dédié aux conteneurs et aux divs, ainsi que celui dédié à l'onglet Size & spacing
Initialement, lorsque vous construisez votre page, les éléments que vous ajoutez suivent les règles suivantes :
Il est cependant possible de modifier cette architecture en imbriquant des div.
Commençons par construire une mise en page compatible avec des règles d'alignement :
Cette étape est très importante car elle permet de ranger chaque élément. Vous verrez qu'il sera beaucoup plus facile par la suite d'organiser la page.
Pour rendre la structure plus lisible, nous allons renommer toute les div :
Nous avons maintenant une section, qui comprend pour l'instant une seule sous-section, qui contient elle-même plusieurs éléments. Notre objectif est d'ajouter ensuite plusieurs autres sous-section, mais nous allons styliser celle-ci au préalable :
Notre élément est maintenant prêt à être dupliqué. Bien sûr, les valeurs que nous vous avons données ont été choisies arbitrairement. Vous pouvez tout à fait appliquer des espacements différents.
Nous avons maintenant Plusieurs éléments à l'écran, les uns en dessous des autres. Vous remarquerez que si nous avons besoin de changer un élément, par exemple si nous voulons modifier la couleur de l'image, il faudra le faire quatre fois. Pour que les sous-section soient plus facilement modifiables, il aurait été intéressant d'ajouter une classe au préalable sur chaque élément susceptible d'être modifié. Mais revenons à notre sujet.
Nous avons maintenant une section comprenant quatre sous-sections, que nous allons pouvoir aligner à notre guise. Cliquez sur la div section pour afficher la fenêtre d'alignement dans la barre d'édition (à gauche)
Ce champ permet de définir si l'on souhaite que les éléments enfants (ici, les sous-section) soient alignés de manière verticale ou horizontale. Cliquez sur le bouton Horizontal
Vous remarquerez que les sous-sections se retrouvent écrasées. En effet, Oxygen empèche par défaut les éléments de s'aligner sur plusieurs lignes par sécurité. Il faut donc cliquez sur le bouton allow multiline, situé sous le bouton grid.
Le bouton Grid n'est à utiliser que si vous êtes déjà familirisé avec le concept de Grid. Pour le moment, nous n'abordons pas ce concept dans cette formation.
Ce champ sert à aligner les éléments verticalement par rapport au conteneur parent.
Sur notre exemple, comme nous n'avons pas spécifié de hauteur pour la div section, sa hauteur dépend entièrement de la place prise par les éléments. changer les options n'aura donc aucun effet, car il n'y a aucun espace vide.
Ce champ sert à aligner les éléments horizontalement par rapport au conteneur parent.
Testez les différents réglages pour en voir les effets !
Ici, le conteneur section étant une div de 1er niveau, et étant que sa width a été définie sur 100%, elle a par conséquent une largeur égale à la totalité de la page.
Vous remarquerez que même si vous cliquez sur center pour l'alignement horizontal, les textes ne s'alignent pas forcément au milieu. En effet, dans ce cas précis, les élements heading et text font déjà 100% de la largeur de la div sous-section : en effet, leur contenu fait plus de 400px, qui est la valeur spécifiée pour la div sous-section. Ils ne bougeront donc pas.
Notez que dans notre exmeple, comme nous n'avons pas configuré de classe, il faudra refaire la manip pour tous les éléments de texte.
Si vous le souhaitez, vous pouvez modifiez quelques paramètres des sous-sections pour améliorer leur rendu. Vous pouvez notamment modifier :
Vous pouvez également changer de réglage en fonction du format (ordi, tablette ...) ou ajouter des max et / ou min-width.
A noter : sur notre exemple, nous n'avons pas défini de classe. Il faudra donc effectuer les modifications pour tous les éléments.
Basiquement, une classe est une étiquette supplémentaire que vous ajoutez à un élément pour ajouter des règles supplémentaires. Faisons une analogie avec une maison :
Imaginons que vous ayez dix maisons à décorer de la même manière. Sur la première, vous choisissez de mettre du papier peint à l'intérieur, d'installer des luminaires, de mettre du crépi sur les murs extérieurs ... Une fois que vous avez fini de décorer la première maison, plutôt que de recommencer tout depuis le début à chaque fois, vous aimeriez bien pouvoir appliquer immédiatement toutes vos modifications aux maisons suivantes.
C'est exactement à ça que sert la classe. Une fois que vous l'avez configuré, il vous suffit de l'ajouter à n'importe quel élément pour appliquer instantanément les paramètres que vous avez précisé.
Pour savoir si vous éditez la classe ou l'id d'un élément sur Oxygen, il faut regarder la couleur de l'étiquette qui lui est associée dans la barre d'édition.
Avant tout, commençons par créer un élément :
Editons à présent la classe :
Insérez votre classe, et les réglages que vous avez au préalable définis s'appliqueront automatiquement à votre seconde div.
Lorsque vous insérez une classe, les modifications ne s'appliqueront que si votre élément n'a pas déjà été modifiée via l'étiquette d'id (en bleu). Si votre élément a déjà des modifications au niveau de l'id, il faudra les supprimer pour que celles de la classe s'applique. pour en savoir plus sur l'id et la hiérarchie des règles, consultez le guide dédié.
Les champs édités au niveau de l'id sont signalés par une barre bleue sur le bord gauche du champ (idem pour les classes).
C'est l'erreur classique. Il est important de d'abord créer la classe avant de modifier un élément si vous voulez réutiliser vos paramètres. Sinon, vous allez faire toutes vos modifications au niveau de l'ID, et vous devrez tout recommencer pour la classe.
Modifiez un champ dans une classe changera le paramètre pour TOUS les éléments qui portent cette classe, y compris pour les autres pages. Attention donc si vous souhaitez modifier une classe utilisée un grand nombre de fois.
Pour éviter des modifications accidentelles, bloquer la modification d'une classe :
Vous pouvez débloquer une classe simplement en cliquant sur le bouton unlock, situé au même endroit.
Si vous souhaitez vous aventurer à modifier la structure de vos pages ou à en créer de nouvelle, vous devez au préalable vous familiariser avec le concept de conteneur, car c'est une composante absolument essentielle de la construction de page.
Comme son nom l'indique, le conteneur est un élément qui contient d'autres éléments, ce qui permet mieux organiser sa page.
Une page web bien organisée est généralement constituée de dizaines de conteneurs imbriqués le uns dans les autres. A première vue, ce concept peut sembler compliqué, mais il est en réalité bien plus simple qu'il n'y parait. Pour cela, on va employer la métaphore de la maison :
Imaginons que vous soyez en train de construire un immeuble :
Voici ce que cela donne une fois transcrit sur Oxygen :
Pour faire simple, une page sans conteneurs se transformera très rapidement en un joyeux foutoir, car vous allez vous retrouver avec un grand nombre d'éléments que vous allez placer dans tous les sens, ce qui donnera un résultat peut satisfaisant et très difficile à modifier.
Exemple sans conteneurs
Exemple avec conteneurs
Il existe un certain nombre de conteneur différents : main, section, span ... qui peuvent venir complexifier la chose dans le cas du développement web classique. Sur Oxygen en revanche, un seul conteneur vous suffira dans 99% des cas : la div. Si vous entendez parler de conteneur via nos guides, c'est forcément une div.
La div est le conteneur de base, qui sert à segmenter vos éléments de la même manière que nous l'avons vu plus haut. Une div est tout simplement un rectangle qui peut contenir ou non des élément, et qui peut prendre n'importe quelle forme.
Sur Oxygen, la div est reconnaissable dans votre barre de structure (à droite) par l'icône de rectangle à côté du nom de votre élément.
Nous allons ici imaginer que vous construisez une page à partir de zéro, car il est conseillé de ne jamais intégrer un élément sans l'avoir rangé dans un conteneur au préalable en langage de développeur, on dit qu'on Wrappe l'élément dans une div (comme si on l'enroulait dans un wrap).
Si vous suivez le parcours recommandé de cette formation, vous pouvez revenir sur le cours relatif à la prise en main d'Oxygen pour apprendre à utiliser la barre d'édition (à gauche).
La barre de structure d'Oxygen permet de mieux visualiser l'architecture de votre page, mais elle a malheureusement un point faible : il arrive de mettre un conteneur au mauvais endroit dans l'architecture. En effet, surtout si vous déplacez un conteneur, vous devez faire très attention à bien identifier où vous allez mettre votre div pour éviter de le placer trop haut ou trop bas dans l'architecture, car il est facile de faire l'erreur au début. Reprenons notre exemple avec l'immeuble :
Vous l'aurez compris, il faut avoir l'oeil. C'est pour cette raison qu'il est primordial de bien comprendre comment est organisé l'architecture de votre page, quelle section est ici, et pourquoi. Evitez de commencer directement à déplacer des éléments dans votre page, ou vous risquez de casser votre mise en page sans comprendre pourquoi.
Vous comprenez également d'autant plus l'intérêt de nommer clairement les div que que ajoutez.
Vous avez fini de travailler dans une section de votre site ? Alors fermez les div qui la compose. A force de travailler sur un élément, puis un autre, vous vous retrouvez avec un fouillis incompréhensible, et vous décuplez le risque de déplacer un conteneur trop haut ou trop bas dans l'architecture.
Vous pouvez fermez toutes les div en cliquant sur le bouton Collapse all juste en dessus du conteneur inner content
Pour déplacer une div ou un élément, localisez l'élément que vous voulez déplacer dans la barre de structure puis déplacez-le avec votre souris à l'endroit souhaité.
Dans le cas où votre mise en page est particulièrement lourde, déplacer un élément à l'endroit voulu peut être un peu compliqué, car le logiciel commence à saturer, ce qui rend le contrôle moins précis. Arrangez -vous dans ce cas pour amener les éléments de bas en haut, cela marche mieux que de déplacer de haut en bas. Si vous avez absolument besoin de descendre un élément et que l'interface galère trop, descendez-le d'abord tout en bas, puis remontez-le à l'endroit voulu.
