Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

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

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

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

Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)