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

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

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

Такі дані являють собою комбінацію спеціальних стилів, які спеціально створені для розширень мобільних пристроїв з певними параметрами мобільного пристрою. Тут використовується такий принцип: [highlight dark=”no”]якщо пристрій має певний розмір екрану, який повинен бути виконаний верстальником при створенні макета сайту, то він повинен використовувати необхідні символи і правила CSS.[/highlight]

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

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

Проблема тестування адаптивного дизайну

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

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

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

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

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

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

Інструменти для тестування адаптивного дизайну

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

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

Якщо у вас немає такої можливості, ви повинні використовувати те, до чого маєте доступ.

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

Чи чуйний я?

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

Ви можете протестувати на таких розширеннях:

• ПК - 1600*992 pxls;
• Ноутбук - 1280*802 pxls;
• Планшет - 768*1024 pxls;
• Мобільний телефон - 320*480 pxls.

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

Чи чуйний я?

Пристосований до пристроїв

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

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

Доступні пристрої та мобільні розширення:

• 1280*800 - Macbook;
• 768*1024 - iPad;
• 1024*768 - iPad;
• 1024*600 - Kindle;
• 320*480 - iPhone;
• 240*320 - Галактика;

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

Тест на адаптивність

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

Платформа має добре розвинену логіку масштабування, тому існує безліч варіацій для тестування величезного розширення на маленькому.

Він має близько 30 різних розширень - від простого екрану робочого столу до “старого” Android.

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

Чому? Ми не можемо відповісти на це питання.

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

Responsive.is

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

Responsive.is

Він має такі розширення: настільний комп’ютер, ноутбук у портретній та альбомній варіаціях. На жаль, ви не можете встановити власні розміри в пікселях.

Екранні запити

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

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

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

Окремо варто згадати такий варіант, як “Trueview”, який дозволяє подивитися на відображення сайту в рідному браузері мобільного пристрою (наприклад, в Safari на iOS).

Муха-цокотуха.

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

Муха-цокотуха.

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

Адаптивний калькулятор

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

Mobitest

Mobitest

Це абсолютно безкоштовний інструмент, який допомагає швидко протестувати мобільну версію будь-якого сайту. Вам просто потрібно ввести URL-адресу сайту у відповідне поле і натиснути кнопку “Старт”.

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

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

Мобільний емулятор від Google Devtools

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

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

Google DevTools

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

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

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

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

І на завершення…

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