SEO

Як перевірити відображення сайту на мобільних пристроях

Мобільні пристрої активно витісняють настільні PC і ноутбуки в якості інструменту для доступу до Інтернету. Складно не погодитися з тим, що читати улюблені сайти, та й просто клікати в Мережі, лежачи вдома на дивані або сидячи десь за чашкою кави – набагато зручніше, ніж сидіти на одному й тому ж місці, перед екраном комп’ютера.

Для бізнесу це теж дзвіночок – кількість мобільного трафіку в середньому вже становить понад 30% від усіх інтернет-користувачів, а в деяких тематиках вже впритул наблизилася до позначки 50%. І це навіть якщо говорити про комерційні тематики, не кажучи вже про інформаційні сайти.

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

У цій замітці я поділюся з вами відразу декількома способами перевірити, як ваш сайт відображається на смартфонах і планшетах. Для цього можна скористатися як спеціальними сервісами, так і засобами браузера Google Chrome.

Responsivetest.net

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

Для перевірки адаптивності дизайну сайту-пацієнта, можна вибрати пристрій зі списку (смартфони, планшети, PC):

devices

Або, вказати власне розширення екрану на вибір, просто ввівши цифри у відповідному полі:

custom-size

Доступна і смуга прокрутки, щоб можна було краще все роздивитися.

Screenfly

screenfly Сервіс для тестування відображення сайту на екранах різного розміру, який стабільно входить до збірки найпопулярніших інструментів такого роду. Для початку роботи просто вводимо адресу сайту в рядок, і натискаємо кнопку «Go». Ну а тепер просто вибираємо пристрій зі списку:

choice-device

Варто зазначити, що вибір досить широкий – від мобільних телефонів і до телевізорів, як аналогового типу, так і HD. Результатом можна поділитися з іншими людьми, для чого достатньо натиснути кнопочку «Share»:

druzjam

Дивимося сайт на різних пристроях в Chrome

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

Перейдіть на потрібну сторінку і натисніть кнопку F12 на клавіатурі. Відкриється додаткова панель інструментів праворуч, на якій потрібно натиснути на іконку «Toggle device mode»:

toggle-device-mode

Вкладка трансформується, і тепер, в випадаючому меню «Responsive» можна вказати пристрій, екран якого ви хочете емулювати:

chrome-emulate

Ну от і все. Головна перевага такого способу – відсутність необхідності у використанні сторонніх сервісів. Все можна зробити засобами самого браузера.