Проверка верстки на разных устройствах. Тестирование адаптивного веб-дизайна. На каких разрешениях запускать тесты

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

Например, если открыть обычный сайт (без адаптивной верстки и мобильной версии) через смартфон, то, скорее всего, он откроется в неудобном для пользователя виде. Т.е. контент будет отображен полностью, но будет присутствовать горизонтальная прокрутка, что плохо.

1. Адаптивная верстка сайта - что это такое

Адаптивная верстка сайта - это такая html верстка, в которой в зависимости от размеров окна браузера сайт "трансформируется" в удобной для пользователя вид

Отличия мобильной версии сайта и адаптивной

Не стоит путать мобильную версию сайта и адаптивную верстку сайта. Мобильная версия находится на отдельном поддомене и полностью дублирует контент сайта. Адаптивный сайт содержит те же самые адреса URL страниц, но в зависимости от устройства подгружает разные стили CSS, что позволяет отображать сайт в более удобном виде.

2. SEO оптимизация и адаптивная верстка

Поисковые системы на данный момент имеют две разные выдачи (они очень похожи). Одну для пользователей ПК, другую мобильную. Если сайт не оптимизирован под мобильные устройства, то это считается отрицательным фактором и позиции сайта будут понижены на 2-3 (бывает и больше). При этом было бы логично, если бы занижались позиции только мобильной версии, однако практика показывает еще и ухудшение позиций и для основной версии сайта.

Такая несправедливость может быть объяснена тем, что поисковики, скорее всего, суммируют поведенческие факторы с ПК и мобильных устройств. В итоге естественно, если сайт не адаптирован, то его ПФ будут хуже и это тянет за собой вниз основную версию сайта.

3. Как проверить сайт на адаптивность

Проверить сайт на адаптивность можно лишь открывая его в различных браузерах и на меняя ширину экрана. Но делать это со множества различных устройств с разными разрешениями - отнимет крайне много времени. Также вряд ли у Вас есть в наличии десятки смартфонов и планшетов.

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

Можно просто вручную изменять размеры окна браузера по ширине и смотреть результат. В Firefox или Google Chrome есть адаптивный дизайн браузера нажав Ctrl+Shift+M.

Самое главное условие - это добиться отсутствия горизонтальной прокрутки и отсутствия flash-плагинов на странице.

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

После проверки возможно два варианта. Либо сайт оптимизирован, либо нет:

Например, проверка адаптивности в Google:

Проверка адаптивности в Яндексе:

4. Как сделать адаптивную верстку сайта

Сделать адаптивную верстку сайта может только человек, разбирающийся в 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 пикселей (к примеру). Вот как это выглядит на странице

От автора: «Прекрати менять размер этого браузера, он уже скоро сотрется!» Как часто вы это слышите? Ну, ладно, может и не так уж часто, но если вы разрабатываете адаптивные веб-сайты, то знаете, о чем я говорю: при каждом редактировании DOM или CSS вы таскаете туда-сюда край браузера, тестируя изменения и отыскивая неточности.

В общем, по большей части такие усилия – это попытка имитировать размеры экрана разных устройств.

Если вы занимаетесь корпоративной разработкой, у вас для тестирования, возможно, имеется множество устройств, предоставленных компанией. Там, где я работаю, у нас есть iPad, iPhone, один-два других планшета, лэптопы и настольные компьютеры. Если у вас такой роскоши не имеется, приходится пользоваться тем, что есть под рукой.

Дома у меня есть два разных лэптопа, два разных устройства Android: Kindle и Nexus 7. Эти устройства я применяю для тестирования своих фрилансерских разработок, но понятно, что это не исчерпывающая подборка. Совсем нет устройств iOS, и хотя я считаюсь ранним последователем, не планирую покупать каждый новый телефон/планшетфон/планшет, как только он появится в продаже.

Так что же делать разработчику? К счастью, растет количество инструментов на базе браузеров, имитирующих размеры экранов множества устройств. Разные инструменты, конечно, идут с разными наборами характеристик и различными уровнями эффективности. Некоторые из них мы тут и рассмотрим.

Для целей тестирования я взял первый по-настоящему адаптивный созданный мною сайт, PajamasOnYourFeet.com . Он основан на шаблоне Brownie HTML5 , очень благосклонно и бесплатно предоставленном сообществу разработчиков на EGrappler.

Am I Responsive?

Am I Responsive? – совершенно легкий, мгновенный просмотр вашего сайта с точки зрения того, как он будет отображаться на четырех разных устройствах. Все четыре – с iOS, и разработчик на сайте объясняет свой выбор. Он не предлагает никаких элементов управления и вариантов выбора, только очень простое и элегантное отображение. Размеры окна просмотра:

Десктоп - 1600 x 992px, уменьшающиеся по шкале (0.3181)

Лэптоп - 1280 x 802px, уменьшающиеся по шкале (0.277)

Планшет - 768 x 1024px, уменьшающиеся по шкале (0.219)

Мобильный - 320 x 480px, уменьшающиеся по шкале (0.219)

Цитируя разработчика: «Это не инструмент тестирования, очень важно делать это на настоящих устройствах. Но он является инструментом быстрых скриншотов (для меня) и предоставления визуальной возможности «втолковать» на встречах с клиентами, что вы имели в виду».

deviceponsive

deviceponsive аналогичен сайту Am I Responsive? тем, что просто и аккуратно отображает ваш сайт, не имеет элементов управления или доступных опций, когда дело касается устройств. Все они показываются одновременно на одной длинной странице. У него есть интересное свойство – можно модифицировать верхний колонтитул, отредактировав его фоновый цвет и вставив собственный логотип, а затем «запринскринить». Так можно в некотором смысле брендировать свой сайт при показе скриншотов клиенту. Имитируемые на этом сайте устройства и размеры экранов:

Macbook - 1280 x 800

iPad (книжная ориентация) - 768 x 1024

iPad (альбомная ориентация) - 1024 x 768

Kindle (книжная ориентация) - 600 x 1024

Kindle(альбомная ориентация) - 1024 x 600

iPhone (книжная ориентация) - 320 x 480

iPhone (альбомная ориентация) - 480 x 320

Galaxy (книжная ориентация) - 240 x 320

Galaxy(альбомная ориентация) - 320 x 240

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

responsive test

Как и deviceponsive, responsive test отображает ваш сайт во многих устройствах, но вместо показа их всех сразу на одной странице вы выбираете, какое из устройств смотреть, в простом меню наверху страницы. Проглядывая этот сайт на лэптопе среднего размера, я обнаружил, что отлично работает уменьшение страницы, позволяя вам видеть весь сайт внутри окна тестируемого устройства.

Здесь предлагаются тринадцать разных окон просмотра, от большого монитора настольного компьютера до так называемого «паршивого Android’а» (Crappy Android) (если честно, у них есть и опция с названием «Android получше» (Nicer Android).

И снова Firefox на этом сайте немного спотыкается. Обратите внимание, на скриншоте – между зеленым верхним колонтитулом и областью контента с белым фоном – находится только голубая полоса там, где должен отображаться слайдер изображения.

responsive.is

Он очень похож на два предыдущих, и единственное, что отличает от них responsive.is – это плавная анимация дисплея одного устройства к следующему, а также полупрозрачный оверлей, показывающий «недвижимость» сайта, выпадающую из окна просмотра.

Единственные доступные опции устройства здесь – автоматические, которые заполняют окно вашего браузера, показывая сайт таким, каким вы бы его увидели, если бы перешли на него: Десктоп; Планшет (альбомная ориентация); Планшет (книжная ориентация); Смартфон (альбомная ориентация) и Смартфон (книжная ориентация), размеры в пикселях не даются.

Screenqueries

И снова несколько отличающихся свойств и опций ставят Screenqueries особняком среди остальных сайтов. Здесь представлены 14 телефонных и 12 планшетных устройств с отдельным элементом для переключения режимов книжной и альбомной ориентации. Они отображаются на пронумерованной пиксельной сетке, при этом размеры показаны внизу справа от тестового дисплея. Края дисплея перетаскиваются, поэтому можно тестировать пользовательские размеры. Проведите мышью или щелкните на область тестирования, и фон станет серым, с менее перегруженным видом.

Интересная особенность этого сайта – для нескольких устройств имеется опция «Правильный вид» (“True view”), которая показывает ваш сайт обернутым в предписанный этому устройству браузер chrome. К сожалению, и я к этому уже привык, Firefox’у не удается отобразить слайдер изображения тестового сайта. Не ругайтесь, из браузеров я действительно предпочитаю Firefox, но к счастью, у нас есть опции.

Screenfly

Screenfly реально увеличивает коэффициент юзабилити. Он предлагает девять устройств больше планшетов, от 10-дюймового ноутбука до 24-дюймового десктопа, пять планшетов, девять смартфонов, три телевизионных размера и опцию пользовательского размера экрана. Любую выбранную вами опцию можно вращать в книжной или альбомной ориентации с помощью отдельного элемента управления в меню. Можно выбрать, разрешить прокрутку или нет, и одним щелчком кнопки сгенерировать разделяемую ссылку.

Сайт проактивно полезен тем, каким образом он представляет информацию о пиксельных размерах. Каждое устройство в меню показано с названием и пиксельными размерами, величина вашего собственного окна браузера показана возле верхнего правого угла окна, а размеры выбранной опции – в нижнем колонтитуле под дисплеем вместе с URL’ом тестируемого сайта. Эта маленькая характеристика облегчает документирование скриншотов и шаринг информации с клиентами.

Все вышесказанное уже сделало бы его идеальным инструментом, но разработчики Screenfly нашли возможность сделать его просто высший класс и предоставили свойство прокси-сервера. Цитирую с их сайта: «Screenfly может использовать прокси-сервер для имитации устройств во время просмотра вами своего вебсайта. Прокси-сервер симулирует строку агента пользователя выбранных вами устройств, но не поведение этих устройств». Все прочие раскрытые здесь инструменты имеют дело исключительно с CSS. Screenfly – единственный, который позволяет тестирование на основании строки агента пользователя.

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

Заключение

Итак, вы видите, что для тестирования адаптивных сайтов имеется достаточно ресурсов. Они различаются уникальными свойствами; какие сайты вы примените, будет зависеть от ваших личных предпочтений и требований, и я стараюсь подтолкнуть вас на исследования и эксперименты с ними. Чем больше у нас, разработчиков, будет по-настоящему полезных инструментов, тем лучше.

Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 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. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.

От автора: у вас в руках файлы с версткой. Но как проверить ее качество? Какие инструменты существуют для тех, кто не разбирается в HTML и CSS? Какими полезными вещами стоит пользоваться самому верстальщику? Эта статья попробует ответить на эти вопросы.

Почему важно проверять качество верстки

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

Инструменты для проверки

Отладчик . Один из самых простых способов, как можно проверить верстку сайта – включить отладчик. Он запускается при нажатии в браузере F12. Этот инструмент помогает увидеть, как изменится вид страницы, если из нее убрать какие-то элементы или стили. Например, вы прописали какое-то новое CSS-свойство, потом прописали еще несколько. Решили посмотреть, как все это будет выглядеть в браузере.

Оказалось, что элементы отображаются не так, как планировалось. Из-за какого свойства произошла такая ошибка? Вручную это определять долго. В отладчике же вы можете быстро отключить любые стили и быстро обнаружить ошибки. Также в нем хорошо видно опечатки. Большинство опытных верстальщиков ищут ошибки именно с помощью отладчика, а не самостоятельно просматривая код.

Рис. 1. С отладчиком находить ошибки проще

W3C Валидатор . Сервис проверки кода на мелкие ошибки. W3C – это организация, которая занимается разработкой и официальной поддержкой веб-стандартов. Поскольку она устанавливает эти стандарты, на ее сайте есть специальный сервис, который может проверить любую страницу в сети на валидность (то есть на ошибки). Нужно сказать, что это достаточно строгий валидатор.

Часто им пользуются заказчики, пытающиеся так определить качество верстки. Даже в хорошо сверстанной страничке валидатор может найти более тридцати ошибок. Однако в этом нет ничего страшного. Сервис считает за ошибку даже то, что вы не поставили пробел перед значением html-атрибута. А теперь представьте, что в таком стиле вы написали весь код. У вас будут сотни ошибок, но на самом деле верстка будет выполнена правильно, просто вы нарушите стандарты, которые W3C установили на счет правильного написания кода.

Подробнее с этими правилами можно ознакомиться на сайте W3C. По сути, единственный сайт, который валидатор проверяет без ошибок, это сайт самой W3C. Поэтому не стоит исправлять все ошибки. И все-таки валидатор может указать на какие-то серьезные проблемы, поэтому проверка верстки сайта в нем желательна. validator.w3.org — валидатор.

IE Tester . Существует такая программа, которая позволяет протестировать сайт в старых версиях Internet Explorer. Многие заказчики сегодня все еще требуют поддержку этого браузера, чтобы сайт в нем отображался так же, как и в других. Возможно, сейчас уже есть онлайн-сервисы, в которых можно выполнить аналогичную проверку. В любом случае, вам достаточно вставить нужный код и программа покажет, как все это отображалось бы в IE 6, 7 и 8.

Обычно поддержка шестой версии уже никому не нужна, а восьмая может вести себя вполне адекватно если, конечно, в вашей верстке не присутствуют новые CSS-свойства. У старых версий IE есть интересная особенность – они читают закомментированный код. Поэтому в одном из комментариев можно подключить таблицу стилей, которая будет создана специально для старых версий этого браузера.

Остальные браузеры просто пропустят этот фрагмент. Такой способ можно использовать, если вам действительно очень сильно нужна поддержка IE.

Другие сервисы . В последнее время сервисов для проверки верстки становится все больше и больше. Нет смысла останавливаться на каком-то отдельном. Большинство этих сервисов работают неплохо, но все равно не проверяют все досконально.

Как проверить адаптивную верстку

Отдельно стоит разговор об адаптивной верстке. Наилучшим вашим инструментом в этом деле будет обычное окно браузера. Просто уменьшайте ширину окна и наблюдайте, как меняется дизайн. Если вы видите, что появляется горизонтальный скролл или какие-то элементы не влазят на страничку, значит, ваша верстка далека до идеала и ее нужно дорабатывать. Если вы хотите увидеть, как будет себя вести сайт на большом экране – уменьшите масштаб. Конечно, если у вас есть планшет и телефон, то можно загрузить вашу верстку на какой-нибудь бесплатный хостинг и зайти на сайт с этих устройств.

Рис. 2. Изменение ширины окна браузера – самый простой способ проверить адаптивность.

Кроссбраузерность

Чем еще проверить верстку сайта? Обязательно должна быть проверка на кроссбраузерность. Нужны открыть сайты в различных браузерах и посмотреть, как они там выглядят. Можно изменять масштаб и размер шрифта. Вы должны убедиться, что хотя бы у большинства пользователей все будет нормально. Если вы проверяете вручную, то можете также попросить знакомых проверить верстку в их браузерах, если их версии отличаются от ваших. Здесь можно дать еще один совет – не используйте слишком специфических свойств, которые поддерживаются только в каком-то одном браузере. А если уже используйте, придумывайте для них какую-то альтернативу в других браузерах. Для некоторых свойств все еще нужно использовать вендорные префиксы. Это связано с тем, что веб-стандарты постоянно развиваются и все браузеры не могут поддерживать всего. Но если уже делать проверку на кроссбраузерность, то делать ее как минимум для таких браузеров: Chrome, Mozilla, Opera, Safari, IE.

Есть очень хорошие зарубежные сервисы продвинутой кроссбраузерной проверки. Например, browserstack.com. Такая проверка может стоить вам денег. Если у вас действительно очень крупный проект и вы хотите досконально проверить его, в таком случае есть смысл пользоваться подобными сервисами.

Проверка на соответствие с макетом

Проверить верстку можно еще так: скриншот сверстанного сайта необходимо добавить к макету в фотошопе в качестве нового слоя. Установить этому слою прозрачность и посмотреть, насколько отображение элементов совпадает с макетом. Для этого можно использовать специальный плагин. Например, Pixel Perfect для Mozilla.

Дополнительные требования

Естественно, в любой нормальной верстке должна быть прописана кодировка и doctype. Также страничку можно проверить на работоспособность при выключенных картинках или при блокировании javascript-кода. Дело в том, что в настройках любого браузера пользователь может отключить эти параметры. Особенно полезно будет прописать атрибуты alt для картинок, чтобы при их исчезновении пользователь хоть как-то мог ориентироваться. На самом деле требований к верстке может быть очень много. Даже в рунете есть достаточно строгий перечень необходимых проверок. Например, с появлением HTML5 верстку можно проверять на правильную семантическую разметку. Однако все это не является критичным. Вышеописанных проверок вполне хватит, чтобы смело запустить нормальный работоспособный сайт.

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

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

А так как любые технологии не стоят на месте, то моментально на смену одним мобильным устройствам выходят другие, и в среде веб-разработки активно внедряется такое понятие как адаптивный дизайн.

Если раньше ситуация с поддержкой мобильных устройств решалась банальным созданием отдельной мобильной версии веб-сайта (как например, на специальном поддомене m.mobilesite.com), то сегодня данные вещи выполняются как раз с помощью адаптивного дизайна и верстки (через внедрение технологии media query внутрь набора CSS3).

Подобные данные – это совокупность специальных стилей, созданных для разрешения мобильных устройств с определенными параметрами портативного гаджета. Применяется такой принцип: если гаджет имеет определенные размеры экрана, которые нужно выполнить верстальщику в процессе создания макета сайта, он использует необходимые CSS символы и правила.

Адаптивный веб-дизайн – это специальный подход к разработке оригинального веб-дизайна, при котором происходит ориентация на создание удобно просматриваемых сайтов и площадок на основе использования инструментов для оптимального восприятия – банальное чтение текстовых блоков, панорамирование, а также прокрутка динамических блоков на максимальном числе мобильных устройств (от планшетов до сотовых телефонов).

Думается, что все это очень просто и даже каждый малоопытный верстальщик смог бы самостоятельно справиться с задачей по созданию адаптивного дизайна. Но, как показывает практика, еще не все front-end разработчики до конца улавливают суть требований такой верстки, от чего у специалистов QA всегда хватает работы при прогоне «свеженапечатанного» HTML5+CSS3 макета.

Проблематика проверки адаптивной верстки

Больше половины пользователей Интернета используют свои мобильные гаджеты и планшеты в качестве инструментов для взаимодействия с веб-сайтами, а значит тестировать адаптивную верстку очень важно, ведь порой внешний интерфейс мобильного устройства кардинальным образом отличается от разрешений десктопных устройств.

Скорее всего, наиболее сложная часть проверки веб-сайта под определенные данные – это как раз то, что портал функционирует так, как от него требуется на всем перечне возможных устройств, но фактически проведенное тестирование остается для многих пользователей весьма непрактичной задачей.

Адаптивный дизайн

Очень часто тестировщики, на которых возложена задача проверить адаптивную верстку, традиционно начинают работать с уменьшением/добавлением размера используемого браузера, чтобы в таком режиме подогнать продукт под потенциальные размеры портативного устройства.

Данный метод конечно можно использовать, но только для мгновенного визуального анализа работоспособности сайта в разных разрешениях. Так можно сразу же выявить базовые проблемы с отображением картинки, когда мы поочередно уменьшаем или увеличиваем размеры окна нашего браузера.

Но в данном контексте можно указать на то, что тестирование на настоящих портативных гаджетах – кардинально другой опыт и возможности восприятия разрабатываемого продукта.

Чем тестировать адаптивную верстку?

Как правило, при тестировании адаптивной верстки в рамках целой веб-студии или отдела компании по контролю качества (quality assurance company), у вас под рукой должна быть целая россыпь разнообразных мобильных устройств, которые можно использовать для прогона необходимого разрешения в самых что ни на есть реальных условиях.

Конечно, просто идеально, если у вас под боком лежит новенький iPad или iPod, а также много других Android-гаджетов с разным разрешением.

Но когда нет подобной роскоши, приходиться использовать то, что под рукой.

К большому счастью тестировщиков, уже давно создаются бесплатные онлайн программы и сервисы, имитирующие размеры мобильных гаджетов и идеально подходящие для проведения тестирования адаптивной верстки. Логично предположить, что каждый из них имеет свои как преимущества, так и недостатки. Но обо всем по порядку.

Am I Responsive

Наиболее простой инструмент , с помощью которого вы можете просмотреть свой веб-сайт на 4 наиболее популярных устройствах. Радует, что нет особого перегруза в плане настроек и параметров: все просто и предельно ясно.

Можно тестировать на таких разрешениях:

  • ПК – 1600 на 992 пикселей;
  • Ноутбук – 1280 на 802 пикселей;
  • Планшетный компьютер – 768 на 1024 точек;
  • Сотовый телефон – 320 на 480 пикселей.

Deviceponsive

В чем-то схож с Am I Responsive, наверное, в своей простоте и минимальном наборе настроек для проведения анализа верстки.

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

Доступные устройства и портативные разрешения:

  • 1280 на 800 точек – Macbook;
  • 768 на 1024 точек – iPad;
  • 1024 на 768 точек – iPad;
  • 1024 на 600 точек – Kindle;
  • 320 на 480 точек – iPhone;
  • 240 на 320 точек – Galaxy;

К слову, в режиме работы с сайтом сервис специально накладывает полосы прокрутки на страницы для того, чтобы пользователям ПК было удобно проверять каждый сантиметр созданной верстки.

Responsive Test

Подобно Deviceponsive, данный сервис позволяет тестировать сайты на массе реальных устройств в режиме онлайн. Но, чтобы не смотреть на неинтересующие вас разрешения, в меню сервиса вы самостоятельно выбираете те из них, которые являются актуальными именно для вас.

На портале очень хорошо проработана логика масштабирования, а значит есть вариации для тестов большого разрешения на маленьком.

Представлено около 30 различных разрешений – от обычного десктопного монитора до старой версии Андроида.

К слову, если вы работаете с браузером Firefox, у вас могут возникнуть определенные проблемы.

Почему? Точного ответа нет.

Стоит написать в поддержку.

Responsive.is

Весьма схож с первыми двумя инструментами. Но есть у него своя отличительная чета – набор плавной анимации при смене одного «устройства» на другое, а также полупрозрачный фон, демонстрирующий реальный объем сайта, а не только ту область, с который вы работаете в данный момент.

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

Screenqueries

Существенно отличается от всех ранее описанных сервисов. На портале можно использовать до 14 телефонов и 12 различных планшетов, чтобы провести максимально плодотворное изучение верстки.

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

Есть параметры для указания произвольного разрешения (достаточно попеременно перетягивать нижний или правый край видимой области сайта).

Также отдельно можно указать еще такую фишку, как вариация «Trueview», позволяющая взглянуть на отображение веб-сайта в «родном» браузере мобильного устройства (к примеру, в Safari на операционной системе iOS).

Screenfly

По нашему мнению, это наиболее функциональный и оптимальный сервис для проверки адаптивности верстки.

The Responsive Calculator

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

Mobitest

Являет собой совершенно бесплатный инструмент , с помощью которого можно быстро проверить мобильную производительность любого веб-сайта. Достаточно всего лишь ввести в нужном поле URL сайта и нажать кнопку «Старт».

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

К слову, можно не просто изучать только лишь цифры, а «попросить» программу создать отчет в виде диаграммы или же в качестве медиафайла, который после завершения процедуры теста спокойно можно загрузить на свой локальный компьютер.

Мобильный эмулятор от Google DevTools

Как известно, мобильный эмулятор – это специализированный виртуальный эмулятор того, как нужный веб-сайт будет отображаться и взаимодействовать с пользователем в специальной мобильной среде.

Хотя подобного рода инструменты не могут сформировать на 100% правильные данные, которыми можно оперировать при следующих тестах, они до сих пор являются наиболее экономически обоснованным решением для проведения быстрого тестирования работоспособности веб-продукта на высоком уровне.

К примеру, в браузере Chrome есть специальная пользовательская функция, с помощью которой можно переменно оперировать разнообразными инструментами для проведения тестов и отладки всех возникающих нюансов при создании адаптивной версии проекта.

Корпорация Google даже выпустила специальную сводку правил, по которым лучше всего проводить проверку адаптивности программного обеспечения, а именно:

  • Проверка верности отображения текстовых блоков;
  • Оптимальная зона кликабельности объектов;
  • Соответствие цвета и градиента заданным значениям из дизайна;
  • Правильность заполнения краев;
  • Блоки, картинки и текст не выходят за пределы видимости на экране;
  • Каждый вид текста имеет свои шрифты, размеры и подключенные стили;
  • При прокрутке текст отображается верно, не плывет и выравнивается по ширине (строгое равнение по левому краю – такой закон!).

Всегда проверяйте расположение уникальных модулей сайта, которые могут свободно функционировать на ПК, а при переходе на мобильное разрешения исчезать в невидимую для глаза область. Этот момент можно отобразить в технической документации (чек-листе, чтобы сотрудник QA отдела заранее знал, какие модули «ловить» в адаптивной верстке, а на какие не обращать внимание).

И в завершение…

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