Conception web responsive pour tous les écrans

Introduction

Dans ce projet, vous allez apprendre à créer une conception web responsive qui s'adapte à différentes tailles d'écran. L'objectif est de développer une page web qui offre une expérience utilisateur agréable tant pour les utilisateurs de bureau que pour les utilisateurs mobiles.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la disposition initiale des sections de menu et de contenu
• Comment implémenter la conception responsive à l'aide de requêtes média
• Comment tester et affiner la conception responsive pour garantir une expérience fluide

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une conception web responsive qui s'adapte à différentes tailles d'écran
• Développer une interface mobile conviviale, y compris un menu déplaçable
• Appliquer les meilleures pratiques pour tester et itérer sur une conception web responsive

Configurer le projet

Dans cette étape, vous allez configurer le projet et ouvrir les fichiers dans l'éditeur.

Ouvrez le dossier du projet, qui contient les fichiers et les répertoires suivants :

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

Parmi eux :

• index.html est la page principale.
• css/style.css est le fichier dans lequel il faut compléter les styles.
• js/jQuery.min.js est le fichier de bibliothèque jQuery.
• images est le dossier d'images.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour voir l'effet suivant dans votre navigateur :

Mettre en œuvre la conception responsive

Dans cette étape, vous allez apprendre à implémenter la conception responsive pour la page web.

1. Ajoutez la règle CSS suivante à la fin du fichier css/style.css :

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

Ce code CSS configure la conception responsive pour la page web. Il inclut des styles pour la disposition du côté mobile, y compris le bouton de menu, le menu déplié et la disposition du contenu.

Les principales modifications sont les suivantes :

• La hauteur et la hauteur de ligne du menu sont définies sur 54px pour correspondre au design mobile.
• Le bouton de menu (.icon-menu) est affiché et stylisé.
• La classe .collapse est utilisée pour masquer les éléments du menu par défaut et est affichée lorsque le bouton de menu est cliqué.
• Les styles .row et .box sont mis à jour pour afficher le contenu en une seule colonne sur mobile.
• La marge #tutorials img est supprimée pour s'adapter à la disposition mobile.

2. Enregistrez le fichier css/style.css et rafraîchissez la page web. Vous devriez maintenant voir la conception responsive en action, avec la disposition mobile affichée lorsque la largeur de l'écran est inférieure à 800px.

Tester et affiner la conception responsive

Dans cette étape, vous allez tester la conception responsive et apporter les améliorations nécessaires.

1. Ouvrez la page web dans votre navigateur et redimensionnez la fenêtre à différentes largeurs pour vous assurer que la disposition s'ajuste correctement.
2. Testez la fonctionnalité du bouton de menu dans la disposition mobile, en vous assurant que les éléments du menu sont affichés lorsque le bouton est cliqué.
3. Vérifiez la disposition du contenu dans les vues bureau et mobile, en vous assurant que les images, le texte et l'espacement ont bonne apparence.
4. Si vous constatez des problèmes ou des domaines d'amélioration, mettez à jour le CSS dans le fichier css/style.css et rafraîchissez la page pour voir les modifications.

Rappelez-vous, la conception web responsive est un processus itératif, donc n'ayez pas peur d'expérimenter et d'affiner la conception jusqu'à ce que vous soyez satisfait des résultats.

Le résultat mobile terminé est montré ci-dessous :

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.