Web 開発では、Web サイトのダウンタイムをユーザーに効果的に伝えるために、適切に作成された「メンテナンス中ページ HTML」が不可欠です。プライマリ サイトにアクセスできない場合でも、ユーザー エンゲージメントを維持しながら透明性を確保します。この記事では、HTML と CSS を使用してそのようなページをデザインし、視覚的に魅力的で、応答性が高く、機能的であることを確認する際の微妙な違いについて詳しく説明します。
Web サイトのダウンタイムは、サーバーのアップグレード、コンテンツの更新、またはセキュリティ パッチが原因である可能性があります。 「メンテナンス中ページ HTML」はこのことをユーザーに通知し、サイトがすぐに復旧することをユーザーに安心させます。これにより、信頼が育まれ、ユーザーのロイヤルティが維持され、予期せぬ利用不能による潜在的なフラストレーションが最小限に抑えられます。
たとえば、セール中に e コマース サイトがダウンした場合、明確かつ簡潔なメンテナンス ページにより、サイトがいつオンラインに戻るかを顧客に知らせることで顧客の不満を軽減できます。
慎重に設計されたメンテナンス中ページの HTML は、ユーザーに通知するだけでなく、ダウンタイム中でもユーザーのエクスペリエンスを向上させます。主な利点は次のとおりです:
-** 推定ダウンタイムの提供**: サイトの復旧がいつ予想されるかをユーザーに常に通知します。
優れたメンテナンス ページは、機能性と美しさを兼ね備えています。重要な要素は次のとおりです:
https://layakcoder.com/under-maintenance-page-html/ の主な目的は、情報を明確に伝えることです。専門用語を避け、シンプルで安心感のある言葉を使用してください。例:
Web サイトのブランディングとの一貫性を維持して、アイデンティティを強化します。組み込む:
ユーザーがあなたに連絡できる別の方法を提供します。
HTML と CSS を使用して、シンプルかつエレガントな「メンテナンス中ページ HTML」を作成してみましょう。
メンテナンス中ページの HTML の基本構造は次のとおりです。
<!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;
}
}
このデザインにより、ページはクリーンでプロフェッショナル、そして視覚的に魅力的になります。
ページを動的で魅力的なものにするために、アニメーションを含めることができます。たとえば、フェードイン効果:
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.container {
animation: fadeIn 2s ease-in-out;
}
メディア クエリを使用して、すべてのデバイスでページが適切に表示されるようにします:
@media (max-width: 768px) {
body {
padding: 20px;
}
.container {
width: 90%;
}
}
カウントダウンタイマー
カウントダウン タイマーはインタラクティブ性を追加し、明確な期待を設定します。 JavaScript を使用して実装する方法は次のとおりです:
<p> <h2> 避けるべきよくある間違い </h2> <p>*<em>ページのオーバーロード<br> *</em><br> ページの速度を低下させる可能性がある要素や重いスクリプトを追加しすぎることは避けてください。シンプルかつ軽量にしてください。</p> <p>*<em>重要な情報がありません<br> *</em><br> 常に以下を含めてください:</p>
*アクセシビリティの無視
*
すべてのユーザーがページにアクセスできるようにしてください。使用:
*実際の例とインスピレーション
*
ユーモアと創造性
GitHub や Twitter などの企業は、アニメーション メンテナンス ページでユーモアを頻繁に使用しています。例:
インタラクティブな機能
一部の Web サイトには、ユーザーを楽しませるためにミニゲームや楽しいアニメーションが含まれています。
ダウンタイム中にユーザーの信頼を維持するには、効果的な「メンテナンス中ページ HTML」を設計することが重要です。明確なメッセージ、応答性の高いデザイン、アニメーションやカウントダウン タイマーなどの魅力的な要素を組み込むことで、潜在的にネガティブなエクスペリエンスをポジティブなエクスペリエンスに変えることができます。
よく作られたアニメーション メンテナンス ページはプロフェッショナリズムを示し、プライマリ サイトが一時的に利用できない場合でも、ユーザーが大切にされていると感じます。ミニマリストのアプローチを選択するか、インタラクティブなデザインを選択するかにかかわらず、明瞭さ、アクセシビリティ、ユーザーエンゲージメントに重点を置いてください。
以上が楽しいメンテナンス中ページの HTML と CSS をデザインするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
