Knowledge Bridge

//Шуба Бала /20 сентября / 2012

Создание интернет-сайтов для мобильных устройств: «отзывчивый» дизайн или специализированный мобильный?

В ситуации стремительного роста числа мобильных устройств все более популярным становится «отзывчивый» дизайн, позволяющий создать интернет-сайт, который автоматически настраивает свой формат и контент на устройство пользователя – в отличие от специализированных мобильных интернет-сайтов, которые перенаправляют пользователя на совершенно другой сайт, созданный специально для данного мобильного устройства. Вот мнение Richard Jones, технического директора i-KOS:

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

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

Брэд Фрост  сравнивает эти два сайта на основании пирамиды, предложенной дизайнером мобильных сайтов Кристофером Лэйтономi, которая демонстрирует последовательность свойств сайта (снизу-вверх: ДОСТУП – ИНТЕРАКТИВНОСТЬ – РАБОТА УСТРОЙСТВА — СОВЕРШЕНСТВОВАНИЕ).

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

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

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

И, наконец, что касается работы устройства – это особенно важно в странах, где мобильный интернет может быть недостаточно быстрым или где пользователи платят за объем скачанной информации. «Отзывчивый» дизайн не очень хорошо зарекомендовал себя в этом отношении. Согласно техническому директору blaze.io Гаю Поджарному, только 3% версий интернет-сайтов, предназначенных для небольших экранов, работают значительно лучше, чем аналогичные крупноэкранные версии. Работу вашего мобильного сайта можно протестировать на Mobitest.

«Отзывчивый» дизайн для новостных сайтов

«Газета The Boston Globe  одной из первых запустила инновационный «отзывчивый» интернет-сайт, наполненный контентом класса премиум. В то время как совсем несложно приводить примеры технически инновационных проектов крупных газет с внушительными бюджетами, таких как «The Boston Globe», тем не менее, есть и другие примеры. Весной этого года небольшой гуманитарный колледж в США создал версию студенческой газеты, используя «отзывчивый» дизайн. Два студента, работающих в газете «The Berkeley Beacon», использовали пример газеты «The Boston Globe» для создания низкозатратной версии газеты на основе «отзывчивого» дизайна. Она выглядит как печатная статья, при этом размер фото и текста каждой статья изменяется в зависимости от размера экрана устройства, на котором открыта статья.

Единственная стоящая перед ними проблема – это отсутствие рекламы при его просмотре на мобильных устройствах. Когда реклама все-таки будет размещаться, им надо будет постараться  не загромоздить минималистический макет сайта. Главный редактор газеты отметил, что не хотел бы портить впечатление пользователей от сайта только потому, что ему надо заработать много денег… Когда у сайта будет по-настоящему стабильный поток посетителей, тогда, может быть, можно будет начать размещение рекламы.  Другая студенческая газета —  Daily Californian, выпускаемая для Калифорнийского университета в Беркли и прилежащих районов, также перешла на «отзывчивый дизайн» в ходе модернизации своего сайта с использованием системы управления контентом WordPress.

Для более глубокого и детального ознакомления с подходами к «отзывчивому» дизайну можно обратиться к этому анализу  разработчиков сайта газеты «The Boston Globe», в котором они объясняют свой выбор программного обеспечения (InDesign) и почему они решили начать разработку с 960 пикселей,  используя это как базу для небольших экранов.

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

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

• определите группы планшетных устройств, для которых будут разрабатываться сайты;
• определите потребности ваших пользователей (через статистические данные или анкетирование пользователей). У вас, вероятнее всего, образуется две группы пользователей: «Я знаю, что я хочу» и «Я не знаю, что я хочу». Создайте сайт, который будет работать для обеих групп, с легкой навигацией и простой функцией просматривания.

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

Автор: Шуба Бала