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
|
