Мобильный сайт – это отличный способ стать ближе к клиентам и повысить узнаваемость бренда в сети.
Мобильный сайт отличается от полноразмерного тем, что его дизайн, элементы и структура адаптированы под маленький экран, благодаря чему взаимодействовать с ним удобно и приятно.
Как создать мобильный сайт? Есть несколько способов.
1. Адаптивный / респонсивный дизайн
В этом случае у вас есть один сайт, который адаптирует свой внешний вид и расположение элементов автоматически в зависимости от величины экрана. У такого сайта один URL-адрес, и правки вы вносите одновременно в две версии сайта.
2. Мобильная версия сайта
Здесь у вас появляется самостоятельный мобильный сайт, который функционирует, оптимизируется и рекламируется отдельно от полноразмерного. Все действия вы должны выполнять дважды: и с мобильным, и с десктопным сайтом.
3. Мобильное приложение
Мобильное приложение создается специально под мобильные устройства и не открывается в браузере ПК. Помимо затрат на разработку ПО, дальнейшее обслуживание и обновление, вы должны смириться с тем, что мобильные приложения (если только это не всемирно известный бренд) неохотно скачиваются пользователями, поэтому этот вариант наименее привлекательный из трех вышеперечисленных.
Конструкторы сайтов или CMS?
Сайт вы можете создать в конструкторе сайтов или в CMS-системах – большинство этих сервисов по умолчанию предлагают адаптивный дизайн шаблонов или темы, адаптированные под мобильные устройства.
Разница лишь в том, что конструкторы сайтов подойдут новичкам с нулевыми техническими знаниями, а CMS-системы требуют хотя бы базового уровня технической подготовки и некоторой самостоятельности.
Разработка мобильного дизайна
Есть два подхода при создании мобильного сайта:
Mobile First – вы начинаете с создания мобильного сайта, а затем разрабатываете полноразмерную версию.
Mobile Second – вначале появляется полноразмерная версия, а затем на ее основе мобильная.
Какие аспекты необходимо учитывать при разработке мобильного сайта?
- У мобильных пользователей, как правило, ограниченная пропускная способность
Следствие: при создании мобильного сайта откажитесь от элементов, которые замедляют загрузку и «пожирают» много трафика: видео в HD-качестве, сложная анимация.
- Мобильные пользователи хотят получить нужную информацию на сайте сразу
Следствие: самая важная информация должна располагаться в верхней части страницы либо имеет вид быстрых ссылок
- Мобильные устройства не такие мощные, как ПК
Этот пункт пересекается с первым, поэтому рекомендацией будет упрощение структуры и навигации сайта.
Советы по разработке дизайна мобильного сайта:
- Поскольку навигация на экране мобильного устройства осуществляется с помощью движений пальцев руки, которые больше классического курсора мышки, любые ссылки должны быть окружены пустым пространством, чтобы случайно не нажать не туда.
- После нажатия на кнопку она должна изменить цвет или дизайн, чтобы пользователь знал, что сайт работает и запрос был отправлен.
- Заголовки в выпадающем меню должны быть написаны крупным шрифтом, чтобы быть заметными издалека.
- При создании форм регистрации сводите к минимуму количество полей ввода. На маленьком экране не очень удобно писать текст, поэтому облегчайте взаимодействие пользователей с вашим сайтом.
- Если сайт имеет сложную структуру, добавляйте всплывающие подсказки.
Подробнее о специфике мобильного сайта читайте в нашей статье.