Як безкоштовно протестувати адаптивний дизайн Найкращі інструменти для тестування адаптивної верстки Screenshot-based метод тестування

Сьогодні вже немає потреби переконувати когось у необхідності мобільної версії сайту. Адже з кожним днем ​​відвідувачів зі смартфонів та планшетів стає дедалі більше. На момент написання цієї статті близько 20% відвідувачів мого блогу використовують мобільні пристрої для перегляду. Тобто кожен п'ятий заходить на мій сайт із телефону або планшета.

Кілька років тому я навіть не думав про таких відвідувачів, але коли їх кількість перевищила 10% від загальної кількості, я почав використовувати адаптивну верстку. Це дозволило коректно відображати контент на мобільних пристроях та підвищити лояльність до сайту як відвідувачів, так і пошукових систем.

Мобільна версія сайту та адаптивний дизайн – це не одне й теж. У цій статті мова піде про тестування адаптивної верстки, коли дизайн сайту змінюється залежно від дозволу екрана пристрою відвідувача.

Щоб бути впевненим, що ваш сайт правильно відображається на мобільних пристроях, необхідно провести перевірку, і для цього існує кілька корисних сервісів та інструментів.

Популярний інтернет браузер Mozilla Firefox оснащений вбудованим інструментом перевірки дизайну сайту на придатність до відображення на мобільних пристроях. Щоб ним скористатися, зайдіть у «Меню» — «Розробка» — «Адаптивний дизайн». Або просто натисніть на клавіатурі одночасно три клавіші ++[M]

Ви повинні побачити приблизно таку картину:

Змінюючи роздільну здатність та орієнтацію екрана можна перевірити як відображатиметься ваш сайт у мобільних відвідувачів.

Браузер Google Chrome також має вбудовану підтримку для перевірки адаптивності дизайну сайту. Для цього заходимо в меню, вибираємо пункт "Додаткові інструменти" і потім "інструменти розробника" (або натискаємо ).

Після цього натискаємо іконку адаптивного дизайну (або одночасно натискаємо на клавіатурі ++[M] ):

У середині екрана ви побачите, як буде відображатися ваш сайт на екранах мобільних пристроїв:

Як відомо у двох світових пошукових лідерів Google та Яндекс є своя нескромна думка як має виглядати сайт на екранах мобільних пристроїв. І якщо сайт визнається незручним для мобільних відвідувачів, він знижується в пошуковій видачі. Таким чином, з точки зору SEO, якщо ви не хочете втратити мобільних відвідувачів, то у вас має бути не тільки адаптивний дизайн, але й пошукові системи повинні вважати його таким, тобто придатним для мобільних пристроїв.

Для перевірки адаптивності за допомогою сервісу Google заходимо за наступною адресою та вбиваємо ім'я свого сайту: https://www.google.com/webmasters/tools/mobile-friendly/.

Ось так виглядає результат перевірки мого блогу:

З Яндексом трохи складніше, для перевірки треба обов'язково зареєструватися в сервісі Яндекс.Вебмайстер і скористатися бета-версією інтерфейсу:

Основним завданням цих сервісів презентувати (показати) як виглядатиме ваш сайт на мобільному пристрої. Сайтів з таким функціоналом безліч. Я наведу лише деякі з них. У більшості випадків вони дублюють вбудований функціонал FireFox та Chrome.

Почну знову ж таки з Google, який має свій сервіс демонстрації адаптивності: http://design.google.com/resizer/#

Другий симпатичний сервіс – це http://quirktools.com/screenfly/. Він покаже, як може виглядати ваш сайт навіть на телевізорі!

Ну і щоб не образити "вітчизняного виробника" наведу приклад ще одного сайту: http://symby.ru/adaptest/. На одній сторінці ви побачите відразу кілька уявлень з різними роздільними здатністю екранів.

Після того, як ви переконалися, що ваш сайт адаптивний і коректно відображається на екранах більшості пристроїв, перевірте швидкість його роботи. Знову ж таки стосовно мобільних відвідувачів.

Google як завжди попереду всієї планети: https://developers.google.com/speed/pagespeed/insights/ . Цей сервіс покаже як виглядає сайт на екрані телефону та дасть рекомендації щодо оптимізації коду для збільшення швидкості завантаження на мобільних пристроях.

І на завершення наведу приклад сервісу, який не тільки покаже як виглядає сайт на мобільному пристрої, а й покаже швидкість його роботи: http://www.webpagetest.org/

На мій погляд, у повсякденній роботі при внесенні змін до дизайну сайту простіше використовувати вбудовані можливості браузерів FireFox і Chrome. Після чого, звичайно, необхідно перевірити лояльність пошукових систем до вашого дизайну. А вже потім, для заспокоєння душі або, щоб похвалитися, можна скористатися онлайн сервісами.

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

А оскільки будь-які технології не стоять на місці, то миттєво на зміну одним мобільним пристроям виходять інші, і серед веб-розробки активно впроваджується таке поняття як адаптивний дизайн.

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

Подібні дані – це сукупність спеціальних стилів, призначених для дозволу мобільних пристроїв з певними параметрами портативного гаджета. Застосовується такий принцип: якщо гаджет має певні розміри екрана, які потрібно виконати верстальнику в процесі створення макету сайту, він використовує необхідні CSS символи та правила.

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

Здається, що все це дуже просто і навіть кожен малодосвідчений верстальник зміг би самостійно впоратися із завданням створення адаптивного дизайну. Але, як показує практика, ще не всі front-end розробники до кінця вловлюють суть вимог такої верстки, від чого у фахівців QA завжди вистачає роботи при прогоні свіжонадрукованого HTML5+CSS3 макета.

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

Швидше за все, найскладніша частина перевірки веб-сайту під певні дані - це саме те, що портал функціонує так, як від нього потрібно на всьому переліку можливих пристроїв, але фактично проведене тестування залишається для багатьох користувачів дуже непрактичним завданням.

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

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

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

Але в даному контексті можна вказати на те, що тестування на справжніх портативних гаджетах - кардинально інший досвід і можливості сприйняття продукту, що розробляється.

Як правило, при тестуванні адаптивної верстки в рамках цілої веб-студії або відділу компанії з контролю якості (quality assurance company), у вас під рукою має бути ціла розсипка різноманітних мобільних пристроїв, які можна використовувати для прогону необхідного дозволу в самих що не є реальні умови.

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

Але коли немає подібної розкоші, доводиться використовувати те, що під рукою.

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

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

Можна тестувати на таких дозволах:

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

У чомусь схожий з Am I Responsive, напевно, у своїй простоті та мінімальному наборі налаштувань для аналізу верстки.

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

Доступні пристрої та портативні дозволи:

• 1280 на 800 пікселів - Macbook;
• 768 на 1024 пікселів – iPad;
• 1024 на 768 пікселів – iPad;
• 1024 на 600 пікселів – Kindle;
• 320 на 480 пікселів – iPhone;
• 240 на 320 пікселів - Galaxy;

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

Подібно до Deviceponsive, даний сервіс дозволяє тестувати сайти на масі реальних пристроїв в режимі онлайн. Але, щоб не дивитися на дозволи, що не цікавлять вас, в меню сервісу ви самостійно вибираєте ті з них, які є актуальними саме для вас.

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

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

До речі, якщо ви працюєте з браузером Firefox, у вас можуть виникнути певні проблеми.

Чому? Точної відповіді немає.

Варто написати на підтримку.

Дуже схожий з першими двома інструментами. Але є у нього своє відмінне подружжя – набір плавної анімації при зміні одного «пристрою» на інше, а також напівпрозоре тло, що демонструє реальний обсяг сайту, а не тільки ту область, з якою ви працюєте в даний момент.

Для роботи доступні такі дозволи: десктоп, планшетний комп'ютер у портретній та альбомній варіації, мобільний телефон у портретній та альбомній варіаціях. На превеликий жаль, ставити свої особисті розміри в пікселях неможливо.

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

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

Є параметри для вказівки довільного дозволу (досить поперемінно перетягувати нижній або правий край видимої області сайту).

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

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

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

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

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

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

Як відомо, мобільний емулятор – це спеціалізований віртуальний емулятор того, як потрібний веб-сайт відображатиметься та взаємодіятиме з користувачем у спеціальному мобільному середовищі.

Хоча подібні інструменти не можуть сформувати на 100% правильні дані, якими можна оперувати при наступних тестах, вони досі є найбільш економічно обґрунтованим рішенням для проведення швидкого тестування працездатності веб-продукту на високому рівні.

Наприклад, в браузері Chrome є спеціальна функція користувача, за допомогою якої можна змінно оперувати різноманітними інструментами для проведення тестів і налагодження всіх нюансів при створенні адаптивної версії проекту.

Корпорація Google навіть випустила спеціальне зведення правил, за якими найкраще проводити перевірку адаптивності програмного забезпечення, а саме:

• Перевірка правильності відображення текстових блоків;
• Оптимальна зона клікабельності об'єктів;
• Відповідність кольору та градієнта заданим значенням з дизайну;
• Правильність заповнення країв;
• Блоки, картинки та текст не виходять за межі видимості на екрані;
• Кожен вид тексту має свої шрифти, розміри та підключені стилі;
• При прокручуванні текст відображається вірно, не пливе та вирівнюється по ширині (суворе рівняння по лівому краю – такий закон!).

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

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

Здрастуйте, дорогі читачі блогу. Як уже й не дивно, що адаптивний дизайн стає все популярнішим у російському інтернеті. І, звичайно ж, верстальникам потрібно вивчати його. Так як адаптивний дизайн скоро буде практично на всіх сайтах, тому що все більше люди користуються мобільними пристроями.

І хочеться сказати, що сайти набагато зручніше читати на таких пристроях ніж без нього.

Сьогодні я хочу представити Вам 5 дуже корисних та класних сервісів, за допомогою яких Ви зможете перевірити сайт на адаптивність.

І так поїхали.

Хороший сервіс для перевірки веб-сайтів. Є безліч дозволів екранів як планшетів, так і телефонів.

Простий сервіс для перевірки сайту від Matt Kersley. Також доступні всі популярні дозволи мобільних девайсів.

Дуже класний сервіс, що перевірить будь-який сайт. Дуже сподобалося оформлення, а також функціональність.

Дуже красивий та функціональний сервіс. Можливо навіть перевірити як виглядатиме сайт на телевізорі:-)

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

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

Адаптивна верстка сайту - це така html верстка, в якій в залежності від розмірів вікна браузера сайт "трансформується" у зручному для користувача вигляд

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

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

Така несправедливість може бути пояснена тим, що пошукові системи, швидше за все, підсумовують поведінкові чинники з ПК та мобільних пристроїв. У результаті природно, якщо сайт не адаптований, його ПФ будуть гірше і це тягне за собою вниз основну версію сайту.

Перевірити сайт на адаптивність можна лише відкриваючи його в різних браузерах та змінюючи ширину екрану. Але робити це з багатьох різних пристроїв з різними дозволами - забере дуже багато часу. Також навряд чи у Вас є десятки смартфонів і планшетів.

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

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

Найголовніша умова – це домогтися відсутності горизонтального прокручування та відсутності flash-плагінів на сторінці.

Google перший впровадив у пошуковий алгоритм фактор адаптивності. Він має спеціальний безкоштовний сервіс, який аналізує будь-який сайт на оптимізацію під мобільні пристрої. У Яндекса цей функціонал з'явився трохи згодом.

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

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

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

Зробити адаптивну верстку сайту може тільки людина, яка знається на CSS і html. Ми розглянемо основні моменти, оскільки єдиного рецепту немає.

Щоб створити адаптивну верстку, потрібно створювати таблиці стилів CSS у третій версії. Різниця між 2 та 3 є, але в даному питанні дуже сильне значення має відсутність абсолютних значень у стилях. Коротше кажучи, всі значення розмірів блоків довжина, ширина, розміри - це задається у відсотках.

Синтаксис CSS @ Media

Наприклад, напишемо умови, при яких стилі будуть працювати для пристроїв з шириною екрана менше 800px.

Стилі треба писати послідовно від великого дозволу до маленького, тобто спочатку загальні стилі, а потім для «урізаних» розмірів, наприклад:

У заголовних тегах необхідно обов'язково написати рядок:

Мета тег viewport говорить, що ширина екрана дорівнює ширині браузера, а кожен піксель відповідає одному пікселю на пристрої. Якщо цього не вказати, то адаптивність не вдасться реалізувати.

Наприклад, на сторінці зустрінеться дуже довге слово і тоді якщо не встановлено властивість overflow, то це може спричинити появу горизонтального прокручування. Щоб цього уникнути, потрібно контенту прописати наступні CSS властивості

Сайдбар сайту зазвичай займає ширину в районі 200-300 пікселів, що займає майже всю ширину браузера на мобільних пристроях. Тому найчастіше роблять меню, що випадають, за допомогою стандартної кнопки у вигляді трьох штрихів (це стало вже класикою).

Реалізувати це на сайті можна, але доведеться трохи повозитися зі стилями. Давайте розглянемо все по кроках.

Ситуація, коли у нас є меню і є основний контент (я не став малювати шапку та футер):

Html код такої структури може бути приблизно таким:

• Посилання у меню 1
• Посилання у меню 2
• Посилання у меню 3
• Посилання у меню 4

Контент сторінки

Контент сторінки

Контент сторінки

Контент сторінки

Перетворюється на сторінку в

Мінусом цього способу є те, що на маленьких дозволах меню займатиме майже всю область по ширині, а значить з'явиться горизонтальна прокрутка або ще гірше – всі блоки можуть попливти.

Модифікуємо наш приклад в такий спосіб. Якщо роздільна здатність екрана менше 800 пікселів, меню зникне і з'явиться спеціальна кнопка відкрити меню.

Наведемо html-код адаптивної верстки з коментарями:

• Посилання у меню 1
• Посилання у меню 2
• Посилання у меню 3
• Посилання у меню 4

Контент сторінки

Контент сторінки

Контент сторінки

Контент сторінки

Зменшимо ширину екрана до 700 пікселів (наприклад). Ось як це виглядає на сторінці

Фреймворків, таких як або , які суттєво полегшують та прискорюють верстку сторінок.
має на увазі чудове відображення веб сторінки на всіх пристроях і розширеннях моніторів. Напевно, не кожен верстальник має повний набір девайсів з усіма можливими розширеннями дисплеїв, для тестування своєї верстки. Це й не дивно, адже техніка нині не дешева.
Отже. Купувати гори мобільних телефонів і планшетів, не варіант - розоримося. Що ж робити? Для цих завдань було розроблено сервіси для тестування адаптивних сайтів. Принцип роботи дуже простий. Найчастіше є кадр певного розміру, де відкривається сторінка. Ефект виходить приблизно такий, як і при перегляді на мобільному пристрої. Хочу зауважити, що сервіс не завжди точно покаже відображення сторінки на телефоні або планшеті. При верстці слід тестувати за допомогою сервісів, але після завершення, наскільки можна, протестувати на найпоширеніших пристроях.
Отже. До вашої уваги найкращі інструменти для тестування адаптивних сайтів.

Інструмент для тестування адаптивних сайтів від компанії Adobe. Для його використання потрібно встановити собі комп'ютер.
Програма дозволяє синхронізувати ваші пристрої WIFI і переглядати сайт так, як він буде відображатися на вашому девайсі. На даний момент підтримуються пристрої із такими ОС: iOS, Android, Kindle Fire.