Звоните
Пишите
Общайтесь

Статьи

29 мая 2012
Мобильные версии сайтов: выбор и реализация процессов и стратегий

Мир становится мобильным, и создатели сайтов вынуждены подстраиваться под новые стандарты. Теперь для выхода в Сеть используются совершенно новые устройства.

Независимо от ваших методов, мобильное окружение довольно своеобразно: обширное информационное пространство, которое не имеет четких границ и стандартов, даже самый опытный разработчик не может быть уверенным в результате своей работы. Как же поступить?

Используйте только проверенный код

Именно о хорошем коде говорится в руководстве от Opera по оптимизации сайтов для мобильных устройств.

Не создавайте специальный сайт для мобильных устройств

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

Используйте валидный код HTML вместе с таблицами CSS 2 и 3, а также стандарты WCAG AA, и вы получите базовый сайт, который будет адекватно просматриваться как на смартфонах, так и на планшетах.

Что такое WCAG AA и чем поможет этот стандарт

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

Пропишите в коде такие нюансы:

Заполните поле «Alt» для изображений: опишите, что на картинке, чтобы пользователь мог не ждать ее загрузки.

Установите «onClick»: функция заменяет мышку, и пользователю не нужно использовать дополнительное устройство для клика на объект.

Контрастность: убедитесь, что текст виден на основном фоне сайта.

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

Конечно, использование HTML + CSS + WCAG AA ― не панацея, но это первый шаг к тому, чтобы сделать ваш сайт доступным для большинства мобильных устройств. Кроме того, подобные изменения в коде помогут почистить ваш ресурс, что особенно необходимо в свете последних событий ― после апгрейда алгоритмов Panda и Penguin.

Создание двух сайтов

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

Один URL: особенности восприятия Bing и Google

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

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

Варианты контента

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

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

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

Вывод

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

Гибкий дизайн: один сайт, чтобы править миром

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

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

Будущие испытания

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

Добиться гибкости позволит применение HTML5 ― это удобный, доступный и прозрачный код. С его помощью сайт будет корректным, приспособленным для постепенного расширения и перенастраивания.

Итак, что же такое «гибкий дизайн»?

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

Таким образом, сайт должен меняться в зависимости от устройства, на котором его просматривают. Должны учитываться размеры экрана, тип техники, используемый браузер для того, чтобы код сделать универсальным. Например, параметры «Media Queries» в таблице CSS 3:

Данные настройки позволяют контролировать, как стили из таблицы отображаются на используемых устройствах. Только для начала убедитесь, что ваша базовая система поддерживает «Media Queries».

С помощью этих настроек вы также можете отключить те функции, которые не хотите загружать в браузер (но это не то же самое, что «display: none» или «visibility: hidden» в CSS. В этих случаях загрузка все-таки происходит).

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

Отображение вашего сайта

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

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

Прогрессивные улучшения

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

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

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

Помните:

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

Убедитесь, что даже мобильная версия вашего сайта содержит ссылку на полную его версию.

Берите пример с Google или Apple

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

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

Узнать больше о гибком дизайне вы можете из следующих источников:

― «Руководство по оптимизации мобильных сайтов» от Opera;

― «Почему не нужно создавать отдельные сайты» Брюса Лоусона;

― 2 части «Adobe Introducing Media Queries».

По материалам сайта searchengineland.com.