- Швидка перевірка адаптивної верстки
- SEO тестування мобільного дизайну
- Он-лайн сервіси по перевірки адаптивності
- Google resizer
- Quirktools screenfly
- Symby.ru adaptest
- Швидкість роботи мобільної версії сайту
- PageSpeed Insights
- WebPageTest
- висновки
10 липня 2016 • HTML & CSS • Коментарі: 2
Сьогодні вже немає потреби переконувати будь-кого в необхідності мобільної версії сайту. Адже з кожним днем відвідувачів зі смартфонів і планшетів стає все більше і більше. На момент написання цієї статті близько 20% відвідувачів мого блогу використовують мобільні пристрої для перегляду. Тобто кожен п'ятий заходить на мій сайт з телефону або планшета.
Кілька років тому я навіть не думав про такі відвідувачів, але коли їх кількість перевищила 10% від загального числа я став використовувати адаптивну верстку. Це дозволило коректно відображати контент на мобільних пристроях і підвищити лояльність до сайту як відвідувачів, так і пошукових систем.
Мобільна версія сайту і адаптивний дизайн - це не одне і теж. У даній статті мова піде про тестування адаптивної верстки, коли дизайн сайту, змінюється в залежності від дозволу екрану пристрою відвідувача.
Щоб бути впевненим, що ваш сайт правильно відображається на мобільних пристроях необхідно провести перевірку, і для цього існує кілька корисних сервісів і інструментів.
Швидка перевірка адаптивної верстки
Популярний інтернет оглядач (браузер) Mozilla Firefox оснащений вбудованим інструментів перевірки дизайну сайту на придатність до відображення на мобільних пристроях. Щоб ним скористатися зайдіть в «Меню» - «Розробка» - «Адаптивний дизайн». Або просто натисніть на клавіатурі одночасно три клавіші [Ctrl] + [Shift] + [M]
Ви повинні побачити приблизно наступну картину:
Змінюючи дозвіл і орієнтацію екрану можна перевірити як буде відображатися ваш сайт у мобільних відвідувачів.
Браузер Google Chrome так само має вбудовану підтримку перевірки адаптивності дизайну сайту. Для цього заходимо в меню, вибираємо пункт «Додаткові інструменти» і потім «інструменти розробника» (або натискаємо кнопку [F12]).
Після цього натискаємо іконку адаптивного дизайну (або одночасно натискаємо на клавіатурі [Ctrl] + [Shift] + [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. Після чого, звичайно ж, необхідно перевірити лояльність пошукових систем до вашого дизайну. А вже потім, для заспокоєння душі або щоб похвалитися, можна скористатися онлайн сервісами.
Поділися цією сторінкою з друзями!