Як безкоштовно протестувати адаптивний дизайн Адаптивна верстка за допомогою JavaScript скрипт Тестування адаптивного дизайну
Здрастуйте, дорогі читачі блогу. Як уже й не дивно, що адаптивний дизайн стає все популярнішим у російському інтернеті. І, звичайно ж, верстальникам потрібно вивчати його. Так як адаптивний дизайн скоро буде практично на всіх сайтах, тому що все більше люди користуються мобільними пристроями.
І хочеться сказати, що сайти з набагато зручніше читати на таких пристроях ніж без нього.
Сьогодні я хочу представити Вам 5 дуже корисних та класних сервісів, за допомогою яких Ви зможете перевірити сайт на адаптивність.
І так поїхали.
5 сервісів, на яких можна перевірити сайт на адаптивність. www.responsivedesigntest.netХороший сервіс для перевірки веб-сайтів. Є безліч дозволів екранів як планшетів, так і телефонів.
mattkersley.comПростий сервіс для перевірки сайту від Matt Kersley. Також доступні всі популярні дозволи мобільних девайсів.
Дуже класний сервіс, що перевірить будь-який сайт. Дуже сподобалося оформлення, а також функціональність.
Дуже красивий та функціональний сервіс. Можливо навіть перевірити як виглядатиме сайт на телевізорі:-)
Від автора: «Припини міняти розмір цього браузера, він уже скоро зітреться!» Як часто ви це чуєте? Ну, гаразд, може і не так вже й часто, але якщо ви розробляєте адаптивні веб-сайти, то знаєте, про що я говорю: при кожному редагуванні 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 аналогічний до сайту 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
Як і в більшості подібних інструментів, смуги прокручування відображаються у маленьких пристроях. У реальному пристрої вони не будуть показуватись, але для отримання можливості прокручування тестового вигляду на несенорному пристрої потрібно піти на деякі поступки.
Як і deviceponsive, responsive test відображає ваш сайт у багатьох пристроях, але замість показу їх усіх відразу на одній сторінці ви вибираєте, який із пристроїв дивитися, у простому меню нагорі сторінки. Переглядаючи цей сайт на лептопі середнього розміру, я виявив, що відмінно працює зменшення сторінки, дозволяючи вам бачити весь сайт усередині вікна пристрою.
Тут пропонуються тринадцять різних вікон перегляду, від великого монітора настільного комп'ютерадо так званого «паршивого Android» (Crappy Android) (якщо чесно, у них є і опція з назвою « Android краще»(Nicer Android).
І знову Firefox на цьому сайті трохи спотикається. Зверніть увагу, що на скріншоті між зеленим верхнім колонтитулом і областю контенту з білим фоном знаходиться тільки блакитна смуга там, де має відображатися слайдер зображення.
Він дуже схожий на два попередні, і єдине, що відрізняє від них responsive.is - це плавна анімація дисплея одного пристрою до наступного, а також напівпрозорий оверлей, що показує нерухомість сайту, що випадає з вікна перегляду.
Єдині доступні опції пристрою тут – автоматичні, які заповнюють вікно вашого браузера, показуючи сайт таким, яким ви його побачили, якби перейшли на нього: Десктоп; Планшет (альбомна орієнтація); Планшет (книжкова орієнтація); Смартфон (альбомна орієнтація) та Смартфон (книжкова орієнтація), розміри в пікселях не даються.
І знову кілька властивостей і опцій, що відрізняються, ставлять Screenqueries особняком серед інших сайтів. Тут представлено 14 телефонних та 12 планшетних пристроїв з окремим елементом для перемикання режимів книжкової та альбомної орієнтації. Вони відображаються на пронумерованій піксельній сітці, причому розміри показані внизу праворуч від тестового дисплея. Краї дисплея перетягуються, тому можна тестувати розміри користувача. Проведіть мишею або клацніть область тестування, і фон стане сірим, з менш перевантаженим виглядом.
Цікава особливістьцього сайту – для кількох пристроїв є опція «Правильний вигляд» (“True view”), яка показує ваш сайт оберненим до цього пристрою браузер chrome. На жаль, і я вже звик до цього, Firefox'у не вдається відобразити слайдер зображення тестового сайту. Не лайтеся, з браузерів я дійсно віддаю перевагу Firefox, але, на щастя, у нас є опції.
Screenfly реально збільшує коефіцієнт юзабіліті. Він пропонує дев'ять пристроїв більше планшетів, від 10-дюймового ноутбука до 24-дюймового десктопу, п'ять планшетів, дев'ять смартфонів, три телевізійних розміри та опцію розміру користувача екрану. Будь-яку обрану вами опцію можна обертати в книжковій або альбомній орієнтації за допомогою окремого елемента керування меню. Можна вибрати, дозволити прокручування чи ні, і одним клацанням кнопки згенерувати посилання, що розділяється.
Сайт проактивно корисний тим, яким чином він надає інформацію про піксельні розміри. Кожен пристрій у меню показано з назвою та піксельними розмірами, величина вашого власного вікна браузера показана біля верхнього правого кута вікна, а розміри вибраної опції – у нижньому колонтитулі під дисплеєм разом із URL тестованого сайту. Ця невелика характеристика полегшує документування скріншотів та шаринг інформації з клієнтами.
Все сказане вище вже зробило б його ідеальним інструментом, але розробники Screenfly знайшли можливість зробити його просто вищий клас і надали властивість проксі-сервера. Цитую з їхнього сайту: «Screenfly може використовувати проксі-сервер для імітації пристроїв під час перегляду вами свого веб-сайту. Проксі-сервер симулює рядок агента користувача вибраних вами пристроїв, але не поведінку цих пристроїв». Всі інші розкриті інструменти мають справу виключно з CSS. Screenfly – єдиний, що дозволяє тестування на підставі рядка агента користувача.
Протестувавши таким чином один створений мною сайт з наявної мобільною версією, Можу сказати, що результати виявилися дуже добрими. Все відображалося точно так, як я очікував, і тестуванню піддавалися функції. Треба сказати, тестування рядків агента користувача стало традиційним, але цей сайт був зроблений давно, і властивість проксі-сервера виявилася дуже корисним доповненням до нього.
Отже, ви бачите, що для тестування адаптивних сайтів є достатньо ресурсів. Вони відрізняються унікальними властивостями; які сайти ви застосуєте, буде залежати від ваших особистих уподобань та вимог, і я намагаюся підштовхнути вас на дослідження та експерименти з ними. Чим більше у нас, розробників, буде по-справжньому корисних інструментів, тим краще.
Інтернет-магазин потребує оптимізації під мобільні пристрої. Це завдання вирішується за допомогою адаптивного дизайну, який дозволяє коректно відображати сайт на будь-яких платформах. Однак використання адаптивного дизайну стикається зі стандартним набором помилок. Перерахуємо 8 найпоширеніших проблем, характерних для сайтів інтернет-магазинів.
Нехтування аналітикою поведінки відвідувачівПоспіх виходу в мобільний сегмент, змушує рітейлерів проектувати сайт, без проведення серйозної аналітики поведінки відвідувачів. Аналіз поведінки відвідувачів це найважливіший етап підготовки, який дозволяє виявити найпопулярніші мобільні пристрої та оптимізувати сайт для них насамперед. Аналітика допомагає визначити найбільш «популярну» дію користувачів, наприклад збільшення зображення товару; показує величину конверсії мобільних відвідувачів і т. д. Ці дані дадуть уявлення про перевагу у поведінці користувачів та допоможуть задовольнити очікування мобільної аудиторії. Аналіз мобільного трафікуНеобхідно проводити системно і послідовно впроваджувати результати, доопрацьовуючи та оптимізуючи сайт під потреби покупців.
Проектування магазину для настільних комп'ютерівЗазвичай десктопну версію інтернет-магазину перепроектують на мобільні екрани, хоча логічніше брати маленький екран мобільного пристрою, а потім масштабуватися на десктоп. Рітейлери часто не усвідомлюють технічних проблем приведення сайту заточеного під робочий стіл, до розмірів смартфона. 
Починаючи проектування для мобільних екранівВи фокусуєтеся на споживчому досвіді мобільних користувачів. У результаті вам буде легше проектувати під обидва канали: десктопний та мобільний.
Тестування мобільної верстки інтернет-магазину – це обов'язковий етап запуску, проте багато власників часто нехтують ним і запускаються без тестування. В результаті на бойовій версії сайту для мобільних пристроїв, помилки можуть вилазити навіть у процесі здійснення покупки та оформлення замовлення.
Недоліки адаптивного дизайну легко виявляються попереднім тестуванням інтернет-магазину, але багато продавців не мають на це ресурсів. Щоб знизити ризик втрати грошей, протестуйте ключові маршрути користувачів по сайту в основних браузерах - Chrome, IE, Firefox, Safari та операційних системах- Windows, Mac OS, Android, IOS на популярних мобільних пристроях. Проводьте тестування кожного разу, коли вносите зміни, послуги BrowserStack або Viewport Resizer, допоможуть скоротити час тестування до декількох годин.
Дрібні елементи для мобільних екранівУ прагненні вмістити якнайбільше на екран смартфона власники інтернет-магазинів економлять на розмірі кнопок «заклику до дії». Не примушуйте користувачів використовувати зум для натискання на кнопку Купити і не розташовуйте дрібні елементи надто близько один до одного, інакше ваші користувачі віддадуть перевагу більш зручному сайту. Проектуйте інтерфейси з великими елементами навігації та розмірами кнопок «заклику до дії».
Повільна швидкість завантаження сторінокМобільна аудиторія любить швидкі сайти та мінімальний час завантаження. Оцініть складові ваших мобільних сторінок– картинки, кнопки, текст, скрипти – вони мають бути оптимізовані для мобільних пристроїв. Google враховує час завантаження сторінки у своїй видачі та маркує мобільні сайти та віддає їм перевагу в топі, так що «легкі» сайти отримують додаткову серйозну перевагу.
Розносите контент за різними вкладками, наприклад сторінка товару може містити лише базове зображення, опис, ціну та кнопку «Купити». Відгуки покупців та відеоролики можна винести на окрему вкладку та зменшити «вагу» основної частини сторінки. Крім контенту оптимізуйте й інші елементи, що впливають на швидкість завантаження – файли CSS, зображення та скрипти, надсилайте тільки необхідні дані. У цьому вам допоможуть інструменти, які зменшують розмір ресурсних файлів та час їх завантаження: Uglify або JSCompress.
Урізання контенту для мобільних користувачівНерідко при розробниках ховають частину контенту, щоб на мобільних пристроях завантаження йшло швидше. Однак часто розмір сторінки не зменшується, а контент просто не відображається для користувача. Ваш магазин має бути здатним динамічно генерувати сторінку, зменшуючи її «вагу» та скорочуючи час завантаження для мобільних відвідувачів. Крім того, давати мобільним користувачам менше контенту - погано, це негативно впливає на споживчий досвід. Як правило, у процесі покупки вони використовують різні пристроїТак робить близько 90% покупців в Інтернеті. Обмежувати їх методами адаптивного дизайну велика помилка.
Підтримка зображень лише в одній роздільній здатностіХороший сайт з адаптивним дизайном автоматично змінює роздільну здатність картинок в залежності від типу пристрою, важкі зображення збільшують час завантаження. Існує кілька способів автоматичного підстроювання розмірів зображення під конкретний пристрій. "Гнучкі" зображення (fluid images) - метод на базі CSS, який дозволяє стискати і розтягувати картинку в залежності від ширини елемента, що містить її, або елемент HTML5 дозволяє підвантажувати картинку потрібного розміру для кожного тип пристроїв.
«Неадаптивні» електронні листиБуває, що з самим сайтом все гаразд, адаптивний дизайн добре працює на десктопах і на мобільних пристроях. Але електронні листи не можуть похвалитися адаптивністю і мобільним користувачам доводиться докладати зусиль для перевірки параметрів замовлення або прокручувати нескінченний перелік рекомендованих товарів, щоб дістатися списку покупок. 
Електронні листи – це ключова точка контакту з клієнтом, вбудовуйте адаптивний дизайн листів у вашу мобільну стратегію. Проектуйте та проводьте тестування ваших листів та розсилок, шаблони листів мають бути «легкими» і містити лише важливу інформацію.
З розвитком Інтернет технологій зростає і вимоги до Інтернет розробки. Найбільше відчувають на собі веб-розробники, верстальники або як їх сьогодні називають frontend-розробниками.
У цій статті ми поговоримо трохи про адаптивну верстку, тому що це «фішка» нині цінуватиметься дуже дорого. Коли мова заходить про адаптивну верстку, верстальники будь-яких розрядів дивляться на замовників або на менеджерів проектів м'яко кажучи зі злістю, тому що розуміють як це не легко.
Багато хто починає плутати адаптивну верстку з гумовою версткою, це дуже поширена помилка верстальників-початківців. У чому ж різниця спитаєте ви?
Давайте спочатку щоб вам було зрозуміло і поставити всі крапки над і розглянемо які бувають види верстки.
Існує 4 види верстки:
Розглянемо всі види детальніше.
1. Фіксована верстка
Блоки не змінюють ширину. На моніторах з невеликою роздільною здатністю з'являється горизонтальна смуга прокручування.
#temnyi, #svetlyi (width: 440px;)
2. Гумова верстка
Блоки змінюють свою ширину, залежно від розміру вікна браузера. Вона може приймати максимальне та мінімальне значення (властивість max-width). Але не можна зі зменшенням екрана з 50% зробити 100%.
#temnyi, #svetlyi (width: 50%; )
3. Адаптивна верстка
Втілюється за допомогою @media або завдяки скриптам. Заточений під певні відомі пристрої (320, 768, 1024, т.д.). Будь-яка зміна відбувається ривками, після досягнення одного із зазначених рівнів. Однозначно підходить для
#temnyi, #svetlyi ( width: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi ( width: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi ( wi : 325px; ) ) @media (max-width: 680px) ( #temnyi, #svetlyi ( width: 200px; ) )
4. Чуйна верстка
Це поєднання гумової та адаптивної верстки. У реалізації найскладніша. Але результат виходить найбільш прийнятним. Можна впевнено сказати, що сайт пристосується до будь-якого пристрою.
#temnyi, #svetlyi ( width: 50%; ) @media (max-width: 1006px) ( #temnyi, #svetlyi ( width: 100%; ) )
Ось ми і поговорили про 4 види верстки сайту. Тепер настав час для нашого дива скрипта адаптивної верстки. Сподіваюся нічого пояснити не потрібно скрипт досить простий, ми просто говоримо щоб при зміні якийсь блок змішався кудись і все. Звичайно це можна і через CSS стилі, але всі методи знати потрібно буває в деяких місцях якийсь не підійде а якийсь виявиться саме раз.
Скрипт адаптивної верстки:
/*Створимо змінну в яку можна загнати моножесто класів, для зручного використання в коді. Тобто тут він їх виявляє раз і все, а не перед кожною вибіркою! це корисна фітча * / var my = (window: $ (window)); /*Власне і сама функція*/ $(window).resize(function () ( /*Змінна яка визначає ширину вікна і заганяє її в змінну width*/ var width = my.window.width(); /*умова трансформації вікна) тобто услокі яке виплннився коли ширина вікна досягне певних розмірів*/ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
От і все. Якщо виникнути якісь питання пшукайте в коментарях йди в
