Інтернет-магазин потребує оптимізації під мобільні пристрої. Це завдання вирішується за допомогою адаптивного дизайн, який дозволяє коректно відображати сайт на будь-яких платформах. Однак впровадження адаптивного дизайну стикається зі стандартним набором помилок. Перерахуємо 8 найбільш поширених проблем, характерних для сайтів інтернет-магазинів.
Нехтування аналітикою поведінки відвідувачів
Поспіх виходу в мобільний сегмент, змушує рітейлерів проектувати сайт, без проведення серйозної аналітики поведінки відвідувачів. Аналіз поведінки відвідувачів це найважливіший етап підготовки, який дозволяє виявити найбільш популярні мобільні пристрої і оптимізувати сайт для них в першу чергу. Аналітика допомагає визначити найбільш «популярне» дію користувачів, наприклад, збільшення зображення товару; показує величину конверсії мобільних відвідувачів і т. д. Ці дані дадуть уявлення про перевагу в поведінці користувачів і допоможуть задовольнити очікування мобільного аудиторії. Аналіз мобільного трафіку потрібно проводити системно і послідовно впроваджувати результати, допрацьовує і оптимізуючи сайт під потреби покупців.
Проектування магазину для настільних комп'ютерів
Зазвичай десктопну версію інтернет-магазину перепроектує на мобільні екрани, хоча логічніше брати маленький екран мобільного пристрою і потім масштабироваться на десктоп. Рітейлери часто не усвідомлюють технічних проблемприведення сайту заточеного під десктоп, до розмірів смартфона. 
Починаючи проектування для мобільних екранів, ви фокусуєтеся на споживчому досвіді мобільних користувачів. В результаті вам буде легше проектувати під обидва канали: десктопний і мобільний.
Тестування адаптивного дизайну
Тестування мобільного верстки інтернет-магазину це обов'язковий етап запуску, проте багато власників часто нехтують ним і запускаються без тестування. В результаті на бойовий версії сайту для мобільних пристроїв, помилки можуть вилазити навіть в процесі здійснення покупки і оформлення замовлення.
Недоліки адаптивного дизайну легко виявляються попереднім тестуванням інтернет-магазину, але багато продавців не мають на це ресурсів. Для зниження ризиків втрати грошей, протестуйте ключові маршрути користувачів по сайту в основних браузерах - Chrome, IE, Firefox, Safari і операційних системах- Windows, Mac OS, Android, IOS на популярних мобільних пристроях. Проводьте тестування кожен раз, коли вносите зміни, сервіси типу BrowserStack або Viewport Resizer, допоможуть скоротити час тестування до декількох годин.
Дрібні елементи для мобільних екранів
У прагненні вмістити побільше на екран смартфона власники інтернет-магазинів економлять на розмірі кнопок «заклику до дії». Не змушуйте користувачів використовувати зум для натискання на кнопку Купити і не кладіть дрібні елементи дуже близько один до одного, інакше ваші користувачі віддадуть перевагу піти на більш зручний сайт. Проектуйте інтерфейси з великими елементами навігації і розмірами кнопок «заклику до дії.
Повільна швидкість завантаження сторінок
Мобільна аудиторія любить швидкі сайти і мінімальний час завантаження. Оцініть складові ваших мобільних сторінок - картинки, кнопки, текст, скрипти - вони повинні бути оптимізовані для мобільних пристроїв. Google враховує час завантаження сторінки у своїй видачі та маркує мобільні сайти і віддає їм перевагу в топі, так що «легкі» сайти отримують додаткове серйозну перевагу.
Розносите контент з різних вкладках, наприклад сторінка товару може містити тільки базове зображення, опис, ціну та кнопку «Купити». Відгуки покупців і відеоролики можна винести на окрему вкладкуі зменшити «вагу» основної частини сторінки. Крім контенту оптимізуйте і інші елементи впливають на швидкість завантаження - CSS-файли, зображення і скрипти, відправляйте тільки необхідні дані. У цьому вам допоможуть інструменти, які зменшують розмір ресурсних файлів і час їх завантаження: Uglify або JSCompress.
Урізання контенту для мобільних користувачів
Нерідко при, розробники ховають частину контенту, щоб на мобільних пристроях завантаження йшла швидше. Однак часто розмір сторінки насправді не зменшується, а контент просто не відображається для користувача. Ваш магазин повинен бути здатний динамічно генерувати сторінку, зменшуючи її «вага» і скорочуючи час завантаження для мобільних відвідувачів. Крім того, давати мобільним користувачам менше контенту - погано, це негативно впливає на споживчий досвід. Як правило, в процесі покупки вони використовують різні пристрої, так робить близько 90% покупців в Інтернеті. Обмежувати їх методами адаптивного дизайну - велика помилка.
Підтримка зображень тільки в одному дозволі
Хороший сайт з адаптивним дизайном автоматично змінює дозвіл картинок в залежності від типу пристрою, важкі зображення збільшують час завантаження. Існує кілька способів автоматичного підстроювання розмірів зображення під конкретний пристрій. «Гнучкі» зображення (fluid images) - метод на базі CSS, який дозволяє стискати і розтягувати картинку в залежності від ширини містить її елемента, або елемент HTML5
«Неадаптивні» електронні листи
Буває що c самі сайтом все в порядку, адаптивний дизайн добре працює на десктопах і на мобільних пристроях. Але електронні листи не можуть похвалитися адаптивностью і мобільним користувачам доводиться прикладати зусилля для перевірки параметрів замовлення або прокручувати нескінченний перелік рекомендованих товарів, щоб дістатися до списку зроблених покупок. 
Електронні листице ключова точка контакту з клієнтом, вбудовуйте адаптивний дизайн листів в вашу мобільну стратегію. Проектуйте і проводите тестування ваших листів і розсилок, шаблони листів повинні бути «легким» і містити тільки важливу інформацію.
Сьогодні вже немає потреби переконувати будь-кого в необхідності мобільної версії сайту. Адже з кожним днем відвідувачів зі смартфонів і планшетів стає все більше і більше. На момент написання цієї статті близько 20% відвідувачів мого блогу використовують мобільні пристрої для перегляду. Тобто кожен п'ятий заходить на мій сайт з телефону або планшета.
Кілька років тому я навіть не думав про такі відвідувачів, але коли їх кількість перевищила 10% від загального числа я став використовувати адаптивну верстку. Це дозволило коректно відображати контент на мобільних пристроях і підвищити лояльність до сайту як відвідувачів, так і пошукових систем.
Мобільна версія сайту і адаптивний дизайн - це не одне і теж. У даній статті мова піде про тестування адаптивної верстки, коли дизайн сайту, змінюється в залежності від дозволу екрану пристрою відвідувача.
Щоб бути впевненим, що ваш сайт правильно відображається на мобільних пристроях необхідно провести перевірку, і для цього існує кілька корисних сервісіві інструментів.
Швидка перевірка адаптивної верстки
Популярний інтернет оглядач (браузер) Mozilla Firefoxоснащений вбудованим інструментів перевірки дизайну сайту на придатність до відображення на мобільних пристроях. Щоб ним скористатися зайдіть в «Меню» - «Розробка» - «Адаптивний дизайн». Або просто натисніть на клавіатурі одночасно три клавіші ++ [M]
Ви повинні побачити приблизно наступну картину:
Змінюючи дозвіл і орієнтацію екрану можна перевірити як буде відображатися ваш сайт у мобільних відвідувачів.
браузер Google Chromeтак само має вбудовану підтримку перевірки адаптивності дизайну сайту. Для цього заходимо в меню, вибираємо пункт «Додаткові інструменти» і потім «інструменти розробника» (або натискаємо кнопку ).
Після цього натискаємо іконку адаптивного дизайну (або одночасно натискаємо на клавіатурі ++ [M]):
В середині екрану ви побачите як буде відображатися ваш сайт на екранах мобільних пристроїв:
SEO тестування мобільного дизайну
Як відомо у двох світових пошукових лідерів Googleі Яндекс є своє нескромне думку як повинен виглядати сайт на екранах мобільних пристроїв. І якщо сайт визнається незручним для мобільних відвідувачів, то він знижується в пошуковій видачі. Таким чином, з точки зору SEO, якщо ви не хочете втратити мобільних відвідувачів, то у вас повинен бути не тільки адаптивний дизайн, але і пошукові системи повинні вважати його таким, тобто придатним для мобільних пристроїв.
Для перевірки адаптивності за допомогою сервісу Googleзаходимо за наступною адресою і вбиваємо ім'я свого сайту: https://www.google.com/webmasters/tools/mobile-friendly/.
Ось так виглядає результат перевірки мого блогу:
З Яндексом трохи складніше, для перевірки треба обов'язково зареєструватися в сервісі Яндекс.Вебмастер і скористатися бета версією інтерфейсу:
Он-лайн сервіси по перевірки адаптивності
Основним завданням цих сервісів презентувати (показати) як буде виглядати ваш сайт на мобільному пристрої. Сайтів з таким функціоналом безліч. Я наведу лише деякі з них. У більшості випадків вони дублюють вбудований функціонал FireFox і Chrome.
Google resizer
Почну знову ж з Google, у якого є свій сервіс демонстрації адаптивності: http://design.google.com/resizer/#
Quirktools screenfly
Другий симпатичний сервіс - це http://quirktools.com/screenfly/. Він покаже як може виглядати ваш сайт навіть на телевізорі!
Symby.ru adaptest
Ну і щоб не образити «вітчизняного виробника» наведу приклад ще одного сайту: http://symby.ru/adaptest/. На одній сторінці ви побачите відразу кілька подань з різними дозволами екранів.
Швидкість роботи мобільної версії сайту
Після того, як ви переконалися, що ваш сайт адаптивний і коректно відображається на екранах більшості пристроїв, слід перевірити швидкість його роботи. Знову ж стосовно до мобільних відвідувачам.
PageSpeed Insights
Google як завжди попереду планети всієї: https://developers.google.com/speed/pagespeed/insights/. Цей сервіс покаже як виглядає сайт на екрані телефону і дасть рекомендації щодо оптимізації коду для збільшення швидкості завантаження на мобільних пристроях.
WebPageTest
І на завершення наведу приклад сервісу, який не тільки покаже як виглядає сайт на мобільному пристрої, але і покаже швидкість його роботи: http://www.webpagetest.org/
висновки
На мій погляд в повсякденній роботі при внесенні змін до дизайн сайту простіше використовувати вбудовані можливості браузерів FireFoxі Chrome. Після чого, звичайно ж, необхідно перевірити лояльність пошукових систем до вашого дизайну. А вже потім, для заспокоєння душі або щоб похвалитися, можна скористатися онлайн сервісами.
Як тестувати адаптивний веб-сайт? Які проблеми виникають при тестуванні веб-сайтів на різних пристроях? Як тестування веб-сайту на настільному моніторі відрізняється від тестування на кишеньковому пристрої, наприклад мобільному телефоні? Які інструменти ми можемо використовувати для тестування адаптивних веб-сайтів? Відповісти на Ваші питання допоможуть наші
Що таке адаптивний веб-дизайн?
Адаптивний веб-дизайн (RWD) - це визначення підходу до веб-дизайну, спрямоване на створення сайтів з метою забезпечення оптимального сприйняття - простого читання і навігації з мінімальним розміром, панорамированием і прокруткою на широкому спектрі пристроїв (від настільних комп'ютерних моніторів до мобільні телефони) .
Сайт, створений за допомогою RWD, адаптує макет до середовища перегляду з використанням рідинних, пропорційних сіток, гнучких зображень і медіа-запитів CSS3, наступними способами:
- Концепція рідкої сітки вимагає, щоб розмір елемента сторінки був у відносних одиницях, таких як відсотки, а не в абсолютних одиницях, такі як пікселі або точки.
- Гнучкі зображення також оцінюються в відносних одиницях, щоб запобігти їх відображення за межами містить їх елементи.
- Запити мультимедіа дозволяють сторінці використовувати різні правила стилю CSS, Грунтуючись на характеристиках пристрою, на якому відображається сайт, найчастіше ширини браузера.
Проблеми тестування адаптивного веб-дизайну
Багато людей в даний час використовують свої мобільні телефони або планшети для доступу до веб-сайтів, тому тестування адаптивного веб-дизайну важливо, тому що призначений для користувача інтерфейс на мобільних пристроях сильно відрізняється від настільних комп'ютерів.
Можливо, найскладніша частина тестування веб-сайту, що відповідає вимогам, - це те, що веб-сайт працює так, як очікується тільки на одному пристрої і платформах, але фактичне тестування на всіх мобільних пристроях на ринку для більшості з нас непрактично.
Багато тестувальники, початківці тестувати адаптивний веб-дизайн, зазвичай починають зі зміни розміру вікна браузера, щоб підігнати розмір області перегляду мобільного телефона, Планшета і робочого столу. Цей метод зазвичай підходить для швидкої візуальної перевірки веб-сайту в різних портах перегляду і допомагає нам виявляти основні проблеми з відображенням, коли ми зменшуємо або збільшуємо вікно браузера.
Проте, тестування на реальних мобільних пристроях - це зовсім інший досвід.
Використання емуляторів
мобільний емулятор- це веб-симуляція того, як веб-сайти і додатки будуть відображатися і функціонувати в мобільному середовищі.
Хоча емулятори не можуть надати вам точні засоби тестування, які вам знадобляться, вони як і раніше є економічно ефективним рішенням для перевірки функціональності веб-сайту на високому рівні.
Google DevTools
У DevTools Google Chromeє функція, яка називається режимом пристрої, в яку завантажені корисні інструменти для тестування і налагодження адаптивних проектів.
На відміну від більшості інших адаптивних інструментів тестування дизайну, які просто змінюють розмір вашого екрану, цей інструмент фактично емулює роботу мобільного пристрою, особливо сенсорні взаємодії, такі як натискання і прокрутка, прямо в вашому веб-браузері.
Деякі загальні правила тестування адаптивного веб-дизайну:
- Текст, елементи управління і зображення вирівняні правильно
- Відповідна зона кликабельности
- Колір, затінення і градієнт відповідають
- Перевірте правильність заповнення країв
- Текст, зображення, елементи управління і рамки не потрапляють в краю екрану
- Розмір шрифту, стиль і колір відповідають для кожного типу тексту
- Прокручуваний текст (введення даних) відображається правильно
Перевіряйте розташування модулів у міру їх скорочення і розширення вікна браузера або при повороті мобільного пристрою. Різні модулі можуть зникнути при переході з настільного комп'ютера на мобільний, але переконайтеся, що ви точно знаєте, які модулі повинні відображатися в якому вікні перегляду.
На закінчення
Дізнайтеся, як використовується ваше веб-додаток. Ви можете отримати величезну кількість інформації з інструменту Google Analytics, щоб дізнатися, які пристрої ваші клієнти використовують для доступу до вашого веб-сайту. Використовуйте автоматизовані інструменти та емулятори для виконання основних перевірок і високорівневого функціонального тестування та поєднання цього з реальним тестуванням пристрою вручну.
Від автора:«Припини міняти розмір цього браузера, він вже скоро зітреться!» Як часто ви це чуєте? Ну, гаразд, може і не так вже й часто, але якщо ви розробляєте адаптивні веб-сайти, то знаєте, про що я говорю: при кожному редагуванні 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
deviceponsive аналогічний сайту Am I Responsive? тим, що просто і акуратно відображає ваш сайт, не має елементів управління або доступних опцій, коли справа стосується пристроїв. Всі вони показуються одночасно на одній довгою сторінці. У нього є цікава властивість - можна модифікувати заголовок, відредагувавши його фоновий колір і вставивши власний логотип, а потім «запрінскрініть». Так можна в деякому сенсі брендировать свій сайт при показі скріншотів клієнту. Імітовані на цьому сайті пристрою і розміри екранів:
Macbook - 1280 x 800
iPad (книжкова орієнтація) - 768 x тисяча двадцять чотири
iPad (альбомна орієнтація) - 1024 x 768
Kindle (книжкова орієнтація) - 600 x одна тисяча двадцять чотири
Kindle (альбомна орієнтація) - 1 024 x 600
iPhone (книжкова орієнтація) - 320 x 480
iPhone (альбомна орієнтація) - 480 x 320
Galaxy (книжкова орієнтація) - 240 x 320
Galaxy (альбомна орієнтація) - 320 x 240
Як і в більшості подібних інструментів, смуги прокрутки відображаються в маленьких пристроях. У реальному пристрої вони не будуть показуватися, але для отримання можливості прокрутки тестового виду на несенсорний пристрої потрібно піти на деякі поступки.
responsive test
Як і deviceponsive, responsive test відображає ваш сайт в багатьох пристроях, але замість показу їх всіх відразу на одній сторінці ви вибираєте, який з пристроїв дивитися, в простому менюнагорі сторінки. Переглядаючи цей сайт на лептопі середнього розміру, я виявив, що відмінно працює зменшення сторінки, дозволяючи вам бачити весь сайт всередині вікна тестованого пристрою.
Тут пропонуються тринадцять різних вікон перегляду, від великого монітора настільного комп'ютера до так званого «паршивого Android'а» (Crappy Android) (якщо чесно, у них є і опція з назвою « Android краще»(Nicer Android).
І знову Firefox на цьому сайті трохи спотикається. Зверніть увагу, на скріншоті - між зеленим верхнім колонтитулом і областю контенту з білим фоном - знаходиться лише блакитна смуга там, де повинен відображатися слайдер зображення.
responsive.is
Він дуже схожий на два попередніх, і єдине, що відрізняє від них responsive.is - це плавна анімація дисплея одного пристрою до наступного, а також напівпрозорий оверлей, який показує «нерухомість» сайту, яка випадає з вікна перегляду.
єдині доступні опціївлаштування тут - автоматичні, які заповнюють вікно вашого браузера, показуючи сайт таким, яким ви б його побачили, якби перейшли на нього: Десктоп; Планшет (альбомна орієнтація); Планшет (книжкова орієнтація); Смартфон (альбомна орієнтація) і смартфон (книжкова орієнтація), розміри в пікселях не даються.
Screenqueries
І знову кілька відмінних властивостей і опцій ставлять Screenqueries особняком серед інших сайтів. Тут представлені 14 телефонних і 12 планшетних пристроїв з окремим елементом для перемикання режимів книжкової та альбомної орієнтації. Вони відображаються на пронумерованій піксельної сітці, при цьому розміри показані внизу праворуч від тестового дисплея. Краї дисплея перетягуються, тому можна тестувати призначені для користувача розміри. Проведіть мишею або клацніть на область тестування, і фон стане сірим, з менш перевантаженим видом.
цікава особливістьцього сайту - для декількох пристроїв є опція « правильний вид»(" True view "), яка показує ваш сайт загорнутим в приписаний цьому пристрою браузер chrome. На жаль, і я до цього вже звик, Firefox'у не вдається відобразити слайдер зображення тестового сайту. Не сваріться, з браузерів я дійсно вважаю за краще Firefox, але на щастя, у нас є опції.
Screenfly
Screenfly реально збільшує коефіцієнт юзабіліті. Він пропонує дев'ять пристроїв більше планшетів, від 10-дюймового ноутбука до 24-дюймового десктопа, п'ять планшетів, дев'ять смартфонів, три телевізійних розміру і опцію нестандартного розміру екрана. Будь-яку обрану вами опцію можна обертати в книжковій чи пейзаж за допомогою окремого елемента управління в меню. Можна вибрати, чи дозволити прокручування чи ні, і одним клацанням кнопки згенерувати розділяється посилання.
Сайт проактивно корисний тим, яким чином він представляє інформацію про піксельних розмірах. Кожен пристрій в меню показано з назвою і пиксельними розмірами, величина вашого власного вікна браузера показана біля верхнього правого кута вікна, а розміри обраної опції - в нижньому колонтитулі під дисплеєм разом з URL'ом тестованого сайту. Ця маленька характеристика полегшує документування скріншотів і шарінг інформації з клієнтами.
Все вищесказане вже зробило б його ідеальним інструментом, але розробники Screenfly знайшли можливість зробити його просто вищий клас і надали властивість проксі-сервера. Цитую з їх сайту: «Screenfly може використовувати проксі-сервер для імітації пристроїв під час перегляду вами свого сайту. Проксі-сервер симулює рядок агента користувача обраних вами пристроїв, але не поведінка цих пристроїв ». Всі інші розкриті тут інструменти мають справу виключно з CSS. Screenfly - єдиний, який дозволяє тестування на підставі рядка агента користувача.
Протестувавши даними чином один створений мною сайт з наявної мобільною версією, можу сказати, що результати виявилися дуже хорошими. Все відображалося в точності так, як я очікував, і тестування піддавалися функції. Треба сказати, тестування рядків агента користувача стало традиційним, але цей сайт був зроблений давно, і властивість проксі-сервера виявилося дійсно дуже корисним доповненням до нього.
висновок
Отже, ви бачите, що для тестування адаптивних сайтів є достатньо ресурсів. Вони розрізняються унікальними властивостями; які сайти ви застосуєте, буде залежати від ваших особистих переваг і вимог, і я намагаюся підштовхнути вас на дослідження та експерименти з ними. Чим більше у нас, розробників, буде по-справжньому корисних інструментів, тим краще.
Ще ніколи не було більш важливо забезпечити, щоб ваш проект був готовий для кожного типу користувача і пристрою перед його запуском. Хоча це може бути важко фізично, перевірити дизайн на кожному пристрої, є деякі інструменти і додатки, які допоможуть вам імітувати різні адаптивні сценарії.
З такою кількістю безкоштовних і преміум інструментів немає причин не тестувати адаптивний дизайн перед розміщенням в Інтернеті. Просто не забудьте використовувати цю інформацію для багатьох необхідних коригувань дизайну! Сьогодні ми пропонуємо вам набір інструментів для тестування адаптивного дизайну.
1. Google Mobile-Friendly Test
Google Mobile-Friendly Test - один з тих інструментів, які чомусь не беруться до уваги. Вам потрібно, щоб дизайн вашого сайту відповідав стандартам Google, для допомоги з видимістю в пошуку, і це так просто.
Інструмент легко використовувати, просто введіть URL-адресу та подивіться, як оцінюються ваші сторінки на мобільних пристроях. Краща частина цього інструменту полягає в тому, що він визначає, де ваш сайт може «гальмувати» або погано відображатися на мобільних пристроях, щоб ви могли виправити помилки.
