Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Что такое адаптивный веб-дизайн?

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

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

Длительные этапы дизайна, разработки и тестирования

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

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

Рекомендации по мобильному веб-дизайну

1.Поймите пути перемещения пользователей

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

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

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

2. Откажитесь от навигации

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

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

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

Ниже приведен пример гамбургер-меню, расположенного в правом верхнем углу сайта.

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

Итак, что важно сохранить?

3. Ограничьте количество вариантов

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

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

Ниже продемонстрирован хороший пример того, как Shopify ограничивает варианты на своей домашней странице.

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

4. Упростите все

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

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

5. Изображения и видео

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

Ниже приведен пример контекстно-релевантного изображения.

Еще один важный момент — это размеры изображений. Неоптимизированные изображения могут замедлить работу сайта и повлиять на общее впечатление пользователя.

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

6. Размещение

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

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

7. Ссылка на контактную информацию

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

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

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

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

Бюджет на разработку мобильного приложения

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

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

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

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

Также необходимо учесть интеграцию. Мобильные приложения, сайт по сути по API будут общаться к единому источнику данных (некий сервис, который работает с базой данных), что также усложняет разработку. Дизайн для разных платформ может отличаться (если соблюдать требования и подходы к дизайну, которые выработаны в рамках этих платформ). Это также увеличивает бюджет на создание и реализацию этих дизайнов.

Мобильная версия сайта и адаптивный веб-дизайн: большая разница

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

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

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

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

Использование метатега viewport

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

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

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

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

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

Как правило, если веб-ресурс нормально отображается в новых браузерах (например, Google Chrome или Apple Mobile Safari), то наши системы корректно обработают его.

Путь вперёд.

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

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

Автор  оригинальной статьи – Ethan Marcotte

Переведено с разрешений A List Apart Magazine и автора.

Отзывчивая типографика

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

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

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

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

Примечание: смотрите этот пример в действии: пример, исходный код.

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

An interesting approach is to use the viewport unit to enable responsive typography. is equal to one percent of the viewport width, meaning that if you set your font size using , it will always relate to the size of the viewport.

The problem with doing the above is that the user loses the ability to zoom any text set using the unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

There is a solution, and it involves using . If you add the unit to a value set using a fixed size such as s or s then the text will still be zoomable. Essentially, the unit adds on top of that zoomed value:

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

See an example of this in action: example, source code.

Темная тема

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

platformBrightness доступна из MediaQuery.

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  return Image.asset(
    mediaQuery.platformBrightness == Brightness.dark
        ? 'assets/background_dark.png'
        : 'assets/background_light.png',
  );
}

Если вы используете MaterialApp, вы также можете задать lightTheme и darkTheme чтобы автоматически подстроить цветовые схемы для встроенных компонентов.

Рекомендации по веб-типографике — мобильный дизайн

Если вы создаёте макет веб-сайта или приложения, которым можно будет пользоваться с телефона, зарубите себе на носу раз и навсегда:

Размер шрифта в инпутах не менее 16px. Если шрифт будет меньше, на iOS браузер приблизит строку ввода, сместив её влево и обрезав правую сторону так, что после пользования строкой пользователю придется отдалять уже вручную.

Вот так это выглядит:

За гифку отдельное спасибо шустрому Ste Grainer. Можете ознакомиться с его статьёй по авто-зуму здесь.

Вся остальная информация о размерах шрифта в мобильном вебе в основном сводится к следующему:

Размер шрифта основного текста должен быть около 16px. Цель: чтобы текст на вашем телефоне (при стандартном расстоянии от глаз) читался так же легко, как и на странице хорошо отпечатанной книги (при стандартном — обычно чуть большем — расстоянии от глаз).
Для второстепенного текста, подписей для полей и картинок используйте размер на пару значений меньше: например, 13px или 14px. Уменьшать размер только на одну единицу я не рекомендую — в таком случае его будет легко спутать с обычным текстом. Менее важный текст должен быть оформлен соответственно, чтобы намеренно подчеркнуть его меньшую значимость.

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

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

Размеры шрифтов, отступы — всё слетало к чертям. Поэтому используйте Sketch Mirror, Figma Mirror или что вам там больше нравится, только проверяйте свой дизайн на самих девайсах.
По всем остальным вопросам касаемо размеров шрифтов в вебе, идите читать гайдлайны материального дизайна — это понятный, хорошо структурированный, метко написанный (и вполне содержательный) материал. Чем больше я расту как дизайнер, тем больше убеждаюсь в следующем: хоть у Apple и есть максимальный авторитет с точки зрения дизайна, сегодня Google благополучно вытирает об него ноги. Только не говорите дизайнерам-снобам, что я так сказал.

Технология даптивного дизайна

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

Не знакомы с термином? Не волнуйтесь, вы узнаете все об этом сейчас.

Что такое медиа-запросы?

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

Если вы когда-либо просматривали файл style.css современной темы WordPress, вы, возможно, уже видели медиа-запрос:

PHP

@media только экран и (максимальная ширина: 500 пикселей) {

/ * пользовательский CSS идет сюда * /

}

1 2 3 4 5

@mediaтолькоэкрани(максимальнаяширина500пикселей){ *пользовательскийCSSидетсюда*   }

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

Это называется точкой останова. Что именно является точкой останова? Я рад, что ты спросил.

Точки переключения дизайна

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

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

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

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

Сравнение адаптивного сайта с PWA и Android/IOS приложения

Сравнивать мы будем полностью адаптивное мобильное приложение на технологии PWA с нативными мобильными приложениями для IOS, Android.

Рассмотрим в чем принципиальная разница этих двух подходов.

Нативные мобильные приложения (далее — НМП) создаются под платформу. Они устанавливаются как полнофункциональные приложения в операционной системе смартфона или приложения. Под каждую платформу делается свое отдельное приложение. Приложение проходит модерацию в PlayMarket или App Store для возможности размещаться в общем каталоге приложений платформы.

Пример PWA в виде анимации — https://giphy.com/gifs/pwa-l0HlBBzZ7eAV0h06Q

Советы для улучшения адаптивности

Закончим эту статью некоторыми пунктами, которые помогут вам сделать ваше приложение максимально адаптивным.

1. Предвидеть адаптивность

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

2. Избегайте констант

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

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

@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.only(
      top: 20,
      bottom: 10,
    ),
    child: Text(
      "Hello",
      style: TextStyle(
        fontSize: 10,
      ),
    ),
  );
}

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

class AdaptativeTheme {
  final double bigSpace;
  final double smallSpace;
  final double smallFontSize;
  const AdaptativeTheme({
    required this.bigSpace,
    required this.smallSpace,
    required this.smallFontSize,
  });
}

@override
Widget build(BuildContext context) {
  final theme = Provider.of(context);
  return Padding(
    padding: EdgeInsets.only(
      top: theme.bigSpace,
      bottom: theme.smallSpace,
    ),
    child: Text(
      localization.hello,
      style: TextStyle(
        fontSize: theme.smallFontSize,
      ),
    ),
  );
}

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

@override
Widget build(BuildContext context) {
  final isSmall = MediaQuery.of(context).size.width 

может помочь вам лучше понять этот подход.

3. Максимально разделите ваши виджеты

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

4. Попробуйте DevicePreview!

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

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

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

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

Как проверить мобилопригодность: бесплатные инструменты

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

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

Фрагмент результатов проверки

Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

Проверка в SERP

Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

Фрагмент результатов проверки

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

Фрагмент результатов проверки

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

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

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

Инструментарий Bootstrap

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

Эта платформа — своеобразный скелет для адаптивных веб-сайтов. Нужно просто поэтапно сформировать структуру HTML и правильно классифицировать созданные объекты. Далее фронтенд отобразит готовые блоки с оформлением.

Startup

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

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

За удобства, дающие Startup, нужно будет заплатить. Самый простой тариф будет стоить $249 в год. Если оплачивать годовую подписку сразу, то можно сэкономить $99.

Сервис Responsinator

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

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

Инструмент Caniuse

Еще один сервис, позволяющий свести к минимуму ошибки при адаптивной верстке. В Caniuse можно найти информацию о способности браузера поддерживать те или иные свойства сайта: например, CSS свойство sticky или формат шрифта ttf.

Caniuse идеально подойдет тем, кто доводит до совершенства адаптивную верстку и кроссбраузерность.

Гибкие медиа

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

Одним из быстрых способов сделать медиа масштабируемым является использование свойства max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой носитель будет уменьшаться в соответствии с шириной своих контейнеров.

See the Pen by Shay Howe () on .dark

Гибкие Embedded медиа

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

Чтобы встроенный носитель был полностью адаптивным, встроенный элемент должен быть абсолютно расположен внутри родительского элемента. Родительский элемент должен иметь ширину 100%, чтобы он мог масштабироваться в зависимости от ширины области просмотра. Родительский элемент также должен иметь высоту 0, чтобы запустить механизм в Internet Explorer.

Затем отступ задается в нижней части родительского элемента, значение которого устанавливается в том же соотношении сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните формулу адаптивного дизайна из ранее? Если видео имеет соотношение сторон 16: 9, то 9, деленное на 16, равно .5625, что требует заполнения снизу 56,25%. Обивка снизу, а не сверху специально используется, чтобы предотвратить разрыв Internet Explorer 5.5 и рассматривать родительский элемент как абсолютно позиционированный элемент.

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

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