Перш ніж ви реалізуєте практично макет, необхідно з'ясувати декілька базових питань. Таким чином, спочатку ви повинні вирішити тип макету. Загалом існує три можливості.
• Фіксований
• Гнучкий
• Еластичний
В CSS існують макети з фіксованими або гнучкими розмірами. У фіксованих макетах зазвичай використовуються виміри в пікселях. Гнучкі макети, натомість, базуються на відсоткових значеннях. Обидва типи макетів мають свої переваги та недоліки.
Фіксовані макети використовуються зазвичай тоді, коли графіка використовується для оформлення макету. (Хоча існують винятки за допомогою CSS-фонової графіки). Якщо в макетах важлива точна позиціювання елементів, зазвичай також використовують фіксоване позиціонування. У цьому типі макету, як правило, розмір макету, принаймні ширина, фіксується певною кількістю пікселів. Ця ширина, як правило, спрямована на певні роздільні здатності екранів.
З іншого боку, гнучкі макети відрізняються. Тут ширина, наприклад, вказується в відсотках. Якщо користувач змінює розмір вікна браузера, розмір макету також змінюється.
У таких макетах, наприклад, ширина вказується в відсотках. Якщо користувач змінює розмір вікна браузера, розмір макету також змінюється.
Завдяки сучасним властивостям CSS, тепер існує ще один тип макету, а саме так зване адаптивне оформлення. Тут макет змінюється таким чином, що, наприклад, на смартфоні він виглядає зовсім по-іншому, ніж на робочому столі. Тут на PSD-Tutorials.de, наприклад, працює з таким макетом. Якщо ви відкриваєте сторінку на робочому столі з «звичайним» розміром вікна браузера, отримуєте наступне зображення.
Якщо ж ви зменшуєте вікно, дійсно відбувається переформатування розміщення елементів на веб-сайті.
Оскільки витрати на створення адаптивного макету високі. Зрештою, необхідно визначити розмір екрану відвідувача і показати йому відповідний макет. І цей підходящий макет насправді потрібно розробляти для різних розмірів екранів. Так от, відвідувач, який відкриває ваш веб-сайт на великому моніторі, наприклад, отримує трьохколоночний макет. А відвідувач, який відкриває ваш веб-сайт на смартфоні, побачить одноколоночний макет.
Переваги та недоліки варіантів
Перш ніж реалізувати макет, вам потрібно вирішити, яку з названих варіантів типів макету ви хочете використовувати. Я хочу коротко показати вам, які переваги та недоліки мають фіксовані макети.
• Шаблони дизайну тут, безперечно, можна реалізувати найлегше.
• Якщо ви орієнтуєтесь на стандартні роздільні здатності, проблеми з відображенням веб-сайту виникають рідко.
• Макети легко можна пояснити. (Ця перевага, очевидно, корисна, коли ви, як веб-розробник, хочете пояснити клієнтові макет).
Але у фіксованих макетів також є недоліки.
• Через фіксовані розміри вони є негнучкими і наприклад не відповідають дуже малим або дуже великим екранам. Часто відбувається втрата багато місця.
• Вони мають обмеження щодо доступності.
Гнучкі макети також мають переваги та недоліки. Спершу до переваг.
• Макети автоматично адаптуються до розміру вікна браузера.
• Відвідувачі можуть мати значний вплив на веб-сайт.
Але й тут є недоліки.
• Вам як розробнику важко контролювати результати. Основні вимоги макету можна реалізувати лише обмежено.
• Контент сторінки потребує складного підгону.
• На великих екранах короткі тексти можуть виглядати «некрасиво», так як вони часто мають лише один рядок. (Тут CSS має відповідні властивості, такі як min-width).
Ще один тип макету представляє середні або еластичні макети. Їх головна ознака - одиниця вимірювання em. (Останнім часом, також все більше починає використовуватися rem. На відміну від em, rem завжди базується на кореневому елементі, а не як em на батьківському елементі).
У цих макетах ширина та висота гнучкі. Дизайн сторінки масштабується пропорційно до розміру вікна браузера. Ця форма оформлення, з одного боку, безумовно, є найскладнішою у практичній реалізації. Це в наслідок того, що перед початком роботи потрібно дуже точно знати, як елементи будуть поводитися при зміні розміру вікна браузера. Еластичні макети використовуються переважно для веб-сайтів, де пропонується багато фотографій та відео.
Переваги еластичних макетів:
• Доступний простір використовується оптимально.
• Вмісти відображаються пропорційно найбільш максимально.
Але звичайно, еластичні макети також мають свої недоліки.
• Дизайн цих макетів є дуже складним.
• І реалізація виявляється все інше, як простою.
Вибір
Тож вам треба вирішити, яку з названих варіантів ви вирішите використати. Якщо ви тільки почали розробку HTML/CSS, я б порадив вам спочатку скористатися фіксованим макетом. Ті, хто вже мають високий рівень знань у сфері веб-розробки, повинні працювати із адаптивними макетами. Тут ви будете на правильному шляху, незалежно від того, з якого кінцевого пристрою буде відкриватися ваш веб-сайт.
