Макети з фіксованою шириною
Плюси такого макета
його мінуси
- Заявлена «оптимальна для максимальної читаності тексту» ширина не може адекватно виконувати свою роль, якщо текст на сайті був значно збільшений при незмінному відношенні висоти рядка тексту до його розміру (в даному випадку виходить, що текст «розріджується», і його дуже важко сприймати) . Однак, варто зауважити, що при наявності хорошого дизайну ця проблема виникає тільки при дуже сильному збільшенні тексту;
- У користувачів з невеликими моніторами (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
- Пам'ятайте, що IE 6 і менше не підтримують властивість max-width, переконайтеся, що при завданні максимально великого текст в IE не виникає горизонтальної смуги прокрутки на дозволі 1024 × 768. У будь-якому випадку, можете подивитися моє рішення для CSS Zen Garden. Наступним кроком може стати верстка вже для вирішення 800 × 600 з тим же умовою. Як приклад, можна подивитися мою еластичну верстку сайту хостингу (обмежений гібрид гумового і еластичного макета). Я планую переверстати його протягом року, але і зараз приклад цілком робочий.
Приклад еластичною верстки
В ув'язненні
Як ви можете бачити, у кожної з описаних різновидів макетів є свої плюси і мінуси (може бути, ви знаєте і інші?). І я не можу з упевненістю сказати, який же з них краще. Це просто рівень представлення сайту, як я помітив на самому початку, тому з великою відповідальністю і не меншою впевненістю я можу заявити, що будь-який з цих макетів може бути застосовний для верстки доступних, зручних для користувачів, сайтів. Таким чином, я пропоную не вставати не стежку прихильників «ідеологічної правоти», роблячи щось тільки тому, що вона «правильно», на шкоду доступності або зручності. Я не намагаюся їх критикувати, бо вони змушують нас думати над кожним кроком і є джерелом натхнення, але якщо ви прямуєте по їхньому шляху, робіть це з побоюванням. Нехай у вас буде мета і буде план. «Просто тому що" не є достатньою причиною - так я кажу своїм дітям.
А що пробувати і так знаю що буде.
А якщо відключити підтримку Flash. і Java script заодно. скільки сайтів залишиться на 100% працездатними.
Так що відключення JS це не аргумент. за 2 з лишком роки на сайт зайшов тільки один відвідувач з відключеним JS.
А якщо у користувача стара ОС і старий оглядач. Неподдерживается CSS 3 та HTML 5 а часом і HTML 4.01 до ладу не тримають. що все це в топку.
Все динамічно пропорціолнально змінюється. обумовлено застосуванням тільки EM і%. замість PX. PT і іншого.
Ну да, я так і подумав.
Мені тут не подобається ось що.
По перше. Картинки при такому підході практично ніколи не будуть своєї натуральної величини, а ресайз зазвичай погано позначається на тому, як картинка виглядає.
По-друге. Більшість сайтів зараз зверстані з фіксованими розмірами шрифтів, причому діапазон цих розмірів досить вузький (наприклад, основний текст рідко буває менше 12px і крупніше 14-16px). Це формує у користувачів певні очікування, вони звикають до деякого абсолюту розміром шрифту.
Шрифт ж на сайті, зверстаному вашим способом, буде на великих моніторах виглядати крупніше (а на маленьких - дрібніше), ніж шрифти на інших сайтах. Від цього у користувачів напевно складеться враження, що саме на цьому сайті щось не так, і користуватися таким сайтом їм буде незвично.
Те, що не вбиває нас, робить нас інвалідами.
Шрифт ж на сайті, зверстаному вашим способом, буде на великих моніторах виглядати крупніше (а на маленьких - дрібніше),
Помилкове твердження.
Розміри шрифту. відображуваного на різного розміру / дозволу моніторах розташованих на ергономічному відстані відповідно до своїх розмірами. буде по кутовому розміру однаковим.
Це викладено в кінці сторінки. аспект ергономічності динамічно еластичного типу макета
Міняю розмір вікна приблизно до 700х700
А навіщо міняти. А якщо це ж зробити з фіксованим або гумовим сайтом. Сторінка зазвичай розвалюється. з прив'язку елементів до різних сторін екрану або сховається за вікном оглядача. буде потрібно робота слайдера по горизонталі.
Це формує у користувачів певні очікування
Формувати потрібно очікування.
Знаєте як виглядає наприклад контакт на моніторі в 25 ". Чисто по" колірній гамі "злилися воєдино елементів сторінки можна сказати що це контакт.
Наприклад ваш сайт на моніторі в 25 "(ЕПТ) я розгледіти не можу. Навіть якщо скину дозвіл до 2048 по горизонталі. А в упор дивитися. Не маю жодного бажання псувати зір. Ергономіка. Ні чого тут не вдієш.
Великі дозволу і монітори роблять не для того що б вмістити якомога більше елементів. а відобразити ці ж елементи. наприклад зображення. з набагато кращим дозволом.
Звичайно динамічно еластину макет сприймається незвично. але все таки з урахуванням ергономіки і usability це найбільш досконалий тип макета.
а ресайз зазвичай погано позначається на тому,
Взагалі то якщо стосуватися якості зображень то на матричних моніторах. ЖК. плазма та ін "плоских" відобразити зображення в належній якості не вдасться ніколи. Дозвіл і розмір осередку відображення занадто великий для цього в порівнянні з ЕПТ моніторами.
У цьому світлі. ресайз зображень не вносить помітного погіршення в якість зображення. більше на зображення впливають оглядачі. як правило IE 9 відображає картинку набагато краще ніж наприклад Google Chrome 13. у другого гораздот гірше алгоритм обробки зображення, що відображається. що сильно помітно при відображенні похилих шрифтів зокрема.
Якби в Google Chrome зробили б нормальну обробку графіки. він би просто повзав як дохла черепаха і був би в хвості по продуктивності.