• Passer à la navigation principale
  • Passer au contenu principal
  • Passer au pied de page
Lotin Corp.

Lotin Corp.

Agence de branding. Tout est dans le sens du détail.

  • Services
    • Stratégie
    • Logo & identité visuelle
    • Web & Digital
    • Développement commercial
  • Portfolio
  • Blog
    • Branding
    • Business Systems
    • Persuasion et vente
    • Marketing Digital
    • Design pour founders
    • Méthode hypercréative
    • UX Design
    • Chronique
  • Livres
    • E-books
    • Livres sur Amazon.fr
    • Guides
  • L’agence
  • Contacts
  • PRENEZ RENDEZ-VOUS
Vous êtes ici : Accueil / Design web / Etape 6.1 : Explication des CSS

Etape 6.1 : Explication des CSS

Mis à jour le 29 janvier 2023 par Henri Lotin

3 minutes

etapes-creation-site-web-06.1

Cet article fait partie d’une série : Étapes de création d’un site web

« Les étapes de création d’un site web – Etape 6 : Prototypage et intégration HTML5/CSS

» Les étapes de création d’un site web – Etape 6.2 : Le responsive design

Nous vous avions promis dans le dernier article de revenir sur l’explication des CSS de cette phase d’intégration de la page d’accueil de Design & Lifestyle.

Retourner au sommaire

À TOUS LES PATRONS DE PME, À TOUS LES RESPONSABLES COMMERCIAUX & MARKETING QUI VISENT LA CROISSANCE DE LEUR ACTIVITÉ

Voici l’information secrète pour positionner votre activité pour le succès.

Téléchargez

Cet article n’a pas vocation à vous enseigner le code, mais vise à vous montrer le processus de réflexion pour convertir une maquette graphique en maquette fonctionnelle.

Explication des CSS : apprendre les CSS

Cette excellente formation de Open Classroom, vous donnera les bases nécessaires pour maîtriser HTML5/CSS3 : Apprenez à créer votre site web avec HTML5 et CSS3.

Explication des CSS : apprendre les CSS avec OpenClassroom

Vous souhaitez créer vos propres sites web ? Vous êtes au bon endroit ! Dans ce cours, vous apprendrez comment utiliser HTML5 et CSS3, les deux langages de programmation à la base de tous les sites web.
– Open Classroom

Revenons à notre code.

Explication des CSS : structure HTML5 détaillée

Pour faire simple, nous remettons le Pen ici :

See the Pen Design & Lifestyle – Home by atnhenri (@atnhenri) on CodePen.

Voici dans l’ordre la structure détaillée de notre code, incluant les balises html, head et body.

Explication des CSS : Structure détaillée du HTML5 de la page d'accueil Design & Lifestyle
Structure détaillée du HTML5 de la page d’accueil Design & Lifestyle

Explication des CSS : première vague de code CSS

Cette première vague est constituée de deux parties : GENERAL et STRUCTURE.

GENERAL s’occupe notamment de définir la police de caractères ligne 4 et sa taille ligne 3 (pour le calcul de rem).

Après avoir défini la police pour les titres h1, h2 et h3 à la ligne 14, les tailles sont ensuite individuellement définies. Nous procédons ensuite au style des boutons (button et .button), des liens (a), des formulaires (input, optgroup, select, textarea) et des images (img) : ligne 31 à ligne 106.

STRUCTURE permet de positionner les différentes parties de notre interface suivant cette image :

Explication des CSS : Découpage structurel. 1. .inner 2. header 3. .content 4. aside 5. footer
Découpage structurel. 1. .inner 2. header 3. .content 4. aside 5. footer

On tient aussi compte des deux zones structurelles .top et .bottom ligne 110 à ligne 128.

Ensuite, de la ligne 129 à la ligne 152 de notre extrait, nous positionnons les éléments internes : .content, aside, footer, .newsletter, .footer-buttons, .credits.

Explication des CSS : deuxième vague de code CSS

Dans notre deuxième extrait, nous continuons donc notre travail de présentation par ordre d’apparition des éléments dans le code HTML5.

Au cas où vous vous demanderiez pourquoi il existe des petites disparités entre la maquette graphique et la maquette fonctionnelle,  voici quelques pistes :

Laisser tomber les détails minuscules.

Admettre un certain nombre de variations. C’est dans la nature même du média. Ce qui importe n’est pas que les champs de formulaire mesurent exactement 15 pixels de haut, mais qu’ils fonctionnent. La leçon à retenir est : « laissez tomber ».

Respecter les standards.

Suivre les standards : (X)HTML pour la structure du document et les CSS pour la présentation, tels qu’ils sont proposés par le W3C, est le meilleur moyen d’optimiser la cohérence d’affichage dans l’ensemble des navigateurs compatibles avec ces standards (ce qui représente environ 99 % des navigateurs).

Baliser correctement.

Quand un document (X)HTML est écrit dans un ordre logique et que ses éléments sont balisés de manière signifiante, il est utilisable dans la plupart des environnements de navigation, y compris avec les anciens navigateurs, ceux de demain et les appareils mobiles ou d’assistance. Même si l’aspect n’est pas identique, l’important est la disponibilité du contenu.

Ne pas utiliser d’éléments (X)HTML propriétaires.

Certaines balises et attributs ne fonctionnent que sur un navigateur, un vestige de la guerre des navigateurs d’autrefois. Il faut les bannir !

Se familiariser avec les aspects des CSS qui posent problème.

Utiliser efficacement les feuilles de style demande un peu de pratique, mais les développeurs chevronnés savent quelles sont les propriétés « sans souci » et lesquelles exigent plus d’astuces pour obtenir des résultats cohérents quel que soit le navigateur.

Voilà, on se donne rendez-vous la prochaine fois pour les détails d’interactivité et de design responsive de notre page d’accueil.
Retourner au sommaire

Catégorie(s) : Design web Tags : code HTML5/CSS, création de site web, css, développement web, étapes de création de site web, HTML5, intégration d'interface utilisateur, prototypage

À propos Henri Lotin

Brand Strategist & UX/UI Designer autodidacte vivant à Douala, au Cameroun, je suis le directeur de création, le responsable de la stratégie et du marketing digital, mais également le co-fondateur de Lotin Corp. (c'est beaucoup, je sais !?)

Je suis depuis Octobre 2014, le fondateur de Lotin Corp. Academy, où j’enseigne le marketing digital, l’introduction à la communication visuelle, le design web et interactif et les logiciels de PAO.

Souscrivez à notre newsletter

Pour ne rien rater de nos offres, quand nous aurons l'occasion de vous en faire profiter. Et nos articles, une fois par semaine dans votre boîte aux lettres.

Cliquez ici pour vous inscrire

En plus, recevez gratuitement nos eBooks suivant vos centres d'intérêt : branding, design web / design thinking, création d'entreprise et marketing digital.

Cliquez ici pour vous inscrire

Footer

#BrandingAdvocacy

Évaluation de la marque

Parler d’évaluation de la marque avant le capital de marque sur ce blog est un crime de lèse majesté. Mais on va y remédier en temps opportun. La question clé dans toute décision d’investissement marketing est la valeur qu’elle apporte à l’entreprise. Qu’il s’agisse de la tarification, de la distribution, de la recherche ou du […]

Lire la suite

Catégories

  • 15 Minutes avec
  • Branding
  • Business Systems
  • Chronique
  • Clients
  • Design graphique
  • Design pour founders
  • Design web
  • Etudes de cas
  • Guides
  • Livres
  • Marketing Digital
  • Méthode hypercréative
  • Nouvelles
  • Persuasion et vente
  • Profession
  • Stratégie
  • UX Design

Les articles les plus lus

  • Design graphique : devenir designer graphique
  • Architecture de marque : créer de l'ordre à partir du chaos
  • La copy-stratégie ou briefing de création
  • Créer votre stratégie d'entreprise
  • Différence entre identité visuelle et charte graphique

Adresse et contacts

403, Rue Drouot, Akwa
BP 4468 Douala
contact[at]lotincorp.biz
+237 673 07 94 08
Lundi à Samedi : 09h00 à 19h00

Copyright © 2008–2023. Lotin Corp.· All Rights Reserved.

🥳 Avec le code 40YEARS, profitez d’une réduction de 40% sur tous les eBooks au format PDF. Ignorer