На данный момент большинство разработчиков предлагают создание дополнительной мобильной версии сайта. Однако с каждым днем новых девайсов становится все больше и версии сайтов приходится постоянно дорабатывать, теряя при этом время, деньги и посетителей. Раньше и наше агентство предлагало подобные решения клиентам, которым небезразлична аудитория мобильного интернета. Но немногим более года назад мы открыли для себя новый подход к разработке более гибких сайтов, основанный на принципе «Mobile first», принципе, на котором строится уже большая часть зарубежного веба - мы начали создавать сайты с адаптивным веб-дизайном. Теперь мы хотим поделиться опытом на примере выпущенного недавно адаптивного сайта для компании «ЦРТ Сервис», входящей в группу компаний MAYKOR.Мы не будем детально углубляться в этапы разработки, а расскажем, почему был выбран именно адаптивный вариант сайта, об особенностях разработки проектов с адаптивной версткой, и о тенденциях, которые не должны оставить владельцев интернет-ресурсов равнодушными.Дизайн и проектированиеКогда мы только приступали к разработке сайта «ЦРТ Сервис» для клиента была подготовлена дизайн-концепция рассчитанная на мониторы обычных ПК. Общую идею одобрили, и все последующие правки мы вносили именно в этот десктопный вариант сайта, который выглядел следующим образом:Однако погрузившись глубже в проект, мы осознали охват компании: 82 филиала в регионах РФ! Более 350 клиентов и 2 000 инженеров компании регулярно получали информацию и взаимодействовали друг с другом посредством сайта. А это означает, что будущий сайт должен был учитывать интересы всех пользователей осуществляющих выход в интернет с различных устройств: обычных компьютеров, коммуникаторов, планшетов и др. Мы пересмотрели стандартный подход к проектированию, и пришли к выводу о необходимости разработки сайта, который посредством «умной» верстки умеет адаптироваться под разные типы устройств, а его контентом одинаково удобно пользоваться на любом девайсе. Именно такой подход к созданию нового сайта компании мы предложили, и заказчику понравилось это решение.Но сразу же возникла проблема - исходный дизайн, утвержденный с заказчиком, не был приспособлен к адаптации и, дойдя до дизайн-макетов сайта для мобильных версий, нам пришлось значительно пересмотреть все то, что было сделано ранее. Мы формировали микроструктуру контента, разбивая текст на элементы в порядке приоритета: основные блоки, которые будут отображаться в мобильной версии и дополнительные, появляющиеся по мере увеличения разрешения экрана. Вместо того чтобы сжимать и перемещать контент, мы его сокращали, избавлялись от лишних блоков и оставляли только самое важное. По сути, мы прошли путь «компьютер-мобильный-компьютер» — сделали один лишний виток, и в итоге прочувствовали все особенности работы над адаптацией контента. Всего в процессе работы дизайнеры создали более сотни различных макетов сайта для устройств с индивидуальными разрешениями.Поведение контента при адаптивной верстке«Мы создавали макеты сайта по принципу «mobile first», продумывали логику появления различных блоков сначала для мобильных устройств и только затем для обычных компьютеров, чтобы технически предусмотреть приоритеты отображения того или иного контента, сохранив общий смысл и посыл сайта», - комментирует креативный директор AGIMA Григорий Коченов. ВерсткаДля корректного отображения сайта на разных устройствах на этапе верстки было необходимо учесть не только особенности браузеров, но и различных ОС и разрешений экрана. Разработчики использовали JavaScript и различные CSS стили, которые подключаются в зависимости от девайса, с которого осуществляется вход. Таким образом сайт автоматически распознает разрешение экрана устройства, с которого на него зашли, его тип, подключает/отключает различные элементы, изменяет размер шрифтов и ширину блоков, подключает/отключает анимацию. Следовательно, страница отображается с учетом адаптации к устройству.Статистика, выводы, практические рекомендацииКоличество пользователей мобильных устройств в России уже достигло отметки в 40 млн. человек, а продажи коммуникаторов и планшетов в мире в 2011 году превысили сумму проданных ПК и ноутбуков. С каждым годом количество заходов на сайты с мобильных устройств растет в 3 раза. Стоит задаться вопросом: эффективен ли ваш сайт на мобильных устройствах в той же степени, что и на ПК? Проведите эксперимент и зайдите на ваш сайт с мобильного телефона или планшета. Попробуйте найти интересующую вас информацию, заказать услугу или оформить покупку. Сложите время и усилия, затраченные на масштабирование страницы, поиск необходимой информации и переход по мелким неразборчивым ссылкам. Если результат вас не устраивает, есть над чем задуматься.Когда вы пришли к выводу, что ваш ресурс нуждается в адаптации под различные типы устройств, рекомендуем подготовить свою проектную команду к скрупулёзной работе: копирайтерам предстоит продумать динамику поведения контента; проектировщикам и дизайнерам — рисовать сайт, используя непривычную для них ранее схему «mobile first». По этой теме мы советуем прочитать статью «Контент, готовый к адаптации» О причинах выбора адаптивного подхода к веб-дизайну, особенностях взаимодействия в проектной команде и результатах работы, рассказала Ирина Семенова, вице-президент по маркетингу группы компаний MAYKOR на конференции Digital без Силикона.
Статьи по теме
Команда аналитиков IAB Russia и Яндекс Дзен проанализировала рынок интернет-маркетинга в РФ. В ходе исследования были проанализированы нюан...
2022-05-18
Ведущие специалисты АКАР проанализировали развитие рекламного рынка РФ в ушедшем году и резюмировали итоги. По мнению аналитиков, общи...
2022-05-18
По данным экспертов компании SlickJump доля мобильного трафика в Рунете в первом месяце весны этого года увеличилась на 4% и достигла рекордн...
2022-05-18
Специфика алгоритмов в социальной сети Instagram такова, что чем больше пользователей просмотрит сторис до конца, тем выше в итоге окажутся ...
2021-04-22
Ваш сайт был запущен совсем недавно? Тогда одной из первоочередных задач является привлечение на площадку клиентов. Сделать это нужно к...
2021-04-20
Таргетинг в социальных сетях − это мечта представителей бизнеса, которая стала реальностью благодаря системе myTarget, появившейся в 2018 го...
2021-03-16
Ушедший год оказался не самым простым для предпринимателей и прошёл под знаком пандемии коронавируса. Многие были вынуждены привыкать ...
2021-02-01
Интернет-магазин в Instagram: как его открыть?
Социальные сети − площадки, на которых можно успешно вести бизнес онлайн. Instagram не является ис...
2020-10-05
За внимание пользователей ведут активную борьбу не только интернет-магазины, порталы, поисковые системы, но и социальные сети. Они тоже ...
2020-03-19
Не все принципы роста продаж обычного магазина работают для онлайн-бизнеса. Клиент не может потрогать и оценить реальный вид товара или ...
2020-02-27
Одной из особенностей последнего года стало существенное повышение спроса на рекламу в разнообразных геосервисах. Это неудивительно, в...
2020-02-25
Традиционно начало нового года становится временем прогнозов. Сфера интернет-маркетинга не является исключением. Какие тренды будут ха...
2020-01-15
Представители бизнеса для распространения информации о своих товарах и услугах используют разные площадки. Реклама размещается на авт...
2019-05-23
Поисковая система Яндекс разработала много сервисов, которые пригодятся при продвижении сайтов, предлагающих услуги или продающих тов...
2019-04-12
Рынок мобильных приложений в последние годы демонстрирует значительный рост и не планирует останавливаться на достигнутом. Пользовате...
2019-03-27