Адаптивный веб-дизайн
Рынок интернет-технологий повсеместно захватывают разнообразные мобильные устройства. Посетителей сайтов с телефонов, смартфонов и планшетов становится все больше. Некоторые аналитики даже предрекают, что мобильный трафик скоро превысит трафик с обычных компьютеров. В свете подобных тенденций неразумно игнорировать этот сегмент интернет-пользователей и разрабатывать сайты, неприспособленные к современным гаджетам. Раньше лучшим решением этой проблемы было создание отдельной мобильной версии сайта. Но тогда все портативные устройства были небольших размеров, а сейчас их экранные разрешения пестрят разнообразием. Мобильный сайт, ориентированный на маленькие экраны будет смотреться неприглядно на планшете с fullHD разрешением. В связи с этим появился новый подход в разработке сайтов – адаптивный веб-дизайн.
Описание подхода, этапы разработки адаптивного сайта
Адаптивный дизайн — это технология разработки сайта, целью которой является удобство просмотра сайта на любых разрешениях. Это позволяет не тратить время на создание нескольких версий сайта, а разработать один проект с универсальной версткой, который будет хорошо отображаться на любом устройстве, даже наручных часах и телевизоре во всю стену.
Сайт с адаптивной разметкой требует отличного от традиционного подхода к процессу разработки. Необходимо тесное взаимодействие веб-дизайнера и фронд-энд разработчика, кроме того, увеличивается количество этапов проектирования. Здесь типичная цепочка "прототип - дизайн - верстка - программирование - тестирование" не так эффективна.
Изначально должен создаваться прототип с учетом поведения всех элементов интерфейса на всем спектре экранных разрешений. Затем следует верстка прототипа и его тестирование - на этом этапе черновик обкатывается, становится видно реальное поведение блоков при изменении размера окна, вырабатываются наилучшие решения в размещении и перестроении элементов интерфейса.
После следует этап эстетического оформления готового интерактивного прототипа: создание графических элементов, типографики и т.д. Отверстанный интерфейс дополняется этим оформлением, после чего приходит очередь комплексного тестирования. На этапе тестирования следует уделить большое внимание юзабилити, гибкости интерфейса и корректности отображения. После всех исправлений и уточнений можно приступать к серверному программированию. Наконец наступает черед окончательного тестирования и наполнения контентом.
Нельзя не упомянуть о замечательном подходе "Mobile first". Как можно понять из названия, интерфейс проектируется, начиная с устройств с маленькими экранами, и затем прогрессивно модифицируется вместе с увеличением доступного экранного пространства. Ограничение пространства позволяет сконцентрироваться на самом важном и не дает заполнить место ненужным функционалом, интерфейс прорабатывается более детально и качественно.
Техники адаптивной верстки
Резиновая верстка
Простая и наиболее популярная техника, при которой ширина страницы задается в процентах, таким образом, контентная область сжимается по мере уменьшения ширины экрана, пока не перестраивается в одну длинную колонку.
Media queries
Media Queries - это часть стандарта CSS, которая позволяет применять стили, основываясь на размере области просмотра. С их помощью можно переносить блоки в разные части страницы, либо полностью менять их визуальное отображение.
Пример:
/* начало css */
Здесь базовые стили для мобильных браузеров, не поддерживающих Media Queries.
@media only screen and (min-width: 320px) {
Стили для устройств с минимальной шириной экрана в 320 пикселей.
}
@media only screen and (min-width: 768px) {
Стили для планшетов в портретном режиме.
}
@media only screen and (min-width: 1000px) {
Стили для планшетов в ландшафтном режиме, нетбуков, ПК и т.д.
}
/* конец css */
Каждая из последующих итерпретаций наследует предыдущую, поэтому нет нужды в дублировании стилей для каждого диапазона разрешений. С увеличением ширины экрана просто будут добавляться дополнительные свойства, а некоторые переопределяться при необходимости.
Адаптивные изображения
Для изображения задается максимальная ширина в 100%, таким образом, оно никогда не вылезет за пределы родительского блока и будет сжиматься в зависимости от его ширины. Кроме того, в последнее время появилось большое количество техник создания адаптивных изображений, которые позволяют подставлять разные картинки в зависимости от заданных условий. Это означает необходимость подготавливать несколько версий каждого изображения: для больших экранов большая картинка, для маленьких – маленькая:
Преимущества и недостатки адаптивного веб-дизайна
Преимущества:
- СЕО
Такой подход дружественен для поисковой оптимизации: используется один URL для страниц, что избавляет от лишних редиректов и дублирования контента, облегчает процесс индексации. - Юзабилити
Интерфейс сайта не меняется радикально, как в случае с отдельной мобильной версией, а мягко адаптируется под разные разрешения. Грамотное проектирование адаптивного сайта позволяет сделать такой переход вовсе незаметным для пользователя. - Доступность контента
Содержимое сайта остается неизменным вне зависимости от используемого устройства, поэтому пользователям всегда доступна полная информация на сайте. В мобильной версии сайта часто урезают контент и функционал – это пагубная традиция, основанная на ошибочном мнении, будто потребности мобильных и обычных пользователей интернета чем-то отличаются.
Недостатки:
- Невозможность просмотра полной версии сайта
Когда сайт разделен на мобильную и настольную версии, пользователь получает возможность выбрать, какую версию просматривать со своего устройства. Адаптивная верстка не позволяет осуществить такой выбор и пользователь может просто покинуть сайт, если интерфейс сайта спроектирован неудачно. - Низкая производительность
Сегодня типичная страница сайта может весить от 1Мб и выше, так что скорость работы при медленном интернете может быть очень неудовлетворительной. Теоретически, такого объема можно избежать при разработке адаптивной верстки, однако на практике это не всегда удается.
Адаптивный веб-дизайн хорошо подходит для сайтов, ориентированных на контент – блогов, онлайн-журналов и т.п. Для сайта со сложным интерфейсом может быть целесообразнее разработать отдельную мобильную версию или мобильное приложение. Данный подход требует высокой квалификации как дизайнеров, так и разработчиков, внимательного проектирования и детального тестирования. Все это конечно значительно увеличивает сроки и стоимость разработки, но на выходе мы получим качественный веб-сайт и благодарных пользователей.
Примеры адаптивных сайтов
