Я успешно протестировал адаптивный дизайн своего сайта на iPhone локально , но когда я развертываю его, адаптивный дизайн : работает при изменении размера моего браузера на рабочем столе не…

Я новичок в ios-objective c. я хочу сделать адаптивный дизайн для всех устройств. Теперь дизайн принимает статическую ширину, поэтому дизайн будет влиять на небольшие устройства. Как сделать…

Какова наилучшая практика создания мобильного / планшетного сайта из существующего веб-сайта? Я исследовал адаптивный веб-дизайн, но мне кажется, что мне нужно будет воссоздать сайт с нуля, так как…

В настоящее время я делаю адаптивный дизайн для веб-сайта. Я перепробовал много способов, чтобы сделать его великим. К сожалению, у меня ничего не вышло. Вот мой код html: <div class=custom >…

Я провел много исследований по созданию адаптивного дизайна. Поэтому я наткнулся на эту статью отсюда: Является ли это избыточным при использовании jQuery мобильных и адаптивных макетов /CSS media…

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

Я хотел бы загрузить сайт с адаптивным дизайном в iframe в качестве одной из страниц моего сайта. Однако, когда он загружается в iframe, сайт теряет свою отзывчивость. Используя Mashable.com в…

Я хочу, чтобы мой сайт был отзывчивым, поэтому я использую @media (max-width:1600px){} этот код. Я делаю адаптивный дизайн, начиная с самой маленькой ширины и заканчивая самой высокой шириной….

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

Я хочу создать алфавитную навигацию для пользовательской таксономии в WordPress без влияния на дизайн сайта? если пользователь нажмет на любой алфавит, например A, то он покажет все категории…

Режим адаптивного дизайна — Инструменты разработчика Firefox

Адаптивные дизайны (en-US)(Responsive designs)  адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт лёгкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.

Скриншот ниже показывает страницу мобильной версии Википедии, отображаемой при размере области контента 320 на 480.

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

Конечно, можно просто изменить размер окна браузера: но этим вы уменьшите и все остальные вкладки, что может очень затруднить использование браузера.

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

Есть три способа включения режима адаптивного дизайна:

и три способа выключить режим адаптивного дизайна:

• снова выбрать пункт меню «Режим адаптивного дизайна» или «Адаптивный дизайн»;
• кликнуть кнопку «Выйти» («закрыть») в верхнем левом углу окна режима;
• Нажать Ctrl + Shift + M, (or Cmd + Opt + M on OS X). До Firefox 34, Escape тоже закрывала Режим адаптивного дизайна.

Изменить размер области содержимого можно двумя способами:

При использовании перетаскивания можно удерживать клавишу Control (command на Max OS X), чтобы изменение шло медленнее. Это помогает установить размер точнее.

Элементы управления режимом

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

Предпосылки

Запрос на адаптивный дизайн не возник на пустом месте. Сначала Google – фаворит мирового поиска – в 2015 году объявил об изменениях в ранжировании по запросу мобильных устройств. Выдача отдавала приоритет сайтам, отвечающим техническим требованиям для комфортного просмотра на смартфонах (размер, разрешение, расположение контента). Спустя полгода по стопам заокеанского коллеги последовал и Яндекс. С этого момента у владельцев веб-страниц не осталось иного выхода, кроме как подчиниться требованию двух основных арбитров Рунета. В противном случае трафик мобильных устройств и его активная аудитория – самый быстрорастущий сегмент в глобальной сети – становился недоступен.

Решаемые задачи

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

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

Технические подробности

Бесполезно в короткой статье обращаться к нюансам кодировки веб-страниц – это дело профессиональных разработчиков, владеющих палитрой инструментов HTML/PHP/CSS плюс JS со всеми библиотеками. А вот разобраться в составляющих стратегии отзывчивого дизайна лишним не будет.

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

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

Адаптивный дизайн | maximsoldatkin.com

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

Адаптивный дизайн: как сделать?

Как на самом деле быть с адаптивностью? Стоит сказать, откуда взялась адаптивность.

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

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

Рис.1 Адаптация под различные размеры экрана (Agima – bfm.ru)

В данном примере (рис.1) мы видим сайт сделанный под  laptop, размер экрана 1024, потом айпай 768, под мобильный телефон, вайфон в горизонтальном отображении 480 и вертикальная развертка.

И вообще, суть адаптивного веб-дизайна сайта – соответствующий дизайн под каждую фазу. Адаптивность это определенные фазы, определенный размер экранов.

На проектирование дизайна влияет:

Кстати, рекомендую посмотреть прямо сейчас:

1. Количество фаз. Количество размеров экрана в адаптивном дизайне, которые вы задаете.
2. Переход между фазами.

Вообще фазы и переходы.

Рис.2 Фазы и переходы

Если мы в первом примере (рис.2), то видим резиновый сайт, который изменяется при изменении размера сайта.

Если мы смотрим на правый пример, то здесь есть просто три фазы и размер сайта фиксированный. Вот раз фаза, вторая и третья. Третья, более менее, двигается, но все равно. То есть третья получается здесь резиновая.

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

Адаптивный веб-дизайн: переменные

1. Размер картинок
2. Размер шрифта
3. Количество контента, которым мы располагаем на экране.

Посмотрим на пример Boston (рис.3), здесь все эти переменные используются. Во-первых, размер картинок. Явно видим, что они увеличиваются, размер шрифта также меняется.

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

Рис.3 Размер картинок и шрифта, количество контента

Рис. 4 Размер картинок и шрифта, количество контента

Дальше, еще один пример (рис.4). Здесь мы видим, что явно меняется размер картинки. Здесь нет шрифта, но есть блоки. Размер шрифта изменился, и блоки поменяли свое место, и также меняется количество контента. То есть, блоки адаптируются под размер страницы.

Для правильного дизайна адаптивного сайта необходимо делать как минимум две адаптации на фазу: максимум и минимум.

Рис.5 Две адаптации на фазу: максимум и минимум.

То есть, допустим, в примере мы видим размер максимум, размер минимум. После этого фаза меняется, то есть, допустим, изменилось количество колонок. Также мы смотрим по этой фазе, какой максимальный размер, какой минимальный размер, и настраиваем размеры блоков. Что-то у нас фиксировано. Давайте вернемся на предыдущий слайд (рис.4). Здесь вот эта картинка меняется, то есть она сразу адаптивна (от большого к маленькой). Здесь также может быть промежуточная фаза. Вот этот блок остается фиксированным какое-то время. Потом он резко увеличивается в размерах и снова уменьшается.

Опять же, изменяется количество контента на экране.

Делаем адаптивный дизайн

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

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

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

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

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

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

Интернет за последнее десятилетие изменился. Все больше и больше людей для «входа в сеть» используют не компьютеры с большим экраном, а экраны «поменьше»: планшеты и смартфоны. По последним подсчетам, показатель пользователей интернета с «малоэкранными» гаджетами сравнялся с пользователями компьютеров, и получается, что теперь это соотношение — 50/50. Для сравнения: буквально лет 5 назад пользователей со смартфонами в интернете было около 30%! Вывод простой: если у вашего сайта не будет адаптивного дизайна, то вы потеряете половину потенциальных пользователей.

Адаптивный дизайн сайта

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

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

Почему важно использовать адаптивный дизайн сайта?

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

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

3. Влияние на продвижение. Представители Google на своей конференции заявляли, что сайты, у которых отсутствует «мобильная» версия, будут ранжироваться хуже. Чем меньше у сайта «мобильной дружелюбности», тем «ниже» он в выдаваемом списке. Это один момент. А второй — это повышенный процент отказов. Отказы получаются из-за того, что, зайдя на ваш сайт, пользователь не нашел то, что ему было нужно, или просто увидел, что весь дизайн «с ног на голову»: блоки наезжают друг на друга, появилась горизонтальная прокрутка, а чтобы что-то прочитать — нужно увеличивать текст. У всех поисковых систем работает давно известный алгоритм: чем больше отказов, тем «ниже» сайт в списке, так как он не интересен пользователям. Получается, что отсутствие адаптивности — это «двойной» удар по поисковому продвижению.

4. Повышенная конверсия. Адаптивный дизайн сайта повышает общую конверсию. Особенно это заметно, когда сайт занимается интернет-продажами. И это естественно! Ведь та «половина» пользователей, которая заходит на ваш сайт со смартфона, сможет совершать покупки или нужные вам действия.

Адаптивный дизайн сайта и мобильная версия сайта — это одно и то же?

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

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

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

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

А вообще, создать адаптивный дизайн сайта можно несколькими методами. Тут будет зависеть от того, какими инструментами для разработки сайта пользуетесь вы. Если создаете сайт на каком-либо популярном фреймворке, то каждый из них содержит собственные инструменты и библиотеки для этого. Если используете какую-нибудь популярную CMS и шаблоны, то многие современные шаблоны уже выполнены в адаптивной верстке, и вам остается только наполнить их контентом. Когда сайт создается на HTML и CSS, то тут на помощь приходят возможности «таблицы стилей»:

«Flex» и «grid» позволяют легко манипулировать блоками и макетом сайта, используя CSS. А «медиа-запросы» позволяют подстраивать стили под разные разрешения экранов. То есть в медиа-запросах указывается разрешение экрана, при котором «включаются» описанные под запросом стили. Такой подход позволяет сделать так, что на разных экранах сайт будет смотреться идеально. А можно настолько изменять сайт, что он на различных экранах будет смотреться вообще по-разному — тут уже по вашему усмотрению.

Заключение

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

Адаптивных сайтов: 30 примеров и 5 лучших практик | by Justinmind

Адаптивный веб-дизайн помогает создавать беспроблемный пользовательский интерфейс на всех платформах и устройствах. Вот 5 лучших практик и 30 примеров адаптивных веб-сайтов.

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

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

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

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

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

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

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

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

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

1. Адаптивный и гибкий макеты

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

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

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

2. Используйте по крайней мере три точки останова

Точки останова — это точки в CSS веб-сайта, которые изменяют способ отображения содержимого при различных разрешениях экрана. Обычно они разрабатываются с использованием значений min-width и max-width в адаптивном дизайне, которые относятся к минимальной или максимальной ширине пикселей на экране или для элементов.

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

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

3. Начните с контрольных точек минимальной ширины

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

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

4. Расставьте приоритеты для контента

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

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

5. Относитесь серьезно к кнопкам

Дизайн кнопок имеет первостепенное значение, когда речь идет о гибком дизайне. На рабочем столе легко нажать кнопку, особенно с помощью мыши. А как насчет планшета? Или мобильный телефон? Палец не обладает точностью мыши.

Ссылки и другие интерактивные области также подпадают под это действие. Если область щелчка слишком мала, вы можете расстроить своих пользователей. Средний размер касания пальцем составляет 44 × 44 пикселя, согласно Руководству Apple по работе с людьми. Для удобства использования адаптируйте пользователей, убедившись, что ваши кнопки и интерактивные области хорошо настроены для этого среднего значения.

1. An Event Apart

Конференция по дизайну взаимодействия Event Apart обеспечивает плавный переход от их основного веб-сайта к их мобильному сайту.

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

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

2.New York City Ballet

New York City Ballet использует видео на всех своих платформах, что дает пользователям представление о том, чего ожидать от посещения одного из их шоу.

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

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

3. Paper Tiger

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

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

4. Wired

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

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

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

5. Музей Виктории и Альберта

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

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

Чтобы противостоять дурной славе меню, V&A решили объединить его с четкой копией, чтобы пользователи знали, где они могут найти параметры навигации.

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

6. Popular Science

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

Контент занимает центральное место, как и следовало ожидать. Благодаря адаптивным изображениям и чистой типографике Popular Science успешно создает адаптивный веб-сайт, который легко читать и использовать.

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

7. Swiss Air

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

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

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

8. Spigot Design

Spigot Design предлагает веб-дизайн и разработку с полностью персонализированным сервисом. Его веб-сайт может похвастаться захватывающим видео с героями с модным полупрозрачным цветным слоем поверх.Он работает отлично, независимо от того, на каком устройстве вы его просматриваете.

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

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

9. MGSM

Модный бренд MGSM специализируется на последних тенденциях на своем рынке, но он также является лидером в области веб-дизайна.

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

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

10. Дизайн «Сделано в Германии»

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

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

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

11. Больше опасностей Больше героев

Этот народный дуэт из Нэшвилла выбрал лучший дизайн для своего адаптивного веб-сайта.

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

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

12. Smashing Magazine

Дизайн веб-сайта Smashing Magazine громко кричит красным цветом — это кладезь забавных, интерактивных элементов и контента.

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

Это достигается за счет адекватного использования интервалов и типографики; размер шрифта и положение контента были четко разработаны с учетом размера страницы.

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

13. Flow Festival

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

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

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

14. Magic Leap One

Magic Leap One — это создание дополненной и виртуальной реальности для своих пользователей, и веб-сайт демонстрирует это. И он делает это на удивление хорошо благодаря уникальному интерактивному интерфейсу, который поддерживается на всех платформах.

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

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

15. Dropbox

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

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

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

16. GitHub

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

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

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

17. Shopify

В строке меню Shopify мы видим две группы опций. Они группируют пункты главного меню слева, которые вращаются вокруг основных операций и навигации Shopify.Справа находится другая группа, которая меньше связана с навигацией и функциями на сайте, такими как вход в систему, регистрация и изучение цен и CTA для запуска бесплатной пробной версии.

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

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

18. Dribbble

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

Однако закрепление гамбургера слева от экрана имеет смысл в случае с Dribbble. Учтите, что большинство пользователей, попадая на Dribbble, стремятся искать определенные категории дизайна. Теперь имеет смысл зарезервировать правую часть для полосы фильтров!

19. Slack

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

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

20. CSS Tricks

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

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

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

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

21. Deux Huit Huit

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

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

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

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

22. Rally Interactive

Rally Interactive — это пример адаптивного веб-сайта, который пытается предоставить пользователю максимально удобное взаимодействие между мобильной и настольной версиями своего веб-сайта. Гамбургер-меню в настольной версии точно такое же, как и в мобильной. Изображения одинаковы, и практически весь контент, включая кнопку «Вернуться вверх», одинаков.Единственное, что изменилось в мобильной версии, — это сдвиг текста из двух столбцов в один столбец.

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

23. Агентство цифрового маркетинга и рекламы VML

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

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

24. Forefathers Group

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

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

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

25. Наоми Аткинсон

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

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

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

26. 1987 Masters

1987 Masters — компания по организации мероприятий, базирующаяся в Лос-Анджелесе. Несмотря на то, что в их доменном имени указано «1987» (1987 мастеров или 1987 год?), Их веб-сайт, кажется, построен в стиле, более близком к дизайну 70-х годов, с триповой областью, которая следует за курсором по экрану.Этот курсор немного отвлекает и в лучшие времена немного тошнит.

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

27. BeDance School

BeDance School — это адаптивный шаблон веб-сайта от Muffin Group.Он красочный, привлекательный и отвечает большинству требований, когда дело доходит до увлекательного дизайна пользовательского интерфейса. И он также в основном отзывчивый: каждый элемент, изображение и текстовый абзац красиво масштабируются в соответствии с его местом в заранее определенной иерархии контента.

Однако есть одна проблема: кнопки с призывом к действию для «О нас» и «Наше предложение» не меняют размер должным образом при уменьшении до экрана мобильного телефона или планшета. Помните, что средний размах кончиков пальцев составляет около 44 × 44 пикселей! Но дело не только в том, что эти кнопки трудно нажимать в мобильной версии, но и призывы к действию практически невозможно прочитать!

28.Starbucks

Starbucks — отличный пример адаптивного веб-сайта — простой, привлекательный адаптивный дизайн, сделанный правильно. Здесь нет причудливого параллакса, но он одинаково хорошо справляется со статичными, но красочными изображениями их сезонной линейки продуктов. Одна из дилемм, с которой они могли столкнуться, заключается в том, что их продуктовое «меню», которое также является опцией меню, объединяется в гамбургер-меню при уменьшении масштаба дизайна.

Почему это может быть проблемой? Ты угадал! Потому что многие пользователи не ожидают увидеть опцию «Меню», когда открывают гамбургер-меню.Однако Starbucks, очевидно, достаточно хорошо знала своих пользователей, чтобы понять, что они «поймут», что в данном случае они явно говорят о меню продукта, а не о меню веб-сайта!

Еще один заслуживающий внимания аспект — их подход к иерархии контента при уменьшении масштаба контента для меньших разрешений. Например, абзац с описанием карты Rewards Visa Card отображается слева от изображения карты в настольной версии. Обычно, когда два столбца уменьшаются в масштабе, содержимое справа имеет тенденцию опускаться ниже, чем слева.Однако в этом случае изображение смещается вверх над описанием. Эта установка позволяет им показывать карточку перед текстом.

29. Paravel

Вы будете потрясены этим. Трент Уолтон, искусный дизайнер и программист, фактически создал веб-сайт, макет которого практически не меняется. Единственные видимые различия — сдвиги от нескольких столбцов к одному на страницах информации и поиска.

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

30. Гостиницы Scott Resort

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

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

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

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

Первоначально опубликовано по адресу https://www.justinmind.com 24 сентября 2020 г.

Адаптивный веб-дизайн | Центр поиска | Разработчики Google

Адаптивный веб-дизайн — это установка, при которой сервер всегда отправляет одно и то же HTML-код для всех устройств и CSS используется для изменения отображения страницы на Устройство.Алгоритмы Google должны иметь возможность автоматически определять эту настройку, если все Пользовательские агенты робота Googlebot могут сканировать страницу и ее ресурсы (CSS, JavaScript и изображения).

TL; DR

• Используйте метатег name = "viewport" , ​​чтобы указать браузеру, как настроить контент.
• Дополнительную документацию см. В разделе «Основы Интернета».

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

Тег meta viewport дает браузеру инструкции о том, как отрегулируйте размеры и масштаб страницы по ширине устройства. Когда отсутствует элемент meta viewport, мобильные браузеры по умолчанию отображают страницы при ширине экрана рабочего стола (обычно около 980 пикселей, хотя это зависит от устройств). Затем мобильные браузеры пытаются улучшить внешний вид контента, увеличивая размеры шрифта и либо масштабирование содержимого по размеру экрана, либо отображение только часть контента, которая умещается на экране.

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

Для адаптивных изображений добавьте элемент .

Как правило, если ваш сайт работает в недавнем браузере, таком как Google Chrome или Apple Mobile Safari, это будет работать с нашими алгоритмами.

Почему адаптивный дизайн

Мы рекомендуем использовать адаптивный веб-дизайн, потому что это:

• Облегчает пользователям делиться вашим контентом и ссылаться на него с помощью одного URL.
• Помогает алгоритмам Google точно назначать странице свойства индексации. вместо того, чтобы сигнализировать о существовании соответствующих страниц для настольных / мобильных устройств.
• Требуется меньше времени на разработку для поддержки нескольких страниц с одним и тем же содержимым.
• Снижает вероятность распространенных ошибок, влияющих на мобильные сайты.
• Не требует перенаправления для пользователей, чтобы получить оптимизированное для устройства представление, которое сокращает время загрузки. Кроме того, перенаправление на основе пользовательского агента подвержено ошибкам и может ухудшить пользовательский интерфейс вашего сайта (см. Подводные камни при обнаружении пользовательских агентов подробнее).
• Сохраняет ресурсы, когда робот Googlebot сканирует ваш сайт. Для адаптивного веб-дизайна страниц, одному пользовательскому агенту робота Googlebot необходимо просканировать вашу страницу только один раз, вместо того, чтобы сканировать несколько раз разными пользовательскими агентами Googlebot, чтобы получить все версии содержимого. Это повышение эффективности сканирования может косвенно помочь Google проиндексировать больше контента вашего сайта и сохранить его соответственно свежий.

Если вас интересует адаптивный веб-дизайн, начните с нашего сообщения в блоге в блоге Центра поиска Google и посетите сайт Основы веб-поиска.

JavaScript

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

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

Общие конфигурации

Три популярные реализации JavaScript для сайтов, оптимизированных для мобильных устройств:

• JavaScript-адаптивный : в этой конфигурации все устройства обслуживаются тот же контент HTML, CSS и JavaScript.Когда JavaScript выполняется на изменяется устройство, отображение или поведение сайта. Если веб-сайт требует JavaScript, это рекомендуемая конфигурация Google .
• Комбинированное обнаружение : В этой реализации веб-сайт использует оба JavaScript и серверное определение возможностей устройства для обслуживания разный контент на разные устройства.
• Динамически обслуживаемый JavaScript : в этой конфигурации все устройства обслуживает тот же HTML, но JavaScript обслуживается с URL-адреса, динамически обслуживает различный код JavaScript в зависимости от устройства пользовательский агент.

Давайте подробно рассмотрим каждую из этих конфигураций.

JavaScript-адаптивный

В этой конфигурации URL-адрес обслуживает то же содержимое (HTML, CSS, JavaScript, изображение) на все устройства. Только когда на устройстве выполняется JavaScript, изменение рендеринга или поведения сайта. Это похоже на то, как отзывчивый веб дизайн, используя медиа-запросы CSS, работает.

В качестве примера, страница обслуживает все устройства с использованием одного и того же HTML-кода, который включает