recherche

Maison >interface Web >js tutoriel >Concevoir une délicieuse page en maintenance HTML et CSS

Concevoir une délicieuse page en maintenance HTML et CSS

DDD
DDDoriginal
2024-12-27 13:57:15324parcourir

Designing a Delightful Under Maintenance Page HTML and CSS

Dans le développement Web, disposer d'une « page HTML en cours de maintenance » bien conçue est essentiel pour communiquer efficacement aux utilisateurs les temps d'arrêt du site Web. Il garantit la transparence tout en maintenant l’engagement des utilisateurs, même lorsque le site principal est inaccessible. Cet article explore les nuances de la conception de telles pages en utilisant HTML et CSS, en garantissant qu'elles sont visuellement attrayantes, réactives et fonctionnelles.

Pourquoi une page HTML en cours de maintenance est importante

L'importance de la communication

Le temps d'arrêt d'un site Web peut être dû à des mises à niveau du serveur, des mises à jour de contenu ou des correctifs de sécurité. Une « Under Maintenance Page Html » en informe les utilisateurs et les rassure sur le fait que le site sera bientôt de retour. Cela favorise la confiance et maintient la fidélité des utilisateurs, minimisant ainsi la frustration potentielle causée par une indisponibilité inattendue.

Par exemple, si un site e-commerce tombe en panne lors d'une vente, une page de maintenance claire et concise peut atténuer l'insatisfaction des clients en les informant de la date à laquelle le site sera de nouveau en ligne.

Améliorer l'expérience utilisateur

Une page HTML en cours de maintenance soigneusement conçue fait plus que simplement informer les utilisateurs : elle améliore leur expérience même pendant les temps d'arrêt. Les principaux avantages incluent :

-** Fournir une estimation du temps d'arrêt** : tenir les utilisateurs informés du moment où ils peuvent s'attendre à ce que le site soit de retour.

  • Proposer des moyens alternatifs de connexion : y compris des liens vers les réseaux sociaux ou les coordonnées de l'assistance.
  • Mettre en valeur la créativité : tirer parti des animations ou de l'humour pour transformer une expérience potentiellement frustrante en une expérience positive.

Éléments essentiels d'une page de maintenance

Une excellente page de maintenance allie fonctionnalité et esthétique. Voici les éléments essentiels :

Messagerie claire

L'objectif principal d'un https://layakcoder.com/under-maintenance-page-html/ est de transmettre des informations clairement. Évitez le jargon et utilisez un langage simple et rassurant. Les exemples incluent :

  • "Nous reviendrons bientôt!"
  • "Site en maintenance. Nous apprécions votre patience."

Image de marque et design

Maintenez la cohérence avec l’image de marque de votre site Web pour renforcer votre identité. Incorporer :

  • Logo : aide les utilisateurs à identifier immédiatement votre site Web.
  • Jeu de couleurs : utilisez les couleurs de votre marque pour que la page reste alignée avec votre conception globale.
  • Typographie : utilisez des polices cohérentes avec votre site Web pour un look cohérent.

Coordonnées

Proposez aux utilisateurs d'autres moyens de vous joindre, tels que :

  • Adresse e-mail : Pour les questions urgentes.
  • Liens vers les réseaux sociaux : pour tenir les utilisateurs informés.
  • Formulaire d'assistance : Pour des options de communication supplémentaires.

Fonctionnalités supplémentaires

  • Compte à rebours : Pour indiquer le temps exact restant pour la maintenance.
  • Éléments interactifs : les liens vers des articles de blog, des FAQ ou des annonces peuvent maintenir l'engagement des utilisateurs.

Guide étape par étape pour concevoir une page de maintenance

Créons une « page HTML sous maintenance » simple mais élégante en utilisant HTML et CSS.

Étape 1 : Structure HTML

Voici la structure de base de votre page HTML en cours de maintenance :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap"
      rel="stylesheet"
    />
    <!-- Material ui icons - google web fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div>



<p>This simple structure includes a header, a message, and a contact link.</p>

<h2>
  
  
  Step 2: Adding CSS for Styling
</h2>

<p>Here’s the CSS to style your maintenance page:<br>
</p>

<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%; /* 1rem = 10px */
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: #777;

}

.main-title{
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 8rem;
    text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

.main-title h1{
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #555;
}

.main-title h2{
    font-size: 4rem;
    font-weight: 300;
    text-transform: uppercase;
}

.svg-img{
   display: block;
   margin: auto;
}

svg{
    display: block;
   margin: auto;
}

#clock{
    animation: clockHand 5s infinite linear;


    transform-box: fill-box;
    transform-origin: bottom;
}

#leftTree, #righTree{
    animation: tree 2s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#man{
    animation: manBody 1s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#pc-circle{
    fill: #6ace66;
    stroke-width: 4;
    animation: change-light 4s linear infinite alternate;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f5;
    font-size: 1.3rem;
}

@keyframes clockHand{
    from{
        transform: rotateZ(0deg);
    }
    from{
        transform: rotateZ(-360deg);
    }
}

@keyframes manBody{
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(10deg);
    }
}

@keyframes tree{
    from{
        transform: rotateZ(10deg);
    }
    to{
        transform: rotateZ(-20deg);
    }
}

@keyframes change-light {
    0% {
        stroke: #cd61f8;
      }
      25% {
        stroke: #6ace66;
      }
      75% {
        stroke: #2995c0;
      }
      100% {
        stroke: #e92949;
      }
  }

  /* Media Queries */

  @media (min-width: 640px){
    .main-title h1{
        font-size: 5rem;
        text-transform: uppercase;
        font-weight: 700;
        color: #555;
    }

    .main-title h2{
        font-size: 3rem;
        font-weight: 300;
        text-transform: uppercase;
    }


    }

    @media (min-width: 768px){
        .main-title h1{
            font-size: 6rem;
            text-transform: uppercase;
            font-weight: 800;
            color: #555;
        }

        .main-title h2{
            font-size: 4rem;
            font-weight: 300;
            text-transform: uppercase;
        }


    }

    @media (min-width: 1024px){

        .main-title h1{
            font-size: 7rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }

        .main-title h2{
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
        }

    }

    @media (min-width: 1200px){

        .main-title h1{
            font-size: 8rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }

        .main-title h2{
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
        }

        .main-title{
            text-align: center;
            margin-top: 4rem;
            margin-bottom: 4rem;
        }


    }

Cette conception garantit que la page est propre, professionnelle et visuellement attrayante.

Étape 3 : Ajout d'animations

Pour rendre votre page dynamique et attrayante, vous pouvez inclure des animations. Par exemple, un effet de fondu :

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.container {
    animation: fadeIn 2s ease-in-out;
}

Étape 4 : Conception réactive

Utilisez des requêtes multimédias pour garantir que la page s'affiche parfaitement sur tous les appareils :

@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    .container {
        width: 90%;
    }
}

Améliorer la page avec des fonctionnalités avancées

Compte à rebours

Un compte à rebours ajoute de l'interactivité et définit des attentes claires. Voici comment en implémenter un à l’aide de JavaScript :

<p>



<h2>
  
  
  Erreurs courantes à éviter
</h2>

<p>*<em>Surcharge de la page<br>
*</em><br>
Évitez d'ajouter trop d'éléments ou de scripts lourds qui pourraient ralentir la page. Restez simple et léger.</p>

<p>*<em>Informations clés manquantes<br>
*</em><br>
Incluez toujours les éléments suivants :</p>
  • Délai de retour estimé : indiquez aux utilisateurs quand le site sera de nouveau en ligne.
  • Coordonnées alternatives : assurez-vous que les utilisateurs ont un moyen de vous joindre.

*Ignorer l'accessibilité
*
Assurez-vous que votre page est accessible à tous les utilisateurs. Utilisation :

  • Contraste approprié entre le texte et l'arrière-plan.
  • Attributs Alt pour les images.
  • Navigation au clavier.

*Exemples du monde réel et inspiration
*
Humour et créativité

Des entreprises comme GitHub et Twitter utilisent souvent l'humour dans leur page de maintenance animée. Par exemple :

  • "Nous corrigeons quelques bugs. Aucun vrai bug n'a été endommagé!"
  • "Je reviens tout de suite. Nous rendons les choses géniales !"

Fonctionnalités interactives

Certains sites Web incluent des mini-jeux ou des animations amusantes pour divertir les utilisateurs.

Conclusion

La conception d'une « page HTML en cours de maintenance » efficace est cruciale pour maintenir la confiance des utilisateurs pendant les temps d'arrêt. En incorporant des messages clairs, un design réactif et des éléments attrayants tels que des animations et des comptes à rebours, vous pouvez transformer une expérience potentiellement négative en une expérience positive.

Une page de maintenance animée bien conçue fait preuve de professionnalisme et garantit que les utilisateurs se sentent valorisés, même lorsque le site principal est temporairement indisponible. Que vous optiez pour une approche minimaliste ou un design interactif, concentrez-vous sur la clarté, l'accessibilité et l'engagement des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html if for while include using this background github https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment vider efficacement un tableau en JavaScript ?Article suivant：Comment vider efficacement un tableau en JavaScript ?

Articles Liés

Voir plus