Корпоративный сайт и адаптивный дизайн

Лавинообразный рост просмотра сайтов компаний и организаций с мобильных устройств обусловлен как увеличением доли смартфонов (оснащённых браузерами с вполне развитой функциональностью) среди средств сотовой связи, так и повсеместным распространением безлимитного мобильного Интернета на высоких скоростях (3G — 3.5G — 4G). Это диктует новые требования к разработке и вёрстке корпоративных сайтов.

Некоторое время господствовало решение, когда на корпоративном сайте разрабатывалась отдельная мобильная версия (с упрощённой структурой, навигацией, дизайном, облегчёнными элементами оформления и функциональностью). Это было оправдано для мобильных браузеров с усечёнными возможностями. Но это решение обладало и рядом недостатков: например, поскольку поисковые системы индексировали такие мобильные версии охотнее (контент на них был доступнее и составлял бо́льшую долю кода страницы), и потому мобильная версия в выдаче занимала приоритетное место перед версией обычной, приходилось мобильные версии закрывать от индексирования (что нередко лишало посетителя возможности найти сайт через поисковую систему с мобильного устройства). Увеличивались и затраты на администрирование сайта с двумя версиями.

На смену этому решению пришло более удобное — адаптивный дизайн. Что это такое? Адаптивный дизайн — это дизайн (способ проектирования и вёрстки страниц сайта), при котором сайт адаптируется к устройству, на котором отображается. Иными словами, одна и та же страница, с одним и тем же кодом, выглядит по-разному на экране компьютера и на экране смартфона. То есть, у сайта остаётся только одна версия, подстраивающаяся к устройству вывода.

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

К примеру, с распространением мышек с колёсиком скроллинга разработчики сайтов стали верстать страницы так, чтобы при их показе не возникали горизонтальные полосы прокрутки (посетителю удобно прокручивать страницы в высоту, но неудобно в ширину), вплоть до минимально допустимых размеров экрана по ширине. В мобильной же версии горизонтальная прокрутка стала совершенно недопустима, поскольку в большинстве современных мобильных браузеров перетаскивание страницы пальцем по горизонтали отрабатывается чаще всего как перемещение по истории просмотра страниц.

Как реализуется адаптивный дизайн?

Первое, с чем сталкивается разработчик сайта в адаптивном дизайне — это необходимость понять, с какого устройства посетитель зашёл на сайт. Раньше для этого применялись разнообразные программные скрипты (выполняемые как на сервере, так и на стороне клиента), определяющие тип и марку устройства, размеры и ориентацию его экрана и т.д. Их всё ещё в обилии можно найти в Интернете. Однако, эти скрипты обладают свойством быстро устаревать — ведь количество и разнообразие марок устройств растёт в геометрической прогресии.

Поэтому более продуктивным оказывается подход, когда сайт подстраивается не под устройство, а под размеры экрана, на котором отображается. Сегодня, если ширина экрана определилась в 640 пикселов и менее, мы с очень высокой вероятностью имеем дело именно с мобильным устройством. Кроме того, большинство мобильных браузеров имеют в своей идентификационной строке слово “mobile”, и это тоже можно использовать для идентификации условий показа сайта.

Разумеется, элементы страниц должны быть свёрстаны так, чтобы подстроиться под размеры клиентского экрана. А размеры ссылок, кнопок и тому подобных управляющих элементов интерфейса страницы должны быть заметны и обладать размерами, удобными для нажатия пальцем. При проектировании интерактивной функциональности страницы следует помнить, что в мобильных браузерах нет состояния наведения указателя на элемент — только клик (тап) по нему. К сожалению, автору этих строк доводилось попадать на сайты, где, к примеру, выпадающее меню активизировалось только при наведении мышки — и потому оказывалось недоступным на мобильном устройстве.

Особое внимание следует уделить формам (например, формам обратной связи, систем заказа, подписки или поиска товаров в каталоге). Часто эти формы удобны для работы на полной версии сайта, а в мобильной версии взаимодействие с ними совершенно мучительно.

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

Несмотря на рост скорости и падение ограничений на трафик мобильного Интернета, следует уделять внимание общему весу страниц. По этой причине следует минимизировать загрузку тяжелого контента, особенно иллюстративного и мультимедийного, не использовать флэш (многие мобильные браузеры с ним и не дружат, кстати), видео- и аудио-ролики должны запускаться на воспроизведение не автоматически, а только по команде пользователя.

При тестировании или сдаче заказчику сайтов, рассчитанных на работу в мобильной версии, удобство работы с интерфейсом получает определяющее, ключевое значение. Нужно обязательно проверить на смартфоне работу сайта от начала и до конца всех необходимых сценариев пользовательского поведения — от входа на сайт до поиска нужного товара в каталоге, оформления и отправки заказа. В отличие от развлекательных и информационных сайтов, у корпоративных сайтов основная задача — продавать (или содействовать продажам), а значит, ошибки в реализации этой функции выливаются в потерю конкретных денег. У современных корпоративных сайтов главный лозунг — «Очевидность, простота, удобство». Именно такие сайты продают, тем самым оправдывая и окупая своё существование.

Кстати, в Консалтинговой Группе «АРМ» все корпоративные сайты с 2015 г. разрабатываются в обязательном порядке с адаптивным дизайном.