IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Sfaturi pentru un design mai bun

Emanuel Baruch

Dacă dăm atenţie numeroaselor programe care generează pagini HTML, vom fi probabil convinşi că designul web este ceva ce poate fi făcut de oricine şi cu un efort minim.

Sloganuri de genul "Creaţi-vă propriul sit în 10 minute" sună foarte promiţător. Însă, dacă aruncăm o privire uşor critică pe internet, vom observa repede că foarte multe situri sunt realizate prost sau extrem de prost.

Nu îmi propun discreditarea instrumentelor făcute pentru a înlesni crearea de pagini web şi nici nu doresc să vă conving să renunţaţi la ele. Dimpotrivă, utilizarea lor ne poate uşura considerabil munca. Designul web înseamnă însă mai mult decât stăpânirea unui anumit program iar pentru realizarea unui sit bun este nevoie atât de abilităţi tehnice, cât şi artistice. Şi de timp.

Ca şi în modă, film, pictură şi fotografie, pe web există creaţii care unora le plac, în timp ce alţii le consideră catastrofale. Se spune că gusturile nu se discută. Atunci când cineva critică o pagină web va putea găsi cu siguranţă o sumedenie de elemente care nu sunt pe placul său. Atâta timp cât sunteţi siguri pe voi, nu vă lăsaţi intimidaţi de afirmaţii de genul "Situl este reuşit dar mă aşteptam la un design mai bun" sau "este ok, însă schimbaţi culorile". Ceea ce contează cu adevărat este uşurinţa cu care vizitatorul paginii intră în posesia informaţiilor de care are nevoie, indiferent de natura acestora.

Întâi de toate, gândiţi-vă cui i se adresează situl pe care urmează să îl construiţi. Astfel, veţi găsi mai uşor o idee generală pentru layout-ul acestuia. Haideţi să vedem câteva exemple. O locaţie web despre un joc 3D. Publicul ţintă este format - în acest caz - din persoane cu experienţă şi cunoştinţe avansate în ceea ce priveşte utilizarea calculatoarelor, dotate cu sisteme PC foarte bune. Situl nostru va trebui să reproducă atmosfera specifică, folosind anumite elemente grafice asemănătoare (sau chiar identice) cu cele din joc. Deoarece vizitatorii noştri dispun de hardware şi software avansat, vom putea folosi şi diverse tehnologii mai deosebite (Flash, Applet-uri Java, Quick Time etc) şi optimiza situl pentru rezoluţii mai mari ale monitorului (minim 1024x768). Dacă există extensii pe web ale jocului, putem pleca de la premisa că majoritatea fanilor acestuia dispun şi de conexiuni puternice, astfel încât nu va trebui să reducem la maxim dimensiunile fişierelor noastre şi vom putea publica diverse efecte spectaculoase.

Alt exemplu: situl primăriei unui sat (sau situl oficial al unui sat). Acesta se adresează, aşadar, tuturor cetăţenilor dintr-o anumită zonă. Avem de-a face cu oameni de vârste foarte diferite, cu interese diverse, care dispun de calculatoare mai mult sau mai puţin performante. Majoritatea se vor conecta la Internet printr-o conexiune de tip dial-up. Ştiind aceste detalii despre publicul nostru ţintă, va trebui să creăm un sit uşor de accesat, fără prea multe efecte grafice care să încarce inutil paginile. Accentul trebuie să cadă pe conţinut şi nu pe layout. Aceasta nu înseamnă însă că putem neglija partea grafică!

Problema nu este de fiecare dată atât de simplă. Un alt exemplu: un sit de fotografie. La o primă analiză, vom putea spune că aici accentul trebuie să cadă în totalitate pe imaginile prezentate în cadrul său. Aşadar, vom crea un layout simplu, care să nu distragă atenţia de la conţinutul sitului. Însă, fiind vorba de creaţii artistice, s-ar putea ca unii dintre vizitatorii noştri să se aştepte la mult mai mult: galerii virtuale, grafică superioară din punct de vedere al designului etc. Observaţi, aşadar, că luarea deciziilor poate deveni o problemă delicată.

Odată ce am stabilit publicul ţintă şi obiectivele sitului nostru, va trebui să schiţăm o structură a acestuia. Este foarte important să ştim de la bun început ce fel de informaţii dorim să publicăm pe sit şi în ce cantitate. De asemenea, trebuie identificate acele secţiuni care vor suporta modificări (adăugări, ştergeri). Un grafic ca acesta vă va fi cu siguranţă de mare ajutor:

Meniu 1
submeniu 1-1
submeniu 1-2

Meniu 2

Meniu 3
submeniu 3-1
submeniu 3-1-1
submeniu 3-1-2
submeniu 3-2
submeniu 3-3
Meniu 4

Dacă nu ştiţi ce denumiri vor avea meniurile şi submeniurile de pe sit şi creaţi scheletul paginii, s-ar putea să aveţi ulterior probleme cu lungimea acestora. Uneori nu ajunge un singur cuvânt pentru a descrie ce se ascunde în spatele unui link iar spaţiul rezervat de voi în navigare va deveni insuficient. Atunci link-ul respectiv va fi afişat pe două rânduri, iar unitatea meniului va fi afectată. Dacă plănuiţi ca în viitor să mai includeţi şi alte puncte sau subpuncte în meniu, pagina va trebui proiectată astfel încât modificările ulterioare să poată fi făcute cu uşurinţă. De exemplu, în cazul în care meniul se va dezvolta mult, va fi (probabil) mai bine să apelaţi la navigarea verticală. Utilizarea cadrelor (frame-uri) s-ar putea să vă uşureze considerabil munca dacă veţi avea de modificat foarte des meniul de navigare.

În ceea ce priveşte cantitatea de informaţii care vor apărea pe sit, aceasta este bine de stabilit înainte de a începe proiectarea layout-ului, pentru ca ea va afecta dimensiunile paginilor (înălţime, lăţime, mărimea în Kilobytes). Concret, dacă ştim de la bun început că fiecare pagină va trebui să conţină un anumit număr de paragrafe de text şi un anumit număr de imagini, vom putea armoniza situl mai bine.

Realizarea layout-ului
exemplu - photoshop
exemplu - dreamweaver
exemplu - corel

Înainte de toate, ar trebui să ţinem cont de faptul că funcţionalitatea şi accesibilitatea unui sit sunt în majoritatea cazurilor mult mai importante decât partea artistică. Însă, dacă neglijăm capitolul creaţie, rezultatul s-ar putea să fie catastrofal. Pe o pagină ca aceea a Ministerului Finanţelor, deşi este foarte complexă din punct de vedere al conţinutului, nu se poate petrece prea mult timp de bună voie (www.mfinante.ro).

Aşadar, urmează concretizarea ideilor noastre. Mulţi designeri web schiţează mai întâi pe hârtie layout-urile. Este o metodă bună, deoarece ideile prind contur foarte uşor. Puteţi apela şi la un program de grafică (Adobe Photoshop, Corel Draw) pentru a le realiza. Nu vă lăsaţi influenţaţi prea mult de problema transpunerii ulterioare a layoutului în HTML (chiar dacă aceasta poate deveni o provocare deosebită). Bineînţeles că puteţi face acest lucru şi direct - cu un editor HTML (Macromedia Dreamweaver este un instrument adecvat pentru astfel de sarcini).

O scurtă paranteză: în cazul în care v-aţi decis să realizaţi un sit doar în Flash, atunci veţi putea folosi Macromedia Flash (versiunea 5 sau MX). Acesta, pe lângă faptul că generează cele mai bune animaţii pentru web, este şi un instrument excelent pentru grafică, în general. (Iniţial, Flash-ul era un program de grafică vectorială). Integrarea ulterioară a fişierelor swf în pagini HTML o puteţi face cel mai uşor cu Macromedia Dreamweaver).

După ce vă decideţi pentru un anumit layout, va trebui să-l transformaţi într-o pagină web. Iată câteva aspecte de care trebuie să ţineţi cont:

Împărţirea în secţiuni
Atunci când pagina web este cuprinsă într-un singur tabel aceasta nu va putea fi afişată de browser decât după ce este încărcată în întregime. Aţi observat cu siguranţă că atunci când sunt redate anumite situri, browserul pare a nu executa nimic, după care apare brusc întreg conţinutul. Pentru a nu da această impresie, este bine să împărţim pagina în două - sau mai multe - secţiuni (tabele). Prima va fi mai scurtă şi se va încărca repede (un fel de antet). Aici recomand includerea siglei şi a unor link-uri importante. Astfel, vizitatorul nu va avea ecranul gol pe toată durata descărcării paginii iar şansa ca el să o părăsească înainte să fi văzut ceva scade considerabil.

Organizaţi-vă conţinutul în secţiuni bine delimitate. Nu folosiţi paragrafe voluminoase, deoarece sunt mai greu de urmărit. Încercaţi să controlaţi poziţionarea fiecărui element în parte.

Imagini
Fiecare imagine inclusă în pagina web însemnă o cerere HTTP separată către server. Cu alte cuvinte, o imagine de 100 KB va fi încărcată mult mai repede decât 100 de imagini de 1 KB. Uneori însă este adecvată tăierea unei imagini mari în mai multe bucăţi, care pot fi comprimate astfel mai bine. Trebuie găsit acel echilibru între o calitate bună a imaginilor şi o viteză de încărcare ridicată.

Dacă folosiţi imagini ca butoane în meniul de navigare, includeţi şi o descriere în tag-ul alt:

<img src="contact.gif" width="100" height="30" alt="Contact">

Folosiţi width şi height pe toate imaginile. În caz contrar, browser-ul va rearanja pagina după fiecare imagine încărcată. Aceasta poate deveni enervant, iar pe calculatoarele mai puţin performante duce la diverse probleme.
Utilizaţi imaginile la dimensiunile lor originale. Redimensionarea lor din HTML, deşi este posibilă şi foarte uşoară, nu dă rezultate bune. Excepţie fac unele element grafice (linii, puncte etc.).

Navigarea
Există multe moduri în care poate fi organizată navigarea dintr-un sit. Deşi toate browserele au butoane pentru întoarcere sau înaintare, meniul unui sit trebuie să îi dea posibilitatea vizitatorului de a ajunge pe orice pagină, fără a fi nevoit să le folosească. În funcţie de structura paginii voastre, va trebui să vă decideţi asupra unui tip de navigare (orizontală, verticală, combinată în diverse moduri). Nu are rost să încercaţi să redescoperiţi roata la acest capitol. Mai bine căutaţi câteva situri cu structuri asemănătoare. Navigaţi prin ele şi veţi observa imediat ce este bine de făcut şi ce ar trebui evitat.

Ocoliţi pe cât posibil deschiderea de ferestre noi. Excepţie fac link-urile externe (spre alte
situri) care este mai bine să fie deschise în alte ferestre. Astfel, vizitatorii le pot accesa fără a părăsi pagina voastră:

<a href="http://www.link.com" target="_blank">link</a>

De asemenea, putem prezenta scurte informaţii (sau imagini) în anumite ferestre separate personalizate (de anumite dimensiuni, fără butoanele şi meniul browserului), care se încarcă repede şi pe care vizitatorul le va putea închide ulterior. În acest caz vom folosi un mic JavaScript:

function fereastra (fisier,numele,atributele)
{
geam=window.open(fisier,numele,atributele);
geam.focus();
}

Link-ul care deschide fereastra va arăta astfel:

<a href="javascript:;" OnClick="fereastra( 'pagina.html', 'nume1' , 'status=yes , scrollbars=yes , width=300 , height=300')">link</a>

Dacă aveţi mai multe ferestre personalizate şi doriţi ca ele să se deschidă separat, alegeţi nume diferite (nume1, nume2 etc.). În cazul în care alegeţi acelaşi nume pe fiecare link, fişierele vor fi încărcate întotdeauna într-o singură fereastră, chiar dacă aceasta nu a fost închisă. Comanda "geam.focus()" din scriptul nostru va determina activarea ferestrei de fiecare dată când este accesată.

Compatibilitatea
Pe web, vizitatorul este regele. Paginile noastre trebuie să fie adaptate la cerinţele vizitatorilor şi nu invers. Nenumărate situri ne anunţă insistent, încă de la început, că sunt optimizate pentru o anumită rezoluţie, un anumit browser, un anumit număr de culori.

Aceasta ar însemna că, dacă un vizitator nu îndeplineşte o anumită condiţie, ar fi mai bine să părăsească imediat pagina. Având în vedere că aproximativ jumătate din utilizatorii Internetului folosesc o rezoluţie de 800 x 600, veţi pierde aproape 50% din audienţă dacă optimizaţi situl doar pentru 1024 x 768...

În general, încercaţi să optimizaţi pentru cât mai multe rezoluţii şi pentru cât mai multe browsere (Aceasta nu înseamnă să creaţi versiuni separate, ci să vă asiguraţi că pagina este afişată corect). După cum am mai spus, aproape oricine poate face astăzi design web, luând în considerare programele care ne stau la dispoziţie. Catalogarea unui sit drept bun sau prost trebuie să aibă la bază mai ales compatibilitatea acestuia cu diversele sisteme existente. Chiar dacă un sit funcţionează perfect pe o anumită configuraţie a unui utilizator (browser, sistem de operare, rezoluţie, monitor, conexiune etc.), este posibil ca acesta să fie greu sau chiar imposibil de accesat atunci când nu sunt îndeplinite anumite condiţii hardware şi software. A realiza un sit care să fie interpretat absolut identic de toate browserele şi pe toate sistemele de operare este (aproape) imposibil. Totuşi, trebuie să ne preocupe modul în care paginile noastre web funcţionează pe diferitele configuraţii.

Aşadar, după ce realizaţi scheletul sitului, testaţi-l pe cât mai multe browsere, rezoluţii, culori, sisteme de operare. Totuşi, nu mai este cazul să vă bateţi capul cu rezoluţii mai mici de 800 x 600, browsere mai vechi decât generaţia 4 sau diverse programe de navigare exotice.

Dacă lucraţi în general local, publicaţi-l pe web (pe un server de test) şi observaţi dacă se încarcă bine. În cazul în care dispuneţi de o conexiune puternică, ar trebui să îl testaţi şi pe dial-up. Aceste eforturi sunt absolut necesare, pentru a vă asigura că pagina funcţionează aşa cum doriţi, indiferent de dotările hardware şi software ale utilizatorului.

Există programe şi aplicaţii online care ajuta la testarea siturilor pentru viteza de încărcare sau compatibilitatea cu diverse versiuni de browsere. Iată două exemple:

www.delorie.com/web/wpbcv.html
www.anybrowser.com

Observaţi că pentru a crea un sit de calitate nu este nevoie doar de un calculator, un editor HTML şi o conexiune la Internet. Faza de proiectare, structurarea conţinutului, testarea layout-ului şi, ulterior, testarea întregului proiect vor contribui decisiv la succesul sitului vostru.

Mai multe sfaturi, ponturi şi alte resurse pentru îmbunătăţirea design-ului web găsiţi la:

www.wpdfd.com
www.web-source.net
www.smartwebby.com