Блог

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

Верстка — один из основных этапов разработки и создания любого сайта. В процессе верстки происходит преобразование отрисованного макета дизайна в веб-страницу.

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

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

  • Нестандартное соотношение сторон экрана. Экраны на планшетах и смартфонах обладают книжной ориентацией, в то время как сайты, разрабатываемые на компьютере, тестируются на привычных экранах альбомного типа. Это может стать причиной неправильного отображения блоков на сайте.
  • Редкое разрешение. Мобильные телефоны прошлых поколений, которые, тем не менее, активно используются для просмотра ресурсов в сети интернет, имеют слишком маленькое разрешение экрана. Текст и графика на страницах неоптимизированных под такое разрешение сайтов кажутся неоправданно крупными. Как следствие, снижается удобочитаемость, что в свою очередь приводит к уменьшению аудитории ресурса. Обратная ситуация возникает при использовании ультрабуков и планшетов, обладающими экранами высокой четкости, например, девайсов Apple с дисплеем Retina. Без адаптивной верстки страниц сайта изображения и шрифты на экранах MacBook и iPad выглядят очень мелко. 
  • Низкая скорость соединения. Подавляющее большинство интернет-устройств присоединяется к сети интернет посредством беспроводной передачи данных. Медленная скорость загрузки крупных элементов страницы (скриптов, анимации, видео) сильно замедляет процесс общей загрузки страницы сайты, что может прервать попытку загрузить страницу целиком и повлиять на финальное отображение страницы. 
  • Мобильные браузеры.Многие мобильные браузеры не имеют встроенной поддержки возможностей, которыми обладают современные решения для персональных компьютеров. Именно поэтому высока вероятность неправильного отображения страницы на мобильном устройстве.

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

Адаптивный веб-дизайн сайта

Адаптивная верстка включает в себя понятие адаптивного веб-дизайна, введенного Этаном Маркоттом в майской статье 2010 г. Адаптивный веб-дизайн или Responsive Web Design представляет собой технологию создания и верстки веб-страниц, оптимизированных для работы с различными устройствами, имеющими доступ в Интернет. Адаптивность подразумевает автоматическое изменение контента и структуры страниц сайта под заданное устройство, в первую очередь, под характеристики его экрана. Как выглядит «оптимизированный» сайт, например, по отношению к планшету в сравнении с лэптопом? — элементы страницы уплотнены, контент частично сокращен, присутствует не вся графика, баннеры переместились в нижнюю часть экрана, на сайте появился вертикальный скроллинг, все это происходит без потери в качестве, информация представлена более компактно.

  1. Резиновый макет на основе пропорций (fluid grids) — тип макета переменных, частный случай фиксированного типа макета, который позволяет переносить макет на реальный сайт таким, каким он создавался в редакторе HTML.
  2. Резиновые изображения (fluid images), позволяющие менять свои размеры под родительский блок.
  3. Media queries — часть стандарта CSS, позволяющая применять стили на основе информации о разрешении устройства.
  4. Mobile first — использование этого принципа при создании адаптивного сайта предполагает движение в логике «от мобильных устройств — к обычным компьютерам», чтобы технически предусмотреть приоритеты отображения того или иного контента.

При разработке адаптивного сайта должны учитываться не только особенности браузеров, но и отличия различных операционных систем и разрешения экранов устройств. Использование таких технологий, как JavaScript, различных CSS стилей, jQuery-плагинов для адаптивной верстки меню и других элементов являются неотъемлемыми инструментами в работе над созданием адаптивного сайта. В результате мы получаем автоматическое распознавание разрешения экрана воспроизводящего устройства, его типа, управление подключением/отключением различных элементов, анимации, изменение размера шрифтов и ширины блоков. Универсальность веб-сайта для различных устройств является конечной целью. Несомненным преимуществом является то, что адаптивные страницы учитывают возможности отдельных платформ. Кроме того, адаптивный сайт — наилучший выбор, с точки зрения алгоритмов Google.