Адаптивний веб-дизайн - як зробити веб-сайт добре виглядати на телефонах і планшетах

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

Не так давно термін "адаптивний веб-дизайн" не існував. Але сьогодні більшості з нас довелося певною мірою це прийняти.

За даними Statistica, станом на 2019 рік 61% усіх пошукових відвідувань Google відбувається на мобільному пристрої. У вересні 2020 року Google змінить свій алгоритм пошуку, щоб визначити пріоритетні мобільні веб-сайти.

У цьому дописі я розгляну наступне:

  • Що таке адаптивний веб-дизайн?
  • Мета-тег області перегляду та те, що він робить
  • Ефективні методи, що використовуються в адаптивному веб-дизайні для розміщення мобільних і планшетних пристроїв
  • Інструменти, які допомагають імітувати та контролювати досвід користування мобільними пристроями та планшетами

Що таке адаптивний веб-дизайн? (RWD)

Адаптивний веб-дизайн - це підхід, який фокусується на середовищі користувача веб-сайту. Середовище користувача буде залежати від того, який пристрій він підключив до Інтернету.

Існує безліч характеристик пристроїв, що забезпечують можливості фокусування на користувача. Деякі з них включають:

  • підключення до мережі
  • розмір екрану
  • тип взаємодії (сенсорні екрани, доріжки)
  • графічна роздільна здатність.

До того, як адаптивний веб-дизайн став популярним, багато компаній керували абсолютно окремим веб-сайтом, який отримував переадресований трафік на основі агента користувача.

Але при адаптивному веб-дизайні сервер завжди надсилає однаковий HTML-код на всі пристрої, а CSS використовується для зміни візуалізації сторінки на пристрої.

Незалежно від двох наведених вище стратегій, першим кроком у створенні веб-сайту для телефону або планшета є переконання браузера про намір. Тут починає діяти метатег viewport.

Метатег Viewport для ідентифікації мобільного веб-сайту

Мета-тег області перегляду вказує браузеру, як налаштувати сторінку на ширину кожного пристрою.

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

Нижче наведено стандартну реалізацію:

Тепер, коли браузер знає, що відбувається, ми можемо використовувати популярні методи, щоб зробити наш веб-сайт чуйним. ?

CSS-медіа-запити для різних розмірів екрана та орієнтації

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

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

Нижче наведено приклад загальновживаного варіанту мобільного першого стилю, коли стовпець має ширину 100% для менших пристроїв, але у більших вікнах перегляду - 50%.

.column { width: 100%; } @media (min-width: 600px) { .column { width: 50%; } }

Наведений вище код - простий приклад, але те, що він насправді робить, досить цікавий.

  1. При розгляді мобільних спочатку для елемента "column" встановлено ширину 100%;
  2. Використовуючи min-widthмедіа-запит, ми визначаємо правила спеціально для вікон перегляду з мінімальною шириною 600px(області перегляду ширші, ніж 600px). Отже, для областей перегляду, ширших ніж 600px, елемент нашого стовпця матиме ширину, що становить 50% від його батьківського елемента.

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

Що таке Flexbox?

Можливо, вам цікаво - "чим займається Flexbox"? Краще питання - "що не може зробити Flexbox"? Який найпростіший спосіб вертикального центрування за допомогою CSS? Flexbox. Як створити адаптивний макет сітки? Flexbox. Як ми можемо досягти глобального миру? Flexbox.

Модуль Flexbox Layout (Гнучка коробка) забезпечує більш ефективний спосіб розкласти, вирівняти та розподілити простір між елементами в контейнері, навіть коли їх розмір динамічний (звідси слово «flex»).

У наведеному нижче прикладі ми поєднуємо медіа-запити, як описано вище, щоб створити адаптивну сітку.

 main { background: #d9d7d5; display: flex; flex-wrap: wrap; justify-content: space-between; } div { background: #767775; flex-basis: 100%; height: 100px; margin-bottom: 0.5rem; } @media (min-width: 600px) { main { flex-wrap: nowrap; } div { flex-basis: 33%; } } 

За допомогою цього коду ми виконуємо наступне:

  1. Встановіть макет flexbox за допомогою display: flexнашого mainелемента контейнера.
  2. Спочатку стиль для мобільних пристроїв. Ми встановлюємо mainелемент, flex-wrap: wrapякий дозволяє дочірнім елементам переноситися в наш макет flexbox, як показано нижче на малюнку 1. Ми встановлюємо flex-basis: 100%наші divелементи, щоб забезпечити, щоб вони охоплювали 100% батьківської ширини в макеті flexbox (рис. 1).
  3. Стиль для великих пристроїв, таких як планшети та настільні ПК. Ми використовуємо медіа-запит, подібний до нашого прикладу в попередньому розділі, щоб встановити для нашого mainелемента контейнера значення flex-wrap: nowrap. Це гарантує, що дочірні елементи не обертаються і що вони підтримують стовпець у межах типу рядка макета. Встановивши divзначення flex-basis: 33%в медіа-запиті - ми встановлюємо стовпці, ширина батьківського елемента яких становить 33%.
  4. У цьому прикладі магія відображатиметься на більших пристроях із нашими комбінованими медіа-запитами та правилами flexbox. Оскільки ми визначили display: flexта не замінили правило в медіа-запиті, у нас є макет flexbox для мобільних пристроїв, планшетів та робочих столів. Медіа-запит flex-basis: 33%та успадковані display: flexправила дадуть нам впізнаваний макет flexbox, як показано на малюнку 2. Раніше, щоб досягти такого типу макета стовпців, нам потрібно було б зробити серйозні важкі дії та написати клубки CSS.

Flexbox забезпечує чудовий спосіб досягти різноманітних рідинних компонувань. У деяких випадках ми не маємо такої свободи у вертикальному просторі. Можливо, нам знадобиться помістити елемент на фіксовану висоту. У цій ситуації у нас у розпорядженні ще одна техніка - горизонтальна прокрутка.

Горизонтальна прокрутка за допомогою переливної прокрутки

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

Загальне використання цієї техніки включає прокручувані меню та таблиці. Нижче наведено приклад прокручуваного меню.

Адаптивний веб-дизайн RWD Адаптивне меню Приклад переповнення переповнення Це багато вмісту! Так, ми маємо ще один предмет
 menu { background: #d9d7d5; padding: 0.25rem; overflow-y: scroll; white-space: nowrap; } span { background: #767775; color: #ffffff; display: inline-block; margin: 0.25rem; padding: 0.5rem; }   Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item 

Як ти це зробив !? Давайте глибше зануримось.

  • overflow-y: scrollє ключовим інгредієнтом цього рецепту. Вказавши його, дочірні елементи переповнюють горизонтальну вісь поведінкою прокрутки.
  • Не так швидко! Хоча ви можете подумати, що overflow-yцього буде достатньо, ми також маємо сказати браузеру не обгортати дочірні елементи white-space: nowrap?

Now that we have a few RWD layout techniques up our sleeve, let's take a look at elements that pose challenges specific to their visual nature - images and video.

Responsive Images

By using modern image tag attributes we can accommodate a range of devices and resolutions. Below is an example of a responsive image.

 img { max-width: 100%; }     

This is doing a lot of things. Let's break it down:

  1. By setting max-width: 100% the image will scale up or down based on its container width.
  2. By using a combination of picture, source, and img tags we are actually only rendering one image and are only loading the best fitting image based on the user's device.
  3. WebP is a modern image format that provides superior compression for images on the web. By utilizing source we can reference a WebP image to use for browsers that support it, and another source tag to reference a PNG version of the images that don't support WebP.
  4. srcset is used to tell the browser which image to use based on the device's resolution.
  5. We establish native lazy loading by utilizing the loading="lazy" attribute / value pair.

Responsive Video

Responsive video is another subject that has inspired a large number of articles and documentation.

One key strategy to establish responsive images, video, iframes and other elements involves the use of aspect-ratio. The aspect ratio box is not a new technique and quite a useful tool to have up your sleeve as a web developer.

This article provides a solid demonstration about how to achieve "fluid" width videos. Let's take a look at the code and break it down.

 .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  

In this example we have a YouTube video embed as an iframe and a div container with videoWrapper class. This code is doing a lot... let's dig in.

  • position: relative on the container element allows child elements to utilize absolution positioning relative to it.
  • height: 0 combined with padding-bottom: 56.25% is the key ingredient here which establishes a dynamic behavior, enforcing a 16:9 aspect ratio.
  • position: absolute, top: 0 and left: 0 set on the iframe creates a behavior in which the element positions itself absolutely relative to its parent... sticking it to the top left.
  • And finally width and height of 100% makes the child, iframe element 100% of its parent. The parent, .videoWrapper takes full control of establishing this aspect ratio layout.

I know... it's a lot. There's more we can do to make video and images look the best on phones and tablets. I'd encourage research on those topics independently in addition to this.

Okay, now that we're masters of responsive web design, how can we test what we've done? Fortunately, we have a number of tools to simulate and monitor user experience on a variety of devices.

Tools to Simulate and Monitor Responsive Websites

There are a variety of useful tools to help us create websites with responsive web design. Below are a couple that I find especially useful.

Chrome DevTools Mobile Emulation

Chrome's DevTools provides mobile emulation of a range of tablet and mobile devices. It also provides a "responsive" option which allows you to define a custom viewport size.

Monitoring Mobile Website Performance with Foo

Lighthouse is an open-source tool that provides a way of analyzing website performance specific to a device.

Foo uses Lighthouse behind the scenes to monitor website performance and provides feedback for analysis. You can setup monitoring for both desktop and mobile devices to get continuous feedback about how responsive your website is.

For example, a Lighthouse report will callout images that are improperly loaded based on device.

Conclusion

Responsive web design will continue to rapidly evolve, but if we stay on top of current trends we can provide the best experience for our users. I hope these tools and techniques are helpful!

Not only will our website users benefit from a versatile design but also search engines will rank our web pages higher.