Чим тестувати адаптивний дизайн? Найкращі інструменти для тестування адаптивної верстки Перевірити адаптивність сторінки

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

Перевірити

Що таке адаптивний веб-сайт?

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

Чим відрізняється адаптивний сайт від мобільної версії?

Якщо сайт має мобільну версію, то при завантаженні такого сайту з мобільного телефону, вас перенаправлять на іншу адресу: site.ru → m.site.ru. Мобільна версія – це окремий сайт з іншою адресою.

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

Ця проблема вирішується двома способами: додати мобільну версію m.site.ru або НЕ робити окремий сайт, але додати вашому основному сайту адаптивність.Це спеціальні стилі та скрипти, які включаються, якщо ширина екрана надто мала: наприклад, сховати меню, збільшити шрифт, замість великих зображень показати маленькі тощо.

Строго кажучи, не можна порівнювати адаптивний сайт та мобільну версію сайту. По суті, адаптивний сайт = повна версія+ версія для планшетів + ​​версія для телефонів (мобільна) і все це в одному флаконі. Тобто одне поняття полягає в іншому.

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

Чому ширина телефону в цьому сервісі така невелика?

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

Який розмір вікна браузера?

На пристроях з ретиноподібними дисплеями показані розміри відрізнятимуться від реальної роздільної здатності в пікселях, яка вказана у специфікації пристрою. Смартфони покажуть 320х480 або 480х800 пікселів, планшети - 1280х800.

Досить змінювати розмір вікна браузера, вистачить його ґвалтувати! Готовий сперечатися, ви неодноразово чули це. Добре, можливо, й не чули. Але якщо ви професійно займаєтеся розробкою адаптивних сайтів, ви розумієте про що я: будь-яка зміна DOM або редагування CSS, і ви знову починаєте тягнути край браузера вперед, назад, тестуючи зміни і переглядаючи нічого не зламалося.

Метою ваших рухів є імітація екранів різних пристроїв.

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

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

Для тестування я вибрав реально адаптивний сайт PajamasOnYourFeet.com, сайт побудований на основі HTML5 шаблону, наданого безкоштовно EGrappler.

Am I Responsive?

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

Доступні розміри:

• настільний монітор – 1600 x 992px;
• ноутбук – 1280 x 802px;
• планшет - 768 х 1024px;
• мобільний телефон – 320 x 480px.

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

Є дві приємні фішки: можливість тягати пристрої на вашому екрані, а також можливість поділиться посиланням на тест сайту.

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 відображає ваш сайт у різних пристроях. Але замість показу всіх відразу, ви самі вибираєте необхідний пристрій верхньому менюсторінки. До речі, тут коректно працює масштабування, що дозволяє проводити тестування більшого дозволу на меншому.

30 різних дозволів доступно на сайті, починаючи від величезного настільного монітора до того, що вони називають «поганий андроїд» (справедливості варто помітити, що є і нормальний андроїд).

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

responsive.is

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

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

Screenqueries

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

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

На жаль, Firefox і тут не зміг відобразити слайдер. Не потрібно звинувачувати мене, Firefox мій улюблений браузер, але такі справи.

Screenfly

Screenfly мабуть найбільш функціональний з усіх. Доступно 9 більше ніж планшет пристроїв - від 10 "ноутбуків, до 24" моніторів, 5 планшетів, 9 телефонів, 3 телевізійних дозволи, а також довільний дозвіл. Додайте сюди окремий перемикач у портретний та альбомний режим, а також опцію показу прокручування. Також можна поділитись посиланням на тест за допомогою однієї кнопки.

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

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

Ви використовуєте представлені інструменти у своїй практиці? Діліться своїми секретами розробки адаптивних сайтів у коментарях.

P.S. Помилки щодо перекладу прохання повідомляти в особу.

«Керівник проектів команди „Бізнес-Мотор”, вебмайстер, копірайтер.
Мобільна адаптація- важливий етап роботи із сайтом. З введенням мобільного фактора ранжирування адаптація набула ще більшого значення. Розповідаємо, як провести базове тестування мобільності сайту»

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

Про вплив цього фактора на позиції сайту Google офіційно повідомило 21.04.2015 року. Нещодавно інформація про з'явилася і в блозі Яндекса. Алгоритм, який враховує зручність відображення сайту на мобільних пристроях, назвали «Владивосток» і, за словами представників Яндекса, вже зараз він активно впроваджується у Росії.

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

Чи зручний сайт на мобільних пристроях?

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

• на смартфоні з вертикальною орієнтацією екрану (у т.ч. на вузьких екранах близько 300 пікселів завширшки);
• на смартфоні з горизонтальною орієнтацією екрана (від 480 пікселів завширшки);
• на планшетах з вертикальною та горизонтальною орієнтацією екрана (від 768 пікселів завширшки).

Цілком природно, що пробувати сайт на різних пристрояхне завжди незручно. Хоча б тому, що під рукою може не опинитися всіх необхідних для цього гаджетів. Вирішити цю проблему можна за допомогою різних емуляторів мобільних екранів. Втім, звертатися до сторонніх сервісів не обов'язково: подібний емулятор встановлено в Google Chrome. Для того щоб ним скористатися, достатньо відкрити сайт, що цікавить, натиснути F12 (викликати консоль розробника) і натиснути іконку із зображенням мобільного телефону:

Вкрай важливо враховувати й особливості мобільних браузерівадже вони теж можуть мати свої особливості. При тестуванні важливо переглянути сайт на:

• встановлений браузер ОС Android;
• Google Chrome мобільний;
• "швидких" браузерах - наприклад, Opera Mini або UC Browser;
• Safari (наприклад, iPhone).

Як бачать веб-сайт пошукові системи?

Перша автоматична перевірка, яку варто пройти, якщо ви зацікавилися проблемою адаптивності свого сайту, – це mobile friendly test від Google. Цей інструмент досить простий і дає однозначний вердикт щодо оптимізації сторінки під мобільні пристрої. І якщо ця відповідь негативна, практично напевно сайт вважається незручним для маленьких екранів і на рівні алгоритмів Google - з усіма наслідками, що звідси випливають.

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

Зверніть увагу: скріншот сайту на мобільному екранірезультати перевірки можуть не відповідати тому, як ви бачите його на смартфоні. Найчастіше це пов'язано з тим, що в mobile friendly test беруть участь лише проіндексовані пошуковою системою файли, а файли стилів (css) і скриптів (js) часто закриті для індексації на рівні robots.txt. До речі, відповідно до останніх рекомендацій Google, їх варто зробити видимими для пошукових систем.

Оптимізація сайту під мобільні пристрої в кабінеті вебмайстра Google та Яндекс

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

У Google Search Console результати поточної перевірки сторінок є тут: Пошуковий трафік => Зручність перегляду на мобільних пристроях. Ця сторінка дублює відомості, які ми можемо отримати з допомогою mobile friendly test, але наводиться для всіх індексованих сторінок сайту в міру обходу їх роботами Google:

У новому кабінеті вебмайстра в Яндексі дані поточної масової перевірки поки не відображаються. Натомість там можна знайти інструмент, аналогічний mobile friendly test від Google. З його допомогою можна вручну перевірити, чи вважають алгоритми пошукової системи ту чи іншу сторінку зручною для перегляду на смартфонах.

P.S.

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

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

Висновки

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

Перший крок до оцінки адаптивності сайту – тестування на різних екранахта у різних мобільних браузерах.

Дізнатися, як пошуковики оцінюють зручність відображення сайту на мобільних пристроях, допоможе mobile friendly test від Google, а також відповідний функціонал у кабінетах вебмайстра (Google Search Console та новий кабінетвебмайстра в Яндекс).

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

Ознаки доброзичливого до мобільних пристроїв сайту:

1. Контент (читається без збільшення), великі поля форм і кнопки.
2. Відсутність "важких" картинок, Flash - елементів та зайвої анімації.
3. Відсутність Java-аплетів та Silverlight-плагінів.
4. Відсутність горизонтальної смуги прокручування.
5. Мінімальна швидкість завантаження сайту.
6. Найпростіша навігація.
7. Прописано мета-тег viewport.

Сервіси для перевірки сайту на "мобільність"

Для демонстрації роботи сервісів візьмемо сайт моїх добрих партнерів - бюро перекладів КОНТЕКСТ .

1. Google Mobile Friendly

Перевірити можна будь-який сайт, просто вбивши його адресу в рядок.

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

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

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

3. Засіб перевірки Bing

Перевіряється загальна оптимізація плюс відповідність 4 пунктам.

Також відображається те, як сайт виглядає на екрані смартфона (звичайно ж, на OS windows, на той час попередні сервіси відображали android-смартфон =)).

4. Mobile Checker від W3C

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

Чекав хвилин 5, тоді як інші послуги справлялися за 5-20 секунд.

5. Responsinator

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

UPD1: 20.07.2017:

6. Adaptivator

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

UPD2: 3.11.2017:

7. iloveadaptive.ru

Ще один новий сервіс, запропонований у коментарях. Як на мене, трохи вантажуватий і непрактичний, але це з лишком окупається великими можливостями. Є навіть сортування за ОС.

Висновок

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

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

2015-09-11 8204 4 Денис Абдуллін

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

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

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

Screenfly – перевірка адаптивності сайту з вибором дейвайсу

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

Mattkersley – всі розміри на одній сторінці

Проект хороший тим, що ви вводите посилання на свій сайт, а він завантажує його у всі кадри, що є на сторінках. Можна одразу тестувати сайт на 5 розмірах. Є два режими: просто тестувати ширину або показати назви пристроїв і їх висоту.

Responsive.is – перевірка адаптивності на кількох пристроях

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

Особисто я не користуюся такими сервісами, а просто зменшую ширину браузера. Плюс до всього, сервіси перевірки адаптивності сайту роблять те саме, краще дивитися свій проект на реальних пристроях, у стандартних браузерах Androidта Safari на iPhone.

Є й інші послуги, у тому числі і російською мовою. Спочатку ми хотіли привести саме їх, але вони просто копіювали вище перелічені сайти, просто переведений текст, просто замість «Phone», наприклад, ви будете бачити «Телефон».