Mai mult decat design adaptabil

Daca examinam aspectele de mai sus, putem concluziona ca un design cu adevarat reactiv implica mai mult decat folosirea interogarilor despre mediu si grile flexibile. In lumea reala a dezvoltarii web, cei care vorbesc despre tehnici reactive se refera de obicei la layout adaptabil: caile prin care se poate permite caracteristicilor vizuale ale unui site sau aplicatii sa se modifice in functie de dimensiunea ecranului utilizatorului. Designerul Paul Rand a spus odata:”Designul este arta de a combina forma si continutul”. Aceasta inseamna ca, in sine, un layout nu este design. Layoutul este forma si nu vom ajunge la un design cu adevarat reactiv fara a trata la randul sau si continutul. Articolul lui Marcotte ne arta ca layouturile adaptabile sunt fructul cel mai accesibil al designului reactiv, insa in nici un moment nu a intentionat ca noi sa ne oprim acolo. Totusi, pentru moment fiecare mica deplasare in directia buna este pozitiva. Asadar, sa runcam o privire asupra layouturilor adaptabile – si asupra unor tehnici pe care le putem folosi acum si a unora care s-ar putea sa devina disponibile in viitor

Layouturi flexibile

O grila flexibila conteaza mult la crearea unui layout adaptabil. Prin folosirea procentelor si a em-urilor in locul pixelilor, mai ales pentru latimile de coloana, margini si alte asemenea, putem crea layouturi care se intind si se contracta destul de mult pana incep sa esueze la ambele capete ale spectrului. Locurile in care un layout da gres sau este nereusit reprezinta punctele de rupere. In aceste puncte de rupere ne pot ajuta interogarile despre mediu, ca sa ne permita sa modificam in acele puncte aspecte ale layoutului prin aplicarea unor reguli CSS diferite. Ethan Marcotte explica foarte clar o metoda de a crea o grila flexibila in articolul sau original; cititorul interesat ar trebui sa-l studieze bine.

Interogari despre mediu

Interogarile despre mediu ne permit sa folosim CSS sau JavaScript pentru a detecta anumite caracteristici ale mediului de afisare. Cele care sunt cele mai utile in acest moment sunt latimea, inaltimea, orientarea si raportul de aspect. Latimea si inaltimea sunt cele mai suportate. Exista inca noua alte caracteristici, inclusiv promitatoarele resolution, device-width si device-height, insa acestea nu sunt asa de mare ajutor in acest moment, iar device-width si device-height nici macar nu sunt prea precise. Pentru a compensa, interogarile despre mediu pot fi combinate cu meta viewport.

Meta viewport

Caracteristicile device-width si device-height nu prea ne sunt de ajutor acum. Principalul motiv pentru aceasta situatie este ca device-width nu este neaparat egala cu latimea layoutului. De exemplu, un aparat are o latime de 480 de pixeli, iar layoutul prezentat in viewport are aproape 1000 de pixeli, pagina fiind apoi micsoarata pentru a afisa o intregime. Aceasta situatie a fost intentionat lasata asa pentru a permite si layouturilor neadaptabile sa incapa in browserul mobil. Ne intereseaza mai mult latimea viewportului pentru ca trebuie sa gasim o modalitate de a stabili latimea layoutului la aceasta atunci cand testam conditiile de afisare prin intermediul interogarilor despre mediu. Pentru a face acest lucru putem folosi un element META in codul HTML:

<meta name=”viewport” content=”width=device-width intial-scale=1”>

Secventa spune aparatului “fa latimea viewportului egala cu latimea aparatului”. Putem trece la folosirea interogarilor despre mediul de prezentare:

@media screen and (max-width: 320px) {

div{

width: 80%;

}

}

Parametrul “initial-scale” stabileste in acest caz nivelul de zoom la 1(100%), lasand in acelasi timp posibilitati de marire a paginii atunci cand este necesar. Putem fi aproape sigur ca acest stil va fi aplicat browserelor in care viewportul layoutului(ceea ce ne intereseaza) nu este mai mare de 320 de pixeli. Articolul lui PPK despre combinarea META Viewport cu interogarile despre mediu este esential pentru oricine este interesant in motivatiile aceste metode.

Imagini si solutii pe server

Determinarea imaginilor sa se adapteze odata cu layoutul este o provocare. Dezvoltatori talentati s-au gandit mult la aceasta problema(de recomandat Scott Jehl de la Filament Group). O metoda este atasarea mai multor dimensiuni ale aceleiasi imagini:

<img src=”small.jpg?full=large.jpg”>

Un script si un fisier .htaccess pe server sunt indeajuns pentru a transmite imaginea adecvata marimii respective pe ecran. Uneori este necesara detectia disopzitivului si nu poate fi facut totul folosind tehnologia de pe parte de client. Multi dezvoltatori se bazeaza pe colectiile de profiluri de dispozivite precum DeviceAtlas si WURFL.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>