Как веб-разработчики, почти каждый клиент, с которым мы работаем, ожидает, что его сайт будет иметь мобильную версию своего сайта. А с ростом числа вариаций размеров и разрешений экрана будет невозможно или, по крайней мере, нецелесообразно создавать веб-сайт для каждого устройства и разрешения экрана, которое существует.
В этой статье мы начнем с базового уровня, сначала определив, что такое адаптивный веб-дизайн, почему он важен, и некоторые краткие соображения, которые следует учитывать при мозговом штурме адаптивного веб-сайта WordPress.
Что такое адаптивный веб-дизайн?
Википедия определяет RWD как:
Подход к веб-дизайну нацелен на создание сайтов для обеспечения оптимального удобства просмотра — удобного чтения и навигации с минимальным изменением размеров, панорамированием и прокруткой — на широком спектре устройств (от мобильных телефонов до мониторов настольных компьютеров).
Адаптивный веб-дизайн включает в себя применение медиазапросов CSS со смесью гибких сеток и макетов. Я уверен, что вы слышали о CSS-фреймворках, таких как Bootstrap , Foundation и так далее. Все они используют медиа-запросы со смесью макетов для отображения страницы в соответствии с размером экрана, платформой и ориентацией.
Например, при использовании Bootstrap вы можете просто включить адаптацию вашего проекта, вставив следующую строку кода в <head>
|
1
2
|
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link href=»assets/css/bootstrap-responsive.css» rel=»stylesheet»>
|
В Bootstrap медиазапросы позволяют использовать пользовательский CSS на основе ряда условий — отношений, ширины, типа отображения, но обычно фокусируются на min-width и max-width до
- изменить размер заголовков и текста, чтобы они были более подходящими для устройств
- складывать элементы вместо плавающих там, где это необходимо
- изменить ширину сетки
Следите за целой практической серией, посвященной обучению тому, как создать адаптивный веб-дизайн с использованием этой конкретной среды.
Почему RWD важно?
До сих пор в нашем обсуждении мы определили, что одна важная вещь в адаптивном веб-сайте — это способность сайта адаптироваться к любому размеру экрана или ориентации, когда пользователь просматривает веб-сайт. Помимо этого есть и другие важные причины, почему вы должны перейти на адаптивный сайт
Увеличение мобильного использования
Сегодня значительное количество людей имеют доступ к мобильным телефонам. Это означает, что некоторые люди получают доступ к Интернету через телефоны. Статистика показывает, что сегодня почти 20% поисковых запросов в Google происходит с мобильных телефонов — это должно сказать вам, как важно, чтобы пользователи могли иметь доступ к вашему веб-сайту и легко взаимодействовать с ним.
Поскольку использование мобильного Интернета превышает статистику использования настольных компьютеров, мы должны убедиться, что пользователи могут идентифицировать себя с нашими веб-сайтами независимо от того, какие устройства они используют, не чувствуя, что они обращаются к другой или ограниченной версии основного сайта.
Значительно увеличить коэффициент конверсии
Коэффициент конверсии — это термин, который в основном используется на сайтах электронной коммерции. Он относится к тому, где вы можете превратить обычного посетителя в веб-платформу. В типичном случае решения для электронной коммерции подумайте о том, сколько людей делают покупки на своих мобильных телефонах.
Если обычный веб-пользователь будет вынужден использовать настольную версию вашего сайта для простой проверки, велика вероятность, что он определенно выберет другие средства для покупки того же продукта. С хорошо разработанным адаптивным сайтом пользователи не должны замечать разницу при проведении операций на вашем сайте, кроме того, что они используют меньший экран.
Улучшено ранжирование в поисковых системах
Такая поисковая система, как Google, открыто выступает за адаптивный веб-дизайн по ряду причин:
- Намного проще сканировать адаптивный веб-сайт, индексировать его и упорядочивать контент сайта. Это стало возможным благодаря тому факту, что адаптивный веб-сайт использует только один URL-адрес на всех платформах, в отличие от сценария, в котором существуют разные версии одного и того же сайта на разных URL-адресах.
- Опыт пользователя можно легко оценить, посмотрев на показатель отказов сайта. Сайт с низким показателем отказов означает, что пользователи остаются на нем в течение определенного периода времени, следовательно, более высокий рейтинг в поиске.
Экономически эффективным
Запуск нескольких сайтов для одного и того же контента может быть дорогостоящим, вам нужно удвоить ресурсы, чтобы поддерживать два сайта. Наличие адаптивного веб-сайта намного проще, поскольку вы сможете посвятить все ресурсы и время тому, чтобы дать пользователям то, что они действительно ожидают.
Соображения для отзывчивого сайта WordPress
Есть немало соображений, которые нужно учитывать, прежде чем придумывать адаптивный веб-дизайн в WordPress. Дело в том, что WordPress теперь используется для создания блогов, сайтов и даже приложений, которые, вероятно, нуждаются в адаптивной реализации.
В следующем посте мы рассмотрим стратегию реализации того, как этого добиться в разработке WordPress. В частности, мы рассмотрим
- Производительность
- контекст
- Прогрессивные улучшения
Рассмотрение этих трех критических факторов требует и глубокого анализа, чтобы продемонстрировать, почему адаптивный дизайн — это не только дизайн, и где именно WordPress входит в уравнение.
Резюме
В этой статье мы кратко представили концепцию адаптивного веб-дизайна, определили, что это такое, почему это важно и почему мы должны учитывать это в наших будущих проектах.
Не стесняйтесь оставлять любые вопросы или комментарии ниже!