Верстка сайта

Страница 404

Как сделать 404 страницу для сайта быстрой, компактной и информативной? Наш HTML-код страницы, стили и скрипты помогут вам создать страницу или шаблон для проекта.

Admin
14 июня 2024

Страница 404 является важным функционалом сайта, о котором должен позаботиться каждый уважающий себя вебмастер. Даже не просто позаботиться, а реализовать его таким образом, чтобы посетитель, оказавшийся в нештатной ситуации, не покинул сайт, а продолжил навигацию. Другими словами, качественная страница 404 – это один из показателей того, насколько дружественным к пользователю является ваш сайт.

Ошибка 404: страница не найдена

Такой ответ вы получите от сервера в случае если указанный вами в браузере адрес не существует. Такой сценарий может иметь место в следующих ситуациях:

Переход из поисковой выдачи на страницу, которая недавно была удалена или снята с публикации.
Ввод адреса вручную с ошибкой.
Переход по внутренней ссылке, размещенной с ошибкой.

Так или иначе, если ваш посетитель оказался в подобной ситуации, нельзя оставлять его один на один с “белым экраном смерти”. Стоит предоставить ему возможность как минимум кликнуть мышью по кнопке “Домой”. Как максимум можно предложить перейти на один из важных разделов, открыть страницу контактов или воспользоваться поиском по сайту.

Если не оформить страницу 404, клиент с большой долей вероятности просто закроет окно и уйдет на сайт конкурента.

Способы сделать 404 страницу условно делятся на две группы:

универсальный способ,
функционал вашей CMS (системы управления сайтом).

Поскольку движок вашего сайта мне неведом, предложу универсальный способ, который будет работать везде, и, при необходимости, может быть перенесен на функционал движка, под которым работает ваш проект.

Как всегда, начнем с разметки.

HTML-код страницы 404

Выглядеть наша разметка будет так:

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Страница 404</title>
  <link rel="stylesheet" href="i/bootstrap-reboot.min.css" type="text/css" />
  <link rel="stylesheet" href="i/styles.css" type="text/css" />
</head>

<body>
  <div id="preloader"></div>

  <div id="main">
    <div class="content">
      <h1>404</h1>
      <span>Oops!</span>
      <p>
        Кажется, Вы ошиблись адресом. <br> 
        Такой страницы не существует, но, возможно, она появится в будущем.
      </p>
      <a href="#">Домой</a>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="i/particles.min.js"></script>
  <script type="text/javascript" src="i/particles.settings.js"></script>
  <script type="text/javascript" src="i/scripts.js"></script>

</body>
</html>

Краткие пояснения по HTML-коду:

div#preloader – это реализация прелоадера (preloader), который скроет все неприглядности процесса загрузки ресурсов страницы. Необходим, поскольку все ресурсы мы грузим внизу.
bootstrap-reboot.min.css – это файл-ресет из комплекта Bootstrap. Необходим для сброса основных стилей в единообразное для всех браузеров состояние.
styles.css содержит стили страницы.
Библиотека jQuery понадобится нам для запуска плагина Particles, который будет отвечать за графический эффект.
particles.min.js и particles.settings.js – это сам плагин Particles и файл его настроек.
scripts.js – это файл с необходимыми нам скриптами. Фактически здесь только реализация прелоадера.

Теперь займемся оформлением.

Страница 404: CSS-стили

Прежде, чем стилизовать страницу 404, я нашел в фотобанке Stocksnap подходящий фон для нее и скопировал в папку i. Теперь сами стили:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

#preloader {
	background: #000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

#main {
	height: 100vh;
	background-image: url("back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-blend-mode: overlay;
	background-color: rgba(0, 0, 0, 0.75);
}

.content {
	color: #fff;
	height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	user-select: none;
}

.content h1 {
	font-size: 10rem;
	font-weight: 800;
	line-height: 8rem;
	margin: 0 0 1rem;
	opacity: .5;
}

.content span	{
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.content p {
	text-align: center;
	margin: 0 0 2rem;
}

.content a {
	color: #fff;
	line-height: 3rem;
	text-decoration: none;
	padding: 0 2rem;
	border: 1px solid;
	border-radius: 1.5rem;
	display: block;
	position: relative;
	z-index: 1;
	transition: all .5s ease;
}

.content a:hover {
	color: #000;
	background: #fff;
}

.content + canvas {
	position: absolute;
	top: 0;
}

И наши комментарии к ним:

Первым делом директивой @import подключаем шрифт Montserrat из библиотеки Google Fonts.
Прелоадер – это черный блок на весь размер экрана, который плавно исчезнет при прогрузке всех ресурсов страницы. Хотите добавить колесико-spinner или другой индикатор загрузки? Пожалуйста!
Блок div#main также займет весь экран. Фон блока – наше фото. Затемнение реализовано полупрозрачностью черного цвета заливки.
Блок div.content наследует ширину от родителя и имеет flex-модель. Подробно о flex читаем здесь.

Все остальное просто и понятно. Обратите внимание на значение свойства z-index. Я использовал его для того, чтобы элемент canvas не перекрыл кнопку “Домой”.

Подключение страницы 404

Для того, чтобы наше творение заработало, откроем файл .htaccess и добавим в него следующую строку:

ErrorDocument 404 /404.html

Теперь при серверной ошибке 404 будет открыта страница 404.html в корневой папке сайта.

Заключение

Мы создали и настроили кастомную страницу 404, которая позволит посетителю вернуться на главную страницу сайта. Я не стал размещать на ней форму поиска и блок навигации. Вы сделаете это без большого труда и самостоятельно.

Результат можно увидеть по ссылке внизу страницы. Вы также можете скачать полный архив с демо и кастомизировать его на свое усмотрение.