Дизайн мобильного сайта сложен, поскольку одна мобильная версия сайта может быть несовместима с каждым устройством. Дизайнеры должны знать о лучших методах проектирования, чтобы сделать ваше мобильное присутствие значимым и полезным.
Веб-разработчики постоянно спорят о том, какой способ создания оптимизированного для мобильных устройств веб-сайта является наилучшим. Существует три ведущих метода для разработки мобильного сайта.
Это:
- Отзывчивый веб-дизайн.
- Выделенные мобильные сайты.
- RESS: серверное программирование отображает CSS и HTML, в зависимости от типа устройства.
У каждого метода есть свои плюсы и минусы. Веб-разработчик должен знать о каждой технике, чтобы реализовать лучшую для данной ситуации.
3 способа создать мобильный сайт
Отзывчивый веб-дизайн (RWD)
RWD использует медиазапросы CSS3 для выравнивания макета веб-страницы с размером области просмотра устройства. Один и тот же HTML-код используется для представления различных макетов веб-страниц для планшетов, мобильных устройств, рабочих столов и других гаджетов.
Выгоды:
- Ваш веб-сайт будет иметь похожий контент и разметку HTML, поэтому мобильные посетители будут иметь одинаковый опыт, независимо от того, какое устройство они используют.
- Один URL-адрес облегчает пользователям ссылки и контент. (Если веб-страница доступна по более чем одному URL-адресу, пользователи могут запутаться.)
Недостатки:
Невозможно отдельно оптимизировать мобильный контент. Поэтому разработчик, использующий RWD, не может адаптировать контент отдельно для мобильных пользователей.
Согласно данным за январь 2013 года из HTTP-архива, средняя веб-страница составляет около 1,3 МБ. Тем не менее, большинство сайтов RWD сравнительно больше. Этот больший размер снижает производительность мобильных сайтов, делая их медленнее.
Мобильные пользователи более настроены на шаблоны проектирования пользовательских интерфейсов для мобильных устройств. Более того, мобильные пользователи привыкли к многозадачности. Если структура навигации не настроена для конкретных устройств, пользователи могут столкнуться с проблемами при попытке выполнить несколько задач одновременно.
Выделенные мобильные сайты
Этот метод улучшает опыт мобильных пользователей, создавая совершенно отдельный веб-сайт.
Выгоды:
- Простота управления: для мобильных и настольных сайтов требуются отдельные изменения. Внесенные изменения ограничены каждой соответствующей версией. Это означает, что изменения, предназначенные для мобильной платформы, недоступны с рабочего стола.
- Поскольку вы разрабатываете веб-сайт для мобильных устройств, становится проще оптимизировать и оптимизировать его специально для этой аудитории.
- Контент и структура навигации могут быть настроены для мобильных пользователей.
Недостатки:
Совместное использование веб-страницы через социальные сети становится более сложным, поскольку для выделенных мобильных сайтов существует несколько URL-адресов для страниц. Когда пользователи настольных компьютеров нажимают на мобильные URL-адреса, размещенные на платформах социальных сетей, они могут случайно получить мобильную версию сайта, а не настольную версию.
Чтобы избежать проблем с дублированием контента, веб-разработчик должен использовать метатеги rel = ”alternative” и rel = ”canonical”. Если мобильный пользователь выполняет поиск в Google и нажимает на URL-адрес рабочего стола, он либо просматривает версию для настольного компьютера, либо перенаправляется на мобильную версию веб-страницы. Если мобильная версия не существует, пользователь получит сообщение об ошибке.
Создание совершенно другого веб-сайта для мобильных пользователей означает, что сайт будет создан специально для мобильных пользователей. Однако для достижения этой цели веб-разработчики должны отключить функциональность и контент, что для них становится кошмаром.
Отзывчивый веб-дизайн+ Серверные компоненты (RESS)
Этот метод зависит от программирования на стороне сервера для предоставления пользовательских HTML и CSS для различных устройств. Код для мобильных пользователей будет отличаться от кода пользователей настольных компьютеров.
Основной целью этой реализации является повышение производительности сайта. Этот метод хорошо работает в сочетании с адаптивным веб-дизайном. Следовательно, эта реализация может упоминаться как Отзывчивый веб-дизайн + серверные компоненты (RESS).
Выгоды:
- Структура навигации может быть настроена для различных задач, выполняемых настольными и мобильными пользователями.
- Разработчики могут удалять элементы страницы из HTML и CSS для достижения желаемого отображения.
- Можно удалить ненужный JavaScript из HTML, что освобождает ресурсы процессора, память и кеш мобильных устройств.
Недостатки:
- Динамический HTML увеличивает нагрузку на сервер.
- На обнаружение устройства нельзя положиться.
- HTML и CSS оптимизированы для мобильной производительности. Настольная версия использует больше HTTP-запросов и Java-скриптов.
Какой метод выбрать?
Решение о разработке сайта, оптимизированного для мобильных устройств, зависит от продуктов, которые вы продаете, вашей целевой аудитории, требуемых инвестиций, вашей конкуренции, коэффициентов конверсии и т. Д. Метод разработки, который будет работать лучше всего, во многом зависит от форматов экрана, операционных систем, браузеров и резолюции.
Большинство адаптивных сайтов веб-дизайна не реализованы оптимально, и в результате эти сайты загружаются дольше. Поскольку конкуренция жесткая, вы можете потерять клиентов, если ваш сайт работает медленнее. Пользователь просто переключится на другой веб-сайт, для открытия которого требуется меньше времени. Хотя возможно создание веб-сайтов с более коротким временем загрузки с выделенными мобильными сайтами, к этой реализации также прилагаются различные недостатки.
RESS обеспечивает преимущества RWD в преодолении двух основных недостатков. Основным недостатком RESS является то, что обнаружение устройства ненадежно. Вы должны часто проверять наличие новых устройств, чтобы убедиться, что процесс продолжает работать должным образом.
Есть такие сервисы, как DeviceAtlas, WURFL и другие, которые могут обнаруживать новые устройства. Это будет отличным помощником для обновления новых устройств в вашей базе данных.
Мобильный веб-дизайн успешен только тогда, когда веб-сайт правильно отображается на мобильном устройстве. Хотя для дизайнеров непросто представить все основные части рабочего стола в небольшом мобильном окне, каждый день появляются новые технологии, которые делают мобильные сайты лучше, быстрее и более полнофункциональными.
Фото с мобильного сайта через Shutterstock
15 комментариев ▼
