10 бесплатных способов тестирование адаптивной верстки

tb8[1]

В интернете есть такое понятие Responsive web design, т.е. “отзывчивый дизайн”. Сейчас данный термин на русском звучит как “Адаптивный веб-дизайн”, отсюда и название вида верстки.

Суть в двух словах: используя css media запросы по размеру экрана “подсовывать” нужные css стили. Подробнее можно почитать тут.

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

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

С помощью данных ресурсов можно посмотреть как выглядит ваш сайт для мобильных устройств.

Давайте рассмотрим возможные на сегодня бесплатные варианты. С удовольствием добавлю, если что-то упустил.

1. Изменение ширины браузера.

Казалось бы, ведь кто будет заниматься этим?! А зачем самому подбирать мышкой размеры?
Но ведь есть добрые люди и есть решения в виде плагинов для браузеров:

  • Google Chrome – Плагин Window Resizer. Загляните в блок “Похожие”, если не понравился данный плагин.
  • Opera - Resize Me

2. Закладки в браузер

Также суть в изменении размера окна браузера.
Я нашел 2 варианта:

  1. - Resizer

    проверка сайта на адаптивную верстку
  2. - Responsive Design Test – настраиваемый. Можно сгенерировать необходимые размеры устройств на странице на свой вкус. ;)

Для использования на страницах перетащите ссылку на свой браузер и все можно использовать.

3. Responsivepx

http://responsivepx.com

сервис responsivepx
Вводим свой адрес сайта, выбираем нужные параметры: ширину и высоту.

4. Resize My browser

http://resizemybrowser.com/

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

5. Screenfly

http://quirktools.com/screenfly/

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

6. Screenqueri

http://screenqueri.es/

онлайн ресурс проверки мобильности сайта

Интересный ресурс для проверки онлайн вашего сайта на разных планшетах и смартфонах.
При чем очень большой выбор: продукция от apple, samsung,htc,blackberry,LG,Nokia и др. Есть также возможность ручного изменения размеров экрана.

7. Responsinator

http://responsinator.com

Особенность ресурса в том, что вывод сайта осуществляется в виде устройства как на картинке. Вот так вот выглядит мой блог на galaxy.

как выглядит сайт на смартфоне на андроид

8. Plastilin5

http://plastilin5.com/tools/

А вот так вот выглядит мой блог на айфоне с разрешение 320*480 на ресурсе plastilin5.

как выглядит сайт на iphone

9.Mattkersley

http://mattkersley.com/responsive/

Еще один сервис, где можно посмотреть как будет ваш сайт смотреться на мобильных устройствах типа смартфоны и айфон. Имеется только 4 варианта устройств. Настроек нету.

проверить сайт на адаптивную верстку

10. Использование iframe

Интересный вариант с использованием iframe’ов есть на github.
Суть: редактируем html файл с нужными значениями ширины экрана и закидываем в директорию с сайтом, загружаем наш файл и в фреймах должен появиться нужный нам сайт в вариантах на девайсах.

Надеюсь, информация по проверке адаптивной верстке была для вас полезна. Не забудьте просто посмотреть на свой сайт с других устройств и задумайтесь, а может стоит и подумать о людях, сидящих с телефонов??

с/у УтБ

Если хотите что-нибудь продать из рук в руки, разместить объявление, то вам надо просто подать бесплатное объявление в Москве на сайте барахолки Sindom.ru

На десерт сегодня видео танцора-путешественника Мэта:



Комментарии к статье

  • #

    И ни одного сервиса, который понимал бы media-запросы со значением device-width

  • #

    Спасибо большое!Полезные вещи!

  • #

    спасибо, полезно)

  • #

    Большое спасибо! Даже не знал, что есть столько серверов для проверки на адаптивность.

  • Добрый день!

    Спасибо за предоставление ссылок на просмотрщики. Можете связаться со мной для сотрудничества по верстке?

  • #

    подскажите мне сайт типа вашего но для дримвивер от адобе…зарание благодарен!

    • #

      не понял вашего вопроса :)

  • #

    Хороший сайт я из казахстана очень рад что есть такие у нас сайты

    • #

      спасибо, стараюсь))

  • #

    сейчас у блога есть мобильная версия с помощью плагина :smile:
    отпишу в отдельной статье.

    • #

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

  • #

    http://responsinator.com очень удобный рес для просмотра сайта на телефоне.

  • #

    Спасибо за способы тестирования, очень помогло, практически во всех своих проектах нашел баги.

  • #

    Отличная статья! Спасибо! :|

  • #

    http://mattkersley.com/ Хороший сервис, я им всегда пользуюсь.

    • #

      настроек маловато

  • #

    У gtalk’a нету мобильной версии – не удобно :evil: .
    А статья на jnet.kz очень пригодилась давно такое искал –
    никак не получается у меня делать адаптивные сайты
    хотя очень хотелось бы.

    • #

      да, знаю :) решил новыый шаблон сделать и учесть это ;) кстати, там тож моя статья))