Блог

Проверка вёрстки на адаптивность

29.12.2013

Согласны ли вы с тем, что каждый сайт должен иметь адаптивную вёрстку для того, чтобы на него смогли смело заходить пользователи с самых разных девайсов? Просмотр вашего сайта будет приятным и лёгким, если вы заранее позаботитесь о всех так называемых «мелочах» вёрстки (на самом деле это совсем не мелочи). Ваш сайт будет популярен лишь в том случае, если на него захочется возвращаться, а это включает в себя не только насыщенный фактами интересный контент, но и удобство чтения и просмотра сайта.

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

Так получается, что мы избегаем дел, которые требуют от нас затрат энергии. И это нормально — каждая система (вам скажет об этом физик) стремится к минимальному расходу энергии.

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

В этой статье я не буду рассказывать, как сделать сайт адаптивным (вам нужно знание CSS3). Думаю, что такие статьи будут  скоро в моём блоге. А в этой статье я расскажу вам, как проверить свой сайт на адаптивность.

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

Давайте просмотрим сервисы, которые вызвались помочь таким, как мы:

1. Screenfly Quirktools

Признаюсь честно, этот сервис мне нравится больше всех. А плюсов в нём много:
вы можете выбирать из огромного числа девайсов и разрешений

ScreenflyQuirktools

вы можете применять своё разрешение для просмотра с помощью инструмента «Custom Screen Size»

ScreenflyQuirktools1

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

2. resizeMyBrowser
Переводится как «Измени размер моего браузера».

Работает только на Firefox Mozilla и IE.

resizeMyBrowser

Вам предоставляется на выбор 15 разрешений экрана, имитирующих различные девайсы. При клике на один из них, у вас открывается окно браузера, точно совпадающее с размерами окна браузера выбранного девайса. Вам остаётся ввести в адресную строку открывшегося окна ваш сайт.

Фишка этого сервиса ещё и в том, что он позволяет вам добавить разрешения экрана, которые вам интересно проверить.

resizeMyBrowser1

Разрешения экрана представлены без учёта границ браузера и адресной строки — то есть только само окно, в котором виден сайт.

3. RWD Demonstrations

А вот и ещё один интересный сервис, с которым приятно работать и экспериментировать. Разработчики не стали ограничиваться сухим изменением разрешения: добавили визуальные эффекты для каждого девайса.

В шапке справа вы вводите адрес вашего сайта и нажимаете View:

RWDDemonstrations

Теперь фокус! Ваш сайт можно просмотреть на мобильном устройстве и на планшете при портретном и ландшафтном режимах, и ещё на ПК, кликая на пиктограммы в шапке.

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

4. Responsinator

Этот сайт предлагает вам массу девайсов и все они на одной странице сразу. После того, как вы введёте в строку в шапке ссылку на свой сайт — увидите на одной странице сразу 12 разрешений (!). Не надо выбирать — сервис уже предоставил вам просмотр сам. Конечно, загрузка идёт достаточно долго и может занять время, но результат того стоит. Под каждым девайсом подписано его название и ширина (без длины), воссоздан визуальный эффект девайса.

Responsinator

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

 

Пока разбор сервисов для проверки адаптивности вёрстки закончен. Я рассмотрю ещё партию с вами в дальнейшем 😉

Удачи вам и успеха вашим сайтам!