CSS макети фіксовані, гумові, еластичні, HTML

Який макет верстки (з використанням Каскадних Таблиць Стилів, CSS) можна вважати найкращим? Кожен з них має свої хакі (quirks) та свої унікальні плюси та мінуси. Чи буде один з них зручніший для користувача, ніж всі інші? Наскільки просто ним користуватиметься? Які є у кожного з них проблеми і як їх оминати? Чи верстається один із них простіше за всіх інших? Чи є серед них якийсь ущербний, зовсім непридатний? Швидше за все, багато хто однозначно дасть відповідь на ці питання, але я не так поспішатиму.

Макети з фіксованою шириною

Авторський блог є прикладом такої верстки, хоча його можна легко привести до гумового чи еластичного макету без зміни поточних картинок.

Плюси такого макету

Заявлена «оптимальна для максимальної читання тексту» ширина не може адекватно виконувати свою роль, якщо текст на сайті був значно збільшений при незмінному відношенні висоти рядка тексту до його розміру (в даному випадку виходить, що текст «розріджується», і його дуже важко сприймати) . Однак, варто зауважити, що за наявності гарного дизайну ця проблема виникає лише за дуже сильного збільшення тексту;
У користувачів з невеликими моніторами (640; 480 пікселів, також варто не забувати про мобільні пристрої) виникне горизонтальна смуга прокручування на сайті завширшки 760 пікселів. Хоча це дуже нечаста проблема;
Сайт, шириною в 760 пікселів може виглядати досить непривабливо (надто вузько) на моніторах з великою роздільною здатністю екрана;
Невелика ширина основного контейнера може обмежувати розумну кількість стовпців при верстці, але це може бути також плюсом, тому що змушує створювати сайт,враховуючи такі жорсткі рамки (тобто особливо багато надмірностей і дизайнерських прийомів не можна буде застосувати, тому що такі накладені обмеження).

Поради щодо макету з фіксованою шириною:

Приклад блоку фіксованої ширини

Гумові макети

Гумовий макет виходить, якщо у основного контейнера не задавати ширину взагалі (за замовчуванням буде 100%) або задати ширину у відсотках. Іншими словами, не враховуючи межі та відступи, сайт, що має ширину 100%, займатиме всю видиму частину екрана, не створюючи горизонтальної смуги прокручування.

При грамотній верстці гумовий макет дозволяє досягти великої універсальності у відображенні, незалежно від ширини вікна клієнта користувача. На практиці це зустрічається досить рідко, але теоретично, якщо все робити правильно, то таке можливо;
Гумовий макет збігається з макетом, застосовуваним броузером за умовчанням, дозволяє вважати його «ідеологічно правильним». Але чи можна вважати бажання розробника зробити «ідеологічно правильний» сайт плюсом щодо зручності його використання? Я гадаю, що можна;
Гумовий макет сайту дозволяє використовувати доступну роздільну здатність екрану по максимуму. Більшість змісту сторінки буде «над лінією згину» (тобто видимою без додаткового прокручування сторінки). Однак...

Розглянемо мінуси такого макету

Занадто багато доступного для читання тексту сторінки та його гостре бажання заповнити все доступне місце може шкодити зручності користувачів. Занадто багато тексту може «тиснути» на користувача та робити сайт перевантаженим чи хаотичним. Існує вираз: «Порожній простір продає» (“White space sells”, не знаю українського еквівалента цього виразу, мається на увазі,що порожній простір потрібний для збільшення акценту на змісті), і він справедливий навіть стосовно вебсайтів;
Якщо для обмеження ширини макета використовувати CSS властивість max-width (яка не підтримується Internet Explorer (IE) 6 версії і раніше, коротше кажучи, взагалі (погано) підтримується) і бути просто гуру верстки можна в результаті прагнення до «правильної ідеології» отримати, у кращому випадку сайт, яким буде важко користуватися. Уявіть собі, що потрібно прочитати рядок довжиною понад 1000 пікселів, і ви усвідомлюєте проблему.

Деякі поради щодо використання цього макета

Використовуйте макет суворо за призначенням. Не дозволяйте своїм прагненням зробити все «ідеологічно правильно» взяти гору над здоровим глуздом. Повинна бути якась досить вагома причина, щоб використовувати цей різновид макета. Якщо ви все ж таки вирішили використовувати саме її, переконайтеся, що гумовий макет вашого сайту нормально виглядає на більшості екранних дозволів. Інакше залиште це, гра не варта свічок;
Якщо при використанні гумового макета у вас є області з фіксованою шириною, значить, насправді ви отримали гібрид гумового і фіксованого макета, і його мінімальна ширина буде визначена шириною фіксованих блоків або найбільшого з об'єктів (картинок, наприклад). Будьте обережні. Якщо ви бажаєте безкоштовно створити сайт саме з гумовим макетом, воно так і має бути насправді, а не лише на словах;
Якщо ви все ж таки зробили гібрид гумового та фіксованого макета (як, наприклад, зображено в моєму CSS посібнику, переконайтеся, що він нормально виглядає на роздільній здатності 800;600).

І, власне, приклад:

Еластичний макет

При використанні еластичногомакет розмір основного контейнера та інших (важливих) елементів задається в em. Em прямо пропорційні розміру тексту чи шрифту. Отже, зі збільшенням розміру тексту сторінці, розміри розділів, задані в em, збільшаться пропорційно.

Приклад еластичного макету можна подивитися у моєму поданні CSS Zen Garden (обмежений гібрид еластичного та гумового макету). Наскільки я знаю, це єдине уявлення CSS Zen Garden, яке є еластичним і доступним настільки, наскільки це взагалі можливо при нередагованій (спочатку заданій) розмітці сторінки. Я дуже пишаюся цим фактом (справді, дуже хороший приклад, але в Opera 9.22 при ширині менше 150 пікселів блоки «наїжджають» один на одного, цей ефект описаний вище в мінусах гумового макета).

Плюси еластичного макета

Якщо все зроблено правильно, це дуже стабільна верстка, тому все змінює розмір пропорційно. В результаті при будь-якій зміні розмірів все як і раніше добре;
Еластичний макет досить складна річ, це неймовірно круто і щоразу це виклик самому собі насамперед. Перше моє знайомство з ним було на сайті Tommy Olsson (який, мабуть, є гарним прикладом того, як слід робити еластичні сайти). Він вразив мене, змусив посміхнутися і глибоко замислитися над тим, як я мало знаю (impressed the hell out of me). Найкращим прикладом може бути збільшення тексту на сайтах з еластичним макетом: достатньо затиснути ctrl та покрутити колесо миші… Я вже чую, як ви кажете «Вау»

Мінуси еластичного макета

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

Небагато порад з еластичного макету

Якщо ви збираєтеся верстати, використовуючи еластичний макет, переконайтеся, що він працює на маленьких моніторах. Інакше, навіщо він взагалі потрібний?
Обмежте розміри еластичного блоку, визначивши розміри зовнішнього контейнера (використовуючи гумову чи фіксовану ширину, тобто створивши гібридний макет). Наприклад, #wrapper < width:60em; max-width:98%; >. Послідовники «правильної ідеології» можуть заперечити, що це вже не буде істинно еластичним макетом, що він при цьому обмежений чи гібридизований, але я запитаю: а яка різниця? Так, «правильна ідеологія» чудова і прекрасна, але тільки не тоді, коли мова заходить про користувальницьку зручність (золоті слова!);
Пам'ятайте, що IE 6 і менше не підтримують властивість max-width, переконайтеся, що при заданні максимально великого тексту в IE не з'являється горизонтальна смуга прокручування на роздільній здатності 1024;768. У будь-якому випадку, можете переглянути моє рішення для CSS Zen Garden. Наступним кроком може стати верстка вже для дозволу 800; 600 з тією ж умовою. Як приклад, можна подивитися мою еластичну верстку сайту хостингу (обмежений гібрид гумового та еластичного макета). Я планую переверстати його протягом року, але й зараз приклад цілком робітничий.

Приклад еластичної верстки:

В ув'язненні

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