Що таке чуйний веб-дизайн

• Може 9, 2024

Існує три основні особливості чуйного веб-дизайну - це просторі верстки, зміни розмірів зображень та медіа-запити. Медіа-запити насправді не так вже й новинки для веб-дизайну. Починаючи з типів медіа у CSS2.1, ми могли б розробляти таблиці стилів як для веб, так і для друку, дещо гарантуючи, що веб-сторінка виглядатиме однаково на екрані та під час друку. Це перейшло до медіа-запитів у CSS3. Цей запит перевіряє ширину медіа-пристрою (максимальна ширина пристрою) і перевіряє його на встановлене значення, наприклад 480px або 768px. У відповідь на цей запит ми використовуємо стилі CSS для зміни компонування рідини та розміру зображень для екрана.

Ви можете легко перевірити, чи веб-сайт має чуйний дизайн. Почніть з браузера на повній ширині екрана комп'ютера. Потім перетягніть правий край браузера вліво, щоб зменшити ширину вікна браузера. Ви маєте бачити, що зображення стають меншими, а макет прийме плаваючі диви, які знаходяться поруч, і складе їх вертикально. Наприклад, якщо у нас на сторінці галереї на повноекранному екрані є шість зображень (шість дівок) у рядку, оскільки ми зменшуємо ширину екрана, кількість зображень підряд поступово зменшується та укладається у міру необхідності. Коли ширина зменшиться до певної кількості, самі зображення почнуть змінювати розмір менше. Якщо уважно спостерігати, ви також побачите, що певні елементи дизайну, такі як навігаційні посилання, можуть бути зведені до значка або навіть зникнути. Це також контролюється таблицею стилів CSS.

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

Відео Інструкція: Урок 1. Веб-дизайн та веб-розробка - Вступ (Українською) (Може 2024).