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

Дата: 29 серпня 2013 Рубрика: Інтернет-сервіси Коментарі: 5 коментарів

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

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

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

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

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

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

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

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

www.quirktools.com

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

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

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

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

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

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

Шануйтеся!


З повагою, Олег Волощук.

Бажаєте мати свій власний блог на WordPress?

Отримайте АБСОЛЮТНО БЕЗКОШТОВНО детальний відеокурс і вперед!

Ваш E-Mail 100% в безпеці!

 

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

  1. Володимир коментує:

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

    Відповіcти
    • Олег Волощук коментує:

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

      Відповіcти
  2. Володимир коментує:

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

    Відповіcти
    • Олег Волощук коментує:

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

      Відповіcти
  3. Сергей коментує:

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

    Відповіcти

Залишити свій коментар

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Google + фейсбук Вконтакті Twitter RSS
Категорії
  • Інтерв’ю (4)
  • Конкурси (5)
  • Оголошення (11)
  • Особисте (19)
  • Плагіни для Wordpress (15)
  • Саморозвиток (7)
  • Технічні поради по WP (24)
Останні коментарі
  • Олег Волощук до Maxthon Cloud Browser — потужний хмарний браузер, який впевнено завойовує ринок
  • Валентина до Maxthon Cloud Browser — потужний хмарний браузер, який впевнено завойовує ринок
  • Олег Волощук до Maxthon Cloud Browser — потужний хмарний браузер, який впевнено завойовує ринок
  • Валентина до Maxthon Cloud Browser — потужний хмарний браузер, який впевнено завойовує ринок
  • Олег Волощук до Maxthon Cloud Browser — потужний хмарний браузер, який впевнено завойовує ринок
Канал на YouTube
Соціальні спільноти
Кращі коментатори
Павло(4)
Валентин.(2)
Vlad38(2)
Валентин.(1)
Саша(1)
Ольга(1)
Pavlofox(1)
запитів / генер. стор. / спож. пам'яті
51 / 0.343 / 57.75mb
Вгору