Адаптивный сайт – это тренд или необходимость современности?

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

В 2010 году в США в ответ на эту растущую потребность зародился адаптивный дизайн (responsible web-design) – такая разработка сайта, когда его становится удобно смотреть с любого мобильного устройства. С 2012 года адаптивные сайты стали мейнстримом, а традиционные мобильные версии ушли на второй план.
Создание адаптивного сайта происходит с помощью специфических функций устройств, подвижной структуры и адаптивных изображений. Такой дизайн не только подстраивает страницы под маленькие экраны за счёт сокращения таблиц и картинок, но и учитывает интересы читателей в зависимости от того, с какого устройства они посещают сайт: меняется расположение и вид разделов, отключаются декоративные элементы, уменьшаются размеры иллюстраций.  В результате получается новая архитектура сайта, универсальная для всего спектра устройств.
Учитывая, что обычными сайтами, как и адаптивными, можно пользоваться на любых планшетах и смартфонах, возникает вопрос, насколько оправдана эта «гонка» владельцев сайтов за адаптивным дизайном.

Рич Брукс, создатель веб-агентства «The Marketing Agents», уверен, что адаптивный дизайн – не панацея, и перед принятием решения о создании адаптивной версии следует понять её недостатки:

• Не все запросы пользователя могут быть учтены в мобильной версии или он не сможет их найти на небольшом экране. Это может привести к сокращению числа пользователей.
• Увеличение времени загрузки сайта. Масса информации загружается на мобильное устройство, но не вся она нужна пользователю, а вот высокая скорость нужна всем. Многие факторы, например, Java-скрипты или CSS-файлы, затрудняют загрузку страниц.
• Отсутствие возможности посмотреть полную версию ресурса. Многие пользователи привыкают к одному положению разделов и дизайну, но адаптивная версия не подразумевает переход на полный сайт.
• Нет гарантии, что адаптивный сайт ждёт такой же успех, как удачная версия для ПК, а денег и времени на его разработку будет потрачено много.

Советы для процесса адаптации сайта от известного американского дизайнера Кендра Гейнса:

• Уменьшайте только те изображения, которые не несут особую информативную нагрузку. Рекламные блоки и любая анимация должны быть удалены, но стиль сайта должен оставаться неизменным. Большие всплывающие окна могут отпугнуть пользователей.
• Для привлечения внимания читателей к определенному блоку используйте разные шрифты и разный размер. Следует помнить, что задачи пользователя сайта на компьютере и на телефоне различаются. Например, контакты владельцев в адаптивной версии должны быть выделены ярче, чем на сайте для ПК.
• Оставляйте качественные иллюстрации в высоком разрешении, недопустима обрезка и сжатие фотографий.
• Продумайте навигацию. Ссылки на 2-3 раздела можно разместить на главной странице. Если разделов больше 10, разместите их в выпадающем меню или во втором ярусе шапки сайта. Для примера можно взять сайты компаний Monocle или Mashable.

• Выделяйте главную страницу цветом, интересным текстом или яркими изображениями.
• Не повторяйтесь. Откажитесь от приёмов конкурентов, ищите свою изюминку.

Лучшие примеры адаптивных сайтов

Далеко не все крупные мировые корпорации, например нефтегазовые компании, имеют мобильные версии своих сайтов. Обратная ситуация с фирмами, чей доход зависит от качества и доступности сайта.
Эксперты журнала «Net Magazine» признали лучшим адаптивным сайтом 2012 года сайт компании BBC News. Технологии прогрессивного изменения были активно использованы при создании этого ресурса. Сайт очень быстро загружается, и пользователь видит только главное изображение, не перегруженное информацией.

Передовые журналы «The Boston Globe» и «Time» предлагают адаптивные сайты новостей, которые повторяют свой уникальный стиль на любых мобильных устройствах. Для удобства пользователей есть возможность масштабирования текста.
 

 


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


Группа компаний «Восток-Сервис», владеющая несколькими швейными и обувными фабриками, одна из первых в России создала адаптивный сайт, способный меняться под любые разрешения экрана. При изменении окна содержание сайта приспосабливается под потребности пользователя, меняются контентные блоки и способ отображения главного меню.
 

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

Заключение

Безусловно, грамотно адаптированный сайт превосходит статичную мобильную версию. Он уже заранее готов к будущему, несмотря на то, какое чудо-устройство изобретут завтра. Однако, не всем владельцам сайтов необходим выход на мобильный рынок.
Нюансов, на которые следует обратить внимание перед созданием адаптивного сайта, очень много, и не каждый бюджет способен выдержать такой объём работ. Несмотря на растущую популярность и достоинства адаптивного дизайна, веб-дизайнеры с мировым именем советуют хорошо подумать перед принятием решения, которое зависит как от рыночной ситуации, так и от веб-аналитики. Если на сайте есть проблемы или рейтинг невелик, есть смысл вложиться в реконструкцию полной версии, а не создавать мобильную. С уверенностью можно сказать, что адаптивный сайт нужен электронным журналам, новостным ресурсам и Интернет-магазинам, где показатели просмотра высоки и подтверждают интерес посетителей сайта. В этом случае адаптивность поможет развитию сайта и повышению количества пользователей.
Еще больше полезных статей о бизнесе, маркетинге и личной эффективности читайте в нашем Блоге - http://creative-technology.ru/blog/.</i>