Роман Галкин

Мало кто может поспорить, что в ближайшие несколько лет число адаптивных сайтов возрастет в разы. По данным Омнибус GfK на конец 2014 года в России насчитывается более 80 млн. пользователей интернета, из которых 21 млн. для входа в сеть используют мобильные гаджеты. За год аудитория этих устройств выросла более чем в 2 раза, и нет сомнений, активный рост продолжится.

Не смотря на явную тенденцию, сегодня лишь 11-12% из 100 000 самых посещаемых сайтов адаптивные. Советуем прочесть эту статью, если по каким-то причинам ваш сайт режет глаза при просмотре на смартфоне.

Модернизация

Модернизация - термин, который в последние несколько лет выпал из общественного, но не техно-лексикона. Модернизировать обычный сайт в адаптивный часто бывает единственно доступной стратегией, поскольку клиенты не всегда хотят отбрасывать рабочий сайт и создавать новый. Кроме того, зачастую компании не готовы к ребрендингу и тотальной смене дизайна. Это основные причины выбора модернизационного пути.

Плюсы

  • Быстро
    Адаптивную модернизацию можно провести многими способами, зачастую на сайт просто добавляется small-screens.css.
  • Знакомо
    Клиенты годами пользовались сайтом, пожалуй, не стоит рушить их мир новоделом.
  • Организационно быстрее
    Какой оттенок серого выбрать? Какие заливать фото? – на обсуждение этого уйдет гораздо меньше времени, если отталкиваться от готового сайта.
    В конце концов, это позволяет быстрее запускать модернизированную стриничку в работу.

Минусы

  • Отсутствие комплексного подхода
    Цели модернизации чаще всего сводятся к «быть не хуже соседа», сделать все «симпатичнее». Фокусируясь лишь на переделке макета, легко упустить множество важных моментов, влияющих на юзабилоити.
  • Избыточная содержательность
    Сайты для ПК рассчитаны только на ПК. В течении своей долгой жизни они накапливают много мусора. Если модернизация сводится к переделке макета, то проблемы с контентом останутся не решенными.
  • Худшая поддержка
    Большинство мобильных устройств плохо поддерживают медиа-запросы, изначально созданные для стационарнеых компьютеров.

Адаптивные мобильные сайты

Мобильная версия даст возможность посадить семя, которое прорастет из устаревшего сайта. Со временем устаревший сайт можно удалить, а изначально мобильный адаптивный будет развиваться.

Плюсы

  • Минимизирует риски
    Многие компании видят, что трафик на их сайты с мобильных устройств пока составляет меньшинство. Поэтому запуск мобильного адаптивного сайта позволяет прощупать тему без угрозы основному сайту.
  • Новые возможности
    В процессе работы над адаптивным сайтом команда постигнет новые грани web-мастерства, что благотворно скажется на конечном результате. Дизайнерам и разработчикам, менеджерам и копирайтерам придется трудиться в нестандартном формате и придумать новые оригинальные решения.
  • Ревизия
    Работа в по-новому поможет переосмыслить подход к взаимодействию с пользователем, сократить расстояние между вами. Ревизия помогает взглянуть под другим углом на контент и убрать лишнее.
  • Будущее за мобильными устройствами
    В этом нет никакого сомнения, а значит и сайты должны быть адаптивными.

Минусы

  • Мобильный недосайт
    Адаптивным или нет, но минусов мобильных сайтов никто не отменял: проблемы с перенаправлением URL, кривой адаптацией, последовательностью, SEO и т.д.
  • Сайт-времянка
    Большинство мобильных сайтов работают как пластырь — чтобы остановить кровотечение. Они помогают разгрузить растущий трафик с мобильных устройств. На какое-то время это поможет, но ненадолго.
  • Долгострой
    Некоторые компании могут начать создавать мобильный адаптивный сайт, но бросить все на полпути, пока не будет принят очередной годовой бюджет.
  • Дизайн для маленьких экранов
    С дизайном могут возникнуть большие проблемы. Скорее всего, его придется существенно перерабатывать под маленький экран.

Разработка с чистого листа

«Сначала мобильные» — современный принцип, подразумевающий разработку интерфейса, который изначально будет учитывать ограничения мобильной среды, но использующий все преимущества больших экранов.

Плюсы

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

  • Лучшая поддержка
    МРазработчики способны обеспечить поддержку большего количества мобильных устройств, особенно более старых, которые не поддерживают медиа-запросы.
  • Производительность
    Адаптивные проекты для мобильной среды изначально дают командам возможность акцентировать внимание на производительности.
  • С учётом всего и сразу
    В последнее время сайты для ПК визуально напоминают сайты для мобильных устройств, прежде всего прокруткой и минимализмом. Создавая сайт по принципу «Сначала мобильные», вы можете использовать найденные решения для всех типов устройств: мобильных и стационарных.
  • Перспективный дизайн
    Отталкиваясь от интерфейса, разработанного для мобильных устройств, вы создаете прочный фундамент для будущего роста и изменений.

Минусы

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

Этапы создания адаптивного сайта

Есть несколько методов поэтапного создания адаптивного интерфейса. Разберем их:

Вариант #1. «Page-to-Page эволюция»

Интересный метод, подразумевает создание подгруппы. Некоторым компаниям достаточно нескольких адаптивных ключевых страниц, а большинство внутренних страниц оставляется только для настольных компьютеров. Так, например, часто делают в Microsoft.

Плюсы

  • Заметно
    Запуск адаптивных версий самых просматриваемых страниц (например, лендингов), демонстрирует обновленный дизайн большинству пользователей.
  • Шанс запустить проект
    Сконцентрировать внимание пользователя на одной странице – отличный способ посмотреть результат изменений при минимальных трудозатратах.

Минусы

  • Отсутствие целостности
    Если бы была необходимость придумать демотивирующий лозунг для Page-to-Page модели, он бы звучал так: «От модного нового дизайна к уродливому старому в один клик!».
  • Не навреди
    Дабы не изуродовать сайт, перед началом разработки проведите небольшой аудит: просчитайте затраты сил и средств, оцените время на выполнение задачи. Иначе будет мешанина.

Вариант #2. «Unit-to-Unit»

Некоторые выбирают модульный подход. К примеру, для начала делают адаптивными заголовок или подвал, а потом идут дальше. Мета-тег просмотра переключается, только когда весь интерфейс становится адаптивным.

Плюсы

  • Постепенное развитие
    Поэтапный переход к адаптивности постепенно открывает пользователям новые возможности и дизайн сайта, таким образом одномоментное изменение не вызывает шока.
  • Разбивка процесса.
    Решать проблему модулями эффективнее, цели и задачи ясны и обозримы в ближайшей перспективе.

Минусы

  • Несоответствие архитектуры модулей
    Когда современный модуль сталкивается лбом с устаревшим часто возникают проблемы с архитектурой сайта.
  • Необходимость концепции
    Модульный подход все-же не позволяет не прописывать концепцию всего сайта целиком.

Итог

Какую бы стратегию приведения к адаптивности для вашего сайта вы не избрали, помните, сайт всегда должен представлять собой одно целое. Это сложная работа, которая требует времени и опыта. Однако результат того стоит.

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