Свободен и фиксиран дизайн

  • 18.04.2002
Най-общо казано, съществуват две възможности за оформяне на web страниците по отношение на тяхната ширина. Те могат да бъдат фиксирани или свободни. Тъй като не всички монитори са с еднакви резолюции, е добре да се помисли кое оформление е по-добро и кое в кои случаи има предимство.

Определение

  • Свободен или относителен дизайн ще наричам този, чиято ширина зависи относително от размера на прозореца;
  • Фиксиран дизайн ще наричам този, чиято ширина е точно зададена.

Резолюции

Като начало ще разгледам кои са най-използваните резолюции, отчетени от непретенциозната (за сега) система HotLog за периода от 1.01.2002 г. до 8.04.2002 г.

  • 800×600 — 47.12%
  • 1024×768 — 42.22%
  • 1152×864 — 3.32%
  • 1280×1024 — 2.83%
  • 640×480 — 2.74%

Изводите са следните:

За да бъдат щастливи повечето (но не всички) потребители, минималната ширина на сайта не бива да надвишава 780px (с отчитане на мъртвата зона). Едни ще останат недоволни, поради по-малките си дисплеи (лаптопи, стари монитори, webTV и т.н.), други няма да са особено радостни, защото имат по-големи монитори (19"—21"), останалите сигурно ще останат равнодушни.

Медии

Освен стандартните похвати за пълноценното използване на наличното екранно пространство, пресмятанията не спират до тук. Към интернет могат да се включат какви ли не визуализиращи устройства (медии), освен стандартните монитори. Те могат да бъдат handheld (джобни устройства), projection (прожектиране на екран), tv (телевизионен екран с ниска разделителна способност), принтери, гласови синтезатори и др., които трудно биха могли да се съчетаят в едно. Все още не съм видял сайт, който да работи с всички медии, но напоследък определено е оригинална съвместимостта поне с няколко различни устройства.

С по-сериозна подготовка в XML и с максимално използване на CSS2 (чрез директивата @media) може да се определи начина на визуализиране, според различните видове медии.

Ефективност и приложение

Максимата на чичко Якоб

Минималната ширина не трябва да надвишава 640px!

Ширината на сайта зависи от различни фактори, например: от вида на съдържанието, аудиторията, предпочитанията на клиента или дизайнера или каквото се сетите. Ако сайтът е с художествена или експериментална насоченост или има тясна аудитория, авторът не е длъжен да се съобразява с гореспоменатите резолюции, той може да експериментира с каквото и както си пожелае. Когато аудиторията е “пъстра” и дизайнерът търси максимална ефективност, той трябва да структурира дизайна си така, че да обхваща оптимален периметър от резолюции, от 640px до 2640px, ако е необходимо.

Изпълнение

Умението да се съчетава малко информация в голяма площ и обратното е най-трудната задача на свободния дизайн. Докато при фиксирания дизайн всичко е изчислено и предвидено още преди самото му осъществяване, то при сайтовете с относителни размери е необходимо дизайнерът да има абстрактно мислене, т.е. не само да нарисува (скицира) дизайна, но и да го раздвижи мислено, да прецени дали колонката ще се свива (и/или разпъва) повече или по-малко, коя ще остане фиксирана. Вариантите могат да бъдат най-различни.

Като трудност, фиксираният дизайн е по-лесен за изпълнение от свободния. При него се задават точни размери на полетата, които се визуализират без промяна навсякъде. Свободният дизайн изисква повече предвидливост, тъй като размерите на полетата са относителни спрямо ширината на прозореца. Дизайнерът е принуден да търси оптимален баланс между различните резолюции, например: Иван, който е с 14" монитор да бъде доволен почти толкова, колкото Митко, който е със 17" монитор.

В повечето случаи е удачно свободния и фиксирания дизайн да се комбинират. Не е необходимо всички полета да се оставят в проценти или в точни размери. Част от тях могат да се фиксират (навигация, менюта…), а друга част, да се оставят свободни или относителни (текстови блокове, бели полета…).

Изводи

Свободният дизайн е “приятелски настроен” към потребителя. Той не налага излишни ограничения, напротив — премахва ги. При добре подбрани параметри на плаващите полета (обикновено текстови), читателят може да разшири или намали своя прозорец, в зависимост от предпочитанията си.

При свиване или разпъване на прозореца на страница съдържаща среден или голям по обем текст, може да бъде постигнато оптимално отношение на броя символи на ред с ширината на колонката. Същата функция при фиксиран размер води до по-малък брой символи на ред, което предизвиква значително увеличаване на вертикалния размер на страницата.

Поради особеностите на относителния дизайн и трудността да се намери добър подход за изпълнението му, често се наблюдават неправилно функциониращи сайтове. Грешките, които се допускат най-често са: претрупване на информация — не е правилно да се мисли, че когато разполагаме с цялото пространство, трябва да запълним всяка празна дупка; липса на каквато и да е концепция за движещите се и статичните полета — всичко се движи безобразно нагоре-надулу, няма единност на съдържанието.

Рискът за допускане на грешки при свободния дизайн е много по-голям.

За разлика от него, фиксираният дизайн е неадекватен при по-малки или по-големи екранни резолюции от очакваните. Въпреки това, той може да изглежда много по-впечатляващо, ако се наблегне върху графичната му част.

Естествено всичко това — колко впечатляващ или колко функционален ще е дизайнът зависи единствено от способностите и намеренията на дизайнера.

Примери за добра реализация

Най-добрият пример на сайтове със свободен дизайн е портфолиото на Art Lebedev Group. За екипа на ALG е традиция да се използва цялата екранна площ, независимо от ситуацията.

Като отговор на горното предизвикателство, вижте последните работи на RealWeb.