Сегодня количество пользователей, которые ходят в Интернет с мобильных устройств очень велико, и с каждым днем их становится все больше. А потому адаптация сайта под маленькие экраны – актуальная задача для многих ресурсов, даже для тех, кто еще совсем недавно даже не планировал создавать версию сайта для мобильных устройств.Существует два решения этой проблемы:
- Мобильная версия сайта;
- Адаптивная верстка.
Как известно, мобильная версия сайта – это отдельная разработка, которая требует значительных вложений сил и средств. При этом вы получаете, по сути, два сайта, один – на основном домене, второй, мобильный, – на поддомене. Это считается большим минусом для продвижения в поисковых системах. А потому все чаще владельцы сайтов задумываются о создании адаптивной верстки. Более того, именно этот вариант настоятельно рекомендует компания Google.
Адаптивная верстка – это вариативный дизайн, который подстраивается под размеры экрана пользователя и позволяет красиво и удобно отображать единый сайт на любом устройстве.
Как создается адаптивный дизайн?
Итак, перед вами стоит задача: создать сайт, который будет сам подстраиваться под разные типы экранов.
Самые простые решения для адаптивной верстки:
- Резиновый макет;
- Масштабирование изображений и шрифтов;
- Перенос блоков в зависимости от размера экрана.
При этом все размеры элементов (блоков, изображений, шрифтов, видео и пр.) задаются в процентах от ширины экрана. Например:
|
1 2 3 4 |
.container { width: 800px; max-width: 90%; } |
Здесь задана ширина объекта 800 пикселей, но не превышающая 90% ширины экрана. Таким образом, на большом мониторе объект будет размером 800 пикселей, а на маленьком масштабироваться по ширине экрана.
Аналогично можно масштабировать картинку:
|
1 2 3 4 |
img { max-width: 100%; height: auto; } |
А для ввода текстового поля часто применяют параметр min-width, который аналогичен max-width, но задает противоположное значение, т.е. минимальный размер объекта.
Итак, вы примерно представили, как масштабировать шапку и размеры шрифтов, а что делать с текстовыми блоками, чтобы они не «вылезали» за область экрана и не создавали полосу прокрутки?
Один из самых простых методов переноса текста в зависимости от размера экрана – это создание нескольких колонок, которые при уменьшении экрана сначала подстраиваются по ширине, а если это становится невозможным с учетом минимального размера шрифта, переносятся вниз, т.е. на большом экране сайт будет состоять, например, из трех текстовых блоков:
|
|
|
Если экран оказывается меньше, то и блоки соответственно перестраиваются:
|
|
|||
|
А при необходимости выстраиваются вертикально в один ряд:
|
|||
|
|||
|
Существуют разные методы реализации адаптивной верстки, одни – проще, другие – сложнее, но дают больше возможностей настройки сайта. А потому даже крупные проекты с массой возможностей и широким числом интерактивных функций также возможно адаптировать под различные размеры экрана.
Достоинства адаптивной верстки
Прежде, чем говорить о преимуществах, стоит напомнить, что адаптивная верстка нужна только тем проектам, которые пользователи посещают, в том числе, с мобильных устройств. А потому традиционно сравниваются два варианта: адаптивный дизайн и мобильная версия сайта, которую используют как альтернативное решение.
- Самый главный плюс: пользователь может эффективно работать с сайтом с любого устройства, начиная от стационарного компьютера и оканчивая небольшим мобильным телефоном.
- Сайт доступен с любого устройства по одному адресу, что очень полезно для поискового продвижения, в то время как перенаправление на мобильную версию, которая обычно находится на поддомене, делит трафик на два потока.
- Исключается проблема дублирования контента, которая часто озадачивала веб-мастеров при использовании мобильной версии сайта.
- В поисковой выдаче Google с мобильных устройств сайты с таким дизайном будут получать преимущество перед неадаптированными ресурсами.
Более того, для создания адаптивной html верстки сайта в большинстве случаев будет достаточно проведения сравнительно небольших доработок в таблицах CSS и HTML-коде, что позволяет минимизировать затраты времени и средств.
Недостатки адаптивной верстки
Адаптивный дизайн – не панацея, и применять его нужно также разумно. Потому что, как и любая разработка, он имеет недостатки:
- Разные задачи и юзабилити. Для пользователей сложных крупных сайтов, например, клиентов банка, чаще всего при входе с мобильного устройства требуется ограниченный набор информации и возможностей: телефон, адрес ближайшего отделения, вход в интернет-банкинг и т.п. Мобильная версия покажет эти функции в первую очередь, а при использовании адаптивной верстки придется частично пожертвовать юзабилити, так как блоки с важной информацией будут располагаться, скорей всего, на разных экранах прокрутки. С другой стороны, сегодня очень сложно предсказать поведение пользователя мобильного устройства и угадать, что ему действительно нужно, а что – лишнее.
- Снижение скорости загрузки. «Вес» полноценного сайта всегда больше, чем упрощенной мобильной версии. Конечно, при использовании современных смартфонов и iPad/iPod устройств, а также наличии скоростного интернета, это не является проблемой. Но все еще остаются пользователи старых телефонов и люди, которые выходят в сеть через 2G. Им придется тратить время на ожидание загрузки целой страницы, чтобы посмотреть ее часть.
Резюме: что же лучше и когда?
В принципе, в 90% случаев адаптивная верстка – проста, удобна, помогает в поисковом продвижении проекта и позволяет пользователям пользоваться привычным сайтом с любого устройства по своему выбору.
Но важно понимать, что адаптивная верстка сайта потребует больших финансовых вложений, чем обычная мультибраузерная, которую на нашем сайте вы можете получить в автоматическом режиме. А потому стоит заранее решить: будете ли вы ориентироваться на пользователей мобильных устройств, и нужно ли это вашему сайту вообще?
Кроме того, в отдельных случаях адаптивная верстка невозможна, например, для промо-сайтов, основанных на flash-технологиях, или на ресурсах с необычными дизайнерскими решениями. Это очень важно учитывать, когда ваш дизайнер создает «картинку» будущего сайта.
В общем, единого для всех решения нет и быть не может. Все зависит от конкретного проекта, задач, которые перед ним стоят, а также методов, которыец используются при его реализации.
