Собираем аналитику
Самый важный и объёмный этап в любом проектировании – сбор необходимой информации. Первое, наверное, с чего стоит начать – это проанализировать, что сейчас происходит и куда стремится
Начинаем с малого – открываем статистику своего сайта и смотрим на отчёты по пользователям.
В Google Analytics: Аудитория -> Мобильные устройства.
В Яндекс Метрика: Отчёты -> Стандартные отчёты -> Технологии -> Разрешения дисплея.
В LiveInternet: Разрешение
Скриншоты не вставляю, т.к. интерфейсы постоянно обновляются, а логику стараются отставить прежней. Да и аналитика у Вас может быть своя.
На что там нужно смотреть? Смотрим мы там на тенденции изменения значений. Т.е. количество каких устройств и разрешений экранов растёт за последний месяц, квартал, полгода.
После анализа своих данных стоит осведомится и о том, куда же катится Мир. В первую очередь нужно ориентироваться на ту аудиторию, на которую нацелен Ваш сайт. Например, примерную статистику по RuNet можно посмотреть у LiveInternet. Статистику по ByNet часто выкладывает команда Gemius и публикуют на marketing.by. Мировые же тенденции стоит поискать в Google.
После анализа статистики выбираем те устройства и разрешения, упор на которые мы будем делать, адаптируя свой сайт. Можно, конечно, выбирать по принципу «у меня и у моей Жены iPhone, значит делаем в первую очередь под них». Но в этом случае Вы рискуете упустить большую и важную аудиторию, что неминуемо скажется на посещаемости и продажах. В прочем, дело барское. Так тоже можно.
Ищем решения
Важное правило маркетинга – «подсмотри у конкурента». Когда у компании нет конкурентов, её маркетолог по ночам плачет.
Самые удобные и адаптивные интерфейсы под мобильные устройства проектируются с нуля. Т.е., чтобы сделать себе идеальную мобильную версию, её нужно либо делать отдельно от существующего сайта, либо менять дизайн и концепцию всего сайта. Адаптация сайта – это, своего рода, компромисс, и если вы на него пошли, то придётся пользоваться тем, что есть. И прежде чем придумывать велосипеды стоит посмотреть, как же этот компромисс построен у других.
Помимо прямого анализа сайтов конкурентов, можно поискать их на similarweb.com , и за одно глянуть на то как сервис оценивает Ваш собственный сайт. Так же стоит посмотреть на гигантов в Вашей индустрии. Однако, ориентируясь на крупные компании стоит также учитывать и возможные бюджеты их решений, а также и то, что никто не идеален и они тоже могут ошибаться. Как смотреть поведение сайта на мобильных устройствах можно почитать в статье как быстро и просто проверить адаптивность сайта.
Применяем
После того как мы насмотрелись на статистические данные, на чужие сайты и их чужие решения, стоит как минимум ночь переспать. Да, нужно дать мозгу время переварить полученные данные и разложить их по нужным полочкам.
После того, как информация в голове улеглась и пыль осела, открываем в браузере свой родной сайт и смотрим, где у Вас стандартные блоки и элементы, где нестандартные. К стандартным примеряем уже готовые решения, подсмотренные на соседних сайтах, к не стандартным применяем алгоритм типа: сместить, уменьшить, удалить.
Сместить
По ходу уменьшения размера экрана смотрим куда мы можем переместить текущий элемент. Здесь нужно понимать, что легко и просто переместить блок с низа сайта в его верх не получится. Стандартное поведение блоков при уменьшении экрана – это правые передвигаются под левые. Однако всегда возможны варианты и есть исключения.
Уменьшить
По ходу уменьшения размера экрана смотрим, где какие отступы можно уменьшить, какие размеры шрифтов изменить, как ужать картинки и видео.
Удалить
К этому этапу стоит подходить очень аккуратно. Можно скрывать элементы дизайна без потери информативности, или заменять их на другие. Однако, что касается функционала или информации, то прежде чем что-то скрыть задумайтесь: почему данная информация или функционал не важны пользователям на телефонах, и нужно ли тогда это добро вообще на сайте?
Перед внедрением
После создания образов своего адаптивного проекта имеет смысл спросить у исполнителя: «на сколько это всё реально?». Обычно в веб-разработке нет ничего нереального, но реальность сильно зависит от бюджета. Если бюджет ограничен, то, возможно, стоит поискать другие решения и, желательно, вместе с исполнителем.
Так же, есть смысл провести небольшой опрос на 10-15 человек, желательно входящих в целевую аудиторию (ЦА) Вашего бизнеса. Важно узнать их желания и потребности.
Рекомендуется ещё провести небольшое тестирование. Для этого нужно либо создать тестовую версию сайта, либо просто сохранить страницу вашего сайта в статический HTML и попробовать адаптировать её.
Резюме
Проектируя адаптивную версию своего сайта рекомендую ориентироваться всё же на свою целевую аудиторию и её комфортный доступ к Вашей информации. Не стоит мельчить и перенасыщать информацией экраны телефонов. Лучше меньше, но по делу и со смыслом.
На этом всё. Удачи в проектировании и адаптации!
PS:> Ещё можно прочитать про то, что нужно знать, чтобы самому адаптировать свой сайт, и как быстро и просто проверить адаптивность своего сайта.
PS2:> Вы всегда можете обратиться к нам, если нужна профессиональная помощь или консультация по адаптации Вашего сайта.