5 потужних технік адаптивного веб-дизайну

13

Від автора: При збільшенні кількості пристроїв, які застосовуються для доступу до інтернету (комп’ютери, планшети, смартфони…), вам доводиться гарантувати, що ваш веб-сайт буде виглядати добре в кожному з можливих пристроїв. У цій статті я зібрав п’ять технік, суперкорисний для відмінного, більш адаптивного сайту або веб-додатки.

Адаптивні зображення

Гнучкі зображення – головне питання адаптивного дизайну. На щастя, досить просто можна зробити свої зображення «гибими». Нижченаведений код CSS гарантує, що зображення будуть максимально великими. Наприклад, якщо зображення показується всередині контейнера шириною в 600px, зображення 600px. Змініть контейнер до 350px, і зображення автоматично зменшиться до максимально доступною ширини, в даному випадку – 350 пікселів.

img {
max-width: 100%;
}

Адаптивне відео HTML5

Раз специфікація HTML5 дозволяє легко вставляти на свої сторінки відеоролики, то чому б цим не користуватися? Зробити адаптивне відео HTML5 точно так же легко: просто додайте в свій файл css наступний код і на цьому все!

video {
max-width: 100%;
height: auto;
}

Адаптивне відео YouTube

Як я вам тільки що показав, немає нічого складного в тому, щоб зробити зображення або відео html5 адаптивними. А як щодо відео з популярних сайтів? У самому справі, YouTube – самий знаменитий відео-хостинг, так що великі шанси на те, що вам колись доведеться працювати в відеороликами YouTube. Спочатку розглянемо цей код HTML:

Потім додамо в файл CSS наступне:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Ну ось, тепер ваші відеоролики YouTube адаптивні! Цей код також відмінно працює з відеороликами Vimeo, що видно з прикладу нижче:

Адаптивне навігаційне меню

Для відвідувача навігаційні меню – найпростіший спосіб швидко знайти те, що їм потрібно на вашому сайті. Але при перегляді веб-сайту на мобільному пристрої навігаційні меню часто погано читаються або ними дуже складно користуватися. По суті, для маленьких дисплеїв набагато зручніше застосовувати випадають меню select замість традиційних горизонтальних.

Ось проста методика, яку можна встановити на будь-якому сайті. Почнемо з HTML – створимо два меню: стандартне ul для звичайних дисплеїв і випадає select для мобільних пристроїв:

  • Home
  • Books
  • Blog
  • About Us
  • Support

Select
Home
Books
Blog
About Us
Support

А ось CSS. Тут нічого складного: ми за замовчуванням приховуємо select, а показуємо його, тільки якщо ширина документа менше 960px.

nav select {
display: none;
}
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}

Адаптивні таблиці даних

Таблиці та адаптивний дизайн зазвичай не дуже ладять між собою. Але от дійсно корисна техніка, створена вам в допомогу розробником Крісом Койером (Chris Coyier) для адаптивних таблиць. Давайте почнемо з створення звичайної таблиці. Ось HTML…

First Name Last Name Job Title
James Matman Chief Sandwich Eater
The Tick Crimefighter Sorta

І CSS:

/*
Звичайні стилі для десктопів/лептопів
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Чорно-білі смужки */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}

У нас вийшла таблиця з звичайними стилями, тепер зробимо її адаптивної. Ми збираємося зробити ніщо інше, як змусити її вести себе не як таблиця, встановивши кожен пов’язаний з таблицею елемент на block. Потім збережемо її вихідні чорно-білі смуги, при цьому кожна рядок стає сама по собі таблицею, але шириною як екран. Не потрібно горизонтальної прокрутки! Потім для кожної «клітинки» ми застосуємо згенерований CSS контент (:before) для прикріплення мітки, щоб знати, що означає кожен фрагмент даних.

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Примусьте таблицю більше не вести себе як таблиця */
table, thead, tbody, th, td, tr {
display: block;
}
/* Приховайте заголовки таблиці (але в цілях доступності не з display: none;) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Поведінка як у «рядка */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Тепер як у заголовку таблиці */
position: absolute;
/* Значення top/left імітують відступ */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Позначте дані
*/
td:nth-of-type(1):before { content: «First Name»; }
td:nth-of-type(2):before { content: «Last Name»; }
td:nth-of-type(3):before { content: «Job Title»; }
td:nth-of-type(4):before { content: «Favorite Color»; }
td:nth-of-type(5):before { content: «Wars of Trek?»; }
td:nth-of-type(6):before { content: «Porn Name»; }
td:nth-of-type(7):before { content: «Date of Birth»; }
td:nth-of-type(8):before { content: «Dream Vacation City»; }
td:nth-of-type(9):before { content: «GPA»; }
td:nth-of-type(10):before { content: «Arbitrary Data»; }
}