15 инструментов для тестирования адаптивного дизайна


Содержание

Лучшие инструменты для тестирования адаптивной верстки. Чем тестировать адаптивный дизайн

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

Ранее я рассказывала о том, какие существуют варианты реализации . В этой же статье я расскажу о том, какие инструменты и сервисы я использую в работе для проверки вёрстки сайта.

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

1. Инструмент проверки адаптивности Viewport Resizer

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

Набор разрешений невелик (от 240 px (интересно, у кого-то ещё есть телефон с таким экраном и выходом в интернет? :)) до 1024 px), но для беглого тестирования отдельной страницы инструмент подойдёт. Сервис можно использовать, например, тогда, когда вы уверены в корректной вёрстке сайта, но какую-то отдельную страницу вам наполняет человек, с которым вы работаете впервые. Логично, что вы захотите удостовериться в корректном отображении страницы на всех устройствах. Инструмент Мэтта Керсли позволит это сделать.

Набор эмулируемых устройств невелик и давно не обновлялся. В перечне есть Iphone с 3 по 6, пара моделей Samsung, BlackBerry, LG.

В сервисе нужно указать:
— адрес проверяемой страницы;
— ориентацию (вертикальная или горизонтальная (портрет/ландшафт)):
— размер терминала (есть два варианта: «размер экрана» (зависит от разрешения вашего монитора, с которого вы проверяете вёрстку) или «реальный размер» устройства, которое вы эмулируете (например, BlackBerry)).

На экране каждого устройства в инструменте есть вертикальная полоса прокрутки, поэтому можно просмотреть всю страницу и определить, есть ли погрешности вёрстки:

Есть ещё уйма онлайн-сервисов, но они не отличаются от перечисленных принципом работы. Некоторые инструменты уступают лишь по набору функций.

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

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

Принимая работу верстальщика, используйте хотя бы 1-2 инструмента из списка. В таком случае вашим сайтом будут довольны все: и вы, и ваши клиенты, и поисковые системы.

Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 20% посетителей моего блога используют мобильные устройства для просмотра. То есть каждый пятый заходит на мой сайт с телефона или планшета.

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

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

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

Быстрая проверка адаптивной верстки

Популярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]

Вы должны увидеть примерно следующую картину:

Изменяя разрешение и ориентацию экрана можно проверить как будет отображаться ваш сайт у мобильных посетителей.

Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу ).

После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):

В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:

SEO тестирование мобильного дизайна

Как известно у двух мировых поисковых лидеров Google и Яндекс есть свое нескромное мнение как должен выглядеть сайт на экранах мобильных устройств. И если сайт признается неудобным для мобильных посетителей, то он понижается в поисковой выдаче. Таким образом, с точки зрения SEO, если вы не хотите потерять мобильных посетителей, то у вас должен быть не только адаптивный дизайн, но и поисковые системы должны считать его таковым, то есть пригодным для мобильных устройств.

Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .

Вот так выглядит результат проверки моего блога:

С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:

Он-лайн сервисы по проверки адаптивности

Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.

Google resizer

Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#

Quirktools screenfly

Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!


Symby.ru adaptest

Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.

Скорость работы мобильной версии сайта

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

PageSpeed Insights

Google как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.

WebPageTest

И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/

Выводы

На мой взгляд в повседневной работе при внесении изменений в дизайн сайта проще использовать встроенные возможности браузеров FireFox и Chrome. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.

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

Не так давно я сменил дизайн своего блог. Попросту – поменял шаблон (Где скачать?). Делалась эта процедура уже неоднократно. Раз 5 точно.

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

Увиденное меня не порадовало.

Конечно же, ничего нового там я для себя не обнаружил. Я прекрасно знаю слабые стороны своего блога. Однако это натолкнуло меня на размышления. Если я адаптирую сайт под разные разрешения, то перестану ежедневно терять те 5% посетителей, которые заходят на мой сайт с мобильных устройств. Следовательно, если эти 5% ранее шли мне в минус по поведенческим факторам , то теперь же они будут идти мне в плюс.

В тот же день я подобрал себе шаблон, который вы сейчас видите. И на данный момент, согласно Яндекс Метрике, вместо прежнего отказа в 50% для мобильных устройств я имею всего 5-10%. Что, я считаю, очень даже хорошо. Более того, я заметил небольшой прирост трафика. Трудно сказать, оказало ли влияние изменение сайта в пользу адаптивности, или сказались какие-то другие работы, проводимые с сайтом, но хочется в это верить.

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

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

Проверка сайта на разных устройствах

Есть достаточно много онлайн сервисов, в которых можно проверить, как будет выглядеть сайт на различных мобильных устройствах . Но мне больше всего приглянулась стационарная программа Opera Mobile Classic Emulator

Opera Mobile Classic Emulator

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

Она имеет достаточно простой интерфейс, поэтому расписывать ее функционал просто нет необходимости.

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

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

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

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

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

Цукерберг рекомендует:  Стилизация элементов с помощью глифов, спрайтов и псевдо-элементов

Есть возможность выбрать непосредственно название устройства в случае, если вы не знаете его точное разрешение. Таким образом, вы можете выбрать Kindle, Google , Samsung, Motorola, Apple из выпадающего списка и проверить макет страницы в соответствующем разрешении.

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

Кроме того, вы можете вращать экран, включить или отключить прокрутку веб-страницы или использовать прокси-сервер для тестирования веб-страницы.

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

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

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


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

также определяет текущее разрешение вашего экрана и отображает его для ознакомления.

Еще один веб-инструмент, который позволяет протестировать страницы сайта в различных размерах. Сайт лучше всего работает с Internet Explorer и отображает веб-страницы в выбранном разрешении. Однако, список разрешений весьма ограничен. Это означает, что вы можете проверить веб-страницы только в 8 разрешениях, включая 800 × 600, 1024 × 768, 1280 × 960, 1440 × 900, 1600 × 1200, 1680 × 1050 и 1920 × 1200.

Не предусматривает такое количество опций, как на других подобных веб-сайтах, но и этот вариант стоит попробовать.

Последним в списке является ресурс TestSize.com, бесплатный онлайн инструмент, который предлагает 9 различных разрешений для проверки страницы сайта: 240 × 380, 640 × 480, 800 × 600, 1024 × 600, 1024 × 768, 1280 × 600, 1280 × 1024, 1366 × 768 и 1920 × 1024.

Кроме того, здесь также можно вводить размеры экрана вручную и проверять веб-сайт в отдельно открывающемся окне (Open popup) . TestSize.com удобен и прост в использовании.

Оставьте свой комментарий!

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

Еще есть вариант с использованием плагинов для бразуера, например Web Developer для Firefox, который также сущесвтует и для Google Chrome . Опция Resize позволяет изменить размер браузера до нужного вам значения.

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

Сервисы просмотра сайта на разных разрешениях экрана

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

Кстати, под доменом quirktools.com скрывается еще парочка интересных простых сервисов:

  • Smaps — создание карт сайтов или просто иерархической схемы.
  • Wires — вот это классная штука, которая позволяет создавать макеты веб-страниц с помощью разных функциональный блоков (текста, табов, форм, кнопок и т.п.)

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

Весьма симпатичный дизайн у проекта.

Этот сервис похож на CrossBrowserTesting, поскольку дополнительно позволяет оценить ваш сайт на разных браузерах и ОС. Причем он также требует регистрацию и имеет платные функции. Хотя для просмотра разных разрешений экрана это не обязательно — переходите в пункт меню Responsive.

По дизайну и функциональности все очень круто сделано, чего только стоит возможность для смартфонов выбирать варианты просмотра Portrait и Landscape. Да, в остальных сервисах имеется функция поворота (Rotate), но, согласитесь, так все смотрится намного ярче. Кстати, если я правильно понял, то после регистрации вы сможете использовать опцию живого интерактивного тестирования в реальном времени.

Сервис в духе минимализма. Здесь есть поле для ввода названия сайта + возможность выбора размеров экрана для просмотра.

Еще один максимально простой проект. Кроме адреса сайта и размеров представлены наиболее популярные разрешения экрана для вашего удобства.

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

5 лучших инструментов для создания адаптивного веб-дизайна

В начале хочу сказать, что я не включил сюда «point-and-click» инструменты. Причина очень проста — я верю, что они плохи для всех: дизайнеры, клиенты, разработчики… страдают все. Дело не в качестве кода, и не в том, что работать в них «слишком просто». Дело в том, что эти программы всегда будут ограничивать своих пользователей, какими бы крутыми они не были.

Теперь к инструментам. Давайте начнём с очевидного:

1. Ваш браузер

Нет, я не шучу. Это действительно самый важный инструмент , который у Вас имеется. Именно он покажет, как будет выглядеть ваш веб-сайт в конкретных условиях. Существует бесконечное множество споров о том, где лучше всего проектировать: в браузере или же в графическом редакторе. Позвольте мне решить этот спор за вас.

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

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

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

2. Проектирование в Google Drive

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

Я предпочитаю проектировщик Google Drive по нескольким причинам:

  • Социальная и совместная работа. Google предоставляет возможность обмена информацией лучше, чем кто-либо другой. Контекстные комментарии, одновременное редактирование и интеграция Hangout. Я влюблен.
  • Автоматические направляющие. В каждом документе направляющие создаются автоматически на основе размеров каждого элемента, введённого в документ. Это позволяет легко изобразить последовательные размеры элементов документа, что отлично подходит для таких одержимых сетками дизайнеров, как я.
  • Я делюсь с клиентами этими вайфреймами и они выглядят очень профессионально, что является большим плюсом.


Тем не менее я не ограничен направляющими и нахожу GDDA (Google Drive Drawing App) отличной альтернативой макетам приложений, которые пытаются ограничить вас границами сетки.

О, и это бесплатно. Надо ли говорить больше?

3. Style Prototypes

Style Prototypes встроен в браузер и даёт вам и клиентам возможность посмотреть, как цвета, типографика и элементы пользовательского интерфейса вашего сайта будут выглядеть. Так как он создан для просмотра в браузере, то будет меньше несоответствий после построения сайта.

Кроме того я считаю, что Style Prototypes поможет нашим клиентам мысленно отделить понятия UX и эстетики. И вообще всё, что помогает клиентам ближе понимать процесс веб-дизайна может быть только хорошо.

4. Responsinator

Responsinator — простой инструмент, который покажет сайт в различных размерах. Он показывает сайт на разных устройствах и экранах. Но тут есть пару нюансов.

Хотите посмотреть, как ваш сайт будет смотреться при маленьких размерах? Измените размер окна браузера. Хотите проверить сайт на мобильном устройстве? Лучше устроить реальное тестирование. Фактически этот инструмент для клиентов. Инструмент, что бы показать им разницу экрана настольного компьютера и ноутбука. Небольшого смартфона и планшета. А так же всё остальное в этом духе.

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

5. Adobe Edge Inspect

Теперь инструмент для вас. Если у вас есть мобильная лаборатория тестирования (и чем раньше вы сможете сделать её, тем лучше) Edge Inspect будет синхронизировать все ваши устройства, что бы посмотреть одну и ту же страницу. Обновите страницу на одном устройстве и обновятся все.

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

Заключение

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

А какие инструменты используете вы? Напишите свой топ-5 в комментариях!

Инструменты тестирования адаптивной вёрстки

Шесть разрешений для горизонтальной и вертикальной ориентации экрана.

Пять разрешений для вертикальной ориентации экрана. Изображения выровнены по высоте, но можно отобразить их в полный размер.

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

Необходимо перетащить кнопку «RWD Bookmarklet» на панель закладок в браузере. Затем открыть тестируемый сайт и нажать кнопку.

Можно отобразить на экране виртуальную клавиатуру и посмотреть, сколько останется свободного пространства.

Сервис на русском языке. Три разрешения для горизонтальной и вертикальной ориентации экрана.

Sergey Smirnov

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

Усложняются подходы, усложняется и возможность тестировать свою работу. В идеальном случае тестировать клиентскую часть, лучше на клиенте. То есть непосредственно на устройстве. Но различных устройств сегодня очень много, и не всегда представляется возможным посмотреть ваш сайт сразу и на iPad под OS X и на стареньком PC под Windows с IE6. Редко можно встретить одновременно и то и другое в одном месте.

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

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

Цукерберг рекомендует:  Новый год в стиле Digital Art

Тестирование отзывчивого дизайна. онлайн сервисы

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

Таких сайтов много, наиболее популярный из них mattkersley.com

Сайты обладающие подобным функционалом:

Более подробное описание по каждому из этих сайтов вы можете прочитать на сайте http://postovoy.net/35.html

Эмуляторы устройств


http://www.mobilexweb.com/emulators — все доступные эмуляторы мобильных устройств. В большей степени эмуляторы требуются разработчикам программ под устройства, чем тем кто тестируют под них верстку. Для тестирования клиентской части чаще можно обойтись средствами браузера, или встроенными плагинами.

Тестирование кроссбраузерности

Кроссбраузерность это свойство сайта отображаться и работать во всех популярных браузерах идентично. Обычно речь идет не о функционале, а о клиентской части.

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

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

http://browsershots.org/ — тестирование в 181 браузере на кросс-браузерность при помощи скриншотов

Вторым по популярности на мой взгляд является IE Tester

http://www.my-debugbar.com/wiki/IETester/HomePage — IE Tester. Тестирование во всех версиях IE начиная с версии 5.5

Встроенные Инструменты браузеров для тестирования верстки

Firefox

Web Developer Toolbar. Вкладка Resize пункт меню View Responsive Layouts

Плагин Web Developer Toolbar предоставляет веб-разработчику множество вариантов для тестирования сайта. Среди них есть отдельная закладка Resize в которой можно через Edit Resize Dimensios добавить расширений для изменения размера окна, или нажав на View Responsive Layouts увидеть как ваш сайт будет отображаться для наиболее популярных расширений.

Так же в работе я использую Firebag с кнопкой Исследовать элемент
и плагин L-Square browser pixel rulers который вводит в браузер линейку.

Google Chrome

Для этого браузера есть большое количество расширений для тестирования responsive верстки. Пожалуй даже больше чем для браузера Firefox

Основное расширение для Google Chrome это Window Resizer и порядка 12 похожих

Resize Window

Viewport Resizer

Расширения как правило работают таким образом что изменяют или размер browser (разрешение) или размер viewport (внутри окна browser).

Всего в Google Chrome как я уже написал порядка 12 расширений. Рекомендую установить все и протестировать, оставив те, что больше понравятся.

50 инструментов для адаптивного дизайна

12 марта 2013 | Опубликовано в Веб-дизайн | 5 Комментариев »

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

Style Tiles — инструмент для создания красивых заголовков, который включает наборы различных шрифтов и стилей.

Responsive Web Design Sketch Sheets
Этот набор поможет вам в планировании изменений различных элементов разных размеров.

Готовые решения для создания адаптивных сайтов.

Multi-Device Layout Patterns
Статья о шаблонах компоновки.

Responsive Design with Mockups
Здесь вы найдете библиотеку шаблонов вместе с учебником о создании вайрфпеймов.

Инструменты для адаптивных изображений и текста

Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.

Сетка из изображений, которую можно использовать как фоновое изображения и которая подстраивается под размеры экрана монитора.

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

Этот инструмент поможет вам показать 2 бьольших изображения с высоком разрешением, оптимизированными под Retina в адаптивных веб-дизайнах.

Гибкие сетки и медиа-запросы


Variable Grid System
Бесплатный генератор адаптивной css-сетки

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

С помощью gridpak можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.

Используется для создания «разумного» шаблона. Она использует такие расширения как LESS, SCSS или Stylus, чтобы сделать ваш сайт более эффективным.

Columnal CSS Grid System
Эта система сеток поможет создавать адаптивные макеты.

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

Оптимизирована для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, которая использует Media Queries.

Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

Библиотека css3 mediaqueries.js добавит поддержку CSS3 медиа-запросов в старые броузеры (IE 5+, Firefox 1+, Safari 2).

Adapt.js
Это очень маленький ( mediaQuery Bookmarklet

Фреймворки для создания адаптивного тдизайна

Mobile Boilerplate
Вы получите кроссбраузерность для смартфонов и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile.

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

Очень простой и прямолинейный, нет никаких предустановленных систем разметки или не-семантических классов. Является отправной точкой, его необходимо редактировать, настраивать и переписывать для удовлетворения своих требований.

12-ти колоночная разметка, 960px максимум, и спользует много медиа-запросов. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильные версии браузеров

Это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.

Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке. Также имеется генератор CSS.

Inuit.css

Основан на SASS, объектно-ориентированный.

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

Адаптивные плагины

Создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах.

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

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

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

С помощью этого плагина вы можете делать видео адаптивным.

Wookmark — плагин для создания динамичного многоколоночного шаблона.

Тестеры и отладчики

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

C помощью Responsivepx можно не только проверить свой сайт (даже локально), но и получить рекомендации, которые можно использовать в медиа запросах для создания адаптивного дизайна.

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

The Responsinator покажет как выглядит компоновка вашего адаптивного сайта на популярных устройствах.

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


Screenqueri.es
Бесплатная утилита для тестирования адаптивного дизайна. Для проверки шаблона нужно ввести URL сайта , выбрать тип мобильного устройства или установить границы окна просмотра.

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

Screenfly
Позволит посмотреть, как примерно выглядит ваш сайт на популярных устройствах.

Resizer
Resizer – это очень удобный букмарклет для тестирования адаптивных шаблонов в считанные клики.

Адаптивные слайдеры

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

Elastislide
Плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.

Самый простой плагин слайдера, который делает его адаптивным внутри одного контейнера.

Как бесплатно протестировать адаптивный дизайн

Дата публикации: 2013-10-14

От автора: «Прекрати менять размер этого браузера, он уже скоро сотрется!» Как часто вы это слышите? Ну, ладно, может и не так уж часто, но если вы разрабатываете адаптивные веб-сайты, то знаете, о чем я говорю: при каждом редактировании DOM или CSS вы таскаете туда-сюда край браузера, тестируя изменения и отыскивая неточности.

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

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

Дома у меня есть два разных лэптопа, два разных устройства Android: Kindle и Nexus 7. Эти устройства я применяю для тестирования своих фрилансерских разработок, но понятно, что это не исчерпывающая подборка. Совсем нет устройств iOS, и хотя я считаюсь ранним последователем, не планирую покупать каждый новый телефон/планшетфон/планшет, как только он появится в продаже.

Так что же делать разработчику? К счастью, растет количество инструментов на базе браузеров, имитирующих размеры экранов множества устройств. Разные инструменты, конечно, идут с разными наборами характеристик и различными уровнями эффективности. Некоторые из них мы тут и рассмотрим.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Для целей тестирования я взял первый по-настоящему адаптивный созданный мною сайт, PajamasOnYourFeet.com. Он основан на шаблоне Brownie HTML5, очень благосклонно и бесплатно предоставленном сообществу разработчиков на EGrappler.

Am I Responsive?

Am I Responsive? – совершенно легкий, мгновенный просмотр вашего сайта с точки зрения того, как он будет отображаться на четырех разных устройствах. Все четыре – с iOS, и разработчик на сайте объясняет свой выбор. Он не предлагает никаких элементов управления и вариантов выбора, только очень простое и элегантное отображение. Размеры окна просмотра:

Десктоп — 1600 x 992px, уменьшающиеся по шкале (0.3181)

Лэптоп — 1280 x 802px, уменьшающиеся по шкале (0.277)

Планшет — 768 x 1024px, уменьшающиеся по шкале (0.219)

Мобильный — 320 x 480px, уменьшающиеся по шкале (0.219)

Цитируя разработчика: «Это не инструмент тестирования, очень важно делать это на настоящих устройствах. Но он является инструментом быстрых скриншотов (для меня) и предоставления визуальной возможности «втолковать» на встречах с клиентами, что вы имели в виду».

Цукерберг рекомендует:  Лента для оформления сайта с использованием только CSS

Два отличных свойства – это возможность перетаскивать «устройства» по экрану куда вам угодно, и способность вставить свой тестовый сайт в ссылку, которой можно поделиться. В Firefox’е, что касается, по крайней мере, структуры тестового сайта, не отображается боковая прокрутка на iPhone’е, но отображается в IE и Chrome.

deviceponsive

deviceponsive аналогичен сайту Am I Responsive? тем, что просто и аккуратно отображает ваш сайт, не имеет элементов управления или доступных опций, когда дело касается устройств. Все они показываются одновременно на одной длинной странице. У него есть интересное свойство – можно модифицировать верхний колонтитул, отредактировав его фоновый цвет и вставив собственный логотип, а затем «запринскринить». Так можно в некотором смысле брендировать свой сайт при показе скриншотов клиенту. Имитируемые на этом сайте устройства и размеры экранов:

Macbook — 1280 x 800

iPad (книжная ориентация) — 768 x 1024

iPad (альбомная ориентация) — 1024 x 768

Kindle (книжная ориентация) — 600 x 1024

Kindle(альбомная ориентация) — 1024 x 600

iPhone (книжная ориентация) — 320 x 480


iPhone (альбомная ориентация) — 480 x 320

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Galaxy (книжная ориентация) — 240 x 320

Galaxy(альбомная ориентация) — 320 x 240

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

responsive test

Как и deviceponsive, responsive test отображает ваш сайт во многих устройствах, но вместо показа их всех сразу на одной странице вы выбираете, какое из устройств смотреть, в простом меню наверху страницы. Проглядывая этот сайт на лэптопе среднего размера, я обнаружил, что отлично работает уменьшение страницы, позволяя вам видеть весь сайт внутри окна тестируемого устройства.

Здесь предлагаются тринадцать разных окон просмотра, от большого монитора настольного компьютера до так называемого «паршивого Android’а» (Crappy Android) (если честно, у них есть и опция с названием «Android получше» (Nicer Android).

И снова Firefox на этом сайте немного спотыкается. Обратите внимание, на скриншоте – между зеленым верхним колонтитулом и областью контента с белым фоном – находится только голубая полоса там, где должен отображаться слайдер изображения.

responsive.is

Он очень похож на два предыдущих, и единственное, что отличает от них responsive.is – это плавная анимация дисплея одного устройства к следующему, а также полупрозрачный оверлей, показывающий «недвижимость» сайта, выпадающую из окна просмотра.

Единственные доступные опции устройства здесь – автоматические, которые заполняют окно вашего браузера, показывая сайт таким, каким вы бы его увидели, если бы перешли на него: Десктоп; Планшет (альбомная ориентация); Планшет (книжная ориентация); Смартфон (альбомная ориентация) и Смартфон (книжная ориентация), размеры в пикселях не даются.

Screenqueries

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

Интересная особенность этого сайта – для нескольких устройств имеется опция «Правильный вид» (“True view”), которая показывает ваш сайт обернутым в предписанный этому устройству браузер chrome. К сожалению, и я к этому уже привык, Firefox’у не удается отобразить слайдер изображения тестового сайта. Не ругайтесь, из браузеров я действительно предпочитаю Firefox, но к счастью, у нас есть опции.

Screenfly

Screenfly реально увеличивает коэффициент юзабилити. Он предлагает девять устройств больше планшетов, от 10-дюймового ноутбука до 24-дюймового десктопа, пять планшетов, девять смартфонов, три телевизионных размера и опцию пользовательского размера экрана. Любую выбранную вами опцию можно вращать в книжной или альбомной ориентации с помощью отдельного элемента управления в меню. Можно выбрать, разрешить прокрутку или нет, и одним щелчком кнопки сгенерировать разделяемую ссылку.

Сайт проактивно полезен тем, каким образом он представляет информацию о пиксельных размерах. Каждое устройство в меню показано с названием и пиксельными размерами, величина вашего собственного окна браузера показана возле верхнего правого угла окна, а размеры выбранной опции – в нижнем колонтитуле под дисплеем вместе с URL’ом тестируемого сайта. Эта маленькая характеристика облегчает документирование скриншотов и шаринг информации с клиентами.

Все вышесказанное уже сделало бы его идеальным инструментом, но разработчики Screenfly нашли возможность сделать его просто высший класс и предоставили свойство прокси-сервера. Цитирую с их сайта: «Screenfly может использовать прокси-сервер для имитации устройств во время просмотра вами своего вебсайта. Прокси-сервер симулирует строку агента пользователя выбранных вами устройств, но не поведение этих устройств». Все прочие раскрытые здесь инструменты имеют дело исключительно с CSS. Screenfly – единственный, который позволяет тестирование на основании строки агента пользователя.

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

Заключение

Итак, вы видите, что для тестирования адаптивных сайтов имеется достаточно ресурсов. Они различаются уникальными свойствами; какие сайты вы примените, будет зависеть от ваших личных предпочтений и требований, и я стараюсь подтолкнуть вас на исследования и эксперименты с ними. Чем больше у нас, разработчиков, будет по-настоящему полезных инструментов, тем лучше.

Автор: Steve Ralston

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

#7 — Проверка адаптивной верстки (тестирование).

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

На уроке будет рассмотрен очень важный мета-тег «viewport», применение которого также необходимо для корректного отображения сайта на различных мобильных устройствах. Кроме того, вы познакомитесь с таким понятием, как breakpoints (переломные/контрольные точки) — изменение условий с одного на другое, при котором внешний вид сайта (раскладка) на разных девайсах меняется. Часто встречается в адаптивной верстке с использованием медиавыражений.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

15 инструментов для тестирования адаптивного дизайна

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


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

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

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

Screenqueri.es – отличный инструмент для тестирования адаптивного дизайна, который позволяет проверить его на 30 разных настройках разрешений устройств или осуществить проверку с помощью настраиваемого разрешения изменением размеров окна.

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

Разработка дизайна для мобильных телефонов и планшетов становится легким занятием. Эмулятор очень прост в установке и позволяет делать серьезные разработки для мобильных устройств с рабочего ПК.

ReView — система динамического просмотра, обеспечивающая эффективный выбор просмотра адаптивного веб-дизайна. Инструмент разработан на JavaScript в соответствии с принципами прогрессивного улучшения. Система обеспечивает первоначальные как «Opt-In», так и «Opt-Out» состояния адаптивного дизайна.

Это визуальный инструмент для создания интерфейса для фреймворка Bootstrap. Он позволяет проектировщикам быстро собирать прототипы в браузере, перетаскивая компоненты пользовательского интерфейса на «холст».

Adobe Edge позволяет просматривать и проверять веб-дизайн на различных устройствах.

The Responsive Calculator помогает веб-дизайнерам конвертировать PSD в проценты во время запуска адаптивного сайта. Все, что вам нужно сделать, это просто вставить несколько спецификаций, и вы сможете превратить пиксели веб-страницы в проценты.

Akamai Mobitest — это бесплатный инструмент, созданный для повышения осведомленности о мобильной производительности сайта. Просто введите URL-адрес, выберите одну из опций устройства/расположения выше и нажмите «Запустить». Ваша страница будет загружена на реальном мобильном устройстве, и вы получите детальную информацию о том, сколько времени потребовалось для загрузки, включая каскадные диаграммы и видеозапись загрузки страницы.

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

Responsinator помогает создателям сайтов быстро получить представление о том, как их адаптивный сайт будет выглядеть на самых популярных устройствах. Responsivator позволяет протестровать веб-приложения для iPhone и iPad, платформ Kindle и Android. Он также показывает сайты как в «портретном», так и «ландшафтном» режиме.

5 отличных сервисов для проверки адаптивного (responsive) дизайна любого сайта

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

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

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

5 сервисов на которых можно проверить сайт на адаптивность.

www.responsivedesigntest.net

Хороший сервис для проверки сайтов. Есть множество разрешений экранов как планшетов так и телефонов.

mattkersley.com

Простой сервис для проверки сайта на адаптивный дизайн от Matt Kersley. Так же доступны все популярные разрешения мобильных девайсов.

screenqueri.es

Очень классный сервис, который проверит любой сайт. Очень понравилось оформление, а так же функциональность.

quirktools.com

Очень красивый и функциональный сервис. Есть возможно даже проверить как будет выглядеть сайт на телевизоре :-)

responsive.is

Ещё один, уже последний в данной подборке сервис с тоже не плохим функционалом.

Инструменты тестирования адаптивной вёрстки

Шесть разрешений для горизонтальной и вертикальной ориентации экрана.

Пять разрешений для вертикальной ориентации экрана. Изображения выровнены по высоте, но можно отобразить их в полный размер.

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

Необходимо перетащить кнопку «RWD Bookmarklet» на панель закладок в браузере. Затем открыть тестируемый сайт и нажать кнопку.

Можно отобразить на экране виртуальную клавиатуру и посмотреть, сколько останется свободного пространства.

Сервис на русском языке. Три разрешения для горизонтальной и вертикальной ориентации экрана.

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