Я помітив, що все більше сайтів переходять до макета фіксованої ширини, де зміна вікна браузера просто призводить до появи смуг прокрутки, на відміну від гнучкої верстки, де зміна браузера призводить до того, що компоненти сторінки "скручуються" разом .
Такі сайти StackExchange, як цей, є прикладом фіксованого макета. GMail та iGoogle - приклади гнучкої верстки. Які причини вибору одного над іншим?
Відповіді:
Більш складні конструкції можуть бути дуже важкими для реалізації при розташуванні зі змінною шириною. Тож я думаю, що це грає певну роль.
Існує також той факт, що дуже зручно читати дуже широкий текст. Розмір стовпців на сайтах StackExchange є досить керованим та легким для читання. Маючи змінну ширину, ви не можете просто розширити основний текст тексту поперек, не ставши нерозбірливим. Навіть Google обмежує ширину їх результатів пошуку.
Звичайно, якщо у вас є сайт, де простір розцінюється (наприклад, Документи Google і Карти Google), ви дійсно хочете використовувати схему змінної ширини, щоб використовувати весь доступний простір.
Виправити це набагато простіше розробнику для складних сайтів. Крім того, більшість сайтів із фіксованою шириною становитимуть близько 1000 пікселів. Причина - лише 1% браузерів використовують 800x640, а 0% - 640x480. Ознайомтеся з найновішими статистичними даними тут . Це не включає мобільний телефон. Це зовсім інша гра з м'ячем.
Значення макета змінної ширини полягає в тому, що вона дозволяє людям легко використовувати веб-сайт у вікні, яке не є максимальним.
Ви повинні подивитися на свою аудиторію і вирішити, виходячи з того, який досвід ви вважаєте, що вони хочуть, і якщо змінна ширина важливіша за інші функції, які ви не зможете розробити, якщо вам доведеться робити змінну ширину.
Існує також компроміс між двома, коли ви встановлюєте мінімальну ширину та максимальну ширину (використовуючи CSS), а потім використовуєте відсоткові ширини, щоб зробити решту потоку між двома крайнощами. Наприклад, можливо, ви хочете, щоб стовпець меню ліворуч був не вужчим, ніж 200 пікселів, але основний вміст, який потрібно передати. Ця методика дозволяє вашому сайту масштабуватись до роздільної здатності відвідувачів, не дивлячись дурно на надзвичайно високі та надзвичайно низькі. Зрештою, HTML був розроблений для течії - це мова розмітки, а не така, як друк.
Такий підхід добре працює для порівняно простих конструкцій, таких як блоги або такі, які представляють багато текстової інформації. Дійсно, я використовую це на своєму особистому веб-сайті . Зрештою, багато людей зараз мають широкоекранні або монітори високої роздільної здатності - мій монітор роботи шириною 1680 пікселів - то чому б вони втрачали велику ступінь нерухомості та повинні горизонтально прокручуватись просто тому, що дизайнер визначився з фіксованою шириною, яка відповідає їхнім екран? Врешті-решт, хороший дизайн полягає у наданні користувачам найкращого досвіду - справа не лише в тому, що на моніторі дизайнера виглядає «досить».
Можливо, вам не доведеться робити такий вибір. List Apart має чудову статтю про чуйний дизайн . Основна ідея полягає в тому, що ви можете використовувати медіа-запити, щоб вносити зміни у вікно браузера або розмір вікна перегляду та призначати CSS за необхідності. Там є що читати, тому перегляньте статтю на всі соковиті подробиці. Але для довгої і короткої його (або , що має бути «широкий і вузький» з нього?) Погляд на до того і після того, як сторінки їхній приклад. В до сторінки лусочки красиво до точки, але якщо ви зробите це досить вузько , що стає трохи незграбним. після сторінка масштабує також, але також змінює макет, коли ви зробите його занадто вузьким, щоб масштабування працювало добре.
За словами Якоба Нільсена «S 113 Керівництво по проектуванню для Homepage Usability :
67 Використовуйте рідкий макет, щоб розмір домашньої сторінки адаптувався до різної роздільної здатності екрана.
Це також одне з десяти найбільш порушених правил дизайну домашньої сторінки :
Боротьба з замороженими макетами здається програною битвою, але варто повторити: різні користувачі мають різний розмір монітора. Люди з великими моніторами хочуть мати можливість змінити розмір своїх браузерів для перегляду декількох вікон одночасно. Ви не можете припустити, що ширина вікна для всіх становить 800 пікселів: для деяких користувачів це занадто багато і для інших занадто мало.
Перевага динамічного макета полягає в тому, що він працює в усіх розмірах екрана, включаючи мобільні пристрої. Це важче працювати, хоча щоб речі виглядали добре у всіх цих розмірах. Питання, яке потрібно задати, - чи відвідувачі будуть користуватися мобільними пристроями?