Как правильно проверить сайт на мобильность с помощью браузера

Здравствуйте, друзья! Я не удивлю Вас, если скажу, что сейчас в Сети можно найти любой, подходящий шаблон (тему) для сайта. Вы это знаете и без меня, равно как и знаете то, что одним из критериев для отбора шаблона является его адаптивность под мобильные устройства. Но к сожалению не всегда заявленная автором темы эта самая адаптивность дизайна является качественной. А это уже проблема! И данную статью я написал, как раз для того, чтобы Вы смогли еще раз проверить свой сайт на мобильность самыми простыми, но эффективными инструментами.

Для начала кратко расскажу историю выбора своего шаблона. Помимо мобильности меня конечно интересовала и структура сайта, функционал, заложенный в шаблон, ведь мне обязательно нужен был слайдер на главной странице, по максимуму предустановленных виджетов…   В общем хотелось всего сразу и побольше. И я нашел несколько таких шаблонов одного автора.

В то время я не вдавался в нюансы, и делал самую простенькую проверку путем элементарного уменьшения ширины окна браузера. Где-то на просторах Интернета я вычитал, что такая проверка в браузере Mozilla Firefox гарантирует 100% результат. В общем, поставил я самую приглянувшуюся тему и начал творить…

Вы понимаете какая гордость распирала меня после первых успехов в настройках шаблона. Я кое-что приукрасил, внес свои изменения в стили, разработал логотип. В общем было все кроме написанных статей…

Первый сайт на WordPress уже начал подавать признаки рождения. И теперь представьте мое разочарование, когда я зашел на него со смартфона. Шок проходил минут десять! При вертикальном положении смартфона (экран 480х750рх) шапка сайта растягивалась не просто на 750рх высоты экрана, но и все равно при этом требовала прокрутки. Вот тебе и мобильный шаблон!

Жаль, что я тогда не сделал скриншотов, сейчас бы можно было показать наглядно. Среди десятка ранее скачанных шаблонов примерно половина в итоге не прошли мой смартфонный тест. Вот такие дела! Это сейчас я уже знаю, как правильно проверить шаблон на мобильность с помощью браузеров, знаю несколько сервисов, которые делают такие проверки. Вот собственно этими знаниями я и поделюсь с Вами в этой статье.

Начнем с браузеров. Работать будем с Mozilla Firefox и с Google Chrome. Открываете свой сайт и кликаете в любом его месте правой кнопкой мыши. Появляется вот такое окно, в котором нужно в зависимости от браузера выбрать указанную строку и кликнуть по ней уже левой кнопкой мыши.

В нижней части окна браузера  Mozilla Firefox появится дополнительная двойная строка-меню. В Google Chrome окно браузера поделится на две части. Слева будет Ваш сайт, а справа код страницы. Вверху над кодом также появится строка-меню. На скриншоте я указал, какие значки нужно нажать в каждом из браузеров, чтобы браузер начал показывать режим адаптивного дизайна.

Теперь в браузерах рядом с изображением сайта появятся две вертикальные полоски. На скриншотах они обведены кружком.  Наводим курсор на них, зажимаем левую кнопку мыши и начинаем смещение по горизонтали. В левом верхнем окне Вы будете видеть текущие размеры страницы своего сайта, а если точнее, то размер экрана виртуального мобильного гаджета.  Вот так это выглядит в браузере  Mozilla Firefox:

А так в браузере Google Chrome:

Если нажать на указанные треугольные значки рядом с размерами, то можно сразу оперативно выбрать определенный размер, причем в Mozilla Firefox это будет в числовом выражении, а в Google Chrome с привязкой к моделям мобильных гаджетов. В первом браузере Вы можете задать свои значения через команду «Добавить пресет», а во втором – через «Edit» выбрать другую модель.

Шестое чувство мне подсказывает, что западные шаблоны однозначно «заточены» под iPhone, iPad  и скорее всего за адаптивность к этим гаджетам можно не переживать.

Но большинство наших сограждан не обременены этими девайсами и пользуются, как и я, «китайцами» или «корейцами». А у них размерность (разрешение) экрана уже другие.

И поскольку каждый из нас творит в интересах большинства, то советую обращать внимание на следующие размерности: 320, 420, 480, 540, 600, 750, 800px по ширине. При этом значения по высоте особой роли не играют.

Такая экспресс проверка будет очень полезна тем, кто пользуется программой Adobe Muse для разработки лендингов или подписных страниц. Благо, что свежие версии Adobe Muse уже позволяют пользователю самому настраивать так называемые точки останова – точки смены дизайна. Ну а в наше время адаптированным должен быть не только сам сайт, но и все Ваши предложения.

Да, чуть не забыл, про специальные сервисы для проверки на адаптивность. Я не буду писать здесь в статье о них, а просто предлагаю посмотреть это видео.

Ссылки на сервисы я оставил в описании под видео. Забирайте их себе в закладки. Пишите в комментариях ниже, как прошли ходовые испытания на мобильность Ваши сайты. Я надеюсь, что все у Вас хорошо. Ну а, если что-то не так, то не огорчайтесь, всегда можно сменить тему. Конечно будут нюансы с дизайном. А вдруг новая тема принесет Вам удачу?

С уважением, Сергей Почечуев