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

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

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

Рынок интернет-технологий повсеместно захватывают разнообразные мобильные устройства. Посетителей сайтов с телефонов, смартфонов и планшетов становится все больше. Некоторые аналитики даже предрекают, что мобильный трафик скоро превысит трафик с обычных компьютеров. В свете подобных тенденций неразумно игнорировать этот сегмент интернет-пользователей и разрабатывать сайты, неприспособленные к современным гаджетам. Раньше лучшим решением этой проблемы было создание отдельной мобильной версии сайта. Но тогда все портативные устройства были небольших размеров, а сейчас их экранные разрешения пестрят разнообразием. Мобильный сайт, ориентированный на маленькие экраны будет смотреться неприглядно на планшете с 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Мб и выше, так что скорость работы при медленном интернете может быть очень неудовлетворительной. Теоретически, такого объема можно избежать при разработке адаптивной верстки, однако на практике это не всегда удается.

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

Примеры адаптивных сайтов


http://spigotdesign.com


http://forefathersgroup.com


http://www.smashingmagazine.com

Давайте дружить!
Поставьте нравится 👍
Спасибо, я уже с вами!
Звоните нам
Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.
Спасибо!
Мы свяжемся с Вами в ближайшее время
ЛОВИТЕ БОНУС
Бесплатный аудит контекстной рекламы Google Adwords.
Прокачаем ваш контекст!