Использование javascript для адаптивного дизайна тесты. Адаптивная верстка с помощью скрипта JavaScript
Сегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 20% посетителей моего блога используют мобильные устройства для просмотра. То есть каждый пятый заходит на мой сайт с телефона или планшета.
Несколько лет назад я даже не думал о таких посетителях, но когда их количество превысило 10% от общего числа я стал использовать адаптивную верстку. Это позволило корректно отображать контент на мобильных устройствах и повысить лояльность к сайту как посетителей, так и поисковых систем.
Мобильная версия сайта и адаптивный дизайн — это не одно и тоже. В данной статье речь пойдет о тестировании адаптивной верстки, когда дизайн сайта, меняется в зависимости от разрешения экрана устройства посетителя.
Чтобы быть уверенным, что ваш сайт правильно отображается на мобильных устройствах необходимо произвести проверку, и для этого существует несколько полезных сервисов и инструментов.
Быстрая проверка адаптивной версткиПопулярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]
Вы должны увидеть примерно следующую картину:
Изменяя разрешение и ориентацию экрана можно проверить как будет отображаться ваш сайт у мобильных посетителей.
Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу ).
После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):
В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:
Как известно у двух мировых поисковых лидеров Google и Яндекс есть свое нескромное мнение как должен выглядеть сайт на экранах мобильных устройств. И если сайт признается неудобным для мобильных посетителей, то он понижается в поисковой выдаче. Таким образом, с точки зрения SEO, если вы не хотите потерять мобильных посетителей, то у вас должен быть не только адаптивный дизайн, но и поисковые системы должны считать его таковым, то есть пригодным для мобильных устройств.
Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .
Вот так выглядит результат проверки моего блога:
С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:
Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.
Google resizerНачну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#
Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!
Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.
После того, как вы убедились, что ваш сайт адаптивный и корректно отображается на экранах большинства устройств, следует проверить скорость его работы. Опять же применительно к мобильным посетителям.
PageSpeed InsightsGoogle как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.
И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/
На мой взгляд в повседневной работе при внесении изменений в дизайн сайта проще использовать встроенные возможности браузеров FireFox и Chrome. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.
Как тестировать адаптивный веб-сайт? Какие проблемы возникают при тестировании веб-сайтов на разных устройствах? Как тестирование веб-сайта на настольном мониторе отличается от тестирования на карманном устройстве, например мобильном телефоне? Какие инструменты мы можем использовать для тестирования адаптивных веб-сайтов? Ответить на Ваши вопросы помогут наши
Что такое адаптивный веб-дизайн?Адаптивный веб-дизайн (RWD) - это определение подхода к веб-дизайну, направленное на создание сайтов с целью обеспечения оптимального восприятия - простого чтения и навигации с минимальным размером, панорамированием и прокруткой на широком спектре устройств (от настольных компьютерных мониторов до мобильные телефоны).
Сайт, созданный с помощью RWD, адаптирует макет к среде просмотра с использованием жидкостных, пропорциональных сеток, гибких изображений и медиа-запросов CSS3, следующими способами:
- Концепция жидкой сетки требует, чтобы размер элемента страницы был в относительных единицах, таких как проценты, а не в абсолютных единицах, такие как пиксели или точки.
- Гибкие изображения также оцениваются в относительных единицах, чтобы предотвратить их отображение за пределами содержащего их элемента.
- Запросы мультимедиа позволяют странице использовать разные правила стиля CSS, основываясь на характеристиках устройства, на котором отображается сайт, чаще всего ширины браузера.
Многие люди в настоящее время используют свои мобильные телефоны или планшеты для доступа к веб-сайтам, поэтому тестирование адаптивного веб-дизайна важно, потому что пользовательский интерфейс на мобильных устройствах сильно отличается от настольных компьютеров.
Возможно, самая сложная часть тестирования веб-сайта, отвечающего требованиям, - это то, что веб-сайт работает так, как ожидается на нескольких устройствах и платформах, но фактическое тестирование на всех мобильных устройствах на рынке для большинства из нас непрактично.
Многие тестировщики, начинающие тестировать адаптивный веб-дизайн, обычно начинают с изменения размера окна браузера, чтобы подогнать размер области просмотра мобильного телефона, планшета и рабочего стола. Этот метод обычно подходит для быстрой визуальной проверки веб-сайта в разных портах просмотра и помогает нам выявлять основные проблемы с отображением, когда мы уменьшаем или увеличиваем окно браузера.
Тем не менее, тестирование на реальных мобильных устройствах - это совершенно другой опыт.
Использование эмуляторов
Мобильный эмулятор - это веб-симуляция того, как веб-сайты и приложения будут отображаться и функционировать в мобильной среде.
Хотя эмуляторы не могут предоставить вам точные средства тестирования, которые вам понадобятся, они по-прежнему являются экономически эффективным решением для проверки функциональности веб-сайта на высоком уровне.
Google DevTools
В DevTools Google Chrome есть функция, называемая режимом устройства, в которую загружены полезные инструменты для тестирования и отладки адаптивных проектов.
В отличие от большинства других адаптивных инструментов тестирования дизайна, которые просто изменяют размер вашего экрана, этот инструмент фактически эмулирует работу мобильного устройства, особенно сенсорные взаимодействия, такие как нажатие и прокрутка, прямо в вашем веб-браузере.
Некоторые общие правила тестирования адаптивного веб-дизайна:
Проверяйте местоположение модулей по мере их сокращения и расширения окна браузера или при повороте мобильного устройства. Различные модули могут исчезнуть при переходе с настольного компьютера на мобильный, но убедитесь, что вы точно знаете, какие модули должны отображаться в каком окне просмотра.
В заключение
Узнайте, как используется ваше веб-приложение. Вы можете получить огромное количество информации из инструмента Google Analytics, чтобы узнать, какие устройства ваши клиенты используют для доступа к вашему веб-сайту. Используйте автоматизированные инструменты и эмуляторы для выполнения основных проверок и высокоуровневого функционального тестирования и сочетания этого с реальным тестированием устройства вручную.
С развитием веб технологий вырастает и требования к веб разработке. Больше всего чувствуют на себя веб разработчики, верстальщики или как их сегодня называют 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") } });
Вот и все. Если возникнуть какие то вопросы пищите в комментариях иди в
Еще никогда не было более важно обеспечить, чтобы ваш проект был готов для каждого типа пользователя и устройства перед его запуском. Хотя это может быть трудно физически, проверить дизайн на каждом устройстве, есть некоторые инструменты и приложения, которые помогут вам имитировать различные адаптивные сценарии.
С таким количеством бесплатных и премиум инструментов нет причин не тестировать адаптивный дизайн перед размещением в Интернете. Просто не забудьте использовать эту информацию для многих необходимых корректировок дизайна! Сегодня мы предлагаем вам набор инструментов для тестирования адаптивного дизайна.
1. Google Mobile-Friendly TestGoogle Mobile-Friendly Test - один из тех инструментов, которые почему-то упускаются из виду. Вам нужно, чтобы дизайн вашего сайта соответствовал стандартам Google, для помощи с видимостью в поиске, и это так просто.
Инструмент легко использовать, просто введите URL-адрес и посмотрите, как оцениваются ваши страницы на мобильных устройствах. Лучшая часть этого инструмента заключается в том, что он определяет, где ваш сайт может «тормозить» или плохо отображаться на мобильных устройствах, чтобы вы могли исправить ошибки.
