Web Design responsiv

Web Design responsiv

Articolul in engleza provine de la http://www.alistapart.com/articles/responsive-web-design/

Thanks to : annunci gratuiti

Web Design responsiv

de Ethan Marcotte


„Controlul pe care designerii îl cunosc în mediul de printare si îl doresc în mediul web este adesea o functie a limitării paginii printate. Ar trebui să acceptăm faptul că web-ul nu are aceleasi constrângeri  si design pentru această flexibilitate. Dar mai întâi trebuie să acceptăm fluxul si refluxul lucrurilor.”

John Allsopp, “A Dao of Web Design”


Arhitectul englez Christopher Wren glumea odată că domeniul său “are ca scop eternitatea” si există ceva atrăgător pentru această formulă: Spre deosebire de web, unde adesea se simte că scopul său este să ofere ceva pentru săptămâna viitoare, arhitectura este o disciplină foarte mult definită prin permanenta sa. Fundatia unei clădiri îsi defineste amprenta care, la rândul său, defineste cadrul acesteia ce modelează fatada. Fiecare fază a procesului arhitectural este mai imuabilă, mai neschimbabilă decât ultima. Decizii creatoare modelează literal un spatiu fizic definind calea prin care oamenii trec prin limitele sale timp de decenii sau chiar secole.
Cu toate acestea, lucrul pe web este o chestiune total diferită. Munca noastă este definită prin efemeritatea ei, de multe ori rafinată sau înlocuită într-un an sau doi. Lătimile inconsistente ale ferestrei, rezolutiile, preferintele precum si fonturile instalate ale utilizatorilor nostri sunt doar câteva dintre lucrurile pe care le negociem când publicăm munca noastră si, de-a lungul anilor, devenim adepti ale acestor principii.
Dar peisajul se schimbă, probabil mult mai repede decât ne-am putea dori. Navigarea mobilă se asteaptă să o depăsească pe cea a desktop-urilor în următorii trei sau cinci ani. Două din trei console populare pentru jocurile video au browsere web (iar unul dintre ele este chiar excelent). Realizăm design-uri pentru mouse-uri si tastaturi, pentru tastaturi T9, pentru controlere de jocuri, pentru interfete tactile. În scurt timp ne vom confrunta cu un număr mult mai mare de device-uri, moduri de imput si browsere decât până acum.
În ultimii ani am întâlnit multe companii care cer “un site pentru iPhone” ca parte a proiectului. Este o expresie interesantă: la valoarea nominală, desigur,  se vorbeste despre valoarea webkit-ului mobil, ca browser, precum si ca un toolkit, pentru a gândi dincolo de desktop. Dar ca designeri cred că ne simtim confortabil cu aceste cerinte, deoarece ne permit să compartimentăm problemele din fata noastră. Putem împărti experienta mobilă în subdomenii separate, spatii distincte si separate de “site-ul non iPhone”. Dar ce urmează? Un website iPad? Un website N90? Putem într-adevăr să ne angajăm să sprijinim fiecare agent utilizator nou cu experienta sa? De la un anumit punct, acesta începe să se simtă inutil. Dar cum putem noi - si designerii nostri – să ne adaptăm? 


 O fundatie flexibilă


Să considerăm un design ca exemplu. Am construit o pagină simplă pentru un magazin ipotetic; este o pagină cu aspect simplu, pe două coloane, cu câteva imagini flexibile presărate pe tot parcursul său. Ca un mai vechi sustinător al aspectelor non-fixe, am simtit de ceva timp că ar fi mai multe “dovezi viitoare” doar datorită aspectului necunoscut. si într-o anumită măsură este adevărat: modelele flexibile nu fac presupuneri cu privire la lătimea ferestrei browserului si se adaptează frumos la device-urile care au mod portrait si landscape.

Imaginile mari sunt imense. Aspectul nostru, desi este flexibil, nu răspunde bine la schimbările de rezolutie sau de mărime a ferestrei


Dar niciun design, fix sau fluid, nu se redimensionează perfect dincolo de limitele pentru care a fost destinat initial. Design-ul din exemplul dat se redimensionează perfect pe masură ce se modifică dimensiunile ferestrei browserului, dar anumite nepotriviri apar imediat la rezolutii mai mici. Când sunt privite la o fereastră mai mică de 800 x 600, ilustratia din spatele logo-ului devine rapid decupată, marginea textului se poate termina necorespunzător, iar imaginile de jos pot deveni prea compacte pentru a fi lizibile. si nu doar spectrul extrem al rezolutiilor mici este afectat: atunci când se vizualizează pe un ecran lat, imaginile cresc rapid până la dimensiuni incomode, ce pot aglomera contextul.
Pe scurt, design-ul nostru merge destul de bine în contextul desktop-ului, pentru care a fost realizat, dar nu este optimizat pentru a-l extinde mai mult de atât.


Devenind responsiv


Recent, o disciplină emergentă numită “arhitectură responsivă” a început să se întrebe cum spatiile fizice răspund la prezenta oamenilor care trec prin ele. Printr-o combinatie de robotică integrată, materiale de tractiune, arhitectii experimentează cu artă instalatii si structuri ale peretelui care cotesc, se flexează si se extind pe măsură ce multimile se apropie de ele. Senzorii de miscare pot fi asociati cu sisteme de control ce reglează temperatura încăperilor si lumina ambientală pe măsură ce acestea se umplu cu oameni. Companiile au produs deja “tehnologia geamurilor inteligente”, care pot deveni automat opace atunci când ocupantii camerei ajung la o anumită densitate, oferindu-le o intimitate suplimentară.
În cartea lor Interactive Architecture, Michael Fox si Miles Kemp descriu această abordare mai adaptabilă ca “un sistem cu multiple bucle, în care se intră într-o conversatie; un schimb constructiv continuu de informatii.” După părerea mea există o distinctie puternică, dar totusi subtilă: decât să creezi spatii neschimbabile ce definesc o experientă particulară, ei sugerează că mediul si ocupantii pot si ar trebui să interactioneze.
Acesta este modul nostru de a merge înainte. Decât sa adaptăm modelele la un număr tot mai mare de dispozitive web, mai degrabă putem să le tratăm ca fete ale aceleiasi experiente. Putem realiza design-ul pentru o vizualizare optimă, dar si pentru a încorpora tehnologii bazate pe standarde în modelele noastre, pentru a face totul nu doar mai flexibil, dar si mai adaptat la mediile întâlnite. Pe scurt, avem nevoie de practicarea unui web design responsiv. Dar cum?


Faceti cunostintă cu media query-urile


Încă de pe vremea CSS 2.1, stilul nostru s-a bucurat într-o oarecare măsură de constientizarea device-ului prin diferite tipuri de media. Daca ati scris vreodată un print style sheet, atunci sunteti familiarizati cu conceptul:
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />


În speranta că realizăm mai mult decât pagini perfect formatate pentru printare, specificatiile CSS ne furnizează o multime de medii acceptabile, fiecare adaptat pentru o anumită clasă de dispozitive web. Dar, majoritatea browserelor si dispozitivelor nu îmbrătisează cu adevărat toate specificatiile, lăsând multe tipuri de media imperfect implementate, sau chiar ignorate cu totul.
Din fericire, W3C a creat media query-urile ca parte a specificatiilor CSS3, îmbunătătind, conform promisiunii, tipurile de media. Un media query ne permite să realizăm nu doar clase pentru câteva dispozitive, dar si să inspectăm caracteristicile fizice ale dispozitivului pentru care realizăm munca. De exemplu, ca urmare a cresterii recente a Webkit-urilor mobile, media query-urile au devenit o tehnică foarte populară de a furniza style sheet-uri adaptate perfect pentru iPhone sau telefoane Android. Pentru a face acest lucru am putea include un query într-un atribut al style sheet-ului:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
Querry-ul contine două componente:

  1. Un tip media (ecran), si
  2. Query-ul  dintre paranteze, ce contine o caracteristică media (lătimea maximă a dispozitivului), este urmat de o valoare tintă (480px).

De fapt noi întrebăm dispozitivul dacă rezolutia sa orizontală (lătimea maximă a dispozitivului) este egală sau mai mică decât 480px. Dacă trece testul – adică dacă putem vedea pagina pe un ecran mic, cum ar fi cel de iPhone – atunci dispozitivul va încărca fisierul shetland.css. Altfel, link-ul este ignorat per ansamblu.     
Designerii au experimentat cu layout-uri “resolution aware”, majoritatea lor bazându-se pe solutii JS, cum ar fi scriptul excelent al lui Cameron Adam. Dar specificatiile media query-urilor oferă o serie de caracteristici dincolo de rezolutiile ecranelor, extinzând cu mult domeniul de aplicare peste ceea ce putem noi testa cu query-urile noastre. Ba mai mult, puteti testa mai multe proprietăti si valorile lor, printr-un singur query, prin înlăntuirea acestora împreuna cu cuvântul cheie:
<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />
Mai mult, nu există nicio limită în a încorpora media query-uri în link-urile noastre. Le putem include în CSS-ul nostru, sau ca parte a regulii @media:
@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}
Sau ca parte a unei directive @import:
@import url("shetland.css") screen and (max-device-width: 480px);
Dar, în fiecare caz, efectul este acelasi: dacă dispozitivul trece testul prezentat de către media query-ul nostru, atunci se aplică CSS-ul relevant. Media query-urile sunt pe scurt comentarii conditionale pentru ceilalti. Decât să vizăm o anumită versiune a unui browser, mai degrabă ne putem corecta chirurgical problemele în layout, astfel încât să se potrivească si pe o altă rezolutie decât cea ideală.


Adaptează, răspunde si depăseste


Să ne îndreptăm atentia către baza paginii noastre. În layout-ul lor default, CSS-ul relevant arată cam asa:
.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}


Am omis o serie de proprietăti tipografice ca să ne concentrăm pe layout: fiecare figură este redimensionată la o treime din coloana care o contine, cu marginea de pe dreapta redusă la zero, pentru cele două poze de la finalul fiecărui rând (li#f-mycroft, li#f-winter). si acest lucru merge destul de bine, până când viewport-ul se vede fie mai mic, fie mai lat decât design-ul nostru initial. Cu media query-uri putem aplica spotfix-uri specifice rezolutiei, adaptând design-ul nostru pentru a răspunde mai bine schimbărilor dimensiunilor ecranului.


Mai întâi de toate să linearizăm pagina noastră, odată ce viewport-ul scade mai mult de o anumită rezolutie, sa zicem 600px. Astfel, în partea de jos a style sheet-ului, să creăm un bloc @media, cam asa:
@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}
Dacă vedem pagina noastră actualizată la un browser modern pentru desktop si reducem dimensiunea ferestrei până la mai putin de 600px, media query-ul va dezactiva elementele majore ale designului, stivuind fiecare bloc unul deasupra celuilalt în cursul documentului. Astfel, design-ul nostru miniaturizat, se conturează frumos, dar imaginile nu se redimensionează atât de inteligent. Dacă introducem un alt media query, putem modifica aspectul lor în consecintă:
@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }

  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

Figurile noastre îsi pot schimba responsiv aspectul, pentru a se potrivi mai bine display-urilor de mici dimensiuni.


Nu deranjează procentele inestetice. Pur si simplu recalculăm lătimile gridului fluid pentru a tine cont de aspectul nou liniarizat. Pe scurt, trecem de la un aspect pe trei coloane la unul pe două coloane când dispozitivul de vizualizare scade sub 400px, făcând imaginile mai proeminente.
Putem folosi aceeasi abordare si pentru ecrane late. Pentru rezolutii mai mari, putem folosi o metodă în asa fel încât să punem imaginile în acelasi rând:
@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}
Acum imaginile noastre arată frumos la ambele extremităti ale spectrului rezolutiilor, optimizându-si aspectul atât la schimbările lătimii ferestrei, cât si la schimbările rezolutiilor dispozitivelor.

Specificând o lătime minimă mai mare într-un nou media querry putem aranja imaginile noastre pe un singur rând.


Dar acesta este doar începutul. Lucrând cu media query-ul pe care l-am integrat în CSS-ul nostru, putem modifica mult mai mult decât plasarea câtorva imagini: putem introduce noi aspecte adaptate pentru fiecare gamă de rezolutii, cum ar fi să facem o navigare mai bună pe un ecran lat sau să le repozitionăm deasupra logo-ului pe ecranele mai mici.

Prin design-ul responsiv, putem nu doar să liniarizăm continutul pe dispozitive mai mici, dar să optimizăm si aspectul pentru diferite dimensiuni ale ecranului.
Însă un design responsiv nu se limitează doar la schimbările de aspect. Media query-urile ne permit să realizăm un reglaj fin incredibil de precis pe măsură ce paginile noastre se re-aranjează singure: putem creste zona tintă pe link-uri pentru ecranele mici, aplicând mai bine legea lui Fitt pentru ecranele tactile; putem afisa sau ascunde selectiv anumite elemente, astfel încât să îmbunătătim navigarea prin pagină; putem folosi chiar o formatare graduală, responsivă a textului nostru, optimizând experienta citirii pentru diferite ecrane.


Câteva date tehnice


Trebuie remarcat faptul că media query-urile se bucură de un larg suport în rândul browserelor moderne. Browserele pentru desktop, cum ar fi Safari 3+, Chrome sau Opera7+ toate analizează media query-urile, la fel cum fac si browserele mobile cum ar fi Opera Mini sau WebKitl-ul mobil. Bineînteles că versiunile mai vechi ale acestor browsere nu suportă media query. si, în timp ce Microsoft s-a angajat să ofere suport media query în IE9, Internet Explorer-ul curent nu oferă o implementare nativă.
Totusi, dacă sunteti interesati de implementarea suportului browserelor pentru media query există un JavaScript cu această tentă:

  1. Un plugin jQuery din 2007 oferă într-un fel suport limitat pentru media query, implementând doar proprietătile de lătime maximă si minimă atunci când sunt atasate separat pentru fiecare element.
  2. Mai recent, a fost lansat css3-mediaqueries.js, o librărie care permite “să facă IE5+, Firefox1+ si Safari 2 să interpreteze transparent, să testeze si să aplice CSS3 Media Queries”, atunci când este inclusă într-un bloc @media. Am găsit versiunea 1.0 foarte robustă, si am de gând să urmăresc personal dezvoltarea acesteia.

Dar dacă utilizarea JavaScript nu vă atrage, este de înteles. Însă acest lucru ne întăreste posibilitătile de a construi aspectul cu ajutorul unui grid flexibil, asigurându-ne că design-ul nostru se bucură într-o oarecare măsură de flexibilitatea media query chiar si în browserele sau dispozitivele ce nu stiu de asa ceva.


Calea de urmat


Gridurile fluide, imaginile flexibile si media querry-urile sunt cele trei ingrediente tehnice pentru un web design responsiv, dar necesită si un alt tip de gândire. Decât să închidem continutul nostru în experiente separate dispozitiv-specifice, mai bine putem folosi media query-uri pentru a ne îmbunătăti progresiv munca, pentru diferite contexte de vizualizare; acest lucru nu înseamnă că nu există o serie de unelte pentru site-uri separate, orientate către anumite dispozitive; de exemplu, dacă obiectivele utilizatorului pentru site-ul nostru mobil sunt mai limitate fată de echivalentul său desktop, atunci servirea de continut diferit pentru fiecare versiune poate fi cea mai bună abordare.
Dar acest mod de a gândi designul nu trebuie să fie văzut ca default. Acum, mai mult ca oricând, munca noastră de designeri este menită să fie privită de-a lungul unui sir de experiente. Web designul responsiv ne oferă o cale de urmat, permitându-ne în final să realizăm “designul pentru fluxul si refluxul lucrurilor”.


 

 

A little about us

We're not just technologists, we work in partnership with our clients and resellers offering expert advice across strategy, planning, creative design, and marketing. Our product range has been developed to work hand-in-hand with a clients existing business and can be delivered on any level that our customers choose.