Як безкоштовно протестувати адаптивний дизайн

16

Від автора: «Припини змінювати розмір цього браузера, він вже скоро зітреться!» Як часто ви це чуєте? Ну, гаразд, може і не так вже часто, але якщо ви розробляєте адаптивні веб-сайти, то знаєте, про що я кажу: при кожному редагуванні 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)

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

Два відмінні властивості – це можливість перетягувати «пристрою» по екрану куди вам завгодно, і здатність вставити свій тестовий сайт посилання, якою можна поділитися. У Firefox е, що стосується, принаймні, структури тестового сайту, не відображається бічна прокрутка на iphone’ов е, але відображається в IE і Chrome.

Як безкоштовно протестувати адаптивний дизайн

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

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

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

Як безкоштовно протестувати адаптивний дизайн

responsive.is

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

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

Як безкоштовно протестувати адаптивний дизайн

Screenqueries

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

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

Як безкоштовно протестувати адаптивний дизайн

Screenfly

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

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

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

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

Як безкоштовно протестувати адаптивний дизайн

Висновок

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