Posts tagged accesibilitate

Orice font in web design – sIFR

Ca dezvoltator web sigur ai auzit de sIFR. De ce este atat de cunoscut ? Noi raspundem la cateva din intrebarile pe care ti le-ai pus in legatura cu aceasta “tehnologie”.

Ce este sIFR ?

sIFR (Scalabile Inman Flash Replacement) este o tehnologie care permite utilizarea oricarui font in web design, site-ul fiind in continuare SEO-friendly. sIFR este o combinatie de Flash, JavaScript si bineinteles putina imaginatie din partea designer-ului care doreste sa schimbe putin aspectul unui site folosind arta tipografiei.

Modul de functionare este extrem de simplu: sIFR cauta anumite elemente in pagină pentru le înlocui cu Flash rezultand, acelaşi text, dar cu alt font. Din experienta noastra si a altora care folosesc sIFR am ajuns la urmatoarele concluzii:

Exista cateva dezavantaje importante

  • Deşi accesibilitate este conservata cu ajutorul acestei tehnici, sIFR afectează considerabil timpul de incarcare al paginii.
  • Se foloseste pentru inlocuirea unor pasaje scurte, de obicei titluri.

Avantajele sunt destul de evidente

  • Orice font poate fi utilizat
  • Nu mai este nevoie de crearea imaginilor pentru substituirea titlurilor in cazul in care acestea trebuie sa aiba un font care nu este web-safe
  • Un design mai atragator
  • SEO-friendly – la indexare zonele inlocuite prin sIFR contin textul propriu-zis, asadar sunt indexate

Cum functioneaza sIFR

  • In cazul în care browser-ul nu are instalat plugin-ul pentru Flash, pagina este afisata normal.
  • JavaScript parcurge documentul şi găseşte toate elementele care urmează sa fie înlocuite.
  • Odată găsit, un element este înlocuit cu Flash de aceleaşi dimensiuni.Pin intermediul JavaScript-ului este preluat text-ul , apoi este inlocuit cu un element Flash ce contine un text de dimensiune foarte mare initial (96pt) care este redus pana se incadreaza in dimensiunile textului initial.

Prin urmare sIFR merita folosit avand in vedere ca nu exista o alta metoda la fel de buna, insa doar pentru titluri ori pasaje scurte, nu pentru continutul unui articol.

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.