Как создать лучшие 404 страницы для ваших клиентов

1. Лучшие практики для 404 страниц
2. 1. Github
3. 2. Codecademy
4. 3. Бэккантри
5. 4. Dropbox
6. 5. Кейр Уитакер
7. Настройки, которые вы можете сделать, чтобы Shopify 404 страниц
8. 1. Сделать альтернативный макет загрузки шаблона на 404 страницы
9. 2. Добавьте пользовательское фоновое изображение на 404 страницы
10. 3. Добавить панель поиска на страницу
11. 4. Добавьте призыв к действию.
12. Какая ошибка?

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

Эти страницы также могут предоставить возможность поддержки с помощью фирменного сообщения, а некоторые из лучшие страницы ошибок 404 сочетают юмор и хороший UX, чтобы создать незабываемые впечатления ,

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

В этом посте мы рассмотрим некоторые примеры вдохновляющих страниц 404, а также как начать создавать собственные страницы 404 на Shopify, чтобы вы могли улучшить темы своего клиента и расширить их возможности с помощью персонализированных страниц.

Вам также может понравиться: Микроскопия: почему крошечные слова имеют значение ,

Лучшие практики для 404 страниц

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

Четное Поддержка Google есть несколько очень полезных советов по работе с 404 страницами.

«Если у вас есть доступ к вашему серверу, мы рекомендуем вам создать пользовательскую страницу 404. Хорошая пользовательская страница 404 поможет людям найти интересующую их информацию, а также предоставит другой полезный контент и поощрит их к дальнейшему изучению вашего сайта ».

«Если у вас есть доступ к вашему серверу, мы рекомендуем вам создать пользовательскую страницу 404. Хорошая пользовательская страница 404 поможет людям найти интересующую их информацию, а также предоставит другой полезный контент и поощрит их к дальнейшему изучению вашего сайта ».

Даже с использованием фирменного шаблона 404 по-прежнему важно проверять сайт на наличие битых ссылок, чтобы свести к минимуму вероятность того, что клиенты будут перенаправлены. Простой инструмент, как W3's Проверка ссылок или приложение Transportr может позволить разработчикам быстро идентифицировать и исправить любые 404 события в магазинах своих клиентов.

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

1. Github

Используя ссылки юмора и поп-культуры, Github доставляет забавное сообщение, которое устраняет любую неловкость при попадании на эту страницу с ошибкой. Опции навигации просты, чтобы избежать путаницы, с панелью поиска и ссылками на поддержку и страницей состояния.

Переворот, однако, является тонким эффектом параллакса, который заставляет изображение игриво реагировать с помощью курсора пользователя. Эта легко пропускаемая анимация показывает, что дизайнеры GitHub очень интуитивны со своей аудиторией, поскольку они знают, что это «пасхальное яйцо» будет восхищено сообществом разработчиков.

2. Codecademy

Школа программирования Codecademy использует образовательный подход к 404 страницам с умной ссылкой, чтобы узнать больше об ошибках HTTP. Комплексный нижний колонтитул также обеспечивает легкий путь к содержимому сайта и ресурсам курса.

3. Бэккантри

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

4. Dropbox

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

5. Кейр Уитакер

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

Настройки, которые вы можете сделать, чтобы Shopify 404 страниц

Если вы настраиваете тему для клиента, использование страницы Shopify 404 по умолчанию является работоспособным решением, если вы работаете с утвержденной темой. из нашего тематического магазина ,

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

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

Имея это в виду, вот несколько способов персонализировать 404 страницы для ваших клиентов.

1. Сделать альтернативный макет загрузки шаблона на 404 страницы

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

По умолчанию файл макета theme.liquid применяется к файлу шаблона 404.liquid, но это можно легко изменить. Первым шагом будет создание копии файла theme.liquid в папке макета вашей темы и переименование его в 404-layout.liquid.

Теперь вы можете легко удалить ненужные элементы файла макета, такие как верхний или нижний колонтитул, настроить H1 и настроить все, что вам нужно, например теги заголовка. Если вы довольны этим альтернативным файлом макета, вы можете использовать жидкие логические теги, чтобы связать файл макета с файлом шаблона.

Чтобы сделать рендеринг страницы 404 с этим конкретным файлом макета, нам нужно добавить тег Liquid {% layout "404-layout"%} в начало файла шаблона 404.liquid. Так, например, ваш шаблон 404.liquid может выглядеть так:

Теперь любое внесенное вами изменение в файл 404-layout.liquid будет применено к странице 404. Проверьте наш справочный центр Для получения дополнительной информации о 404 шаблонах.

2. Добавьте пользовательское фоновое изображение на 404 страницы

Один из наиболее эффективных методов определения бренда вашего клиента в Интернете - это простая графика, а фоновое изображение стало стандартной функцией страницы 404. Чтобы добиться того эффекта полноэкранного изображения, который мы видели на Backcountry Мы можем использовать CSS, чтобы назначить фоновое изображение, специфичное для нашей страницы 404.

Свойство background-image позволяет размещать изображение под остальными элементами на странице. Вы могли бы даже использовать CSS для наложения нескольких изображений в фоновом режиме, что может быть полезно при объединении логотипов с фоном.

Первое, что вы должны сделать, это загрузить желаемое изображение в Shopify, в меню «Настройки»> «Файлы», которое сгенерирует уникальный URL-адрес, где хранится ваше изображение.

Затем вы должны перейти к таблице стилей темы и использовать класс открывающего контейнера или идентификатор вашей страницы 404.liquid в качестве селектора вместе со свойством CSS background-image и URL-адресом в качестве значения. Это может выглядеть так:

Вам также может понравиться: Создайте привлекательный дизайн прямоугольных заголовков ,

3. Добавить панель поиска на страницу

Панель поиска для быстрого перехода - одна из самых распространенных и эффективных функций на странице 404. Чтобы добавить панель поиска на страницу 404 вашего клиента, вы можете создать HTML-форму с атрибутом действия, установленным в / search. В этой форме должен быть включен ввод текста типа с атрибутом имени, установленным в q. Простой пример этого показан ниже:

Чтобы установить, как это будет выглядеть на вашей странице, вы можете настроить CSS, определив значения для полей, отступов и т. Д. Вот пример того, как приведенная выше строка поиска отображается в моем тестовом магазине:

4. Добавьте призыв к действию.

Иногда клиент может захотеть направить клиента на определенную страницу или коллекцию, когда он попадает на страницу 404. Настраиваемая кнопка призыва к действию - это идеальный способ направить покупателя на определенную страницу, поэтому добавление статического раздела, позволяющего клиенту управлять своим магазином.

Сначала вам нужно создать новый пустой файл Liquid в папке разделов вашей темы, который называется 404-call-to-action.liquid. Затем добавьте этот код в файл:

Затем вам нужно будет включить этот новый раздел в файл шаблона 404.liquid в том месте, где вы хотели бы, чтобы появлялась кнопка призыва к действию. Вы хотите использовать Жидкая тема тег {% section "404-call-to-action"%}, чтобы включить этот раздел, и в моем случае мой файл шаблона 404.liquid выглядит следующим образом:

Теперь, когда вы откроете Theme Customizer и загрузите несуществующую страницу, вы увидите возможность отредактировать кнопку призыва к действию. Эти изменения, внесенные в настройщике тем, теперь будут применяться к любой странице ошибки 404.

Какая ошибка?

Это лишь некоторые из способов улучшить стандартную страницу ошибок Shopify 404, и я рекомендую вам настроить свои страницы на основе уникальных характеристик ваших клиентов.

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

Вы экспериментировали с разными стилями для разработки функциональных и забавных страниц с ошибками 404? Мы хотели бы услышать о вашем опыте в комментариях ниже!