Как Адаптировать Сайт под Мобильные Устройства: Руководство
Сайт
Окт 04, 2021
Olha L.
6хв. читання
Если вы не имеете ни малейшего представления о том, как создать мобильный сайт или адаптировать сайт под мобильные устройства, когда он уже давно запущен и работает, вы попали по адресу!
Сайт каждого блогера или владельца бизнеса должен отлично работать на смартфонах. Отзывчивый дизайн способен значительно увеличить ваш трафик, а вместе с ним и шансы на успех.
Оглавление
Оптимизация Сайта под Мобильные Устройства — Почему это Важно?
Наше время можно смело назвать «эрой смартфонов». Многие люди предпочитают выходить в интернет через мобильные устройства, так как это можно делать в любое время и в любом месте.
Таким образом, наличие мобильного сайта автоматически открывает двери для большей аудитории. Фактически, 70% интернет-трафика сегодня (англ) приходит с мобильных телефонов.
Кроме того, 51% пользователей подтвердили (англ), что они регулярно используют мобильные устройства для поиска новых брендов и продуктов.
Это число доказывает, что оптимизация сайта под мобильные устройства настолько же важна для бизнеса, как его расширение.
Более того, 89% людей (англ), отметили, что готовы рекомендовать бренд, если их мобильный опыт будет положительным.
Стоит упомянуть ещё один фактор — Google обновил систему оценки сайтов, чтобы улучшить результаты поиска для мобильных пользователей.
Другими словами, если ваш сайт не адаптирован под смартфоны, он может быть исключён из поисковой выдачи Google для мобильных устройств или опущен вниз страницы результатов поиска.
Преимущества Отзывчивого Сайта
Создание хорошего мобильного сайта начинается с отзывчивого дизайна.
«Отзывчивый сайт» — это сайт, который реагирует на то, с какого устройства заходит пользователь и адаптируется под его особенности. Другими словами, такой сайт хорошо выглядит и функционирует на любом устройстве.
Ниже мы более подробно описываем преимущества отзывчивого сайта.
1. Лучше для SEO
Отзывчивый дизайн означает, что сайт использует те же URL и HTML независимо от устройства, из которого на него заходят.
Благодаря этому Google намного проще исследовать, индексировать и управлять контентом такого сайта. В результате SEO вашего сайта будет намного эффективней.
2. Не Нужно Создавать Новый Дизайн Сайта
Отзывчивый дизайн, в отличие от адаптивного, не требует создания отдельного макета для мобильных. Другими словами, отзывчивый сайт — это один макет, который “умеет приспосабливаться” под разные устройства.
Таким образом, вы сэкономите много времени и энергии.
3. Легче в Управлении и Экономней
Отзывчивый сайт прост в управлении и разработке. Все сделанные вами обновления будут отображаться на всех устройствах сразу. То же самое касается контента, после публикации он появится на всех устройствах одновременно: ПК, ноутбуке, смартфоне и др.
Более того, отзывчивый сайт обойдётся намного дешевле, поскольку вам не нужно разрабатывать две разные версии ресурса — для ПК и мобильных устройств отдельно.
7 Советов, Как Адаптировать Сайт под Мобильные Устройства
Прежде всего, вы должны понимать, что создание мобильного сайта требует немного технических знаний.
Мы ценим ваше любопытство и желание узнавать что-то новое, но всё-таки склонны считать, что оптимизация сайта под мобильные устройства может быть довольно сложной для новичка. Поэтому рекомендуем нанять разработчика сайтов, который поможет вам решить эту задачу.
Однако мы также рекомендуем ознакомиться с советами по оптимизации, чтобы понимать, как адаптировать сайт под мобильные устройства, и при необходимости контролировать процесс.
1. Придерживайтесь Подхода Mobile First
Большинство дизайнеров, начиная разработку сайта, ориентируются на устройства с большим экраном, такие как ПК или ноутбук. Это не совсем правильно, так как в будущем при попытке оптимизировать сайт под телефон могут возникнуть определённые трудности.
Намного правильней начинать с мобильного дизайна. Попробуйте сначала создать красивый, полнофункциональный веб-сайт для мобильных пользователей, а затем переходите к большему экрану.
Оптимизировать сайт под экран меньшего размера, например, смартфона или планшета, намного сложнее, чем под экран большого размера.
Поэтому разумнее начинать с мобильной версии.
2. Преобразование Десктопной Версии Сайта в Мобильную
Если у вас уже есть полнофункциональный сайт для десктопов, который ещё не был оптимизирован под другие устройства, первое, что вам нужно сделать — это преобразовать его в мобильный.
К счастью, есть как минимум два очень хороших способа сделать: конвертировать ваш сайт с помощью онлайн-сервиса или плагинов CMS.
Преобразование Сайта с Помощью Конструктора Онлайн
Во-первых, вы можете использовать специальный онлайн-сервис. Два самых популярных сервиса для создания мобильной версии сайта — bMobilized и Duda Mobile.
bMobilized предлагает мгновенное преобразование с автоматической адаптацией изображений и содержимого. В компании утверждают, что сайты, преобразованные с помощью их сервиса, поддерживаются более 13000 мобильных устройств разных брендов.
Сервис стоит 19,99$ в месяц. Помимо услуги создания мобильной версии сайта, bMobilized также предоставляет профессиональную поддержку для разработчиков.
Ещё один отличный сервис — Duda Mobile. Главная функция этого конструктора — создание полнофункциональных мобильных сайтов.
Этот конструктор сайтов можно использовать бесплатно. Однако, если вам понадобятся премиальные функции сервиса, такие как поддержка по электронной почте, пользовательские домены или услуги резервного копирования, то их цена — 19$ в месяц.
Кроме того, Duda Mobile предлагает набор расширенных функций для разработки отзывчивых сайтов электронной коммерции с поддержкой мультиязычности. Однако за такой функционал вам придётся заплатить от 22$ до 46$ в месяц.
Создание Мобильной Версии Сайта с Помощью Плагинов CMS
Второй вариант, как адаптировать сайт под мобильные устройства — использовать плагины CMS. Однако этот метод лучше подходит тем, у кого уже есть готовый сайт на CMS Joomla, Drupal или WordPress.
Пользователи WordPress для решения этой задачи могут использовать такие плагины, как WPtouch и JetPack.
Что касается пользователей Joomla, то им доступны такие решения, как Responsivizer и JoomlaShine.
Если же вы используете Drupal, рекомендуем ThemeKey и MobileTheme.
Однако имейте в виду, что не все из этих плагинов доступны бесплатно. Например, премиум-план WPtouch pro Enterprise обойдётся вам до 359$ в год.
3. Установите Отзывчивую Тему
Отзывчивый дизайн автоматически сделает ваш сайт мобильным. В результате вы получите сайт, на котором будет отображаться контент аналогичный тому, что на ПК версии.
Сегодня существует множество отзывчивых тем WordPress. Многие из них платные, но при этом они действительно справляются с заданием.
Avada — одна из самых быстрых и отзывчивых тем в WordPress. С этой темой скорость загрузки вашего сайта на мобильных устройствах не превысит секунды.
Чтобы убедиться, что тема быстро загружается и адаптируется к мобильному экрану, мы рекомендуем воспользоваться Pingdom.
Pingdom — лучший инструмент для проверки производительности сайта, который предоставит исчерпывающие данные о скорости загрузки страниц.
Всё, что вам нужно сделать, это скопировать ссылку вашего сайта, а затем вставить её в столбец URL. Выберите, где вы хотите начать тестирование, и нажмите кнопку «Начать тест» («Start Test»).
Pingdom выдаст оценку вашего сайта (в зависимости от его общей производительности), время загрузки и другие важные показатели.
Инструмент также предложит некоторые советы, как улучшить скорость.
Вот результат теста живой демонстрационной версии темы Avada — сайта-портфолио.
Как видите, для загрузки сайта теме Avada понадобилось 953 миллисекунды.
4. Никогда не Используйте Flash
Многие веб-разработчики отказались от Flash, потому что технология потребляет слишком много аппаратных ресурсов, что может привести к замедлению ответа страницы и времени её загрузки.
Кроме того, Flash может навредить SEO.
Также важно отметить, что ни Android, ни iOS не поддерживают Flash, поэтому использование этого программного обеспечения — не лучшее решение, если вы хотите создать сайт, оптимизированный для мобильных устройств.
5. Поддерживайте Скорость Сайта
Скорость работы сайта сильно зависит от качества используемого вами сервера и хостинга. Поэтому, если вы хотите создать мобильный сайт, который бы отлично работал на мобильных устройствах, важно использовать быстрый и надёжный хостинг.
Для лучшей производительности мы рекомендуем облачный или VPS-хостинг. Решение обеспечит лучшую скорость ответа сервера, что является наиболее важным фактором, влияющим на скорость загрузки сайта.
Чтобы оптимизировать скорость вашего сайта, также нужно ограничить количество контента, для работы которого необходим дополнительный плагин.
Ещё одна вещь, которую нужно сделать, чтобы ускорить сайт — оптимизировать его домашнюю страницу. Вот несколько советов, как сделать так, чтобы главная не замедляла работу вашего ресурса:
- Уменьшите количество публикаций на главной странице (ограничьтесь 5-10 постами).
- Удалить ненужные виджеты.
- Удалите неважные, неактивные или ненужные плагины.
- Поддерживайте чистоту и порядок на странице.
Мы уверенны, что чистая, хорошо оптимизированная домашняя страница способна не только улучшить общий внешний вид вашего сайта, но и ускорить его загрузку!
6. Следите за Внешним Видом Вашего Сайта
Первые пятнадцать секунд — время, которое понадобится пользователю, чтобы решить (англ) остаться на сайте или покинуть его. Поэтому вам нужно как можно быстрее произвести хорошее впечатление.
Если контент привлекает трафик, то внешний вид сайта заставляет их задержаться на нём дольше, чем на 15 секунд.
Отключите автозамену для формы на странице входа (заполнять веб-формы на мобильном устройстве и без того не слишком удобно), используйте кнопки и шрифты большого размера, а также адаптируйте дизайн всплывающих окон (если они есть) под мобильные.
Используйте специальный инструмент проверки оптимизации сайта для мобильных.
7. Включите Ускоренные Мобильные Страницы (AMP)
Ускоренные мобильные страницы (AMP) — один из проектов Google.
Его целью является ускорение загрузки сайтов посредством сжатия данных, которые в восемь раз меньше обычного размера мобильных страниц. Эта технология обещает повысить скорость вашего сайта в четыре раза, что, в свою очередь, сделает его более мобильным.
AMP широко используется ведущими компаниями, включая Twitter, New York Times и Adobe. Вот несколько причин, почему она так популярна.
Ускоряет Загрузку Сайта на Мобильных Устройствах
По данным Google, около 53% мобильных пользователей покидают сайт, загрузка которого занимает более 3 секунд (англ).
К счастью, быстрая загрузка является основным преимуществом AMP. Использование этой технологии увеличит скорость работы сайта, поэтому вы не потеряете драгоценный органический трафик.
Делает Сайт Более Заметным в Поиске
Google обозначает AMP-сайты в мобильном поиске иконкой молнии. Её задача, обозначить для пользователей сайты с поддержкой AMP и без.
Символ AMP поможет выделиться в результатах поиска.
К тому же многие пользователи обращают внимание именно на такие страницы, поскольку знают, что они быстрее загружаются.
Google AMP Cache Повышает Производительность Сервера
Google AMP Cache — сеть доставки контента (CDN), основанная на прокси. Используется для ускорения процесса передачи данных с действительных документов AMP пользователю.
Проще говоря, Google AMP Cache хранит данные вашего сайта. Этот метод позволяет быстрее загружать веб-страницы, благодаря чему ресурс лучше работает на мобильных устройствах.
Вот некоторые функции Google AMP Cache, которые могут повысить производительность вашего сервера:
- Может сохранять изображения и данные шрифтов
- Автоматически ограничивает максимальные размеры изображения
- Конвертация изображений в форматы для мобильных устройств
- Может снизить качество изображения, чтобы ускорить процесс загрузки
- Использует безопасные каналы (HTTPS) и последние версии веб-протоколов (SPDY, HTTP/2).
Выводы
Если вы хотите достичь успеха в интернете, вам нужно адаптироваться к последним технологиям. Учитывая число мобильных пользователей, оптимизация сайта под мобильные устройства должна быть в приоритете.
Подводя итог, давайте ещё раз напомним, как адаптировать сайт под мобильные устройства:
- Придерживайтесь подхода Mobile first.
- Превратите свой десктопный сайт в мобильный с помощью онлайн-сервисов, таких как bMobilized и Duda Mobile, или воспользуйтесь плагином мобильной оптимизации для вашей CMS.
- Используйте отзывчивую тему и протестируйте её с помощью Pingdom.
- Не используйте Flash!
- Поддерживайте нормальную скорость вашего сайта, используя быстрый и надёжный хостинг.
- Убедитесь, что ваш сайт хорошо выглядит.
- Попробуйте использовать ускоренные мобильные страницы (AMP), чтобы повысить производительность веб-сайта на мобильных устройствах.
Оптимизация сайта для мобильных устройств требует довольно много усилий.
Но поверьте, результаты не заставят себя ждать.
Уверенны, что знание того, как оптимизировать сайт для мобильных устройств, поможет вам быстрее принять решение — заниматься этим самостоятельно или обратиться к специалистам. Не тяните. Без мобильной версии сайта вы теряете много органического трафика. Удачи!
Ольга вже близько восьми років працює менеджером у сфері IT, три з яких вона займається SEO. Написання технічних завдань та інструкцій — один з її основних обов’язків. Її хобі — дізнаватися щось нове і створювати цікаві та корисні статті про сучасні технології, веброзробку, мови програмування, пошукову оптимізацію сайтів та багато іншого.
Більше статей від Olha L.
Адаптация сайта на мобильных устройствах — студия Палыча
- Главная
org/ListItem»>Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).
Этот метатег вставляют в контейнер head вашего сайта.
<meta name="viewport" content="width=device-width">
По умолчанию мобильные браузеры отображают страницу сайта точно так же как и в ПК. Что естественно портит внешний вид сайта и делает мало пригодным для использования сайта на мобильных устройствах.
Для более детальной настройки отображения используем дополнительные значения
Ширина сайта на экранах мобильных устройств
Позволяет адаптировать ширину сайта под ширину экрана устройства
<meta name="viewport" content="width=device-width">
Это конечно несколько улучшает просмотр сайта, но только в плане того что ширина сайта становится такой же как и ширина экрана мобильного устройства.
Для того что бы сделать сайт еще и читабельный, зададим фиксированную ширину отображения страницы и уже при этой ширине будем в стилях править отображение текстов, блоков и т.д. На нашем примере возьмем за основу ширину сайта 600px:
<meta name="viewport" content="width=600">
А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.
Нужно еще учитывать то обстоятельство что задав фиксированную ширину отображения контента мы получим одинаковый результат на разных разрешениях экрана.
- Мы получим одинаковое отображение на различных разрешениях экранов.
- Нам нужно менять стили только для этого медизапроса, а не подстраивать под каждое разрешение экрана.
Но все равно при любом разрешении самого экрана страница будет отображаться на весь экран. Это даст нам два основных преимущества.@media screen and (max-width: 600px) {
…
}Высота сайта на экранах мобильных устройств
В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.
Для исправления этой ошибки мы можем использовать правило
<meta name="viewport" content="height=device-height">
Масштабирование сайта на экранах мобильных устройств
С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.
Разрешить масштабирование на смартфоне:
<meta name="viewport" content="user-scalable=yes">
Запретить масштабирование на мобильном телефоне:
<meta name="viewport" content="user-scalable=no">
Подитог
И так мы создали свой viewport и так же для него создали медиапзапрос
В наш медиазапросе создали необходимые для нас стили.
Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)
Viewport:
<meta name="viewport" content="height=device-height,width=600,user-scalable=yes">
Медиазапрос:
@media screen and (max-width: 600px) {
body {
font-size:1.5em;
}
…
h3 {
font-size:2.5em;
}
}рис.1 Отображение сайта без метатега viewport | рис.2 Отображение сайта с атрибутом width=device-width | рис.3 Отображение сайта с атрибутом width=600 |
Верный viewport
Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:
<meta name="viewport" content="width=device-width, user-scalable=yes">
Читайте также
- Фреймворк для адаптивной верстки
- Адаптивная верстка для мобильных устройств
Как сделать сайт удобным для мобильных устройств
Содержание
Мобильные телефоны стали неотъемлемой частью нашей жизни.
В отчете Statista указано, что по состоянию на 2022 год в мире насчитывалось 90 005 6,64 млрд 90 006 пользователей смартфонов, а к 2026 году их число вырастет до 90 005 7,5 млрд 90 006 . Во втором квартале 2022 года на мобильные платформы приходится 59% всего веб-трафика, что составляет более половины мирового веб-трафика. Учитывая такое значительное использование мобильных устройств, дизайнеры и разработчики должны сосредоточиться на обеспечении безупречного UX веб-сайта на мобильных устройствах. Следовательно, владельцы веб-сайтов должны задать себе следующие вопросы:
- Как сделать сайт удобным для мобильных устройств?
- Как обеспечить кроссбраузерность сайта?
- Как оптимизировать мобильный сайт для максимальной конверсии?
Эта статья отвечает на эти ключевые вопросы, описывая эффективные методы разработки веб-страниц, удобных для мобильных устройств. Имейте в виду, что каждое мобильное устройство имеет уникальный размер экрана и разрешение.
Веб-сайт должен быть полностью адаптивным и совместимым с разными браузерами, чтобы обеспечить оптимальные возможности просмотра на нескольких устройствах. Это подводит нас к первому способу сделать веб-сайт удобным для мобильных устройств.
1. Внедрение адаптивного макета
Адаптивный макет позволяет веб-сайту масштабироваться в соответствии с устройством, используемым для его просмотра. Это позволяет веб-сайту адаптироваться к разным размерам экрана без каких-либо проблем с рендерингом. Адаптивный веб-дизайн хорошо работает как для мобильных, так и для настольных платформ, поскольку веб-сайт соответствующим образом меняет свой внешний вид.
Наличие веб-сайта, адаптированного для мобильных устройств, повышает ценность веб-сайта для SEO, поскольку Google предпочитает индексировать и ранжировать веб-сайты, оптимизированные для мобильных устройств. Включение адаптивного макета помогает веб-сайтам занимать более высокие позиции в поиске Google.
Нужно проверить адаптацию сайта к мобильным устройствам?
- При разработке веб-сайта, удобного для мобильных устройств, попробуйте выполнить быстрый тест с помощью BrowserStack Responsive.
- Просто введите URL-адрес веб-сайта, и инструмент немедленно отобразит веб-сайт на ряде реальных устройств, таких как Samsung Note 10, iPhone X, iPad Pro и т. д.
- Тестировщики могут увидеть, как веб-сайт выглядит на разных устройствах, и начать соответствующую оптимизацию, чтобы сделать сайт удобным для мобильных устройств.
Средство проверки отзывчивости запускает адаптивные тесты на реальных комбинациях устройства и браузера. В результате пользователи получают точные результаты тестирования. Таким образом, обеспечивая инклюзивный опыт.
Попробуйте адаптивное тестирование BrowserStack
2. Оптимизируйте скорость веб-сайта
Скорость играет решающую роль в создании первого впечатления о любом веб-сайте. 47% посетителей покидают веб-сайт, если загрузка занимает более 2 секунд, тогда как даже 1-секундная задержка отклика страницы может снизить коэффициент конверсии на 7% .
Google считает высокую скорость положительным фактором ранжирования, поэтому веб-разработчики должны принять все необходимые меры для увеличения скорости сайта.
Чтобы оценить время загрузки веб-сайта, запустите тест скорости веб-сайта в BrowserStack SpeedLab. Введите URL-адрес и нажмите «Пуск». Этот бесплатный инструмент проверяет скорость веб-сайта на нескольких реальных комбинациях браузер-устройство и отображает оценку из 100 как для мобильных, так и для настольных платформ.
Вы получаете не только отчеты, но и полезную информацию, которая поможет сделать веб-сайт удобным для мобильных устройств.
Проверьте скорость вашего веб-сайта
3. Незаметная реализация всплывающих окон
Пользователям не очень приятно сталкиваться с внезапными всплывающими окнами при просмотре веб-контента, особенно для мобильных пользователей. Иногда метка X (чтобы закрыть всплывающее окно) даже не видна должным образом, что еще больше раздражает пользователей. Разработчики и дизайнеры должны убедиться, что если им нужно отображать рекламу, они делают это незаметно.
Нерелевантная реализация всплывающих окон — одна из самых распространенных ошибок веб-дизайна, которая превращает ваших потенциальных клиентов в разгневанных клиентов, тем самым снижая ваши шансы на мобильную конверсию. Несколько приемов тонкой реализации всплывающих окон:
- Реализуйте всплывающее окно только тогда, когда читатель прокручивает 70–80% веб-страницы вниз.
- Сочетайте дизайн всплывающих окон с дизайном, оптимизированным для мобильных устройств.
- Разработайте кнопки призыва к действию во всплывающем окне, чтобы они были четкими и действенными.
4. Включение метатега области просмотра
Включение метатега позволяет разработчикам контролировать ширину и масштаб области просмотра, чтобы размер веб-сайта был правильным на всех устройствах. Метатег viewport указывает браузеру изменить ширину веб-страницы в соответствии с размером экрана устройства, на котором она просматривается.
Используйте приведенный ниже фрагмент кода для определения метаэлемента на каждой веб-странице:
5. Наведите порядок в своем веб-дизайне
Веб-разработчики должны убедиться, что они не загромождают веб-сайт, предоставляя все функции на одной странице. Это создает путаницу, затрудняя пользователям навигацию по странице со слишком большим количеством элементов. Предлагайте только самые важные функции заранее, поскольку именно их будут активно искать пользователи. Для беспрепятственного взаимодействия с пользователем отдайте предпочтение аккуратному минималистичному дизайну, который делает навигацию интуитивно понятной.
- Разработчики могут включить на веб-сайт один из основных элементов современного веб-дизайна — кнопку «Гамбургер».
- Мобильные пользователи могут открывать все меню одним щелчком мыши, если это реализовано.
- Это упрощает навигацию и повышает визуальную привлекательность.
Профессиональный совет: После этого рассмотрите возможность повторного запуска адаптивного теста, чтобы проверить, кажется ли, что упрощенный дизайн веб-сайта делает ваш веб-сайт удобным для мобильных устройств.
6. Всегда тестируйте веб-сайт на реальных мобильных устройствах
Эффективный способ убедиться, что ваш веб-сайт обеспечивает оптимальное взаимодействие с пользователем, — это протестировать его на реальных мобильных устройствах.
- Тестирование на реальных устройствах позволяет обнаруживать и устранять любые проблемы или несоответствия, с которыми пользователь может столкнуться в реальных пользовательских условиях.
- Запустите каждый пользовательский сценарий на как можно большем количестве реальных комбинаций браузер-устройство-ОС, чтобы клиенты могли легко и эффективно работать в Интернете независимо от своего мобильного устройства.
Тестирование веб-сайтов на реальных устройствах iOS и Android может оказаться сложной задачей без доступа к комплексной тестовой инфраструктуре. В настоящее время не каждая организация может иметь мобильную испытательную лабораторию, поскольку это требует значительных инвестиций. Использование реального облака устройств часто является лучшей альтернативой, поскольку оно не требует обслуживания.
BrowserStack также включает функции для мобильных устройств, такие как тестирование геолокации, push-уведомления, имитация сети, тестирование местоположения и т. д.
Попробуйте протестировать на реальных устройствах бесплатно
7. Внимательно обновляйте контент
Пока вы экспериментируете с мобильным веб-дизайном и CRO-контентом, весь веб-сайт может пострадать. Поскольку подход к дизайну, ориентированному на мобильные устройства, имеет приоритет, крайне важно создавать и обновлять мобильный контент вашего веб-сайта с точным подходом. Убедитесь, что контент читается на экранах мобильных устройств и хорошо ориентирован.
- Менеджеры по продуктам должны учитывать ограничения по размеру на небольших экранах, чтобы гарантировать, что на видном месте отображаются только важные элементы контента, и при необходимости проводится A/B-тестирование.
- Разработчики могут избежать этого, выбрав визуальное сравнительное тестирование, которое предотвратит появление ошибок веб-дизайна в рабочей среде.
8. Не используйте Flash
Flash замедляет работу вашего веб-сайта, влияет на поисковую оптимизацию и нарушает работу пользователей. Flash может увеличить время загрузки страницы, а иногда он полностью несовместим с мобильными устройствами. Вместо этого рекомендуется использовать HTML5 и CSS, чтобы сделать ваш сайт более отзывчивым и удобным для мобильных устройств.
9. Сделать веб-сайт совместимым с обеими ориентациями
В отличие от настольных компьютеров, на которых контент отображается только в ландшафтном режиме, мобильные телефоны отображают экран как в альбомной, так и в портретной ориентации. Следовательно, вы должны убедиться, что веб-сайт загружается и работает нормально как в альбомном, так и в портретном режимах, без искажений пользовательского интерфейса, сбоев или растяжений. Вы можете проверить это, протестировав сайт в обоих режимах на реальных устройствах.
Протестируйте свой веб-сайт на реальных мобильных устройствах
В заключение
Разработка веб-сайта, оптимизированного для мобильных устройств, важна, но в то же время оптимизированный для мобильных устройств веб-сайт должен в достаточной степени обеспечивать безупречный пользовательский опыт на любом сочетании устройства, браузера и ОС.
Мобильные устройства значительно изменили то, как люди ежедневно используют Интернет. Эта тенденция будет усиливаться, и с каждым годом все больше людей продолжают выходить в Интернет в основном через мобильные устройства. Кроме того, поскольку ведущие поисковые системы, такие как Google, постоянно стремятся сделать Интернет ориентированным на мобильные устройства поисковым ландшафтом, наличие веб-сайта, удобного для мобильных устройств, должно предшествовать разработчикам и тестировщикам.
Как сделать свой веб-сайт удобным для мобильных устройств
Летом 2015 года впервые в истории с мобильных устройств было выполнено больше поисковых запросов Google, чем с настольных компьютеров, и вам лучше поверить, что с тех пор их количество только увеличилось!
Если вы читаете эту статью, скорее всего, вы уже знаете о важности наличия веб-сайта, удобного для мобильных устройств, и хотите убедиться, что ваш сайт предлагает пользователям мобильных устройств отличный опыт. Мы можем научить вас, как это сделать!
Чтобы ваш веб-сайт был оптимизирован для мобильных устройств, вам необходимо:
- Выберите тему или шаблон, адаптированный для мобильных устройств
- Сократите содержимое
- Сделайте изображения и CSS как можно более легкими
- Избегайте Flash
- Измените размер и расположение кнопок читаемый шрифт
- Устранение всплывающих окон
- Регулярное тестирование
Но сначала, что на самом деле означает «удобство для мобильных устройств»?
Когда мы говорим о «удобном для мобильных устройств» веб-сайте, мы имеем в виду отображение другой «версии» вашего веб-сайта для посетителей, просматривающих ваш сайт с мобильных устройств, чтобы сделать их более удобными.
Этого можно добиться несколькими способами:
- Адаптивный дизайн — дизайн вашего веб-сайта адаптируется к размеру экрана, независимо от того, изменяете ли вы размер вкладки на рабочем столе или просматриваете сайт с мобильного устройства или планшета. .
- Динамическое обслуживание — посетителям показывается другая, специально созданная версия сайта, в зависимости от устройства, с которого они просматривают.
- Мобильное приложение — в некоторых случаях имеет смысл иметь совершенно отдельное приложение для вашей мобильной аудитории (хотя в этом случае вы также должны убедиться, что ваш веб-сайт готов для тех, кто не хочу скачать).
Адаптивный дизайн — это минимум, к которому вы должны стремиться, и это то, что рекомендует Google, не говоря уже о том, что это один из основных способов сделать ваш сайт более доступным. Тем не менее, мы считаем, что в любом случае стоит продолжить редактирование вашего автоматически сгенерированного мобильного сайта — в конце концов, вы хотите стремиться к фантастическому мобильному пользовательскому опыту, а не к «приемлемому».
Если вы считаете, что мобильное приложение подойдет для вашего сайта, мы рекомендуем связаться с разработчиком, который может помочь вам в этом.
Вот некоторые другие статьи, которые могут вам понравиться:
Как создать веб-сайт . Если вы начинаете разрабатывать (или редизайн!) свой веб-сайт, ознакомьтесь с пошаговым руководством в этой статье. , и основные моменты, которые следует учитывать.
Как создать сайт – Вы еще не начали работу над своим сайтом? Не беспокойтесь, это руководство проведет вас через весь процесс!
5 лучших конструкторов веб-сайтов для SEO . Любой конструктор веб-сайтов с сильным SEO поставляется с мобильным интерфейсом, встроенным прямо в его шаблоны. Вот пятерка лучших.
Советы по интернет-маркетингу – Хотите узнать больше об онлайн-маркетинге? Ознакомьтесь с нашими главными советами сегодня…
Итак, это первый шаг, и он большой: выберите тему или шаблон, адаптированный для мобильных устройств!
Поскольку дизайн, адаптированный для мобильных устройств, очень важен, почти каждый ведущий конструктор веб-сайтов включил его в каждый из своих шаблонов. Например:
Squarespace — идеально адаптируется к мобильным устройствам и будет нашим лучшим выбором, если вы создаете сайт с нуля и считаете мобильное взаимодействие своим главным приоритетом.
Wix — все шаблоны адаптируются к мобильным устройствам, но всегда обязательно проверяйте мобильное представление по мере использования. Поскольку сайты Wix настолько настраиваемые, иногда большие изменения не переносятся так гладко, и вам придется внести некоторые изменения.
Если вы создаете сайт с помощью системы CMS, такой как WordPress, убедитесь, что тема, которую вы выбрали для создания своего сайта, адаптирована для мобильных устройств, или, если вы уже создали сайт, переключитесь на такую!
Просто найдите «отзывчивую тему» в собственной библиотеке тем WordPress или на стороннем сайте, таком как Themeforest. Обязательно читайте отзывы и, если возможно, загляните на любые сайты, использующие эту тему со своего мобильного телефона, чтобы оценить опыт для себя.
Помогите! Что делать, если у меня неотзывчивая тема, и я не могу ее переключить?
Если ваш веб-сайт был создан с использованием старой неотзывчивой темы или шаблона, и вы не можете его переключить, попробуйте добавить эту строку кода в тег
каждой страницы:Это означает, что ваши страницы должны автоматически переформатироваться, чтобы соответствовать ширине устройства, переключаясь с альбомного стиля на портретный.
Вы выбрали прекрасную адаптивную тему или шаблон, так что теперь все готово, верно? Неправильный!
Переход на правильный шаблон или тему — это большой шаг, но это лишь один из нескольких шагов, которые вы должны сделать, чтобы улучшить мобильное взаимодействие.
Теперь пришло время взглянуть на автоматизированное мобильное представление вашего веб-сайта и убрать его обратно:
Уточнить ваше предложение
Определите основную цель страницы, на которой вы находитесь, и не стесняйтесь делать это. это намного заметнее в вашей мобильной версии.
Взгляните на этот пример из Trainline:
Домашняя страница предназначена для поощрения пользователей к поиску билетов на поезд, и эта форма занимает центральное место в мобильной версии. В настольной версии это может показаться слишком навязчивым, но в мобильной версии это работает.
Избегайте больших кусков текста
Копия на вашем веб-сайте должна быть короткой и приятной в лучшем случае (за исключением сообщений в блогах, таких как этот!), но на мобильных устройствах это становится еще более важным. Ознакомьтесь с нашими советами по написанию текстов для Интернета и используйте свои виртуальные ножницы для любых длинных фрагментов текста.
Сокращение форм
Заполнение длинных форм и в лучшие времена было рутиной, но на мобильном телефоне? В движении? Забудь это! Длинные формы потеряют читателей быстрее, чем вы успеете сказать «это обязательное поле». Убедитесь, что каждая форма, которую вы отображаете на мобильном телефоне, запрашивает только абсолютно необходимую информацию.
Лучший совет! Надоедливая автокоррекция — верный способ превратить заполнение форм в большую трату времени. Спасите своих читателей от стресса, отключив его. Если у вас есть доступ к коду формы, убедитесь, что в поле автозамены установлено значение автокоррекция=выкл. .
Сделать ваш веб-сайт максимально легким — это всегда хорошая идея, но что именно это означает? Что ж, каждый элемент на вашем веб-сайте имеет виртуальный «вес» — будь то видео или изображение, имеющее размер файла, или код, который необходимо загружать каждый раз, когда на веб-сайт нажимают.
Google очень ясно дал понять, что скорость веб-сайта является решающим фактором ранжирования, а это означает, что медленные (также известные как «тяжелые») веб-сайты проигрывают в конкуренции на страницах результатов поисковой системы (SERP).
Когда речь идет о мобильных устройствах, это тем более важно. Если вы когда-нибудь пытались загрузить веб-страницу где-нибудь в отдалении, только чтобы наблюдать, как каждый элемент мучительно медленно встает на свои места, вы поймете, почему.
Что с этим делать?
Сжатие изображений
Когда вы загружаете любое изображение на свой сайт — в мобильной или настольной версии — очень важно, чтобы вы сжимали свои изображения с помощью бесплатного онлайн-инструмента, такого как kraken.io. Это значительно уменьшает размер файла ваших изображений без ущерба для качества изображения.
Разместите свои видео у третьей стороны
Загружая свои видео третьей стороне, а затем встраивая их на свой сайт, это означает, что виртуальный «вес» этих видео в основном сохраняется на выбранном сайте, а не на вашем.
Wistia — популярная платформа для этого, но YouTube также работает — вам просто нужно убедиться, что вы отключили автовоспроизведение, чтобы несвязанное видео не воспроизводилось после вашего. Для этого просто:
- Перейдите на свою страницу WordPress или опубликуйте
- Найдите встроенный код и нажмите на вкладку «текст»
- Найдите часть с надписью src=»youtubeurlhere»
- Добавьте ?autoplay=0&rel=0 после youtubeurlhere
- Теперь код должен выглядеть как src= ”youtubeurlhere?autoplay=0&rel=0″
- Нажмите «Обновить», и все готово
Лучший совет! Если вы не думаете, что ваш контент будет хорошо размещаться на YouTube (некоторые видео не имеют большого смысла без контекста полной страницы), убедитесь, что вы установили видимость «не в списке». Таким образом, никто не наткнется на него нигде, кроме вашего сайта.
Flash часто используется для создания анимации, но обычно он не поддерживается мобильными устройствами, поэтому его лучше вообще избегать.
Практически каждый веб-сайт использует кнопки для перехода к другим разделам или формам. Но «хорошая» кнопка может быстро стать «плохой» на мобильном устройстве, если она находится в неправильном месте или имеет неправильный размер.
Подумайте о том, как вы держите и используете свой телефон. Скорее всего, вы используете большие пальцы практически для всего, а это означает, что все, чего вы не можете достать большим пальцем, становится полной болью.
Вот где вы должны стремиться разместить CTA на мобильном сайте:
Итак, теперь у вас есть кнопки в нужном месте, пришло время сделать их нужного размера. Как правило, это означает, что вам нужно немного увеличить их — в конце концов, гораздо сложнее точно щелкнуть большим пальцем, чем мышью.
Говоря о том, насколько сложно точно щелкнуть большим пальцем, а не мышью, это подводит нас к следующему пункту: посмотрите на свои ссылки!
В частности, вам нужно проверить, чтобы все гиперссылки на вашем мобильном сайте:
- не располагались слишком близко друг к другу , чтобы люди случайно не нажали не ту ссылку.
- Ссылки на страницы, которые также оптимизированы для мобильных устройств для беспрепятственного взаимодействия с пользователем.
Рекомендуется использовать размер шрифта не менее 14 пикселей на рабочем столе, но обязательно проверьте, как он выглядит на мобильной версии — скорее всего, он покажется вам немного маленьким, и вам захочется поднимите его немного.
Также дважды проверьте читабельность вашего шрифта. Одно дело попробовать более экспериментальный шрифт на десктопе, но вряд ли этот шаг окупится на мобильных устройствах. Тем не менее, вы захотите, чтобы шрифты были как можно более «фирменными» на всех платформах.
При работе над мобильным представлением вашего сайта у вас есть гораздо меньшая область для игры. На рабочем столе вы можете отделять текст разрывами строк и изображениями. На мобильных устройствах попробуйте вместо этого выделять жирным шрифтом или заглавными буквами разные строки текста, чтобы они не сливались друг с другом.
При осторожном использовании всплывающие окна могут очень хорошо работать на настольной версии сайта. Вы могли заметить, что мы используем их на многих страницах здесь, на WBE.
Но когда дело доходит до мобильных устройств, лучше избегать всплывающих окон. Мало того, что у вас есть меньший экран, но вы не можете настроить всплывающее окно так, чтобы оно срабатывало в ключевые моменты, например, когда пользователь уходит с вашего экрана.
Лучший способ узнать, насколько ваш мобильный сайт удобен для мобильных устройств, — протестировать его! Вы можете сделать это тремя разными способами:
Запустите URL-адреса с помощью инструмента Google для мобильных устройств
У Google есть бесплатный инструмент для тестирования мобильных устройств, который любой может использовать для проверки того, насколько удобен для мобильных устройств тот или иной URL-адрес, будь то домашняя страница (как показано ниже) или страница в вашем сайт.
Попробуйте разные размеры устройств на своем рабочем столе
Отличный способ проверить, насколько отзывчив ваш сайт, — просто поиграть с формой открытой вкладки веб-сайта. Когда вы уменьшите ширину своей вкладки, вы должны заметить, что ваш сайт начинает «сжиматься» и превращается в более удобную для мобильных устройств версию.
Чтобы быстро проверить внешний вид чего-либо на мобильном устройстве, вы также можете щелкнуть правой кнопкой мыши на своей веб-странице, выбрать «Проверить», а затем щелкнуть значок двух экранов, который появляется на панели инструментов вверху:
Спасибо, что остаетесь с нами. нам, поскольку мы объяснили, как сделать ваш веб-сайт удобным для мобильных устройств. Вот эти шаги еще раз:
Как сделать ваш веб-сайт удобным для мобильных устройств:
- Выберите тему или шаблон для мобильных устройств
- Удалите свой контент
- Сделайте изображения и CSS максимально легкими
- Избегайте Flash
- Измените размер и расположение кнопок
- Расставьте ссылки
- Используйте крупный и читаемый шрифт для большинства сайтов заключается в том, что основная часть тяжелой работы, скорее всего, будет сделана за вас вашей темой или шаблоном.