Відкрити меню

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

Вітаю, товариство! Колись, пригадую, ще на на початку вивчення сайтобудування, я склепав свій перший сайт на простому HTML. О, яка гордість мене тоді розпирала! А як інакше – у мене є свій сайт! Я вмію створювати сайти, для мене не є чимось загадковим слова – хостинг, домен, візуальний редактор, HTML, FTP, я крутий – одним словом. Був у мене тоді старенький ПК з монітором 15 дюймів і на такому “апараті” приходилось працювати. Пройшов час – я придбав сучасний “монік” Samsung 19″ і яке було моє здивування, коли на широкоформатному моніторі прийшлось побачити свій сайт. Здогадуєтесь, що сталось?

Відображення сайту

Все вірно – сайт просто “поплив”. Каркас, звичайно, залишився на місці, тому що розміри були виставлені правильно, 95% і основа розтягнулась під розширення нового монітора. А от шапка, підвал, малюнки, якісь форми підписки і таке інше … все це перекосилось і почало відображатися аби як. Нахапавшись вершків, я не збагнув, що “гумові” сайти мають свої особливості і підхід до побудови повинен бути інший, враховуючи розміри та формати різних моніторів та пристроїв.

Прийшлось переглядати інформацію, підправляти свій сайт, але моя “нелюбов” до гумових шаблонів залишилась. І хоча зараз я використовую подекуди 100% розміри, але ставлюсь до цього трішки упереджено – краще, все ж таки, статичні (фіксовані) параметри сайтів, тоді ти впевнений, що яке б розширення не було – твій ресурс не “поїде”.

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

Нещодавно, коли я розпочав розробку інтернет-магазину, ситуація знову повторилась. Шаблон, який я редагував, мав коректний вигляд на різних розширеннях, от тільки на Samsung Galaxy Tab меню та шапка танцювали по-своєму. Цікаво було ще й те, що мобільна версія працювала на відмінно, на нетбуках та настільних ПК також проблем не було, от тільки розширення Galaxy Tab спотворювало зовнішній вигляд.

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

Як перевірити відображення свого ресурсу на різних моніторах та пристроях?

Варіантів існує дуже багато, але я вже декілька років користуюсь одним сервісом:

www.quirktools.com

Отже, переходимо за посиланням, вводимо у форму адресу свого блогу чи сайту і тиснемо “Go”.

Сервіс перевірки відображення

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

Вигляд сайту

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

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

Не нехтуйте цією перевіркою, адже “косий” зовнішній вигляд блогу може відлякувати відвідувачів, а Ви ж не знаєте, з якого саме девайсу до Вас зайшла людина.

Бажаю стабільної роботи Вашим ресурсам і гарного дня Вам.

Шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 1, середній: 5,00 з 5)
Loading...
Обговорення: 5 коментарів
  1. Володимир сказав:

    Чудовий сервіс, дуже потрібний при розробці

    Відповіcти
    1. Олег Волощук сказав:

      Авжеж, я от почав перевіряти деякі шаблони, які колись вибрав – так половину можна сміливо викидати (ну або лізти в код).

      Відповіcти
  2. Володимир сказав:

    Я б ще порадив сервіс http://browsershots.org/ для перевірки того як відображається ваш сайт в різних браузерах

    Відповіcти
    1. Олег Волощук сказав:

      Ага, також в колекцію інтструментів потрібно додати, дякую.

      Відповіcти
  3. Сергей сказав:

    Очень полезный сервис, надо другу посоветовать. Он начинающий верстальщик, поэтому просит друзей смотреть как выглядит его сайт

    Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google