Очень важно, чтобы ваш сайт хорошо смотрелся на любом устройстве. В этой статье расскажу, как протестировать сайт, чтобы вы были уверены, что он выглядит фантастически, где бы ни находились читатели.
Не так давно нам нужно было беспокоиться только о размере экрана настольного компьютера. Сейчас существует так много разных типов, от огромных телевизионных до самых маленьких мобильных.
Если вы посмотрите на свою статистику, то наверняка увидите, что уже сегодня 50% читателей приходят с мобильных телефонов и это число будет расти.
Если ваш блог/сайт плохо смотрится на мобильном телефоне или медленно загружается, то можно попрощаться со значительной частью вашей потенциальной аудитории.
Может быть, вы думаете, что у меня замечательная тема, которая полностью адаптивна, поэтому она должна хорошо выглядеть на мобильных.
Однако, как только начнёте добавлять всплывающие окна, уведомление о файлах cookie, фиксированные заголовки, кнопки соцсетей, рекламу на ваш ресурс, он может стать непригодным для использования.
Наша задача, чтобы сайт выглядел красиво и загружался быстро на любых устройствах независимо от размера экрана.
Но как узнать, как выглядит ваш блог на разных устройства?
Давайте пробежимся по вариантам.
Как протестировать сайт на мобильном телефоне
Ваш первый вариант – протестировать свой блог на собственном мобильном телефоне. Если у вас маленький экран, у вас есть преимущество. Вам легче понять, как ваш ресурс выглядит на маленьком экране.
Когда вы откроите свой сайт на мобильном, то убедитесь, что ваш текст достаточно большой и его легко читать.
Я ставлю размер для мобильников не менее 14-16 пикселей.
Заголовки, не должны быть слишком большие и растягиваться на весь экран телефона.
Если у вас хорошая тема, значит, вы можете редактировать размеры шрифта в настройках WordPress. Перейдите — Внешний вид -> Настроить, там должен быть раздел – Типографика.
Некоторые всплывающие окна, такие как GDPR и подписки, появляются только для новых пользователей, поскольку они основаны на наличии файла cookie.
Поэтому следующий тест мы проведём в режиме ИНКОГНИТО. В настройках вашего браузера найдите открыть новое окно в режиме инкогнито (в хроме — это в адресной строке три вертикальные точки справа).
Таким образом, мы можем видеть, мешают ли всплывающие окна или уведомления новым посетителям просматривать контент.
Откройте свой сайт либо на домашней странице, либо на странице блога.
.
Как выглядит ваш сайт? Есть ли у вас что-нибудь, касающееся уведомления о файлах cookie, мешающее людям кликнуть, чтобы принять?
Попробуйте прокрутить. Достаточно ли места для чтения? Не закрывают ли кнопки основной текст.
Как протестировать сайт в настройщике WordPress
Когда вы настраивали сайт, заметили ли вы внизу значки устройств?
Параметры довольно простые, можно выбрать только рабочий стол, планшет или телефон, это быстрый способ увидеть, как сайт выглядит на стандартных размерах.
Если есть проблемы, можно сразу их решить
Использование браузера Хром для тестирования экранов разных размеров
Параметры, доступные в настройщике WordPress для тестирования на экранах разных размеров очень ограничены. Можно проверить другие размеры экрана с помощью инструментов, доступных в вашем настольном браузере. В этом руководстве я расскажу, как использовать браузер Хром.
Откройте свой блог в хроме. Окно в режиме инкогнито (Shift + Ctrl + N) лучше всего, потому что мы увидим, как ваш блог ведёт себя для новых посетителей.
Нажмите на горячие клавиши (Shift + Ctrl + I) или щёлкните правой кнопкой мыши и выберите ПОСМОТРЕТЬ КОД
Нажмите на значок ПЕРЕКЛЮЧИТЬ УСТРОЙСТВО в верхнем левом углу экрана или воспользуйтесь сочетанием клавиш Ctrl + Shift + M
На верхней панели инструментов вы можете выбрать различные устройства. Если нет нужного вам размера, на котором вы хотите протестировать, выберите Изменить, чтобы открыть дополнительные параметры.
Протестуйте свой блог с помощью приложения
Последний (но не менее важный) вариант — протестировать сайт с помощью приложения.
Изначально средство проверки адаптивного дизайна было создано компанией, занимающейся дизайном веб-сайтов, для их собственного использования, но они любезно сделали его общедоступным для всех.
Проверка адаптивного дизайна — это бесплатный онлайн-инструмент, который позволяет просматривать ваш веб-сайт на большом количестве компьютеров, планшетов и телефонов разных размеров.
Просмотрите свой сайт, проверяя каждую страницу на разных размерах экрана, как если бы вы видели её на самом устройстве.
Чтобы проверить, всё, что вам нужно сделать, это вставить URL-адрес веб-сайта. И можете тестировать его на любом устройстве, используя значки слева.
Заключительные мысли о том, как протестировать ваш сайт на разных устройствах
В этой статье я рассказала вам о четырёх вариантах для тестирования блога на экранах разных размеров. Необязательно покупать все доступные устройства, чтобы сайт хорошо смотрелся на всех типах телефонов и планшетов. Есть много бесплатных способов проверить самостоятельно, не будучи техническим гением.
Не совершайте ошибку, просто протестировав свой блог один раз и назвав его хорошим. Ваш ресурс постоянно меняется, поэтому вам необходимо регулярно проверять его, чтобы он всегда выглядел великолепно.
