Прежде всего, подготовка — это ключ к успеху. - Александр Грэм Бэлл.

 

 

Кажется, что технологии развиваются в мгновение ока, оставляя позади многие «достижения». Тем не менее, некоторые из этих достижений укореняются и начинают развиваться в тандеме.

 

Адаптивный дизайн — пример такой развивающейся технологии. Рост мобильных технологий привел к необходимости упростить веб-браузинг  для растущего числа людей, пользующихся мобильными устройствами для выхода в интернет. Адаптивный дизайн позволяет вам разместить контент на тысячах экранах различных размеров, а также платформах, и все это с единой кодовой базой. Это требует принципиально нового подхода к планированию такой мульти-экранной системы. От стадии планирования до разработки, внедрение адаптивного веб-сайта требует продуманного подхода, чтобы прийти к успеху.

 

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

 

 

 

Восхваляйте ценность адаптивного дизайна.

 

Пользование мобильным интернетом скоро превысит показатели пользования интернетом через компьютер, так как его показатели, согласно StatCounter Global Stats, ежегодно увеличиваются на 66% (график справа, нажмите для увеличения). С 2010 года использование компьютера неуклонно снижается до уровня ниже 75%, в то время как пользование мобильными технологиями увеличилось более чем на 23% (1.6 миллиарда человек).

 

Эти цифры требуют действий, а адаптивный дизайн в данной ситуации является решением.

 

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

 

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

 

2. Лучший пользовательский опыт. Адаптивный дизайн — это изменчивый дизайн. Это касается не только отражения на мобильном экране; это касается также и уверенности в том, что навигация оптимизирована, а контент и функциональность работают в контексте и по тому сценарию, который идеален для использования вашей целевой аудиторией, независимо от используемого устройства. Ким Соенлейн, глава отдела аттестации и технологий Американского Колледжа ветеринарных хирургов (АКВХ)объясняет: «Мы меняли направленность нашего сайта с ориентированного на привлечение новых членов на ориентированный на владельцев животных. Адаптивный сайт принес нам большой успех в обеспечении ресурсами владельцев животных. Это помогло нам удовлетворить требования наших членов, которые хотели чтобы мы сделали упор на маркетинг, и сделали контент более доступным».

 

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

 

 

 

Максимизируйте обмен сообщениями.

 

Каждый проект по созданию адаптивного веб-дизайна также является проекта создания стратегического контента. Даже самый лучший адаптивный сайт не исправит контент, который не является сильным, остроумным или стратегическим. Поэтому очень важно заранее оценить - и скорее всего реструктурировать — ваш контент. Реорганизация контента также полезна для выгодной коммуникации.

 

«У нас была маленькая команда которая проводила консультации по стратегии контента для наших собственных сотрудников на темы, которые были для нас приоритетными. Они обсуждали, каким образом контент должен лучше всего отражаться на экранах мобильных устройств» - говорит Пекулас.

 

Были привлечены сотрудники АКВХ, между которыми были распределены конкретные обязанности. «Наши сотрудники изучали информацию о том, как писать для всемирной сети, а также об адаптивном дизайне, так что мы знали, что необходимо для поддержания адаптивного сайта. - говорит Соенлейн. - Мы поручили написание материала каждому сотруднику, и это действительно было успешно. Мы убедились, что каждый научился правилам написания такого рода материалов. Система простой передачи контента разработчику для его дальнейшей обработки не сработала бы».

 

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

 

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

 

 

 

Ответ пользователю

 

Обратите внимание на аналитику. Что люди читают и что ищут на вашем сайте? Это отвечает вашим целям? Исходя из полученных данных сделайте это объектом первоочередного внимания для организации и постройте макет вашего нового адаптивного сайта.

 

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

 

Процесс построения каркаса важен при проектировании удобного сайта. Каждая ключевая станица вашего сайта должна иметь три каркаса, включая макет и иерархию контента для телефона, планшета или компьютера.

 

«Есть один подводный камень, которого стоит избегать: тратить все время на разработку шаблона сначала для большого экрана, прежде чем приступить к работе над экранами меньшего размера. - говорит Пекулас. - Мы столкнулись с необходимостью пересмотреть это в процессе разработки и настроек внешнего вида сайта. Мы не меняли ничего кардинально, но это стало для нас опытом».

 

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

 

 

 

Используйте правильные инструменты

 

Не все инструменты были обновлены, чтобы в полной мере поддерживать адаптивный дизайн? Поэтому заранее проверьте, что ваша система управления контентом (например, Drupal, Joomla и WordPress), автоматизированная система управления и другие инструменты будут способны поддержать его.

 

«У нас была большая проблема, связанная с интеграцией адаптивности с нашей АСУ. - говорит Соенлейн. - Страницы выглядели немного иначе и не всегда работали так как в АСУ. Мы много работали над настройками внешнего вида и чувствовали, что страницы в АСУ похожи, но не одинаковы. Было сложно безболезненно провести интеграцию внешнего вида. Не хотелось бы столкнуться с этим еще раз».

 

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

 

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

 

Ваши технологии должны идти в ногу с развитием вашей аудитории.

 

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