Правильная страница 404. Как это работает
Почему обязательно надо делать свою 404-ую страницу?
Главная и единственная причина – это не потерять посетителя. У каждого пользователя наверняка возникала такая ситуация, когда нажимая на ссылки на каком-нибудь сайте, браузер вместо запрашиваемой страницы показывал свою дефолтную страницу ошибки. Ошибка возникает в результате неправильно введенного запроса или запрашиваемая страница, была удалена самим веб-мастером. В таком случае все посетители ведут себя одинаково – закрывают страницу и уходят с вашего сайта.
Хватит воду лить! Давай конкретику!
Создаем два файла – 404.html и .htaccess (этот файл без имени, но с расширением htaccess ), который автоматически перенаправляет посетителя на 404.html , в случае возникновения ошибки. Чтобы перенаправление работало, в этот файл надо прописать одну единственную строку:
ErrorDocument 404 http://www.site.ru/404.html
Когда оба файла будут готовы, залить их на сервер в корень домена.
Мы уже создали пустой файл 404.html и теперь будем наполнять HTML кодом саму 404 страницу , активно применяя HTML5 и CSS3 . Я придумал свой способ, как сделать простую и красивую 404 страницу .
Первым делом нужно подобрать большую и качественную картинку или фотографию размером не менее 1200x750 пикселей. Существует много сайтов со свободной лицензией, откуда можно скачать очень качественные фотографии. Я бесплатно скачал с популярного сайта pixabay.com это забавное изображение.
Я хочу расположить картинку как фон на все окно браузера и в центре браузера написать – 404 страница не найдена и поставить ссылку на главную. Разберем подробнее самые важные моменты.
Эффект полупрозрачности RGBA
Выбранное изображение слишком яркое, надо его слегка затемнить, тогда текст будет более читаемый. Эффект полупрозрачного затемнения, можно получить используя RGBA , прописав в стилях блока следующую строчку кода:
Background: rgba (0, 0, 0, 0.7);
Первые три буквы обозначают – красный, зеленый, синий и они равны нулю (то есть получаем черный цвет). А последняя буква «а» – представляет собой альфа-канал, отвечающий за полупрозрачность элемента. В нашем случае цифра 0.7 – говорит о 70% затемнения. Шкала от полной прозрачности до полной непрозрачности находиться между нулем и единицей (0...1).
Позиционирование элементов
Для правильной верстки моего примера 404 страницы
, без понимания как работает свойство position
, будет трудно. Посмотрев на конечный результат 404 страницы
, нам надо понять структуру HTML
документа. Здесь мы видим три слоя, наложенных друг на друга. Нижний слой
– сама картинка, средний в теге У среднего слоя будет абсолютное позиционирование, поскольку положение элемента (блок затемнения) задается относительно краев браузера с нулевыми отступами. Position: absolute;
Верхний текстовый слой позиционируем относительно элемента среднего слоя. Position: relative;
Имея этот готовый код и меняя только само изображение, можно наделать себе массу разных «ошибочных» страниц.
Если Вы планируете заниматься созданием сайтов на заказ, то разобраться во всех тонкостях верстки, используя HTML5 и CSS3, Вам поможет Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд». Ошибка 404 или Not Found («не найдено») - код ответа сервера на несуществующую страницу на сайте. Весь процесс происходит по протоколу передачи данных HTTP. Клиентское приложение формирует и отправляет запрос серверу. Сервер, в свою очередь, обрабатывает данный запрос и формирует ответ. В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом: Красивая страница 404 для сайта обязательно вам понадобиться, чтобы показать ее пользователю, когда тот:
В любом случае страница уведовляет пользователя о том, что страничка, которую он намеревался посмотреть, не найдена.
В первую очередь следует разобраться с тем, как формируется страница 404 для сайта. На самом деле это такая же страница, как и любая другая на вашем веб-проекте.
Если вы используете какую-то CMS, то вам нужно знать структуру файлов и страницу, которая отображается при отработке 404 кода ошибки. Если ваш сайт не на движке, то вас спасет системный файл.htaccess, который располагается в корневой папке вашего сайта. В случае если он отсутствует, создайте его сами.
Как сделать страницу 404?
Необходимо просто прописать в данный файл следующую инструкцию:
ErrorDocument 404 //сайт/404.php
Всё довольно просто! Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте. В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu"s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
К сожалению, Xenu не спасает от пользователей, которые могут неправильно ввести текст ссылки и не застрахует от битых или неактуальных внешних ссылок, которые введут на страницы вашего сайта. По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде - они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно - потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
В оформлении 404 страницы важно не переусердствовать - не стоит слишком нагружать ее контентом.
Визуальное оформление 404 страницы не должно выбиваться из общего дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора - это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько:
Код страницы 404
перейти на главную страницу..
Как это работает?
Причины 404 ошибки
Как сделать 404 страницу?
Оформление 404 страницы
Текст для 404 страницы
Дизайн страницы 404