Адаптивний шаблон сторінки помилки 404

35

Сторінка помилки 404 важлива для будь-якого сайту або блогу, як і всі його зміст. Без неї не обходиться жоден мало-мальськи пристойний сайт має хоч якесь наповнення. Напевно кожному з вас частенько, при спробі зайти на який-небудь сайт, доводилося бачити сторінку з повідомленням про помилку 404, розповідала про те, що посилання, по якому ви сюди потрапили — неробоча, т. е бита геть. Більшість непідготовлених користувачів швидше за все таке повідомлення просто-напросто відлякає і вони залишать спроби відвідати ваш сайт або блог, а це вже, як ви розумієте не є добре. От інтернет-братія і намагається створити власні сторінки помилки 404 таким чином, щоб користувач не забирав ноги стрімголов, а затримався і заспокоївшись, зміг сам пошукати те, що йому потрібно, або гарантовано перейти на інші сторінки сайту.
Прикладів для натхнення створення таких сторінок в інтернеті величезна кількість, на будь-який смак і колір, всі вони різні і за дизайнерським виконанням, і по функціоналу. Було б бажання, а потрібний варіант можна завжди легко знайти.
Сьогодні хочу запропонувати вам свій варіант шаблону сторінки помилки 404, виконаний з використанням адаптивної верстки і деяких нових функцій CSS3.

Страница ошибки 404

ДемоЗавантажити

Приклад подивилися. Для тих, кого зацікавило, розпишу детальніше техніку виконання і деякі елементи цієї сторінки помилки 404.

Основний фон сторінки, так як в свій час робив її для свого блогу, щоб хоч якось розігнати тугу навевающую на користувача повідомленням про помилку «разбодяжил» м’якими хмарами, всі необхідні зображення, акуратно покладені в окрему папку з нехитрим назвою img, знайдете в архіві.
В самий центр сторінки помістив недвозначний, чітко виділений з допомогою магії css3, текст самої помилки, а трохи нижче, прописав пояснення для користувача, тому що йому робити далі і як жити))).
Хтось включає в сторінку помилки пошукову форму, хтось ні, я не став нехтувати можливістю допомогти користувачеві ще краще зорієнтуватися і розмістив після основного повідомлення про помилку, чудово виконану в CSS3, пошукову форму, яку підглянув у Dimoxa.

Ну, а щоб дорогоцінному відвідувачу сайту було вже зовсім просто вийти з ситуації з помилкою і повернути його на шлях істинний, в підвалі сторінки, розташував панель навігації з посиланнями на основні сторінки сайту. У прикладі назви пунктів вибрані довільно, ви можете прописати інші посилання, які вважаєте найбільш важливими і цікавими.

Ось начебто і все, що стосується структури сторінки помилки 404. Файл стилів додається, так що сміливо експериментуйте з формуванням зовнішнього вигляду і з іншими елементами. Шрифт Changa One і Open Sans використовував з бібліотеки шрифтів Google, якщо раптом не сподобаються, без особливих вагань і докорів сумління, виберіть іншого, все в ваших руках, було б бажання.

На завершення свого оповідання, коротко розповім про адаптивності цієї сторінки. Враховуючи те, що величезна кількість користувачів все частіше використовують для серфінгу інтернету різні пристрої, в тому числі і мобільні, відображення сторінки на екранах з різними розмірами, приділив трохи більше уваги. Використовуючи наочні приклади із джерел досвідчених у цій справі «буржуїнів», спробував втілити задумане на окремій сторінці, вийшло ніби непогано. Елементи сторінки при зміні розміру вікна браузера не наїжджають один на одного, а як і належить зменшуються в розмірі, а при більш кардинальне звуження екрану шикуються вертикально. Якщо знайдете якийсь косяк, прошу строго не судити, адаптивна верстка — нова сходинка, на яку я тільки намагаюся піднятися.

driver

Окреме спасибі Dimox (dimox.name) і команді FWPolice (fwpolice.com).

Якщо ця стаття здалася Вам цікавою, поділіться посиланням на нього зі своїми колегами і друзями, натиснувши на одну з кнопок нижче.
Напевно хтось з них буде Вам вдячний, так і мені в радість)))).