В прошлом дизайнеры создавали отдельные настольные и мобильные версии веб-сайтов, что означало два дизайна и URL-адреса. Теперь нормой является один адаптивный, удобный для мобильных устройств сайт, который адаптируется к размеру экрана. Мобильные устройства настроены так, что код сайта изменяет стиль изображений, текста и кнопок в зависимости от устройства.
Ключевые элементы мобильного дизайна
Если вы собираетесь Процесс разработки веб-сайта или управляете существующим, важно убедиться, что его дизайн удобен для мобильных устройств. Стили, созданные для небольших экранов, ориентированы на взаимодействие с мобильным пользователем , что необходимо учитывать при создании эффективного мобильного дизайна .
Навигация
При разработке сайтов, удобных для мобильных устройств, необходимо учитывать уникальные проблемы навигации на маленьком экране.
- Удобная для мобильных устройств навигация должна быть четкой и легкой для понимания, требуя всего нескольких нажатий, чтобы пользователи могли перейти к нужному экрану.
- Дизайн должен включать в себя « хлебные крошки», которые дают пользователям понять, где они находятся на сайте в любое время.
Пользовательский интерфейс
Простота — ключ к удобному для мобильных устройств интерфейсу.
- Сайт должен опираться на простые элементы дизайна, ориентированные на простоту использования и избегающие беспорядка на маленьком экране. Беспорядок включает в себя текст, изображения и видео.
- Кнопки и другие элементы сенсорного экрана должны быть достаточно большими, чтобы можно было эффективно нажимать на них пальцами.
- Если ваш сайт является сайтом электронной коммерции или содержит формы, сделайте их максимально простыми. Если возможно, сведите к минимуму ввод текста пользователем.
Элементы, которых следует избегать
Есть ряд «нельзя», которых следует избегать при разработке дизайна для мобильных устройств.
- Всплывающие окна сильно раздражают частых пользователей мобильного Интернета. Их использования следует избегать, чтобы пользователь не испытывал неудобств.
- Flash-видео, которое до сих пор используется на многих веб-сайтах, не воспроизводится на многих мобильных устройствах . По этой причине его следует избегать.
- Файлы большого размера загружаются на мобильное устройство дольше, чем на настольный компьютер. Большое кричащее видео на вашей домашней странице может показаться впечатляющим, мобильный пользователь может удержаться от использования вашего сайта, если это видео слишком долго загружается и затрудняет навигацию по сайту.
Создание мобильного сайта
Доступно множество инструментов, упрощающих процесс создания мобильного сайта.
Мобильные темы и фреймворки
Существуют удобные для мобильных устройств фреймворки, такие как Bootstrap, которые вы можете использовать . Если вы используете Выбор темы для WordPress , ищите темы, которые подходят для мобильных устройств и содержат инструменты, которые помогут вам настроить дизайн для мобильных устройств.
Оптимизация изображения
Важно убедиться, что ваши изображения оптимизированы для Интернета на любом типе сайта. Это особенно важно для мобильного дизайна. Если у вас нет доступа к программе редактирования изображений, такой как Как использовать Adobe Photoshop , вы можете использовать онлайн-оптимизаторы изображений, такие как Kraken.io и Optimzilla .
Видеопроигрыватель HTML5
Поскольку не все мобильные устройства могут запускать Flash, убедитесь, что все видео на сайте воспроизводятся с помощью видеопроигрывателя HTML5. JW Player — популярный проигрыватель, который можно использовать на многих типах сайтов, включая WordPress. Другой вариант — запустить видео через Как создать учетную запись YouTube или Vimeo и встроить на свой сайт.
Медиа-запросы
Медиа-запросы — это код, написанный для вашего Советы по кодированию таблиц CSS который указывает, что ваш веб-сайт будет выглядеть по-разному в зависимости от размера экрана, на котором просматривается веб-сайт. Вот как вы делаете один веб-сайт, оптимизированный как для мобильной, так и для настольной версии, без необходимости использования разных URL-адресов.
Код для масштабирования
Окно просмотра мета — тег является еще одним важным куском кода для использования. Это помогает браузеру определить, как масштабировать ваш сайт.
Инструменты для тестирования размера экрана
Важно знать, как ваш сайт будет выглядеть на экранах разного размера. Это может быть очень просто, если вы используете для тестирования инструменты веб-разработчика, такие как Chrome или Firefox . Просто активируйте инструмент и перетащите экран до размера, который вы хотите протестировать.
Мобильный дизайн и поиск
Если вы хотите создать сильную Советы экспертов по развитию бизнеса веб-сайтов для своего сайта, дизайн, Советы экспертов по развитию бизнеса веб-сайтов для мобильных устройств, просто необходим. Еще в 2015 году Google дал понять, что сайты, которые не оптимизированы для мобильных устройств, будут оштрафованы при поиске . Поэтому, если ваш сайт не оптимизирован для мобильных устройств, его будет сложно продвигать в поисковых системах.
Сделайте ваш сайт мобильным
Независимо от того, используете ли вы фреймворк, такой как Boostrap, плагины WordPress или HTML и CSS, есть инструменты, которые помогут вам решить сложную задачу создания дизайна, удобного для мобильных устройств. Если программирование выходит за рамки ваших навыков, существует множество конструкторов Лучшие инструменты для создания веб-сайтов вы можете использовать для создания сайта, удобного для мобильных устройств. Как бы вы ни создавали свой сайт, убедитесь, что мобильность является вашим первым соображением при планировании стратегии и дизайна.