Проверка верстки на разных устройствах. Как тестировать адаптивный веб-дизайн? Проблематика проверки адаптивной верстки
Здравствуйте, дорогие читатели блога. Как уже и не удивительно, что адаптивный дизайн становится всё популярнее в русском интернете. И конечно же верстальщикам нужно изучать его. Так как адаптивный дизайн скоро будет практически на всех сайтах, потому что всё больше лди пользуются мобильными устройствами.
И хочется сказать, что сайты с на много удобнее читать на таких устройствах нежели без него.
Сегодня я хочу представить Вам 5 очень полезных и классных сервисов, с помощью которых Вы сможете проверить сайт на адаптивность.
И так, поехали.
5 сервисов на которых можно проверить сайт на адаптивность. www.responsivedesigntest.netХороший сервис для проверки сайтов. Есть множество разрешений экранов как планшетов так и телефонов.
mattkersley.comПростой сервис для проверки сайта на от Matt Kersley. Так же доступны все популярные разрешения мобильных девайсов.
Очень классный сервис, который проверит любой сайт. Очень понравилось оформление, а так же функциональность.
Очень красивый и функциональный сервис. Есть возможно даже проверить как будет выглядеть сайт на телевизоре:-)
Технологии постоянно улучшаются, смартфоны и планшеты становятся более "крутыми", а пользователи мобильными. На данный момент количество аудитории с мобильных устройств превысило пользователей с персональных компьютеров. Не даром это повлекло целое направление сайтов под мобильные устройства.
Например, если открыть обычный сайт (без адаптивной верстки и мобильной версии) через смартфон, то, скорее всего, он откроется в неудобном для пользователя виде. Т.е. контент будет отображен полностью, но будет присутствовать горизонтальная прокрутка, что плохо.
1. Адаптивная верстка сайта - что это такоеАдаптивная верстка сайта - это такая html верстка, в которой в зависимости от размеров окна браузера сайт "трансформируется" в удобной для пользователя вид
Отличия мобильной версии сайта и адаптивнойНе стоит путать мобильную версию сайта и адаптивную верстку сайта. Мобильная версия находится на отдельном поддомене и полностью дублирует контент сайта. Адаптивный сайт содержит те же самые адреса URL страниц, но в зависимости от устройства подгружает разные стили CSS, что позволяет отображать сайт в более удобном виде.
2. SEO оптимизация и адаптивная версткаПоисковые системы на данный момент имеют две разные выдачи (они очень похожи). Одну для пользователей ПК, другую мобильную. Если сайт не оптимизирован под мобильные устройства, то это считается отрицательным фактором и позиции сайта будут понижены на 2-3 (бывает и больше). При этом было бы логично, если бы занижались позиции только мобильной версии, однако практика показывает еще и ухудшение позиций и для основной версии сайта.
Такая несправедливость может быть объяснена тем, что поисковики, скорее всего, суммируют поведенческие факторы с ПК и мобильных устройств. В итоге естественно, если сайт не адаптирован, то его ПФ будут хуже и это тянет за собой вниз основную версию сайта.
3. Как проверить сайт на адаптивностьПроверить сайт на адаптивность можно лишь открывая его в различных браузерах и на меняя ширину экрана. Но делать это со множества различных устройств с разными разрешениями - отнимет крайне много времени. Также вряд ли у Вас есть в наличии десятки смартфонов и планшетов.
В интернете есть гораздо более быстрое и простое решение. Например, можно установить в браузер Google Chrome специальный плагин Window Resizer и с помощью него открывать сайт в самых популярных разрешениях.
Можно просто вручную изменять размеры окна браузера по ширине и смотреть результат. В Firefox или Google Chrome есть адаптивный дизайн браузера нажав Ctrl+Shift+M.
Самое главное условие - это добиться отсутствия горизонтальной прокрутки и отсутствия flash-плагинов на странице.
Google первый внедрил в поисковый алгоритм фактор адаптивности. У него есть специальный бесплатный сервис, который анализирует любой сайт на оптимизацию под мобильные устройства. У Яндекса этот функционал появился чуть позже.
После проверки возможно два варианта. Либо сайт оптимизирован, либо нет:
Например, проверка адаптивности в Google:
Проверка адаптивности в Яндексе:
Сделать адаптивную верстку сайта может только человек, разбирающийся в CSS и html . Мы рассмотрим основные моменты, поскольку единого рецепта нет.
Чтобы сделать адаптивную верстку, нужно создавать таблицы стилей CSS в третьей версии. Разница между 2 и 3 есть, но в данном вопросе очень сильное значение имеет отсутствие абсолютных значений в стилях. Короче говоря, все значения размеров блоков длина, ширина, размеры - все это задается в процентах.
Синтаксис CSS @Media
@media тип_устройства and|not|only (медиа_особенности ){ ... Описание стилей... }Например, напишем условия при которых стили будут работать для устройств с шириной экрана меньше 800px.
@media screen and (max-width : 800px ) { ... стили ... } ПримечаниеСтили надо писать последовательно от большого разрешения к маленькому, то есть сначала общие стили, а потом для «урезанных» размеров, например:
@media only screen and (max-width : 1280px ) { ... } @media only screen and (max-width : 1024px ) { ... } @media only screen and (max-width : 800px ) { ... }В заголовочных тегах необходимо обязательно написать строку:
Мета тег viewport говорит, что ширина экрана равна ширине браузера, а каждый пиксель соответствует одному пикселю на устройстве. Если этого не указать, то адаптивность не получится реализовать.
5. Практичные примеры адаптивной верстки сайта 5.1. Адаптируем очень длинные словаНапример, на странице встретится очень длинное слово и тогда если не установлены свойство overflow , то это может повлечь за собой появление горизонтальной прокрутки. Чтобы этого избежать нужно контенту прописать следующие CSS свойства
.hphns { overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; hyphens : auto ; } 5.2. Адаптивное меню сайтаСайдбар сайта как правило занимает ширину в районе 200-300 пикселей, что занимает почти всю ширину браузера на мобильных устройствах. Поэтому чаще всего делают выпадающие меню с помощью стандартной кнопки в виде трех штрихов (это стало уже классикой).
Реализовать это на сайте можно, но придется немного повозиться со стилями. Давайте рассмотрим все по шагам.
Ситуация, когда у нас есть меню и есть основной контент (я не стал рисовать шапку и футер):
Html код такой структуры может быть примерно таким:
body { margin-left : 10% ; width : 70% ; border : 1px solid #eee ; } #menu { width : 20% ; height : auto ; float : left ; } #content { width : 70% ; height : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ; } Меню Название страницыКонтент страницы
Контент страницы
Контент страницы
Контент страницы
Преобразуется на странице в
Минусом этого способа является то, что на маленьких разрешениях меню будет занимать почти всю область по ширине, а значит появится горизонтальная прокрутка или еще хуже - все блоки могут поплыть.
Модифицируем наш пример следующим образом. Если разрешение экрана меньше 800 пикселей, то меню исчезнет и появится специальная кнопка открыть меню.
Приведем html-код адаптивной верстки с комментариями:
body { margin-left : 10% ; width : 70% ; border : 1px solid #eee ; } #menu { width : 20% ; height : auto ; float : left ; display : block ; } #content { width : 70% ; height : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ; } #mob_menu { display:none ; } @media only screen and (max-width : 800px ) { #menu { display : none ; } #mob_menu { display : block ; } #content { clear : both ; } } function showmobmenu() { if ( == "block ") { document.getElementById("menu").style.display = "none " } else { document.getElementById("menu").style.display = "block " } } Раскрыть меню ↓ Меню Название страницыКонтент страницы
Контент страницы
Контент страницы
Контент страницы
Уменьшим ширину экрана до 700 пикселей (к примеру). Вот как это выглядит на странице
Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 20% посетителей моего блога используют мобильные устройства для просмотра. То есть каждый пятый заходит на мой сайт с телефона или планшета.
Несколько лет назад я даже не думал о таких посетителях, но когда их количество превысило 10% от общего числа я стал использовать адаптивную верстку. Это позволило корректно отображать контент на мобильных устройствах и повысить лояльность к сайту как посетителей, так и поисковых систем.
Мобильная версия сайта и адаптивный дизайн — это не одно и тоже. В данной статье речь пойдет о тестировании адаптивной верстки, когда дизайн сайта, меняется в зависимости от разрешения экрана устройства посетителя.
Чтобы быть уверенным, что ваш сайт правильно отображается на мобильных устройствах необходимо произвести проверку, и для этого существует несколько полезных сервисов и инструментов.
Быстрая проверка адаптивной версткиПопулярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]
Вы должны увидеть примерно следующую картину:
Изменяя разрешение и ориентацию экрана можно проверить как будет отображаться ваш сайт у мобильных посетителей.
Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу ).
После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):
В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:
Как известно у двух мировых поисковых лидеров Google и Яндекс есть свое нескромное мнение как должен выглядеть сайт на экранах мобильных устройств. И если сайт признается неудобным для мобильных посетителей, то он понижается в поисковой выдаче. Таким образом, с точки зрения SEO, если вы не хотите потерять мобильных посетителей, то у вас должен быть не только адаптивный дизайн, но и поисковые системы должны считать его таковым, то есть пригодным для мобильных устройств.
Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .
Вот так выглядит результат проверки моего блога:
С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:
Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.
Google resizerНачну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#
Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!
Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.
После того, как вы убедились, что ваш сайт адаптивный и корректно отображается на экранах большинства устройств, следует проверить скорость его работы. Опять же применительно к мобильным посетителям.
PageSpeed InsightsGoogle как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.
И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/
На мой взгляд в повседневной работе при внесении изменений в дизайн сайта проще использовать встроенные возможности браузеров FireFox и Chrome. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.
Как тестировать адаптивный веб-сайт? Какие проблемы возникают при тестировании веб-сайтов на разных устройствах? Как тестирование веб-сайта на настольном мониторе отличается от тестирования на карманном устройстве, например мобильном телефоне? Какие инструменты мы можем использовать для тестирования адаптивных веб-сайтов? Ответить на Ваши вопросы помогут наши
Что такое адаптивный веб-дизайн?Адаптивный веб-дизайн (RWD) - это определение подхода к веб-дизайну, направленное на создание сайтов с целью обеспечения оптимального восприятия - простого чтения и навигации с минимальным размером, панорамированием и прокруткой на широком спектре устройств (от настольных компьютерных мониторов до мобильные телефоны).
Сайт, созданный с помощью RWD, адаптирует макет к среде просмотра с использованием жидкостных, пропорциональных сеток, гибких изображений и медиа-запросов CSS3, следующими способами:
- Концепция жидкой сетки требует, чтобы размер элемента страницы был в относительных единицах, таких как проценты, а не в абсолютных единицах, такие как пиксели или точки.
- Гибкие изображения также оцениваются в относительных единицах, чтобы предотвратить их отображение за пределами содержащего их элемента.
- Запросы мультимедиа позволяют странице использовать разные правила стиля CSS, основываясь на характеристиках устройства, на котором отображается сайт, чаще всего ширины браузера.
Многие люди в настоящее время используют свои мобильные телефоны или планшеты для доступа к веб-сайтам, поэтому тестирование адаптивного веб-дизайна важно, потому что пользовательский интерфейс на мобильных устройствах сильно отличается от настольных компьютеров.
Возможно, самая сложная часть тестирования веб-сайта, отвечающего требованиям, - это то, что веб-сайт работает так, как ожидается на нескольких устройствах и платформах, но фактическое тестирование на всех мобильных устройствах на рынке для большинства из нас непрактично.
Многие тестировщики, начинающие тестировать адаптивный веб-дизайн, обычно начинают с изменения размера окна браузера, чтобы подогнать размер области просмотра мобильного телефона, планшета и рабочего стола. Этот метод обычно подходит для быстрой визуальной проверки веб-сайта в разных портах просмотра и помогает нам выявлять основные проблемы с отображением, когда мы уменьшаем или увеличиваем окно браузера.
Тем не менее, тестирование на реальных мобильных устройствах - это совершенно другой опыт.
Использование эмуляторов
Мобильный эмулятор - это веб-симуляция того, как веб-сайты и приложения будут отображаться и функционировать в мобильной среде.
Хотя эмуляторы не могут предоставить вам точные средства тестирования, которые вам понадобятся, они по-прежнему являются экономически эффективным решением для проверки функциональности веб-сайта на высоком уровне.
Google DevTools
В DevTools Google Chrome есть функция, называемая режимом устройства, в которую загружены полезные инструменты для тестирования и отладки адаптивных проектов.
В отличие от большинства других адаптивных инструментов тестирования дизайна, которые просто изменяют размер вашего экрана, этот инструмент фактически эмулирует работу мобильного устройства, особенно сенсорные взаимодействия, такие как нажатие и прокрутка, прямо в вашем веб-браузере.
Некоторые общие правила тестирования адаптивного веб-дизайна:
Проверяйте местоположение модулей по мере их сокращения и расширения окна браузера или при повороте мобильного устройства. Различные модули могут исчезнуть при переходе с настольного компьютера на мобильный, но убедитесь, что вы точно знаете, какие модули должны отображаться в каком окне просмотра.
В заключение
Узнайте, как используется ваше веб-приложение. Вы можете получить огромное количество информации из инструмента Google Analytics, чтобы узнать, какие устройства ваши клиенты используют для доступа к вашему веб-сайту. Используйте автоматизированные инструменты и эмуляторы для выполнения основных проверок и высокоуровневого функционального тестирования и сочетания этого с реальным тестированием устройства вручную.
Тест показывает, как выглядит адаптивный сайт на различных мобильных устройствах. Для проверки ваш сайт должен поддерживать загрузку и работу во фреймах. Для удобства просмотра переведите браузер в полноэкранный режим.
Проверить
Что такое адаптивный сайт?Адаптивный сайт автоматически подстраивается под ширину устройства. При этом блоки сайта могут скрываться или видоизменяться. Например, на компьютере логотип и меню сайта располагаются слева направо, а на телефоне — сверху вниз.
Чем отличается адаптивный сайт от мобильной версии?Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.
Если же у сайта нет мобильной версии, адрес сайта не изменится при загрузке с телефона. На телефон будут загружаться те же самые данные, что и на компьютер. Чаще всего это неудобно для пользователя, потому что экран телефона меньше в несколько раз.
Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.
Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.
Адаптивный сайт совмещает в себе и обычный (для PC), и мобильный (для телефонов), и несколько промежуточных вариантов (крупные телефоны, планшеты, телевизоры и т.д.). Главное преимущество адаптивного сайта — он хорошо выглядит на любой ширине экрана.
Почему ширина телефона в данном сервисе такая маленькая?Реальное количество пикселей на современных гаджетах, как правило, очень велико, а сайты не рассчитаны на такую огромную ширину. Поэтому мобильные устройства с экранами повышенной чёткости открывают сайты, приведя их к некоему виртуальному стандарту. Чтобы узнать эти цифры у себя, нажмите кнопку, открыв эту страницу с телефона или планшета:
Какой у меня размер окна браузера?
На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.
