Как проверить отражение своего сайта на разных устройствах и мониторах?

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

Все верно — сайт просто «поплыл». Каркас, конечно, остался на месте, потому что размеры были выставлены правильно, 95 % и основа растянулась под расширение нового монитора. А вот шапка, подвал, рисунки, какие-то формы подписки и т.д…. все это перекосилось и начало отражаться лишь бы как. Нахватавшись сливок, я не понял, что «резиновые» сайты имеют свои особенности и подход к построению должен быть другой, учитывая размеры и форматы различных мониторов и устройств. Особенно, если вы занимаетесь разработкой приложений для iOS или созданием приложений для iPhone как в hibercon.com.

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

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

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

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

Как проверить отражение своего ресурса на разных мониторах и устройствах?

Вариантов существует очень много, но я уже несколько лет пользуюсь одним сервисом:

www.quirktools.com

Итак, переходим по ссылке, вводим в форму адрес своего блога или сайта и жмем «Go».

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

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

 

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

Не пренебрегайте этой проверкой, ведь «косой» внешний вид блога может отпугивать посетителей, а Вы не знаете, с какого именно девайса к Вам зашел человек.

Желаю стабильной работы Вашим ресурсам и хорошего дня Вам.