Адаптивная верстка сайта это что, как сделать адаптивную верстку

Адаптивная верстка: что это

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

Что такое адаптивная верстка

Адаптивная верстка – это такой вид создания страниц, который строится на HTML-разметке и CSS3 медиа-запросах. За счет запросов стили сайта могут меняться в соответствии с размерами экрана устройства. На дисплеях разных приборов дизайн различается. Специалист, который создает адаптированные варианты сайтов, называется фронтенд-разработчиком.

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

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

Комбинация адаптивной и резиновой версток привела к появлению отзывчивого веб-дизайна, по-английски «responsive web design (RWD)». Это комплекс методов, с помощью которых веб-страницы изменяют макет в зависимости от того, на экране какой ширины отображаются. Такую комбинированную технологию сегодня нередко тоже называют адаптивным дизайном сайта.

Отличия от других видов верстки

Адаптивная верстка сайта существенно отличается от фиксированной (стационарной) верстки. Элементы в нем могут менять размеры и расположение относительно друг друга, когда изменяется разрешение экрана. При фиксированной верстке такой гибкости нет: на всех устройствах все одинаково.

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

Преимущества адаптивной верстки сайта

Главное, что дает адаптивная верстка – это повышение эффективности контента. «Приспосабливаясь» к величине дисплея, она создает удобство для пользователя. Ему приятнее находиться на сайте, он проводит здесь больше времени. А это напрямую влияет на то, совершит он покупку или нет. По статистике, чем больше времени пользователь просматривает сайт, тем вероятнее, что он купит продукт или услугу, запишется на консультацию, обратится с вопросом, напишет отзыв и так далее.

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

1. Аккуратный вид веб-сайта. Картинки и шрифты видны четко и не наползают друг на друга независимо от параметров разрешения экрана. Размеры элементов комфортные: не слишком большие, но и не чересчур мелкие.
2. Сайт становится удобным для людей разных групп. Уже в 2022-ом около 65% пользователей просматривали сайты с мобильных телефонов. Когда делать это комфортно, они задерживаются. Если нет – быстро уходят. Соотношение тех, кто заходит в интернет со смартфона и компьютера/ноутбука, постоянно меняется в сторону первых.
3. Свободный переход с одного устройства на другое. Нередко пользователи просматривают товары со смартфона, а потом переходят на ПК.
4. Поисковик поднимает сайты с адаптивным веб-дизайном вверх в выдаче. В Google на первое место выводятся сайты, адаптированные под мобильные устройства. Такой политики самая крупная поисковая система мира придерживается с 2019 года.
5. Трафик растет благодаря привлечению большего числа пользователей интернета.
6. Рост конверсии сайтов с адаптивным дизайном увеличивается на 10,9% по сравнению с устаревшими версиями. А конверсия нужна для повышения продаж.
7. Отслеживать эффективность веб-сайта становится проще. Ведь на всех устройствах применяется одна версия, только адаптированная под размеры экранов.
8. Снижение издержек на создание сайта. Его можно разработать только один раз.

Принципы адаптивной верстки

Такая гибкая верстка строится на нескольких важных моментах.

• Использование медиа-запросов CSS3 и языка разметки HTML5.
• Отображение сайта на всех устройствах должно быть корректным и правильным, независимо от величины экрана.
• Удобство взаимодействия с сайтом с приборов разных размеров и с разными интерфейсами. Это важно, ведь современные пользователи обращаются к интернету с различных устройств.
• Продуманный дизайн, удобный и понятный при открытии сайта на разных устройствах. Для этого веб-дизайнер создает подходящий макет перед тем, как фронтенд-разработчик начнет адаптировать его для различных размеров экранов.
• Гибкая настройка показателей контента: изображений и текста. Они подстраиваются под габариты экрана автоматически, без всяких усилий со стороны пользователя.
• Пользователю видна только та информация, которая ему важна. Лишние элементы и декор скрываются в таком дизайне или удаляются. Это облегчает взаимодействие с сайтом, поскольку помогает не рассеивать внимание.
• Полноценная функциональность версии. Адаптация сайта к разным размерам экранов выполняется с сохранением всех ключевых функций: они доступны и хорошо читаются на любых устройствах.
• Готовность сайта к росту мобильного трафика, который быстро увеличивается каждый год. Это позволяет не терять уже имеющихся посетителей и клиентов, и привлекать больше новых.

Популярные размеры экранов в адаптиве

Ориентация на стандартные размеры экранов помогает создавать адаптивный дизайн под разрешения. Сайт становится способным «подстроиться» под соответствующие размеры прибора. Приведем список самых распространенных параметров разрешений для адаптивной верстки:

• 1920 px – в форматах full-HD;
• 1600 px – в крупных экранах десктопов;
• 960 пикселей – в планшетах;
• 375 пикселей – в мобильных телефонах.

Ошибки при создании адаптивного дизайна

В адаптивной верстке есть определенные правила и шаблоны. Разработчикам достаточно точно им следовать, чтобы получить желаемый результат – сайт, который сможет гибко подстраиваться под разные устройства. Однако для этого важно очень внимательно отнестись к некоторым моментам, чтобы не допустить ошибок. Тогда макет верстки будет удобным для пользователя, на которого и ориентирована вся эта работа. Рассмотрим, какие ошибки ухудшают качество верстки.

1. Мало места для заголовков и подзаголовков. Когда они занимают больше одной-двух строк, то могут просто не поместиться в отведенное на макете пространство. Строки будут наезжать друг на друга, или будет видна лишь часть заголовка.
2. Изображения сжимаются. Когда на картинке находится текст, его нельзя уменьшать пропорционально уменьшению размера изображения. В этом случае текстовая информация не будет читаться. Поэтому текст нужно кадрировать.
3. Слишком мелкий шрифт – менее 12 пикселей. Такой текст сложно воспринимается с мобильных гаджетов. Необходимо следить, чтобы шрифт был как минимум 12 пикселей.
4. Чересчур длинные строки, которые «уезжают» за границу экрана. Пользователь не видит окончание: это вызывает раздражение и желание покинуть сайт. Для макета сайта, который создается для настольных компьютеров, рекомендуется делать строки не больше 60-70 символов с учетом пробелов. А для мобильных версий – максимум 40-60 символов с пробелами.
5. Неподходящая величина активных элементов сайта, например, кнопок, других интерактивных плашек, на которые нужно нажимать. Когда они слишком маленькие, пользователю сложно попасть в них пальцем. Эта проблема возникает при неправильном расчете размеров объектов в зависимости от разрешений для адаптивной верстки.
6. Меню, которое не сворачивается. Если на экране мобильного устройства меню заполняет весь дисплей, просматривать информацию неудобно. Эксперты рекомендуют делать иконку, кликнув по которой, пользователь сможет открыть меню или свернуть его.
7. Прокручивающиеся блоки на гаджетах с небольшими сенсорными экранами. Это снижает удобство просмотра контента на сайте. Лучше выбирать другой вариант: когда блоки не прокручиваются, а открываются при помощи «клика».
8. Страницы долго загружаются. Это нервирует пользователей. Исправить проблему можно, если уменьшить объем страницы. Тогда загрузка будет идти быстрее. Можно будет легко открыть страницу.
9. Пренебрежение анализом предпочтений целевой аудитории способно привести к тому, что готовый сайт просто не будут посещать те, кому предназначены товары или услуги. Перед тем, как начать разработку адаптивного дизайна, стоит поинтересоваться, устройства каких размеров предпочитают использовать люди, на которых ориентирован сайт. А также проанализировать, как именно действуют эти пользователи при веб-серфинге.
10. Отсутствие глубокого тестирования готовой адаптивной верстки – это серьезная ошибка. Необходимо проверить, как он работает в разных браузерах и на различных устройствах, прежде чем запускать.

Сервисы для проверки адаптивной верстки

Проверить, насколько верстка сайта для мобильных устройств удобна, можно, используя специальные сервисы.

• Яндекс.Вебмастер – бесплатный инструмент. Предназначен для проведения проверок адаптивности страниц на мобильных устройствах. Применяется несколько критериев. В правильной верстке должны отсутствовать silverlight-плагины, flash-элементы, java-апплеты, а также горизонтальная прокрутка. Должен быть тег viewport. И должно быть удобно читать тексты на сайте с мобильного телефона или планшета.
• Browserling проверяет кроссплатформенность и кроссбраузерность. Есть бесплатная версия, где доступна проверка сайта в Internet Explorer 11 при разрешении экрана 1024×768 в Windows 7. На тестирование дается всего 3 минуты. Можно приобрести за 19 долларов на месяц платный вариант сервиса. В этом случае можно тестировать сайты в разных операционных системах (Windows, Android) различных версий, делать это через шесть браузеров.
• I love adaptive – бесплатно помогает увидеть отображение сайта на популярных цифровых устройствах, в том числе самых новых моделей на платформах Android и iOS. Размер страниц для тестов можно задавать любой.
• Google Mobile-Friendly Test – применяется в тестировании сайтов на предмет адаптации к мобильным телефонам. Можно посмотреть, как будет выглядеть мобильная версия, и узнать, какие ошибки допущены в верстке макета. Сервис бесплатный.