Загрузка...
+7 495 638-52-67 +7 495 950-57-99

Подходы к разработке сайтов с поддержкой мобильных устройств

Подходы к разработке сайтов с поддержкой мобильных устройств
Подходы к разработке сайтов с поддержкой мобильных устройств

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


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

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

Адаптивный дизайн

Чтобы разработать адаптивный дизайн, как правило, прибегают к CSS3 Media Queries. При этом картинка будет отражаться в зависимости от параметров экрана потребителя.

Положительные стороны адаптивного дизайна:

Для получения действующего продукта нет требуется начинать разработку сайта с нуля, поскольку с этой задачей успешно справится корректировка CSS и HTML. Присутствие фреймворков, таких как Bootstrap, поможет облегчить адаптивную верстку при стандартной реализации. Единый URL исключает лишние редиректы, а также способствует сохранению пользовательской аудитории, которым не потребуется запоминать домен для мобильной версии. С одним адресом поисковым системам гораздо удобнее функционировать, что положительно сказывается на продвижении проекта.  

Недостатки адаптивного дизайна

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

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

Следующим минусом адаптивного дизайна признана медленная загрузка. «Тяжесть» веб-ресурса – настоящее препятствие для владельцев телефонов. Понимая это, разработчики заменяют стандартные для стационарных версий активные компоненты на легкие альтернативные элементы. Это относится к видео-роликам, калькуляторам, embedded-картам, анимационным меню. К примеру, если при разработке выпадающего меню с помощью псевдоселектора CSS:hover не задать обособленные правила показа меню для отображения сайта на мобильных устройствах, то подобные списки работать не будут.

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

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

Отдельная мобильная версия сайта

Желая создать удобство для мобильных пользователей, владельцы сайтов разрабатывают отдельные продукты, специально подстроенные под смартфон и планшет. По статистике, до 99% мобильных версий сайтов являются сокращенным вариантом основного веб-продукта. В нее помещают функционал, который будет пользоваться спросом у мобильных пользователей. Чаще всего создаваемая мобильная версия размещается на поддомене главного ресурса. При этом распространена практика автоматического перенаправления юзера с учетом присвоенного значения User-agent.

Преимущества мобильной версии

Отдельная версия сайта, адаптированная к мобильным устройствам, значительно упрощена по сравнению с основным ресурсом. Править облегченный вариант, лишенный избыточных и ненужных опций гораздо легче. К тому же поправки вносятся непосредственно в мобильный интерфейс, а основной сайт не трогает, что позволяет исключить ошибки. Пользователю телефона также удобнее работать с облегченным функционалом, особенно если у них канал соединения с Интернетом GPRS или слабый 3G.

Недостатки мобильной версии

Размещаемый на поддомене мобильный веб-продукт дублирует часть дизайна, структуры и контента главного сайта. Чтобы избежать «недовольства» со стороны поисковых алгоритмов, разработчикам приходится тщательно настраивать SEO-параметры обоих ресурсов. В связи с этим специалисты также вынуждены применять мета-теги rel=«alternative» и rel=«canonical».

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

Особенности RESS

Пресловутый гигант Google, хоть и предпочитает адаптивный дизайн, все же при создании своих продуктов прибегает к иной системе. Заходя на главную страницу под различными юзер-агентами, можно наблюдать разные HTML, в зависимости от типа устройства.

Преимущества Responsive Design + Server Side

Данный подход к разработке сайтов с поддержкой мобильных средств включает плюсы как отдельной, так и адаптивной версии сайтов. Успех проекта будет зависеть от схемы реализации RESS. К специфичным преимуществам Responsive Design + Server Side веб-мастера относят:

Недостатки RESS

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

Подводя итоги….

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


Возврат к списку

Заполните форму
Ваше имя*
Ваш E-mail*
Сообщение*
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке*