Адаптивная верстка сайта

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

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

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

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

Так ли необходима адаптация сайта для разных экранов?

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

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

По данным Яндекса, с десктопов в интернет выходят только 29 % пользователей, 52 % используют несколько разных устройств (и стационарные, и мобильные) и 19 % — исключительно мобильные устройства. В таких условиях отказ от адаптации сайта к смартфонам и планшетам фактически означает потерю огромной доли потенциальных Клиентов. Очевидно, что, если пользователю неудобно на Вашем ресурсе, он просто его закроет и уйдет к конкурентам.

Создание сайта с адаптивной версткой

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

• от десктопной версии к мобильной — метод упрощения (mobile last);
• от мобильной версии к десктопной — метод усложнения (mobile first).

Для разработки нового сайта с адаптивной версткой можно использовать любой метод, для доработки же имеющегося ресурса доступен только первый. Рассмотрим общие моменты такой верстки.

1. Используйте относительные единицы измерения.

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

   То же относится и к изображениям. Чтобы сделать их адаптивными, размеры нужно задавать так: img {width: 100 %; max-width: 100 %;}. За счет этого ни одна картинка не сможет быть шире, чем контейнер, в котором она находится. В то же время на большом экране изображение не растянется больше своего истинного размера.

2. Вычисляйте размер шрифта.

   Нельзя верстать текст с фиксированными размерами в пикселях. К примеру, размер в 48px на экране смартфона будет слишком большим. На сайтах с адаптивной версткой размер шрифта задается не в абсолютных единицах (px), а в относительных, например в «em». Если размер по умолчанию равен 16px, то соответствие для font-size: 48px будет 48px / 16px = 3em.

3. Используйте при верстке векторные изображения.

   Помимо популярного растрового формата jpg, на сайтах можно использовать изображения векторного формата svg. Они адаптивные, то есть могут изменять размер без потери качества.

4. Проектируйте карточные интерфейсы.

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

5. Скрывайте лишнее.

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

6. Улучшайте кликабельность.

   При верстке создавайте для кнопок большое кликабельное пространство. Чем оно больше, тем пользователю будет проще взаимодействовать с кнопкой, особенно на маленьком экране мобильного устройства.

7. Оставляйте на сайте только самое необходимое.

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

Не откладывайте на завтра, сделайте свой ресурс адаптивным уже сегодня!

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