Web design

Detalii ce nu trebuie uitate atunci cand ne lansam saitul

Am realizat designul, CMS functioneaza, am adaugat continutul si clientul este fericit. Este timpul sa ne lansam saitul. Sau nu este? Inainte de a lansa un sait, poti uita unele lucruri, in graba ta de ati vedea saitul live. Este util sa ai o lista cu lucrurile pe care trebuie sa le faci, cu ultimele detalii si retusuri, inainte de ati lansa saitul in toata lumea.

In lista urmatoare voi  evidentia cativa pasi pe care nu trebuie sa-i uitam:

Faviconul

Faviconul are rolul de a  marca tagul sau fereastra saitului in browser. El se salveaza automat cu bookmarkul, facilitand identificarea saitului pentru utilizatori, in functie de imaginea pe care o afiseaza. Unele browsere iti salveaza faviconul in director ca favicon.ico, dar ca sa fii sigur ca acesta e incarcat tot timpul, include urmatoarea sintaxa in head:

<link rel=”icon” type=”image/x-icon” href=”/favicon.ico” />

Titlurile si datele meta

Titlul paginii tale este un element important pentru SEO , cat si pentru utilizatorii tai, care vor cunoaste continutul paginii, in functie de acesta. Fii sigur ca titlul sa se modifice pe fiecare pagina si sa aiba legatura cu continutul paginii.

<title>Advance-hr</title>

Pentru majoritatea browserelor, descrierile meta nu sunt la fel de importante pentru SEO ca si titlurile,  dar este totusi o idee buna sa le includem. Modifica descrierea in fiecare pagina, ca sa aiba legatura cu continutul, pentru ca asta e ceea ce Google arata la rezultatele cautarii.

<meta name=”description” content=”Art is the expression of creativity or imagination. Art is commonly understood as the act of making works (or artworks) which use the human creative impulse and which have meaning beyond simple description.”</meta>

Compatibilitatea browserelor

Tocmai cand credeai ca designul arata perfect, il verifici in IE si observi ca totul este stricat. Este important ca saitul tau sa fie compatibil cu toate browserele. Nu trebuie sa fie perfect ca design, dar trebuie sa fie functional, iar utilizatorul nu ar trebui sa observe probleme. Browserele de care trebuie sa tii cont: Chrome, Safari 3, Firefox 3, Internet Explorer 6, 7, 8.

Linkurile

Nu presupune ca toate linkurile merg de la sine. Verifica-le. Se poate intampla sa uiti sa adaugi ”http://” la linkurile externe.  Nu uita, de asemenea, de regula general valabila, de a pune link pe logo catre pagina principala.

Totodata analizeaza-ti linkurile. Sunt suficient de evidente pentru noii utilizatori? Acestea ar trebui sa fie usor de observat pe pagina. Nu sublinia textul care nu este link, pentru ca iti va deruta utilizatorii.

Validarea

Scopul tau ar trebui sa fie ca saitul sa fie 100%validat. Acestea fiind spuse, nu este o tragedie daca saitul tau nu se valideaza, dar este important sa cunosti motivele pentru care nu merge, ca sa poti repara diverse erori. Unele dintre cele mai comune erori sunt date de lipsa tagului  ”alt” , omiterea tagurilor de inchidere si utilizarea “&” in locul lui “&amp”.

Instrumente de analiza a traficului

Instalarea instrumentelor de analiza este utila in masurarea statistica a numarului vizitatorilor tai si  a felului in care saitul tau functioneaza. Dintre aceste instrumente le numim pe: Google Analyctics, Clicky, Kissmetrics, Mint, StatCounter.

Optimizarea

Cu totii dorim ca saitul nostru sa functioneze la eficienta maxima. Cateva masuri pe care nu trebuie sa le uiti: reducerea cererilor pe HTTP, optimizarea imaginilor pentru web, comprimarea javascriptului si a filelor de CSS.

Back-up-ul

Daca saitul tau se bazeaza pe o baza de date, ai nevoie de o solutie de salvare a datelor. Astfel eviti riscul de ati pierde informatiile. Daca folosesti WordPress, instaleaza Wordpress Database Backup,pe care il poti seta sa-ti trimita salvari prin mail.

Footerul – element de design sau o necesitate

Potrivit regulilor de web design, tot ce este in josul paginii nu este foarte important, iar aceasta regula este apreciata deopotriva de designeri, cat si de utilizatori. Elementele grafice din josul paginii nu sunt create pentru a atrage atentia, de aceea footerele sunt adesea uitate sau ignorate cand este realizat un design.

In realitate, majoritatea footerelor sunt plictisitoare si neinspirate. Designerii folosesc aceasta zona pentru a plasa lucruri pe care nu le-au putut integra in partea superioara a saitului, de ex: termeni de confidentialitate, butoane spre W3C, drepturi de autor, linkuri care trimit catre partea superioara a paginii si date de contact. Dar daca majoritatea designerilor ignora footerul, de ce sa nu-l folosesti tu? De ce sa nu folosesti footerul pentru a-ti impresiona vizitatorii, prezentand ceva cu totul inedit?

De ce sunt utile footerele?

In general, in footer sunt plasate: detalii de contact, adresa si harta saitului, sectiunile principale, informatii succinte despre sait sau despre creatorii acestuia. Totodata el poate contine si functii suplimentare, precum RSS, abonamente de informatii prin e-mail.

Cu toate acestea, putem utiliza, footerul ca si un element de design, perfect pentru a da o nota personala saitului dumneavoastra. De exemplu, daca esti fan Seinfield, de ce sa nu plasezi un mic Kramer undeva langa datele de contact din footer? Astfel, cu un mic detaliu puteti sa va personalizati saitul, reusind, in acelasi timp sa atrageti atentia vizitatorilor. Avand in vedere ca functia principala a footerului este de a completa layout-ul, de multe ori acestuia i se da o culoare ce apare in contrast cu celelalte culori dominante utilizate in sait.

Rolul footerelor a crescut semnificativ in designul blogurilor.Acum acestea contin ultimele postari, comentariile vizitatorilor, ultimele joburi adaugate, ultimele discutii de pe forum sau diverse linkuri.Din pacate, footerele sunt folosite destul de des pentru a insera spam SEO si reclame pop-up.

Unii designeri merg mai departe si plaseaza locul de navigare in partea de jos a paginii. In astfel de cazuri saitul este impartit in doua sectiuni, partea de sus este axata pe continut, in timp ce in sectiunea de jos este plasata bara de navigatie.

Este clar ca rolul footerului este din ce in ce mai important si ca designerii sunt hotarati sa fac apel la acest element grafic pentru a reusi sa iasa in evidenta.

Alte 5 tendinte ale designului web in 2010

  • Schimbarea perspectivei

In 2010 tendinta in web design este de a reda cat mai precis realitatea, punand in perspectiva elementele componente ale layout-ului.

http://downsign.deviantart.com/art/Book-Store-136542851

  • Design interactiv si intuitiv

Se anunta timpuri bune pentru Flash. Erau vremuri cand nu puteai vizita un sait, fara sa treci mai intai de o interfata stresanta de flash. In vremurile de azi, Flash este folosit mult mai relaxat si intro maniera profesionista. Desi multi designeri prefera jQuery pentru formulare si pop-ups, Flash are locul lui in design, mai ales atunci cand este facut subtil. Flash inca nu are rival cand vine vorba de interactivitate. Deoarece vizitatorul mediu doreste sa vada sait-uri practice, tendinta este de a realiza saituri mai intuitive decat in trecut.

Ideea principala: Designul interactiv isi va face reaparitia.

http://www.crowleywebb.com/

  • Minimalismul

Uitati de saiturile minimaliste, in 2010 tendinta este catre utilizarea spatiului alb, imbinat cu fonturi indraznete si scheme de culori surprinzatoare.

http://www.kylestanding.com/

  • Footer supradimensionat

Footerele supradimensionate exista deja peste tot, dar in 2010 se tinde catre o exagerare mult mai mare acestora. Footerele capata mai mult importanta, devenind parte integranta a designului. Vorbim despre footere care vor contine update-uri din diverse retele sociale, sondaje zilnice si anunturi Flickrl.

http://www.duirwaigh.com/

  • Retro

Designurile retro sunt la moda. Desi multe dintre comunitatile de designeri admira stilul retro, este destul de dificil de a imbratisa acest stil pe deplin, realizand un design pe deplin unic. Cheia in designului retro este in a te inspira din tonul jucaus al stilului. In 2010, designul retro va fi extins, pe masura ce designerii vor gasi alte modalitati de a onora arata vintage.

http://www.level2d.com/

10 greseli in Web Design

10. Un scop clar

Orice site trebuie sa fie clar asupra scopului sau si  sa includa o pagina “Despre noi” ori o scurta astfel de descriere pe pagina principala pentru a lamuri vizitatorii.

9. Alt-uri si Title-uri

Una din greselile majore facute de web designerii fara experienta este aceea de a pune accent pe design, ignorand codul propriu-zis. Alt-urile sunt folosite pentru imagini iar title-urile pentru link-uri Alt-urile si title-urile reprezinta informatii importante pentru motoarele de cautare, fara ele practic site-ul va arata la fel, insa sunt necesare pentru validarea XHTML si au rol de a spori accesibilitatea. In general sunt doar 2-3 cuvinte scurte si “la obiect”.

8. Pagini aglomerate

Cea mai simpla rezolvare consta in realizarea inca de la inceput a unei structuri clare si impartirea informatiei in asa fel incat sa se evite paginile foarte aglomerate. O alta optiune ar fi – si aici ma refer doar in cazul in care pagina contine numai text – utilizarea unui carousel sau a oricarui alte metode de dynamic-content – o varianta de a aduce in fata cititorului doar informatiile necesare.

7. Imagini, imagini, imagini

In primul rand scopul site-ului ramane acela de a oferi informatii clientului/vizitatorului – din nou amintim de motoarele de cautare care gasesc mai importanta informatia decat imaginile. Un site flash sau unul realizat cu multe imagini este de obicei un site care nu are nevoie de optimizare fiind cunoscut si accesat direct de vizitatori prin intermediul URL-ului.

6. Thumbnail-uri

Thumbnail-urile sunt acele imagini mici care apar intr-o galerie foto pentru a va face o idee asupra imaginii mari pe care o veti vedea daca apasati click. Problema e ca unii web designeri folosesc imaginea propriu-zisa pe care o micsoreaza la scara necesara. Browser-ul incarca de fapt imaginea mare pe care o redimensioneaza, ceea ce este gresit din punct de vedere al web design-ului deoarece pagina va necesita un timp foarrte mare sa se incarce.

5. Titlul paginii

Desi are legatura cu subpunctul 2 fiindca titlul paginii este de asemenea important pentru optimizare SEO – am ales sa il pun separat dintr-un singur motiv: titlul paginii, spre deosebire de alt-uri si title-uri trebuie sa fie unic. De multe ori titlul paginilor ramane acelasi. Titlul identifica fiecare pagina in parte a site-ului. El trebuie sa fie scurt si succint.

4. Link-uri care se deschide intr-un nou window

Este o metoda enervanta de a pastra utilizatorului deschise mai multe pagini asadar mai multe optiuni de a continua navigarea prin acel site.De obicei se intampla pentru unele link-uri considerate mai importante in site.

3. Ads

O metoda de a deruta vizitatorul in ceea ce priveste motivul vizitarii acelui site. De obicei spatiile publicitare – prin natura lor – atrag atentia derutand astfel de la informatia propriu zisa a paginii.

2. Intro

Un “Intro” este o pagina introductiva – de cele mai multe ori in Flash avand un buton mic si semitransparent “Skip Intro” – cu rolul de a prezenta pe scurt si intr-un mod cat mai placut site-ul. Un vizitator trebuie sa “scaneze” continutul unui site imediat dupa incarcarea acestuia si sa decida daca merita sau nu sa continuie, nicidecum sa caute un link pentru a trece la pagina urmatoare – lucru care il poate determina sa paraseasca site-ul.

1. (Greseala mea favorita) Acelasi banner in Flash pe toate paginile

Este absolut plictisitor. Motivul: lipsa de imaginatie sau poate nu este atat de important spatiul destinat banner-ului – primul lucru observat de vizitator la incarcarea paginii.

5 motive pentru care trebuie utilizate div-urile in Web Design

Desi acest lucru e gresit, tabelele sunt inca folosite pentru a creea layout-ul in cazul unor site-uri cu structura simpla si un numar foarte mic de pagini.Motivul ? Aparent sunt usor de folosit. Scopul lor ramane de a afisa informatiile care sunt in format tabular dar si de ordonare mai usoara in pagina a componentelor unui formular.
In schimb, un div este ca un “box” plutitor care poate fi amplasat oriunde. Acest lucru inseamna ca puteti schimba aspectul paginilor dvs. doar modificand CSS-ul.
Web Design-ul specifica clar separarea continutului de prezentare – cu alte cuvinte separarea textulului propriu-zis al site-ul de design, fiind astfel mai usor de modificat orice detaliu de design-ul.

Tabelele au multe probleme, in primul rand este mult mai dificil de a obtine layout-ul dorit folosind un tabel, dar cel mai important, tabelul face mult mai dificil gasirea informatiilor relevante de catre motoarele de cautare. Folosirea DIV-urilor in creerea site-ului permite buna preluare a content-ului de catre Google si de alte crawlerele deoarece site-ul este “semantic” relevant.
table

HTML varianta cu tabele

<table>
<tr>
<td>Web Design</td>
<td>Aplicatii Custom</td>
<td>Website eCommerce (magazin online)</td>
<td>Optimizare motoare de cautare (optimizare SEO)</td>
</tr>
</table>

HTML varianta cu DIV-uri

<div class='thumb'>Web Design</div>
<div class='thumb'>Aplicatii Custom</div>
<div class='thumb'>Website eCommerce (magazin online)</div>
<div class='thumb'>Optimizare motoare de cautare (optimizare SEO)</div>
<br class='clear'>

CSS varianta cu DIV-uri

.thumb
{
float: left;
width: 90px;
border: 1px solid #000;
margin: 0 5px 5px 0;
padding: 10px 5px;
}
.clear
{
clear:both;
}

1. Layout & Content

1.Daca utilizati tabele pentru layout atunci prezentarea va fi amestecata cu continutul, astfel utilizarea latimii de banda este mai mare decat este necesar.

2. Redesign

2.Redesign-ul este mult mai greu de realizat. Folosind DIV-uri, toate modificarile se fac din CSS, procesul de redesign fiind mai putin costisitor.

3. Accesibilitate

3.Tabele nu ajuta persoanele cu dezabilitati. Desi aparent informatiile sunt afisate corect pe ecran, in ordinea corecta, modul in care un software  gen “Windows Narrator” il va citi poate fi total diferit. Multe tari au acum legi, care prevad faptul ca site-urile trebuie sa fie accesibile tuturor.

4. Diversitate

4.De asemenea, persoane care viziteaza site-ul dvs. folosind PDA-uri, telefoane mobile, si care nu dispun de spatiu pe ecran pentru afisarea intregului tabel, nu vor obtine o afisare corecta a layout-ului.Site-ul realizat cu ajutorul DIV-urilor va arata bine chiar si la scara mai mica sau mai mare.

5. SEO

5.Tabele pot afecta rating-ul paginii: spre exemplu pentru un site realizat cu ajutorul unui tabel avand meniul in stanga, in momentul preluarii continutului de catre un motor de cautare, acesta va prelua mai intai informatiile incepand de sus jos si de la stanga la dreapta, considerand importante informatiile ce sunt mai aproape de inceputul paginii, continutul fiind in mare ignorat in ceea ce priveste importanta.

Toate site-urile realizate de LigaWeb au structuri realizate cu ajutorul DIV-urilor, fiind compatibile cu majoritatea browsere-lor, cat si un design placut fiindca incercam ca fiecare site sa fie unic.

4 lucruri importante care trebuie stiute despre Web Design

1. Un site – mai mult decat publicitate

Vizitatorii acceseaza un site pentru informatii, asistenta, educatie, servicii, produse. Scopul unui site este de a va informa clientii / vizitatori despre firma dvs. Nimic nu este mai rau decat un site neactualizat sau cu o structura ce nu permite gasirea rapida a informatiei dorite.Site-urile nu sunt pur si simplu anunturi sau panouri publicitare pentru firma. Acesta reprezinta mult mai mult decat publicitate, reprezinta o brosura electronica, asa ca asigurati-va ca oferiti exact ceea ce vizitatorii cauta.

2. Un site de succes nu apare deodata…

Google are aproximativ 43% din piata de cautare online, cel mai apropiat competitor fiind Yahoo cu  28%. Orice site in speranţa de a avea succes online, trebuie să “dea bine” la Google – ceea ce înseamna ca trebuie sa respecte regulile lor pentru optimizarea  motoarelor de cautare.
lucrul cel mai important de retinut este ca un site web de succes nu apare deodata. Oamenii trebuie sa fie capabil sa gaseasca site-ul dvs. pe optimizare-seo.html”>motoarele de cautare atunci cand cauta diverse cuvinte cheie. Un lucru este necesar pentru a avea un site de succes:

3. Redesign – cu totul alt site

La fiecare 12 pana la 18 luni – ar trebui facut un redesign site-ului dvs. si o “curatenie” si aici ma refer la a elimina din site toate elementele care sunt depasite cum ar fi animatii flash, imagini etc. Nu lasati oferte / concursuri / promotii care au expirat pe site – ele creeaza o proasta impresie vizitatorului acesta renuntand la a mai vizita site-ul deoarece un site “neingrijit” inseamna un site ce nu va aduce nimic nou pe viitor. Un redesign inseamna atentie acordata site-ului firmei si deci si imaginii firmei.

4. Un site reprezinta doar rezultatul final dintr-un intreg cod

Pentru a face un site, care funcţioneaza pe toate browserele, care este optimizat pentru seo.html”>motoarele de cautare, care indeplineste standardele XHTML si CSS actuale si toate celelalte lucruri necesare pentru ca un el sa aiba succes, ca sa nu mai vorbim sa aiba un design bun si sa fie usor de navigat  este nevoie de multe ore de munca. Un site reprezinta doar rezultatul final dintr-un intreg cod. Daca vizualizati sursa (Right Click -> View Page Source) aceasta este doar HTML-ul paginii curente, alaturi de care exista  atasate fisiere CSS (pentru stil) si JavaScript-uri (pentru dinamica).