Совет 1: Не создавайте еще одну отдельную мобильную версию сайта
Некоторые разработчики придумали создавать отдельный сайт для мобильной версии. Однако это означает, что вы выключите контент с важной информацией, например, фотографиями, видео и т. д. Кроме того, с двумя одинаковыми контентными сайтами (один для настольных компьютеров и другой для мобильных устройств) у вас будет индексироваться две отдельные ссылки в поисковых системах интеренета.
Совет 2: Используйте только адаптивный дизайн
Адаптивный дизайн – лучшее решение для мобильных сайтов. Почему? Потому что он позволяет разработчикам делать удобный просмотр одного сайта на разных устройствах с любым размером экрана. Благодаря адаптивному дизайну вы сможете сделать ваши изображения и макеты более гибкими, и с самого начала зададите нужные стили. С помощью гибкого дизайна, макет сайта будет меняться и отображаться в соответствии с размером экрана пользователей.
Совет 3: Всегда используйте мета-тег viewport
Механизм рендеринга браузера определяет размер и масштабируемость размера сайта в окне просмотра. Поэтому, при создании сайта под несколько платформ, критически важно использовать viewport. Если вы не будете использовать мета-тег viewport, ваш ресурс не будет отображаться надлежащим образом на мобильных девайсах. Этот тег буквально сообщает браузеру, как страница должна соответствовать экрану.
Совет 4: Важность размеров шрифтов и кнопок
Размеры кнопок, как и размер шрифтов очень важны для мобильных устройств. Почему? С маленькими кнопками на сайте пользователи могут попросту не заметить их или случайно нажать не на тот элемент. Это всегда неприятно, когда ваши пальцы не могут попасть по кнопке из-за её размера. Apple рекомендует выбирать размер 44px на 44px или больше.
Ваш сайт, адаптированный под мобильные устройства, должен иметь размер шрифта не менее 14 px! Используя размер 14 px, вы поймете, что пользователи не будут использовать масштабирование для чтения содержимого вашего сайта. Размер шрифта в 12 px рекомендуется использовать только для меток и форм.
Совет 5: Картинки в большом разрешении
Если вы хотите создать свой сайт согласно высоким стандартам, то использовать изображения с высоким разрешением обязательно. Новые мобильные устройства на iOS, Android и Windows имеют экраны c высоким расширением. Поэтому, чтобы избежать размытых изображений или потери качества, мы советуем использовать изображения с высоким разрешением, которые автоматически решат эту проблему. Оптимизация изображений на сайте – очень важный элемент поискового продвижения. Именно поэтому необходимо проверить скорость загрузки сайта после того, как внесете изменения на сайте.
Совет 6: Не используйте масштабирование по умолчанию
Не рекомендуется использовать автоматическое масштабирование на мобильной версии сайта. Оно может испортить элементы макета, такие как навигация и изображения. Использование мета-тега автоматически разрешит проблему с увеличением. Однако по умолчанию увеличенные изображения могут оказаться слишком большими или слишком маленькими, а это будет раздражать пользователей из-за потери времени на их подгонку.
Совет 7: YouTube видео на мобильном сайте
Использовать видео на мобильной версии сайта не так уж и просто. YouTube-видео – лучшее решение этой проблемы. YouTube уже решил многие часто возникающие у пользователей проблемы вместо вас, нужно только использовать его ресурсы.
Совет 8: Широкий пользовательский интерфейс
Что это значит? Вы можете создать идеальную мобильную версию сайта, но всегда должны предоставлять выбор своей аудитории. «Просмотреть ПК-версию» или «перейти на полную версию сайта» – необходимые кнопки, потому что среди пользователей есть люди, которые предпочитают полноценный интерфейс сайта.
Совет 9: Всегда тестируйте
Никогда не прекращайте тестирование! Вы постоянно должны думать, как пользователь и узнавать, что можно добавить, изменить или даже удалить. Очень важно, чтобы проверка сайта была выполнена с расчетом устранения ошибок или усовершенствования продукта.
- Проводите тесты на разных мобильных устройствах и разных операционных системах (Android, Windows и IOS);
- Тестируйте свой сайт на устройствах с разными размерами экрана;
- Проверьте не только главную страницу, но и все остальные, а также все кнопки и действия пользователей;
- Попросите своих друзей или специалистов проверить сайт, так как они могут заметить что-то новое.
Вот несколько основных принципов запуска мобильной версии вашего сайта:
- Максимально используйте CSS вместо файлов изображений (например, градиентные заливки, тени, скругленные прямоугольники и т. Д.). Использование слишком большого количества изображений замедлит время загрузки сайта. Данные CSS намного меньше по размеру файла, чем данные файла изображения.
- Используйте макет жидкости. Не все смартфоны или мобильные устройства имеют одинаковое разрешение экрана. Сохраняя верстку макета, веб-сайт может растягиваться и расширяться в соответствии с необходимостью.
- Применяйте шрифты большего размера, которые легко увидеть и прочитать на меньшем экране
- Графические кнопки вместо текстовых ссылок, потому что их легче «трогать»
- Нет вспышки. Вместо этого используйте HTML5 и / или Javascript / jQuery.
- Упрощенная навигация с меньшим количеством опций
