Поскольку доступ к Интернету с мобильных устройств растет, уже недостаточно иметь статический дизайн веб-сайта, который хорошо выглядит только на экране компьютера. Не говоря уже о том, что при разработке дизайна вы также должны учитывать планшеты, ноутбуки 2-в-1 и разные модели смартфонов с разными размерами экрана.
Благодаря адаптивному веб-дизайну вы можете сделать так, чтобы ваш веб-сайт выглядел наилучшим образом на мобильных телефонах, планшетах, ноутбуках и экранах настольных компьютеров. В результате, такое улучшение пользовательского опыта означает более высокие конверсии и рост бизнеса.
В этой статье вы получите всю необходимую информацию об адаптивном дизайне веб-сайтов.
Это подход к веб-дизайну, который заставляет ваш веб-контент адаптироваться к разным размерам экрана и окон различных устройств.
Например, ваш контент может быть разделен на разные столбцы или блоки на экранах рабочего стола, потому что они достаточно широки, чтобы вместить этот дизайн.
Если вы разделите свой контент на несколько столбцов на мобильном устройстве, пользователям будет сложно читать и взаимодействовать с ним.
Адаптивный дизайн позволяет доставлять несколько отдельных макетов вашего контента и дизайна на разные устройства в зависимости от размера экрана.
Недостаточно, чтобы ваш сайт хорошо смотрелся на экране компьютера. Планшеты, ноутбуки 2-в-1 и смартфоны — все это часть уравнения … Это руководство охватывает все, что вам нужно знать об адаптивном дизайне.
Разница между обычным адаптивным дизайном и адаптивным JS дизайном заключается в том, что адаптивный JS дизайн адаптирует рендеринг одностраничной версии. А обычный адаптивный дизайн предоставляет несколько совершенно разных версий одной и той же страницы.
Обе подхода являются важнейшими тенденциями веб-дизайна, которые помогают веб-мастерам контролировать, как их сайт будет выглядеть на разных экранах, но отличается способ применения.
Благодаря адаптивному JS дизайну пользователи будут получать доступ к одному и тому же базовому файлу через свой браузер независимо от устройства, но код CSS будет управлять макетом и отображать его по-разному в зависимости от размера экрана. В адаптивном JS дизайне есть сценарий, который проверяет размер экрана, а затем обращается к шаблону, разработанному для этого устройства.
Если вы новичок в веб-дизайне, разработке или ведении блогов, вы можете задаться вопросом: «почему адаптивный дизайн вообще так важен?»
Ответ прост. Уже недостаточно заниматься дизайном для одного устройства. Мобильный веб-трафик превысил трафик компьютеров и теперь составляет его большую часть, а точнее более 80%
Когда более половины ваших потенциальных посетителей используют мобильное устройство для работы в Интернете, вы не можете просто показать им страницу, предназначенную для настольных компьютеров. Было бы трудно читать и использовать, и это привело бы к плохому взаимодействию с пользователем.
Наконец, за последние несколько лет мобильная связь стала одним из важнейших рекламных каналов. Даже на рынке после пандемии расходы на мобильную рекламу растут на 4,8% до 91,52 миллиарда долларов.
Поэтому независимо от того, решите ли вы размещать рекламу в социальных сетях или использовать органический подход, такой как YouTube или SEO, подавляющая часть вашего трафика будет поступать от мобильных пользователей.
Если ваши целевые страницы не оптимизированы для мобильных устройств и не просты в использовании, вы не сможете максимизировать рентабельность своих маркетинговых усилий. Плохие показатели конверсии приведут к уменьшению количества потенциальных клиентов и опустошат рекламный бюджет.
Адаптивность сайтов WordPress зависит от темы вашего сайта. В WordPress тема является эквивалентом шаблона для сайта статического и контролирует дизайн и макет вашего контента.
Если вы используете тему WordPress по умолчанию, например, Twenty, дизайн адаптивный, но поскольку это дизайн с одним столбцом, вы можете не заметить этого, глядя на него на разных экранах.
Если вы используете другую тему WordPress, вы можете проверить, реагирует она или нет, сравнив, как она выглядит на разных устройствах, или с помощью инструментов разработчика Chrome.
В этом разделе мы рассмотрим основы адаптивного дизайна веб-сайта и его различные строительные блоки.
В основе адаптивного дизайна лежит комбинация HTML и CSS, двух языков, которые управляют содержимым и макетом страницы в любом конкретном веб-браузере.
HTML в основном управляет структурой, элементами и содержимым веб-страницы. Например, чтобы добавить изображение на веб-сайт, вы должны использовать следующий HTML-код:
<img src=»image.gif» alt=»image» class=”full-width-img”>
Вы можете установить «класс» или «идентификатор», на которые позже можно будет направить с помощью кода CSS. Вы также можете управлять основными атрибутами, такими как высота и ширина, в вашем HTML, но это больше не считается наилучшим решением.
Вместо этого используется CSS для редактирования дизайна и макета элементов, которые вы включаете на страницу с HTML. Код CSS может быть включен в <style> раздел документа HTML или как отдельный файл таблицы стилей.
Например, возможно изменить ширину всех изображений HTML на уровне элемента следующим образом:
img {
width: 100%;
}
Или мы могли бы настроить таргетинг на конкретный класс «full-width-img», добавив точку впереди.
.full-width-img {
width: 100%;
}
Вы также можете управлять дизайном, не ограничиваясь только высотой, шириной и цветом. Используя подобный CSS, вы можете сделать дизайн адаптивным, если объедините его с техникой, называемой медиа-запросом.
А) Медиа-запросы
Запрос СМИ является фундаментальной частью CSS3, которая позволяет отображать содержимое, чтобы адаптироваться к различным факторам, как размер экрана или разрешение.
Он работает аналогично «условию if» в некоторых языках программирования, в основном проверяя, является ли область просмотра экрана достаточно широкой или слишком широкой перед выполнением соответствующего кода.
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}
Если экран имеет ширину не менее 780 пикселей, изображения класса «full-width-img» займут 90% экрана и будут автоматически центрированы с такими же широкими полями.
Б) Гибкие макеты
Плавный макет — неотъемлемая часть современного адаптивного дизайна. В старые добрые времена вы устанавливали статическое значение для каждого элемента HTML, например, 600 пикселей.
Вместо этого гибкий макет полагается на динамические значения, такие как процент от ширины области просмотра. Этот подход будет динамически увеличивать или уменьшать различные размеры элементов контейнера в зависимости от размера экрана.
В) Макет Flexbox
Хотя макет, основанный на процентах, также является гибким, многие дизайнеры и веб-разработчики считали его недостаточно динамичным или функциональным. Flexbox — это модуль CSS, разработанный как более эффективный способ размещения нескольких элементов, даже если размер содержимого внутри контейнера неизвестен. Гибкий контейнер расширяет элементы, чтобы заполнить доступное свободное пространство, или сжимает их, чтобы предотвратить переполнение. Эти гибкие контейнеры обладают рядом уникальных свойств, таких как justify-content, которые нельзя редактировать с помощью обычного элемента HTML. Это сложная тема, поэтому, если вы хотите использовать ее в своем дизайне, вам следует прочитать руководство по Flexbox CSS Tricks.
Г) Адаптивные изображения
Самая простая итерация адаптивных изображений следует той же концепции, что и гибкий макет, с использованием динамического блока для управления шириной или высотой. Пример кода CSS, который мы рассмотрели ранее будет выглядеть так:
img {
width: 100%;
}
Единица приблизительно равна одному проценту от ширины или высоты области просмотра и гарантирует, что изображение остается пропорциональным экрану. Проблема с этим подходом заключается в том, что каждый пользователь должен загрузить полноразмерное изображение даже на мобильный телефон.
Чтобы обслуживать разные версии, масштабируемые для разных устройств, вам необходимо использовать srcset — атрибут HTML в ваших тегах img, чтобы указать более одного размера изображения на выбор.
<img srcset=»large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w»
src=»small.jpg»
/>
WordPress автоматически использует эту функцию для изображений, включенных в сообщения или страницы.
Д) Скорость
Когда вы пытаетесь создать адаптивный дизайн веб-сайта, скорость загрузки должна быть главным приоритетом. Страницы, которые загружаются за 2 секунды, имеют средний показатель отказов 9%, а страницы, которые загружаются за 5 секунд, имеют показатель отказов 38%.
Ваш подход не должен блокировать или задерживать первый рендеринг вашей страницы больше, чем это необходимо.
Есть несколько способов сделать ваши страницы быстрее. Оптимизация изображений, реализация кеширования, минификация, использование более эффективного макета CSS, предотвращение JS, блокирующего рендеринг, и улучшение критического пути рендеринга — все это отличные идеи, которые вы должны рассмотреть. Вы также можете попробовать внедрить Google AMP для своих мобильных страниц, но по нашим исследованиям Google AMP количество потенциальных клиентов с мобильных устройств упало на колоссальные 59%.
Для работы с медиа-запросами вам необходимо выбрать «точные точки останова» или точки останова по размеру экрана. Точка останова — это ширина экрана, на котором вы используете медиа-запрос для реализации новых стилей CSS.
Общие размеры экрана:
Мобильный: 360 x 640
Мобильный: 375 x 667
Мобильный: 360 x 720
iPhone X: 375 x 812 пикселей
Пиксель 2: 411 x 731
Планшет: 768 x 1024
Ноутбук: 1366 x 768
Ноутбук или настольный компьютер с высоким разрешением: 1920 x 1080
Если вы выбираете подход к дизайну, ориентированный на мобильные устройства, с одним столбцом и меньшим размером шрифта в качестве основы, вам не нужно включать мобильные точки останова — если вы не хотите оптимизировать дизайн для конкретных моделей.
Таким образом, вы можете создать базовый адаптивный дизайн всего с двумя точками останова: для планшетов, для ноутбуков и настольных компьютеров.
Адаптивные точки останова Bootstrap
Bootstrap — один из первых и самых популярных адаптивных фреймворков, возглавил наступление на статический веб-дизайн и помог сделать дизайн, ориентированный на мобильные устройства, отраслевым стандартом. В результате многие дизайнеры по сей день все еще следуют контрольным точкам ширины экрана Bootstrap.
Они используют медиа-запросы для таргетинга на телефоны с горизонтальной ориентацией (576 пикселей), планшеты (768 пикселей), ноутбуки (992 пикселей) и очень большие экраны настольных компьютеров (1200 пикселей).
Теперь, когда вы знакомы со стандартными блоками, пришло время сделать ваш сайт адаптивным.
А) Установите диапазоны медиа-запросов (отзывчивые точки останова)
Б) Размер элементов макета с помощью процентов или создание макета сетки CSS
В) Реализуйте адаптивные изображения
Г) Адаптивная типографика для текста вашего веб-сайта
Д) Отзывчивость теста
Е) Установите диапазоны медиа-запросов (отзывчивые точки останова)
Ж) Установите диапазоны медиа-запросов в зависимости от уникальных потребностей вашего дизайна. Например, если бы мы хотели следовать стандартам Bootstrap для нашего дизайна, мы бы использовали следующие медиа-запросы:
576 пикселей для портретных телефонов
768px для планшетов
992px для ноутбуков
1200 пикселей для больших устройств
Первым и наиболее важным шагом является установка разных размеров для разных элементов макета в зависимости от медиа-запроса или точки останова экрана. Количество имеющихся у вас макетов будет зависеть от дизайна, но большинство веб-сайтов сосредоточены на элементах, перечисленных ниже:
Используя подход, ориентированный на мобильные устройства, вы можете стилизовать основные элементы макета следующим образом (без медиа-запроса для основных стилей для мобильных телефонов):
#wrapper {width:95%; margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto; }
#content {width:70%; float:left; }
#sidebar {width:30%; float:right; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#wrapper {width:90%; margin: 0 auto; }
}
В процентном подходе атрибут «float» контролирует, на какой стороне экрана будет отображаться элемент, слева или справа. Если вы хотите выйти за рамки основ и создать ультрасовременный адаптивный дизайн, вам необходимо ознакомиться с макетом CSS flexbox и его атрибутами, такими как размер поля и гибкость.
Один из способов убедиться, что ваши изображения не ломаются, — это просто использовать динамическое значение для всех изображений, как мы рассмотрели ранее.
img {
width: 100%;
}
Но это не снизит нагрузку на ваших мобильных посетителей, когда они заходят на ваш сайт.
Убедитесь, что вы всегда добавляете метку с фотографиями разных размеров, когда добавляете изображения на свои страницы.
Выполнение этого вручную может занять довольно много времени, но в таких CMS, как WordPress, это происходит автоматически, когда вы загружаете медиафайлы.
Основное внимание в адаптивном веб-дизайне уделяется отзывчивости блоков макета, элементов и мультимедиа. К тексту часто обращают внимание.
Но для действительно адаптированного дизайна вам также следует соответствующим образом настроить размер шрифта в соответствии с размером экрана.
Самый простой способ сделать это — установить статическое значение для font-size, например, 22 пикселей, и адаптировать его для каждого медиа-запроса.
Вы можете настроить таргетинг на несколько текстовых элементов одновременно, используя запятую для разделения каждого из них.
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}
Если вы хотите проверить, оптимизирован ли ваш сайт для мобильных устройств, с помощью теста Google для мобильных устройств. Просто введите URL-адрес своего веб-сайта и нажмите кнопку «Проверить URL-адрес», чтобы получить результаты. Не беспокойтесь, если загрузка вашего сайта займет некоторое время. Это не отражает скорость загрузки вашей страницы.
Если вы выполнили действия, описанные в этой статье, должно быть сказано, что ваш веб-сайт оптимизирован для мобильных устройств. Затем вы хотите протестировать свой сайт на экранах разных размеров с помощью такого инструмента, как инструменты разработчика Chrome.
Нажмите CTRL + Shift + I на компьютерах с Windows или Command + Option + I на Mac, чтобы открыть соответствующее представление устройства. Отсюда вы можете выбрать мобильное устройство или планшет по вашему выбору, чтобы проверить отзывчивость вашего дизайна.
Есть несколько вопросов, на которые вам нужно ответить, проходя этот процесс:
В CSS есть как абсолютные, так и относительные единицы измерения. Примером абсолютной единицы длины может быть пиксель. Относительные единицы или динамические значения зависят от размера и разрешения экрана или размера шрифта корневого элемента.
PX vs EM vs REM vs Viewport Units для адаптивного дизайна
PX — один пиксель
EM — относительная единица измерения, основанная на размере шрифта элемента.
REM — относительная единица, основанная на размере шрифта элемента.
VH, VW -% высоты или ширины области просмотра.
% — процент родительского элемента.
Начинающему веб-дизайнеру или разработчику, вероятно, следует придерживаться пикселей для текста, потому что они являются наиболее простой единицей длины в CSS. Но при установке размера, максимальной ширины изображений и других элементов использование % — лучшее решение. Такой подход обеспечит адаптацию компонентов к размеру экрана каждого устройства.
Ниже мы рассмотрим несколько примеров адаптивного веб-дизайна из разных отраслей — и узнаем, что они делают правильно, а что неправильно.
NYT отзывчивый дизайн. NYT на мобильном телефоне, планшете и ноутбуке.
макет NYT напоминает традиционную газету, наполненную визуальными элементами и различными строками и столбцами контента. Кажется, что для каждой категории новостей есть отдельный столбец или строка.
На мобильных устройствах он соответствует стандарту с одним столбцом, а также настраивает меню, чтобы оно было в формате аккордеона, чтобы его было проще использовать.
Блог Криса Гийбо «Искусство несоответствия» набирает обороты уже более десяти лет. Хотя дизайн не самый современный, он адаптивен и адаптирует боковую панель с двумя столбцами и макет основного контента к дизайну с одним столбцом на мобильных устройствах.
Amazon является мировым лидером в области электронной коммерции не зря, их пользовательский интерфейс идеально подходит для всех устройств. Их макет для планшета просто удаляет часть белого пространства и добавляет прокручиваемый раздел значков, чтобы вместить больше контента в меньший пакет.
Их мобильный макет помещает всё в один столбец, уделяя основное внимание главному для пользователя, например, истории недавних покупок, а не различным значкам ссылок на разделы с их главной домашней страницы.
В основе дизайна главной страницы YouTube лежит гибкая сетка видео, подходящая для каждого пользователя. На планшетах количество столбцов в каждой строке сокращается до трех. На мобильных устройствах это сводится к дизайну с одной колонкой.
В мобильной версии главное меню также перемещается в нижнюю часть экрана, ближе к большим пальцам пользователей смартфонов. Этот простой ход улучшает навигацию и UX.
Подход Wired к адаптивному веб-дизайну ориентирован на реализацию макета с одним столбцом на всех небольших экранах, начиная с планшетов.
Это базовый макет, но он упрощает привлечение внимания пользователя к основным новостям и их призыву к действию для подписки.
В адаптивный веб-дизайн входит множество различных элементов. Без базового понимания HTML и CSS можно легко ошибиться.
Но, ознакомившись с различными строительными блоками, проанализировав примеры с помощью инструментов веб-разработки и проведя тестирование с использованием примера кода, вы сможете сделать свой веб-сайт адаптивным без каких-либо серьезных проблем.
Если это звучит слишком сложно, вы всегда можете нанять разработчика WordPress.
Если вам понравилась эта статья, вы можете ознакомиться и с другими нашими исследованиями по теме в блоге.
 |
Мухтасипов Иван, менеджер по развитию бизнеса Digital-агентства «Business Boom» |
Совсем скоро, мы свяжемся с Вами для уточнения дальнейших действий и деталей Вашего проекта.
Шаг 1 из 5
Определитесь с типом Вашего будущего сайта. Категория веб-сайта сильнее всего влияет на его конечную стоимость.
Шаг 2 из 5
Выберите кол-во страниц Ващего будущего веб-ресурса
Шаг 3 из 5
Выберите систему управления содержимым сайта (CMS). Именно «CMS» позволяет в дальнейшем упростить добавление нового и редактирование старого контента.
Шаг 4 из 5
На этом шаге нужно определиться с дизайном Вашего будущего интернет-ресурса – подойдет
ли вам шаблонный дизайн сайта или его нужно разработать с нуля.
Шаг 5 из 5
На этом шаге необходимо определиться с требуемым функционалом Вашего будущего веб-ресурса.
Выбирая те или иные опции, Вы можете оценить предварительную стоимость Вашего проекта.
Дополнительные параметры
На этом шаге необходимо выбрать дополнительный функционал Вашего будущего веб-ресурса.
Выбирая те или иные опции, Вы можете оценить предварительную стоимость Вашего проекта.
Контактные данные
Поздравляем! Теперь Вы можете оценить предварительную стоимость разработки Вашего интернет-ресурса. Чтобы начать сотрудничество с агентством, заполните форму обратной связи.
