С развитием веб технологий вырастает и требования к веб разработке. Больше всего чувствуют на себя веб разработчики, верстальщики или как их сегодня называют frontend — разработчиками.

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

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

Давайте для начала чтоб вам было понятно и так сказать поставить все точки над и рассмотрим какие бывают виды верстки.

Существует 4 вида верстки:

Рассмотрим все виды по подробнее.

1. Фиксированная верстка

Блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

#temnyi, #svetlyi { width: 440px; }

2. Резиновая вёрстка

Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

#temnyi, #svetlyi { width: 50%; }

3. Адаптивная вёрстка

Воплощается с помощью @media или благодаря скриптам. Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для

#temnyi, #svetlyi { width: 430px; } @media (max-width: 1220px) { #temnyi, #svetlyi { width: 380px; } } @media (max-width: 1120px) { #temnyi, #svetlyi { width: 325px; } } @media (max-width: 680px) { #temnyi, #svetlyi { width: 200px; } }

4. Отзывчивая вёрстка

Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству.

#temnyi, #svetlyi { width: 50%; } @media (max-width: 1006px) { #temnyi, #svetlyi { width: 100%; } }

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

Скрипт адаптивной верстки:

/*Создадим переменную в которую можно загнать моножесто классов, для удобного использования их в коде. Т.е здесь он их обнаруживает один раз и все, а не перед каждой выборкой! это полезная фитча*/ var my = { window: $(window) }; /*Собственно и сама функция*/ $(window).resize(function () { /*Переменная которая определяет ширину окна и загоняет ее в переменную width*/ var width = my.window.width(); /*условие трансформации окна т.е услокие которое выоплнился когда ширина окна достигнет определенных размеров*/ if(my.window.width() < 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });

Вот и все. Если возникнуть какие то вопросы пищите в комментариях иди в

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инструмент для тестирования адаптивных сайтов от компании Adobe. Для его использования требуется установить себе на компьютер.
Программа позволяет синхронизировать ваши устройства по WIFI и просматривать сайт так, как он будет отображаться на вашем девайсе. На данный момент поддерживаются устройства с такими ОС: iOS, Android, Kindle Fire.

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

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

Сайт, созданный с помощью RWD, адаптирует макет к среде просмотра с использованием жидкостных, пропорциональных сеток, гибких изображений и медиа-запросов CSS3, следующими способами:

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

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

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

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

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

Использование эмуляторов

Мобильный эмулятор - это веб-симуляция того, как веб-сайты и приложения будут отображаться и функционировать в мобильной среде.

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

В DevTools Google Chrome есть функция, называемая режимом устройства, в которую загружены полезные инструменты для тестирования и отладки адаптивных проектов.

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

Некоторые общие правила тестирования адаптивного веб-дизайна:

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

В заключение

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

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

С таким количеством бесплатных и премиум инструментов нет причин не тестировать адаптивный дизайн перед размещением в Интернете. Просто не забудьте использовать эту информацию для многих необходимых корректировок дизайна! Сегодня мы предлагаем вам набор инструментов для тестирования адаптивного дизайна.

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

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