
Анимация файлов SVG с новым инструментом SVGator
Приветствую вас! Вот и настало время поговорить про адаптивность сайта. Это как вы наверняка знаете очень важный параметр. С каждым новым днем количество пользователей планшетов и смартфонов увеличивается. У меня на блоге приходит 30% трафика с мобильных устройств. Когда процент мобильного трафика увеличился я стал задумываться об адаптивной верстке, что советую сделать и вам. Что вам это даст? Это позволит повысить лояльность к блогу как поисковых роботов, так и посетителей.
Даже большое число современных шаблонов уже идут с адаптивным дизайном. Конечно дизайн не всегда сделан качественно, поэтому приходится самостоятельно вносить разного рода правки и доработки. Как проверить адаптивность сайта? Для этого существуют множество полезных инструментов и сервисов.
На сколько адаптивный и качественный дизайн вашего веб-сайта мы проверим с помощью встроенного функционала браузеров, а также нескольких онлайн-сервисов. Ну что приступим? Давайте сначала начнем с сервисов онлайн.
7 сервисов для проверки адаптивности сайта онлайн
1. Онлайн сервис ami.responsivedesign.is
Вы попали на главную страницу сервиса.
Прокручиваем в самый низ и в поле ввода пишем адрес вашего блога. Жмем на кнопку «Go».
По истечению некоторого времени вы сможете посмотреть, проверку адаптивности сайта на различных устройствах. Сервис очень хороший, но есть небольшой дефект. А заключается он в том, что не может показать адаптивность на нескольких наиболее популярных разрешениях.
Планшеты и мобильники имеют разные размеры экрана и соответственно различные разрешения. Поэтому полного анализа от этого сервиса вы не дождетесь)).
2. Онлайн сервис deviceponsive.com
Здесь все аналогично, как и в предыдущем сервисе. Вставляем адрес сайта в поле ввода и жмем «Go».
Теперь нам нужно спуститься немного ниже, где мы увидим первое устройство «MacBook», которое имеет разрешение 1280 х 800 пикселей.
Вы можете прокручивать страничку вниз и нажимать на необходимые элементы и проверять адаптивность. Если прокрутить ниже, то вы увидите, как выглядит ваш проект на других устройствах, начиная от разрешения 1280×800, и заканчивая 320×240 пикселей. Этот сервис покажет вам полную картину, в отличие от предыдущего.
3. Онлайн сервис responsinator.com
В левом верхнем углу в окошко вставляем название вашего ресурса, нажимаем «Go». Придется немного подождать, пока страница прогрузится, и вы сможете посмотреть результат.
Здесь подписана ширина каждого экрана из устройств, а их здесь предостаточно.
4. Онлайн сервис quirktools.com
Еще один сервис с помощью которого вы проверите адаптивность сайта онлайн. В поле вставляем название веб-сайта и нажимаем «Go».
Что здесь мне нравиться, то что сервис может показать адаптивность даже телевизора)).
5. Онлайн сервис symby.ru
Проделываем знакомые вам шаги и радуемся результату.
6. Онлайн сервис responsive.is
Замечательный проект для теста на адаптивность сайта. Существует множество разрешений экранов телефонов, а также планшетов.
7. Онлайн сервис mattkersley.com
Простейший сервис для проверки сайта на адаптивный дизайн. Здесь доступны практически все известные разрешения мобильных девайсов.
Проверить сайт на адаптивность к мобильным устройствам с помощью браузера Mozilla
Знаменитый браузер Mozilla Firefox имеет богатый функционал. С помощью этого из инструментов Мозилы мы и проверим сайт на адаптивность. Выполняем следующие шаги: идем в «меню» — «разработка» — «адаптивный дизайн». Эти действия можно проделать с помощью клавиатуры, нажав одновременно несколько клавишей [Ctrl]+[Shift]+[M].
После проделанных шагов вы увидите следующее.
Меняя разрешение, вы сможете увидеть, как отображается ваш проект у мобильной аудитории.
Проверка адаптивности сайта Google
С помощью мега гиганта Google Chrome, также можно проверить адаптивность вашего проекта. Делаем следующее: идем в «меню», далее в пункт «Дополнительные инструменты», и «инструменты разработчика ([F12])».
Далее жмем на иконку, которая изображена на рисунке, либо воспользуйтесь клавишами [Ctrl]+[Shift]+[M].
Далее, в самой середине страницы вы увидите, как отображается ваш ресурс на мобильных устройствах.
Проверка сайта на адаптивность яндекс
Если вы хотите проверить сайт на адаптивность Яндекс, вам нужно пройти регистрацию в Яндекс. Вебмастер. Заходим в вебмастер, далее находим пункт «Проверка мобильных страниц», нажимаем на этот пункт и смотрим результат.
Заключение
Я считаю, что в повседневной работе с дизайном сайта проще будет использовать функционал браузеров Google и Mozilla. Ну а для успокоения души пользуйтесь онлайн сервисами для проверки адаптивности сайта. Проверяйте ваш проект на адаптивность, вносите изменения, исправляйте ошибки. Ну а на этом у меня все. Всем пока!
С уважением Вячеслав Коптяков!