Як перевірити адаптивний дизайн сайту

  1. Швидка перевірка адаптивної верстки
  2. SEO тестування мобільного дизайну
  3. Он-лайн сервіси по перевірки адаптивності
  4. Google resizer
  5. Quirktools screenfly
  6. Symby.ru adaptest
  7. Швидкість роботи мобільної версії сайту
  8. PageSpeed ​​Insights
  9. WebPageTest
  10. висновки

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

Поділися цією сторінкою з друзями!

Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

    Как поменять клавиатуру на ноутбуке самостоятельно?
    Владельцы мастерских по ремонту компьютеров часто встречаются со случаями, когда приносят ноутбук, на который была пролита какая-либо жидкость. В некоторых случаях подобная ситуация означает, что понадобится

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как почистить клавиатуру компьютера
    С появлением компьютера человек все больше времени проводит за ним. Это и рабочий инструмент, и средство развлечения. Поэтому, совсем неудивительно, что определенные устройства, используемые для ввода

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

    4 способа, как отключить клавиатуру на ноутбуке
    Если у вас есть ноутбук, то клавиатура и тачпад на нем являются важными составляющими, без которых работа на устройстве будет вызывать сложности. Конечно есть альтернативы в виде клавиатур и мышей, которые

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем немало неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, нехорошо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения