Проверка адаптивной верстки. Чем тестировать адаптивный дизайн? В метатеге viewport должно быть значение device-width
Здравствуйте, дорогие читатели блога. Как уже и не удивительно, что адаптивный дизайн становится всё популярнее в русском интернете. И конечно же верстальщикам нужно изучать его. Так как адаптивный дизайн скоро будет практически на всех сайтах, потому что всё больше лди пользуются мобильными устройствами.
И хочется сказать, что сайты с на много удобнее читать на таких устройствах нежели без него.
Сегодня я хочу представить Вам 5 очень полезных и классных сервисов, с помощью которых Вы сможете проверить сайт на адаптивность.
И так, поехали.
5 сервисов на которых можно проверить сайт на адаптивность.
www.responsivedesigntest.net
Хороший сервис для проверки сайтов. Есть множество разрешений экранов как планшетов так и телефонов.
mattkersley.com
Простой сервис для проверки сайта на от Matt Kersley. Так же доступны все популярные разрешения мобильных девайсов.
screenqueri.es
Очень классный сервис, который проверит любой сайт. Очень понравилось оформление, а так же функциональность.
quirktools.com
Очень красивый и функциональный сервис. Есть возможно даже проверить как будет выглядеть сайт на телевизоре:-)
2015-09-11 8204 4 Денис Абдуллин
Адаптивный дизайн не просто новый тренд, а в некоторой степени необходимость. Теперь и русские сайты делают такими, чтобы они хорошо смотрелись красиво и удобно на любом экране.
Мы делимся с вами списком сервисов онлайн проверки адаптивности сайта . В отличии от других блогов, у нас только лучшие сервисы.
Отмечу, что в официальном магазине uCoz шаблонов , все темы адаптивны, т.к. это одного из главных условий публикации шаблона на продажу.
Screenfly – проверка адаптивности сайта с выбором дейвайса
Сервис Screenfly вынесен как первым потому, что он имеет список размеров популярных экранов мобильных телефонов, смартфонов, ноутбуков и настольных компьютеров. Разумеется можно задать свои размеры и посмотреть, также есть возможность просмотра сайта через прокси-сервер, включение и отключение скроллинга.
Mattkersley – все размеры на одной странице
Проект хорош тем, что вы вводите ссылку на свой сайт, а он загружает его во все фреймы, что есть на страницы. Можно сразу тестировать сайт на 5 размерах. Есть 2 режима: просто тестировать ширину или показать названия устройств и их высоту.
Responsive.is – проверка адаптивности на нескольких устройствах
Хороший и удобный сервис, но проверить сайт можно только на 5 устройствах. По сравнению с предыдущими сервисами это очень мало. Для тех пользователей, кто теряется во всех этих размерах, здесь они даже неуказываются, просто показаны значки устройств.
Лично я не пользуюсь такими сервисами, а просто уменьшаю ширину браузера . Плюс ко всему, сервисы проверки адаптивности сайта делают тоже самое, лучше смотреть свой проект на реальных устройствах, в стандартных браузерах Android и Safari на iPhone.
Есть и другие сервисы, в том числе и на русском языке. Сначала мы хотели привести именно их, но они просто копировали выше перечисленные сайты, просто переведен имеющийся текст, просто вместо «Phone», например, вы будете видеть «Телефон».
Приветствую вас! Вот и настало время поговорить про адаптивность сайта. Это как вы наверняка знаете очень важный параметр. С каждым новым днем количество пользователей планшетов и смартфонов увеличивается. У меня на блоге приходит 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 имеет богатый функционал. С помощью этого из инструментов Мозилы мы и проверим сайт на адаптивность. Выполняем следующие шаги: идем в «меню» — «разработка» — «адаптивный дизайн». Эти действия можно проделать с помощью клавиатуры, нажав одновременно несколько клавишей ++[M].
После проделанных шагов вы увидите следующее.
Меняя разрешение, вы сможете увидеть, как отображается ваш проект у мобильной аудитории.
Проверка адаптивности сайта Google
С помощью мега гиганта Google Chrome, также можно проверить адаптивность вашего проекта. Делаем следующее: идем в «меню», далее в пункт «Дополнительные инструменты», и «инструменты разработчика ()».
Проверка сайта на адаптивность яндекс
Если вы хотите проверить сайт на адаптивность Яндекс, вам нужно пройти регистрацию в Яндекс. Вебмастер. Заходим в вебмастер, далее находим пункт «Проверка мобильных страниц», нажимаем на этот пункт и смотрим результат.
Заключение
Я считаю, что в повседневной работе с дизайном сайта проще будет использовать функционал браузеров Google и Mozilla. Ну а для успокоения души пользуйтесь онлайн сервисами для проверки адаптивности сайта. Проверяйте ваш проект на адаптивность, вносите изменения, исправляйте ошибки. Ну а на этом у меня все. Всем пока!
С уважением Вячеслав Коптяков!
Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 20% посетителей моего блога используют мобильные устройства для просмотра. То есть каждый пятый заходит на мой сайт с телефона или планшета.
Несколько лет назад я даже не думал о таких посетителях, но когда их количество превысило 10% от общего числа я стал использовать адаптивную верстку. Это позволило корректно отображать контент на мобильных устройствах и повысить лояльность к сайту как посетителей, так и поисковых систем.
Мобильная версия сайта и адаптивный дизайн — это не одно и тоже. В данной статье речь пойдет о тестировании адаптивной верстки, когда дизайн сайта, меняется в зависимости от разрешения экрана устройства посетителя.
Чтобы быть уверенным, что ваш сайт правильно отображается на мобильных устройствах необходимо произвести проверку, и для этого существует несколько полезных сервисов и инструментов.
Быстрая проверка адаптивной верстки
Популярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]
Вы должны увидеть примерно следующую картину:
Изменяя разрешение и ориентацию экрана можно проверить как будет отображаться ваш сайт у мобильных посетителей.
Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу ).
После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):
В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:
SEO тестирование мобильного дизайна
Как известно у двух мировых поисковых лидеров Google и Яндекс есть свое нескромное мнение как должен выглядеть сайт на экранах мобильных устройств. И если сайт признается неудобным для мобильных посетителей, то он понижается в поисковой выдаче. Таким образом, с точки зрения SEO, если вы не хотите потерять мобильных посетителей, то у вас должен быть не только адаптивный дизайн, но и поисковые системы должны считать его таковым, то есть пригодным для мобильных устройств.
Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .
Вот так выглядит результат проверки моего блога:
С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:
Он-лайн сервисы по проверки адаптивности
Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.
Google resizer
Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#
Quirktools screenfly
Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!
Symby.ru adaptest
Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.
Скорость работы мобильной версии сайта
После того, как вы убедились, что ваш сайт адаптивный и корректно отображается на экранах большинства устройств, следует проверить скорость его работы. Опять же применительно к мобильным посетителям.
PageSpeed Insights
Google как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.
WebPageTest
И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/
Выводы
На мой взгляд в повседневной работе при внесении изменений в дизайн сайта проще использовать встроенные возможности браузеров FireFox и Chrome. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.
Тест показывает, как выглядит адаптивный сайт на различных мобильных устройствах. Для проверки ваш сайт должен поддерживать загрузку и работу во фреймах. Для удобства просмотра переведите браузер в полноэкранный режим.
Проверить
Что такое адаптивный сайт?
Адаптивный сайт автоматически подстраивается под ширину устройства. При этом блоки сайта могут скрываться или видоизменяться. Например, на компьютере логотип и меню сайта располагаются слева направо, а на телефоне — сверху вниз.
Чем отличается адаптивный сайт от мобильной версии?
Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.
Если же у сайта нет мобильной версии, адрес сайта не изменится при загрузке с телефона. На телефон будут загружаться те же самые данные, что и на компьютер. Чаще всего это неудобно для пользователя, потому что экран телефона меньше в несколько раз.
Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.
Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.
Адаптивный сайт совмещает в себе и обычный (для PC), и мобильный (для телефонов), и несколько промежуточных вариантов (крупные телефоны, планшеты, телевизоры и т.д.). Главное преимущество адаптивного сайта — он хорошо выглядит на любой ширине экрана.
Почему ширина телефона в данном сервисе такая маленькая?
Реальное количество пикселей на современных гаджетах, как правило, очень велико, а сайты не рассчитаны на такую огромную ширину. Поэтому мобильные устройства с экранами повышенной чёткости открывают сайты, приведя их к некоему виртуальному стандарту. Чтобы узнать эти цифры у себя, нажмите кнопку, открыв эту страницу с телефона или планшета:
Какой у меня размер окна браузера?
На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.