ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Ползваемост

Митът 800 х 600. От Джеймс Калбах.

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

Сега стандартната страница е с размери 800х600 пиксела. Някои сайтове дори заявяват - "този сайт се вижда най-добре при 800х600." Ако някоя част от страница се окаже извън видимата част на екрана, отстрани се появяват скрол-барове. Ако потребителят сърфира из мрежата при резолюция на монитора 640х480 единственото, което получава е отегчително упражнение за ръцете. (Принципно, хоризонталното превъртане е много по-лошо от вертикалното.)

Повечето компютри позволяват на потребителите да сменят резолюцията на мониторите си, когато поискат. При някои видове работа е по-удобно да се използва по-висока резолюция, която дава нови възможности при организирането на работното пространство. На други им се налага да работят при по-ниска резолюция, която увеличава размерите на това, което се вижда на екрана. Конкретният избор не зависи от реалните размери на монитора: някой с 21" монитор, може да работи и при резолюция 640х480.

Причината 800х600 да бъде избрана за стандартна големина на страниците е ясна: данните за използваните резолюции могат лесно да бъдат открити. Ето какви са последните статистики (важат за целия свят):

  • 640x480: 7%
  • 800x600: 53%
  • 1024x768: 31%
  • 1152x864: 2.5%
  • 1280x1024: 2.5%
  • други: 4%

(Източник: statmarket.com 17 февруари, 2001 извадката е от 50,465,595 уеб сайта; числата са закръглени до половин процент.)

Тези статистики узаконяват размерите на уеб страниците. Сега, около 93% от населението на мрежата могат да разглеждат страница с размери 800х600 без да е необходимо да превъртат екрана. Резултатът: мнозинството от сайтовете са създадени да удовлетворяват това изискване.

Видимо пространство за сърфиране

Използването на статистики за резолюцията на екрана, обаче, е погрешен начин за определяне на оптималните размери на уеб страниците.

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

  1. Прозорецът на браузъра не е отворен напълно: Размерите на прозорците на браузъра могат да се променят, позволявайки на потребителите да избират колко място да заемат на десктопа.

  2. Площта за стандартните менюта: Бутоните за навигация и полето за въвеждане на адресите заемат голямо пространство. Те могат да заемат до 120 пиксела вертикално.

  3. Статус барът на Windows: Потребителите на MS Windows често използват task bar-а, който пък заема малко вертикално пространство.

  4. Страничните панели: Те са вградени в Internet Explorer 5.0 и Netscape 6.0 и позволяват на потребителите да разглеждат bookmark, търсачки, подробности за сайта и други. Макар да могат да се променят, те заемат място от около 160 пиксела хоризонтално.

  5. Допълнителни инструменти: Програми като Alexa (alexa.com) или Google лентата (toolbar.google.com) предоставят полезна информация, като например подобни сайтове и информация за страницата. Те могат да заемат различно оп размери пространство.

Всеки един от тези фактори може да намали видимата площ. Дизайнерите често имат в предвид това и правят страниците си с размери около 770х430. Все още, обаче, подобни страници си остават фиксирани и не се вместват в екраните на потребители, които имат различни от стандартните настройки.

Има много малко публикувана информация относно това, коя е средната видима площ. Това е изненадващо, понеже подобни данни могат да се събират лесно с помощта на проста JavaScript функция.

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

Различните резолюции имат технологично зададени строго определени размери и затова те са изобразени като фиксирани точки върху скалата. Но измерената видима площ за сърфиране спада постоянно и отразява поведението на потребителя. Така например, в едно изследване потребителят има резолюция 256-х1024, но видима площ за сърфиране 628х623. (Източник: Real-world browser size stats, part II.)

Погледнете как сърфират хората около вас. Те винаги ли максимизират прозорците си? Използват ли панелите отстрани? Пускат ли няколко приложения едновременно в прозорци с по-малки размери, преминавайки непрекъснато от едно в друго? Често потребителите не сърфират, използвайки видима пространство равно на резолюцията на екрана им.

Гъвкавият дизайн

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

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

Разглеждане на страници с размери фиксирани на 800х600 при резолюция също 800х600 е като четенето на вестник в самолет: можеш да го правиш, но е неудобно и неприятно. Или си предствете подобно положение в телевизията: хората с големи телевизори ще трябва да гледат любимото си предаване в квадрат с размери 30 на 30 сантиметра върху екран с ширина 90 сантиметра; хората с малки телвизори ще виждат само половината от картината. Не бихме приели подобно нещо, но подобно нещо се случва в мрежата.

Предизвикателството на уеб дизайна

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

Една алтернатива на абсолютното позициониране е относителното позициониране. То позволява на страницата да се свива и разширява така, че да съвпада с различното видимо пространство.

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

Начини

Много сайтове се опитват да се справят с проблема, но все още има място за развитие и подобрение. Ето някои решения - някои стари, някои нови.

  1. Центриране на съдържанието. Това означава да се оставят празни пространства от двете страни на фиксираното по ширина съдържание. Предимства: Постига се лесно; празнините от двете страни на основното съдържание могат да се използват, за да се усили визуалното въздействие чрез различни фонове. Недостатъци: Потребителят не печели пространство върху екрана: съдържанието не е нито повече, нито по-малко, а работното пространство не е максимизирано. Примери: yahoo.com и aol.com.


  2. По-маловажната информация се поставя отдясно. Този метод поставя условия върху оформлението - основното съдържание и навигацията са в лявата част на екрана. Допълните възможности и услуги, често реклами или други дразнители, се появяват след това - вдясно. Въпреки, че могат да се появят и скролбарове, потребителите с по-малко пространство, ще могат да виждат основното съдържание без да превъртат екрана. Предимства: Лесно се постига; добре се оползотворяват свободните части на екрана. Недостатъци: Ограничава възможностите на дизайнера; хоризонталните скролбарове при по-малки размери на екрана могат да бъдат объркващи. Пример: cnn.com.


  3. Напълно гъвкави страници ("течни" страници). Този метод позволява на страниците да се свиват и разширяват свободно. Течните страници са най-добрите примери за относително позициониране. Предимства: Лесно се постига с HTML; при по-големи резолюции, мястото върху екрана се използва оптимално. Недостатъци: При по-високи резолюции, текстовете стават прекалено трудни за четене (редове, които са по-дълги от 400 пиксела се четат по-трудно); понякога създава усещането за "евтин HTML дизайн", който не винаги се харесва високите стандарти на клиентите. Примери: cnet.com и ebay.com.


  4. Променлив брой колони. За сайтове с много текст е желателно да предоставят възможност на потребителите да избират между една, две или три колони текст. Предимства: Мястото върху екрана се използва добре; позволява на потребителя да контролира това, което вижда. Недостатъци: не разботи с всички браузъри и платформи; постига се по-трудно; може да бъде полезно в ограничен брой случаи. Примери: iht.com (International Herald Tribune online, погледнете някоя статия; работи само в IE5+; забележете също и възможността да се променя големината на шрифта директно от самата страница).


  5. Центробежни страници. Това означава, че дизайнът на страницата започва от една точка в центъра и след това се предвижва навън във всички посоки. Това изисква да се определят различни "оси", около които ще се подреждат елементите. Предимства: постига се лесно; потребителите винаги получават каквото им трябва (главните елементи са винаги в средата). Недостатъци: всъщност не предлага на потребителя възможност да се възползва от мястото на екрана. Пример: idmedia.com (целият дизайн остава непрекъснато центриран при различни размери на екрана.)


  6. Подвижни елементи на страницата. Части от страницата могат да се зададат като блокове, които могат да бъдат премествани. При по-малки размери на видимата площ, два блока могат да се появяват един върху и под друг, например. При по-големи размери - двата блока ще са един до друг. Предимства: Използва максимално работното пространство на потребителя. Недостатъци: Постига се трудно; не работи с всички браузъри и платформи; още не е проучено добре. Примери: macnews.de (на немски; работи само с IE; изображенията в дясно се преместват така, че да се пригодят към различни рамери на прозореца.)


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


  8. Променливи секции от страницата. Това се отнася до определяне на блокове със информация, които потребителите ще могат да отварят и затварят. Ако един блок увеличи размерите си, друг ще трябва да се свие пропорционално. Предимства: Мястото върху екрана се използва по най-добрия начин; позволява на потребителите да подреждат съдържанието по важност. Недостатъци: Много трудно осъществимо; не е измислен начин за реализация; дава на потребителите прекалено голям контрол върху оформлението. Пример: няма (бел. пр. виж my.dir.bg)


  9. Комбинации. Горните техники могат да се комбинират, за да се създадат уникални решения на конретни ситуации. Пример: WebReview.com (навигацията вляво е фиксирана, съдържанието е гъвкаво; банерите се показват един под и над друг, а не един до друг.)

Решението на проблема

Използването на страници с фиксирани размери е още един пример за тенденцията да се отделя прекалено внимание на технологиите вместо на поведението на потребителите. Най-достъпните статистики са за резолюцията на екрана - мярка за определена технология. Обаче по-правилно би било да се измерва използваното от потребителя видимо пространство.

Но това пространство не е стандартно и може да се променя дори в рамките на една работна сесия на потребителя. Следователно, когато се създават уеб страници, трябва да се имат в предвид множество различни размери. Това, което получава потребителят трябва да е уникално, базирано на неговите нужди и възможности.

С нарастването на броя на алтернативните устройства с интернет достъп, като WebTV, видео-игрите, e-Book, малките ръчни устройства и други нестандартни приложения, разнообразието във пространството за сърфиране ще се увеличава. Никога преди изискванията за гъвкавост на страниците не са били толкова големи. Решенията, които се взимат сега ще се отразят и на дизайна в бъдеще. В крайна сметка успехът или провалът на едно дигитално устройство зависи не от познаването на съответната технология, а в начина, по който се използва тази технология