Как бесплатно протестировать адаптивный дизайн. Адаптивная верстка с помощью скрипта JavaScript Тестирование адаптивного дизайна
Фреймворков, таких как или , которые существенно облегчают и ускоряют верстку страниц.
подразумевает под собой отличное отображение веб страницы на всех устройствах и расширениях мониторов. Наверное, не у каждого верстальщика имеется полный набор девайсов со всеми возможными расширениями дисплеев, для тестирования своей верстки
. Это и не удивительно, ведь техника нынче не дешевая.
Итак. Покупать горы мобильников и планшетов, не вариант - разоримся. Что же делать? Для этих задач были разработаны сервисы для тестирования адаптивных сайтов
. Принцип работы их очень прост. Чаще всего имеется фрейм определенного размера, где открывается страница. Эффект получается примерно такой же, как и при просмотре на мобильном устройстве. Хочу заметить, что сервис не всегда в точности покажет отображение страницы на телефоне или планшете. При верстке следует тестировать с помощью сервисов, но после завершения, по возможности, протестировать на наиболее распространенных устройствах.
Итак. К вашему вниманию лучшие инструменты для тестирования адаптивных сайтов
.
Инструмент для тестирования адаптивных сайтов от компании Adobe. Для его использования требуется установить себе на компьютер.
Программа позволяет синхронизировать ваши устройства по WIFI и просматривать сайт так, как он будет отображаться на вашем девайсе. На данный момент поддерживаются устройства с такими ОС: iOS, Android, Kindle Fire.
Интернет-магазин нуждается в оптимизации под мобильные устройства. Эта задача решается при помощи адаптивного дизайн, который позволяет корректно отображать сайт на любых платформах. Однако внедрение адаптивного дизайна сталкивается со стандартным набором ошибок. Перечислим 8 наиболее распространенных проблем, характерных для сайтов интернет-магазинов.
Пренебрежение аналитикой поведения посетителей
Спешка выхода в мобильный сегмент, заставляет ритейлеров проектировать сайт, без проведения серьезной аналитики поведения посетителей. Анализ поведения посетителей это важнейший этап подготовки, который позволяет выявить наиболее популярные мобильные устройства и оптимизировать сайт для них в первую очередь. Аналитика помогает определить наиболее «популярное» действие пользователей, например, увеличение изображения товара; показывает величину конверсии мобильных посетителей и т. д. Эти данные дадут представление о предпочтении в поведении пользователей и помогут удовлетворить ожидания мобильной аудитории. Анализ мобильного трафика нужно проводить системно и последовательно внедрять результаты, дорабатывая и оптимизируя сайт под нужды покупателей.
Проектирование магазина для настольных компьютеров
Обычно десктопную версию интернет-магазина перепроектируют на мобильные экраны, хотя логичнее брать маленький экран мобильного устройства и затем масштабироваться на десктоп. Ритейлеры зачастую не осознают технических проблем приведения сайта заточенного под десктоп, к размерам смартфона. 
Начиная проектирование для мобильных экранов, вы фокусируетесь на потребительском опыте мобильных пользователей. В итоге вам будет легче проектировать под оба канала: десктопный и мобильный.
Тестирование адаптивного дизайна
Тестирование мобильной верстки интернет-магазина это обязательный этап запуска, однако многие владельцы часто пренебрегают им и запускаются без тестирования. В результате на боевой версии сайта для мобильных устройств, ошибки могут вылезать даже в процессе совершения покупки и оформления заказа.
Недостатки адаптивного дизайна легко выявляются предварительным тестированием интернет-магазина , но многие продавцы не имеют на это ресурсов. Для снижения рисков потери денег, протестируйте ключевые маршруты пользователей по сайту в основных браузерах – Chrome, IE, Firefox, Safari и операционных системах – Windows, Mac OS, Android, IOS на популярных мобильных устройствах. Проводите тестирование каждый раз, когда вносите изменения, сервисы типа BrowserStack или Viewport Resizer, помогут сократить время тестирования до нескольких часов.
Мелкие элементы для мобильных экранов
В стремлении уместить побольше на экран смартфона владельцы интернет-магазинов экономят на размере кнопок «призыва к действию». Не заставляйте пользователей использовать зум для нажатия на кнопку Купить и не располагайте мелкие элементы слишком близко друг к другу, иначе ваши пользователи предпочтут пойти на более удобный сайт. Проектируйте интерфейсы с крупными элементами навигации и размерами кнопок «призыва к действию.
Медленная скорость загрузки страниц
Мобильная аудитория любит быстрые сайты и минимальное время загрузки. Оцените составляющие ваших мобильных страниц – картинки, кнопки, текст, скрипты – они должны быть оптимизированы для мобильных устройств. Google учитывает время загрузки страницы в своей выдаче и маркирует мобильные сайты и отдает им предпочтение в топе, так что «легкие» сайты получают дополнительное серьезное преимущество.
Разносите контент по разным вкладкам, например страница товара может содержать только базовое изображение, описание, цену и кнопку «Купить». Отзывы покупателей и видеоролики можно вынести на отдельную вкладку и уменьшить «вес» основной части страницы. Кроме контента оптимизируйте и другие элементы влияющих на скорость загрузки – CSS-файлы, изображения и скрипты, отправляйте только необходимые данные. В этом вам помогут инструменты, которые уменьшают размер ресурсных файлов и время их загрузки: Uglify или JSCompress.
Урезание контента для мобильных пользователей
Нередко при , разработчики прячут часть контента, чтобы на мобильных устройствах загрузка шла быстрее. Однако часто размер страницы на самом деле не уменьшается, а контент просто не отображается для пользователя. Ваш магазин должен быть способен динамически генерировать страницу, уменьшая ее «вес» и сокращая время загрузки для мобильных посетителей. Кроме того, давать мобильным пользователям меньше контента – плохо, это негативно влияет на потребительский опыт. Как правило, в процессе покупки они используют разные устройства, так делает около 90% покупателей в Интернете. Ограничивать их методами адаптивного дизайна – большая ошибка.
Поддержка изображений только в одном разрешении
Хороший сайт с адаптивным дизайном автоматически меняет разрешение картинок в зависимости от типа устройства, тяжелые изображения увеличивают время загрузки. Существует несколько способов автоматической подстройки размеров изображения под конкретное устройство. «Гибкие» изображения (fluid images) – метод на базе CSS, который позволяет сжимать и растягивать картинку в зависимости от ширины содержащего ее элемента, или элемент HTML5
«Неадаптивные» электронные письма
Бывает что c сами сайтом все в порядке, адаптивный дизайн хорошо работает на десктопах и на мобильных устройствах. Но электронные письма не могут похвастаться адаптивностью и мобильным пользователям приходится прикладывать усилия для проверки параметров заказа или прокручивать бесконечный перечень рекомендованных товаров, чтобы добраться до списка совершенных покупок. 
Электронные письма это ключевая точка контакта с клиентом, встраивайте адаптивный дизайн писем в вашу мобильную стратегию. Проектируйте и проводите тестирование ваших писем и рассылок, шаблоны писем должны быть «легким» и содержать только важную информацию.
От автора: «Прекрати менять размер этого браузера, он уже скоро сотрется!» Как часто вы это слышите? Ну, ладно, может и не так уж часто, но если вы разрабатываете адаптивные веб-сайты, то знаете, о чем я говорю: при каждом редактировании 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 – единственный, который позволяет тестирование на основании строки агента пользователя.
Протестировав данным образом один созданный мною сайт с имеющейся мобильной версией, могу сказать, что результаты оказались очень хорошими. Все отображалось в точности так, как я ожидал, и тестированию поддавались функции. Надо сказать, тестирование строк агента пользователя стало традиционным, но этот сайт был сделан давно, и свойство прокси-сервера оказалось действительно очень полезным дополнением к нему.
Заключение
Итак, вы видите, что для тестирования адаптивных сайтов имеется достаточно ресурсов. Они различаются уникальными свойствами; какие сайты вы примените, будет зависеть от ваших личных предпочтений и требований, и я стараюсь подтолкнуть вас на исследования и эксперименты с ними. Чем больше у нас, разработчиков, будет по-настоящему полезных инструментов, тем лучше.
Здравствуйте, дорогие читатели блога. Как уже и не удивительно, что адаптивный дизайн становится всё популярнее в русском интернете. И конечно же верстальщикам нужно изучать его. Так как адаптивный дизайн скоро будет практически на всех сайтах, потому что всё больше лди пользуются мобильными устройствами.
И хочется сказать, что сайты с на много удобнее читать на таких устройствах нежели без него.
Сегодня я хочу представить Вам 5 очень полезных и классных сервисов, с помощью которых Вы сможете проверить сайт на адаптивность.
И так, поехали.
5 сервисов на которых можно проверить сайт на адаптивность.
www.responsivedesigntest.net
Хороший сервис для проверки сайтов. Есть множество разрешений экранов как планшетов так и телефонов.
mattkersley.com
Простой сервис для проверки сайта на от Matt Kersley. Так же доступны все популярные разрешения мобильных девайсов.
screenqueri.es
Очень классный сервис, который проверит любой сайт. Очень понравилось оформление, а так же функциональность.
quirktools.com
Очень красивый и функциональный сервис. Есть возможно даже проверить как будет выглядеть сайт на телевизоре:-)
Как тестировать адаптивный веб-сайт? Какие проблемы возникают при тестировании веб-сайтов на разных устройствах? Как тестирование веб-сайта на настольном мониторе отличается от тестирования на карманном устройстве, например мобильном телефоне? Какие инструменты мы можем использовать для тестирования адаптивных веб-сайтов? Ответить на Ваши вопросы помогут наши
Что такое адаптивный веб-дизайн?
Адаптивный веб-дизайн (RWD) - это определение подхода к веб-дизайну, направленное на создание сайтов с целью обеспечения оптимального восприятия - простого чтения и навигации с минимальным размером, панорамированием и прокруткой на широком спектре устройств (от настольных компьютерных мониторов до мобильные телефоны).
Сайт, созданный с помощью RWD, адаптирует макет к среде просмотра с использованием жидкостных, пропорциональных сеток, гибких изображений и медиа-запросов CSS3, следующими способами:
- Концепция жидкой сетки требует, чтобы размер элемента страницы был в относительных единицах, таких как проценты, а не в абсолютных единицах, такие как пиксели или точки.
- Гибкие изображения также оцениваются в относительных единицах, чтобы предотвратить их отображение за пределами содержащего их элемента.
- Запросы мультимедиа позволяют странице использовать разные правила стиля CSS, основываясь на характеристиках устройства, на котором отображается сайт, чаще всего ширины браузера.
Проблемы тестирования адаптивного веб-дизайна
Многие люди в настоящее время используют свои мобильные телефоны или планшеты для доступа к веб-сайтам, поэтому тестирование адаптивного веб-дизайна важно, потому что пользовательский интерфейс на мобильных устройствах сильно отличается от настольных компьютеров.
Возможно, самая сложная часть тестирования веб-сайта, отвечающего требованиям, - это то, что веб-сайт работает так, как ожидается на нескольких устройствах и платформах, но фактическое тестирование на всех мобильных устройствах на рынке для большинства из нас непрактично.
Многие тестировщики, начинающие тестировать адаптивный веб-дизайн, обычно начинают с изменения размера окна браузера, чтобы подогнать размер области просмотра мобильного телефона, планшета и рабочего стола. Этот метод обычно подходит для быстрой визуальной проверки веб-сайта в разных портах просмотра и помогает нам выявлять основные проблемы с отображением, когда мы уменьшаем или увеличиваем окно браузера.
Тем не менее, тестирование на реальных мобильных устройствах - это совершенно другой опыт.
Использование эмуляторов
Мобильный эмулятор - это веб-симуляция того, как веб-сайты и приложения будут отображаться и функционировать в мобильной среде.
Хотя эмуляторы не могут предоставить вам точные средства тестирования, которые вам понадобятся, они по-прежнему являются экономически эффективным решением для проверки функциональности веб-сайта на высоком уровне.
Google DevTools
В DevTools Google Chrome есть функция, называемая режимом устройства, в которую загружены полезные инструменты для тестирования и отладки адаптивных проектов.
В отличие от большинства других адаптивных инструментов тестирования дизайна, которые просто изменяют размер вашего экрана, этот инструмент фактически эмулирует работу мобильного устройства, особенно сенсорные взаимодействия, такие как нажатие и прокрутка, прямо в вашем веб-браузере.
Некоторые общие правила тестирования адаптивного веб-дизайна:
- Текст, элементы управления и изображения выровнены правильно
- Подходящая зона кликабельности
- Цвет, затенение и градиент соответствуют
- Проверьте правильность заполнения краев
- Текст, изображения, элементы управления и рамки не попадают в края экрана
- Размер шрифта, стиль и цвет соответствуют для каждого типа текста
- Прокручиваемый текст (ввод данных) отображается правильно
Проверяйте местоположение модулей по мере их сокращения и расширения окна браузера или при повороте мобильного устройства. Различные модули могут исчезнуть при переходе с настольного компьютера на мобильный, но убедитесь, что вы точно знаете, какие модули должны отображаться в каком окне просмотра.
В заключение
Узнайте, как используется ваше веб-приложение. Вы можете получить огромное количество информации из инструмента Google Analytics, чтобы узнать, какие устройства ваши клиенты используют для доступа к вашему веб-сайту. Используйте автоматизированные инструменты и эмуляторы для выполнения основных проверок и высокоуровневого функционального тестирования и сочетания этого с реальным тестированием устройства вручную.
