Мы продолжаем тему адаптивного веб-дизайна статьей, рассказывающей о трех шагах на пути к созданию адаптивного веб-дизайна для вашего сайта.
Напоминаем, что ранее мы рассказывали о том, что такое адаптивный дизайн и зачем он нужен, а также приводили подборку из 10 вдохновляющих примеров красивого адаптивного дизайна сайтов НКО. Сегодня мы рассмотрим три шага, которые помогут вам в создании адаптивного веб-дизайна.
Представьте, что вы ужинаете с друзьями или, например, это деловой ужин, и вы так воодушевлены, что хотите показать сайт вашей организации. Вы достаете iPhone, открываете сайт, но вдруг оказывается, что сайт, открытый через телефон, выглядит некрасиво, или не читается, или колонки разъехались в разные стороны, или кнопки такие маленькие, что вам нужно увеличивать отдельные участки сайта, или все это сразу.
Не самое хорошее первое впечатление.
Почему адаптивный дизайн важен
Наверное, вы уже заметили, что таких мобильных устройств, как iPad, iPhone и Android, становится все больше, и, соответственно, людей, которые заходят в Интернет, используя такие устройства, тоже становится больше.
Так, 600 миллионов из 1 миллиарда пользователей Facebook заходят на сайт через мобильные устройства. Если рассматривать ситуацию с НКО, то, согласно недавней статистике, 15% трафика фандрайзинговых страниц и страниц с пожертвованиям в США приходятся на мобильные устройства.
Поэтому для НКО становится все важнее иметь адаптивный дизайн сайта, который будет удобен всем пользователям, независимо от устройств, которые они используют. Поверьте, если им не нужно будет уменьшать, увеличивать, поворачивать и совершать какие-либо еще манипуляции для того, чтобы прочитать вашу последнюю новость, они будут очень благодарны, и вероятность того, что они зайдут на ваш сайт снова сильно возрастет.
Три шага в создании адаптивного веб-дизайна
После того, как вы решили, что ваш сайт должен быть более адаптивным, вы можете последовать трем основным рекомендациям.
1. Определите, для чего вам нужна мобильная версия сайта
Определите, какие еще цели, кроме удобства и читаемости со всех устройств, есть у мобильной версии сайта. Спросите себя — будут ли у мобильных пользователей другие потребности, чем у тех, кто заходит на сайта с компьютера?
Например, пользователи сайта музея, которые заходят с мобильных устройств, вероятно хотят иметь быстрый доступ к расписанию и возможность купить билет с помощью телефона. Выстаивая структуру сайта таким образом, чтобы это было удобно сделать, вы увеличиваете количество потенциальных посетителей музея.
Подумайте о том, что могут захотеть сделать пользователи, посещающие ваш сайт, и организуйте его мобильную версию соответствующим образом.
2. Выберите подход
Существует три основных подхода к созданию адаптивного веб-дизайна.
1. Мобильная версия сайта. Создать мобильную версию сайта — это значит создать совершенно отдельный сайт, предназначенный только для мобильных устройств. Преимуществом этого подхода является то, что это версия только для мобильных устройств, и вы можете спроектировать ее таким образом, чтобы она была максимальна удобна для пользователей данных устройств. Недостатки — это затраты, как временные, так и денежные. Хотя, если вы пользуетесь WordPress, вы можете использовать плагин WP Touch, который автоматически создает мобильную версию сайта и позволяет выбрать, какие страницы будут отображаться, а какие нет.
2. Приложение. Мобильное приложение для вашего сайта может быть еще более удобным с точки зрения пользовательского опыта — за счет таких дополнительных функций, как доступ к сайту оффлайн, возможность настройки уведомлений, интеграция с социальными сетями и т.д. Обратной стороной также является высокая стоимость и необходимость постоянной работы с приложением. Кроме того, пользователям необходимо будет специально загружать приложение.
3. «Резиновый» дизайн. Это самый простой и дешевый подход к созданию адаптивного веб-дизайна. «Резиновый» значит то, что сайт автоматически изменяет размер и расположение содержания, в зависимости от размера экрана устройства, с которого его просматривают. Если вы используете WordPress, большинство платных тем, например, Headway, уже являются адаптивными.
3. Тестируйте после запуска
Безусловно, необходимо протестировать ваш мобильный сайт перед запуском, но важно также тестировать и после запуска. Основной причиной является то, что у вас очень мало информации (не считая гипотез) о том, как люди будут использовать мобильный сайт. Тестирование сайта после запуска поможет вам найти и устранить различные проблемы, и, соответственно, сделать ваш сайт еще лучше и удобнее.