Share
Web-ul, așa cum îl știm, se schimbă. În trecut, designerii și dezvoltatorii trebuiau să se preocupe doar de un mediu: ecranul computerului. În ultimii ani, însă, au apărut o mulțime de dispozitive complet dotate cu internet, cu scoruri diferite de forme și capabilități, ceea ce înseamnă că acum trebuie să proiectăm site-urile noastre pentru a se încadra confortabil în cât mai multe dimensiuni, forme și rezoluții de ecran, după cum puteți eventual gândiți-vă.
Abordarea veche a lățimii fixe nu este în discuție acum. Deci ce facem? Răspunsul, dragul meu cititor, constă în Responsive Web Design.
Ideea de Responsive Web Design, un termen inventat de Ethan Marcotte, este că site-urile noastre ar trebui să-și adapteze aspectul și designul pentru a se potrivi oricăror dispozitive care aleg să le afișeze.
În cartea sa, în mod corespunzător intitulat "Design Web Responsabil", el prezintă cele trei părți într-un site receptiv:
Deoarece acest articol este destinat designerilor nu dezvoltatorii, și pentru că nu vreau să pășesc pe degetele lui Ethan, nu voi discuta aceste trei lucruri.
Cu toate acestea, este important pentru dvs., ca designer, să înțelegeți conceptele de bază ale RWD, pentru a crea mai bine site-urile web care vor deveni receptive atunci când sunt codate. Vă recomandăm foarte mult să citiți aceste trei articole de Ethan: Griduri Fluide, Imagini Fluide și Responsabil Web Design.
Dacă citiți doar unul dintre acestea, faceți-l ultima, scrisă în luna mai a anului trecut. Citirea a schimbat felul în care eu, și bănuiesc că mulți alții ca mine, vedeți internetul. Activitatea lui Ethan nu este deloc genială și cred că oricine trăiește de pe internet ar trebui să citească acest articol.
Dacă ești un designer cine numai design, ceea ce înseamnă că nu sunteți responsabil pentru codurile HTML și CSS ale site-ului pe care lucrați, multe dintre acestea ar putea să vă depășească capul. Chiar vă puteți întreba de ce trebuie să știți exact despre Responsive Web Design.
Intotdeauna am crezut ca cineva care proiecteaza un site web ar trebui sa fie cel care ulterior va respira viata, prin HTML si CSS. Înțeleg că în mod evident acest lucru nu este cazul pentru o mulțime de proiecte și aș respecta abilitățile unei persoane dacă ar alege numai pune împreună designul sau numai scrie codul.
Este important să înțelegeți că un site web nu este unul sau celălalt, este o căsătorie de design și de cod, fiecare depinzând unul de celălalt pentru a crea o experiență perfectă. Pentru a învăța cu adevărat cum să proiectezi un site web, tu trebuie sa înțelegeți modul în care proiectul va fi implementat mai târziu în cod, chiar dacă este doar o înțelegere rudimentară.
Îți reamintesc din nou: acest articol este pentru designeri. În paragrafele de mai jos, voi discuta exact cum, în calitate de designeri, ar trebui să schimbăm modul în care proiectăm pentru a se potrivi mai bine procesului de web design receptiv.
Chiar dacă nu sunteți de proiectare pentru Responsive Web Design, ar trebui să fie proiectarea cu un fel de sistem de rețea. În calitate de designer modern, educat, ar trebui să aveți deja o înțelegere a ceea ce înseamnă să utilizați o rețea, așa că voi sări peste biții.
Unul dintre pilonii Responsiv Web Design este The Fluid Grid. În esență, aceasta înseamnă că grila dvs., care a fost măsurată în mod tradițional în pixeli, ar trebui acum gândită ca procent din lățimea totală a paginii. Lățimea reală calculată a fiecărei coloane într-un site web receptiv se modifică de fiecare dată când fereastra browserului modifică dimensiunea și nu poate fi garantată ca fiind aceeași pentru diferite dispozitive.
De aceea tu trebuie sa utilizați o grilă atunci când proiectați pentru Responsive Web Design. Este o necesitate, nu o zestre. Tu nu poti a crea un site web receptiv fără un design bazat pe rețea; este pur și simplu în afara întrebării, nu ar funcționa.
Știind că designul dvs. nu va avea exact aceeași valoare a pixelilor pentru fiecare coloană, ca și în designul dvs. comp, există câteva alte măsuri pe care ar trebui să le luați pentru a vă asigura că rețeaua dvs. scară fără probleme.
Încercați să nu utilizați granițele texturate în coloanele dvs., cum ar fi:
Aceste tipuri de lucruri ar fi dificil pentru dezvoltatorii dvs. de a utiliza într-un site web receptiv, deoarece acestea nu ar scara bine orizontal. Dacă faceți coloana mai largă sau mai subțire, granițele texturate se vor lupta.
Gradientele orizontale sunt un alt mod de a nu merge.
Din același motiv ca și punctul anterior, și anume incapacitatea de a scala orizontal, nu faceți acest lucru. Da, este posibil cu proprietăți noi CSS3, dar dacă vizați o audiență de utilizatori mai puțin avansați în tehnologie, mulți nu vor avea un browser compatibil, iar efectul va fi inutil.
Dacă aveți un fundal texturat într-o coloană, asigurați-vă că este unul care poate fi umezit ușor. Do: utilizați cereale, grunge, orice. Nu-i: utilizați o fotografie, o ilustrație sau o imagine altfel imposibil de realizat.
Dacă vă schimbați designul pe orizontală pentru a acomoda ecranele mai mici, va veni un punct în care un text de pe pagină va fi pur și simplu prea mare. Sigur că titlul de 100pt arată excelent în psd, dar pur și simplu nu va funcționa pe un ecran iPhone, de exemplu: va fi prea mare și textul va trebui să se înfășoare pe mai multe linii, reducând impactul deciziei inițiale.
Aici dezvoltatorul, folosind interogări media CSS, va ajusta dimensiunea fontului pentru a se potrivi mai bine ecranului. Aceasta este o decizie de proiectare, deci ca un designer, ar trebui să aveți un cuvânt de spus în ea, corect?
Pentru a ajuta dezvoltatorul, precum și pentru a vă menține integritatea designului original, trebuie să decideți ce text pe pagină să rămână constant, adică să rămână la aceeași dimensiune la orice lățime a ecranului și ce text trebuie ajustat. Un exemplu bun al textului formatat în mod constant ar fi copia corporală sau anteturile mici care acționează ca o versiune mai mare a copiei corpului.
De asemenea, trebuie să decideți cu privire la textul care va fi ajustat, Cum ar trebui să fie ajustată.
Iată-l gresit mod de a face acest lucru: X ar trebui să fie întotdeauna 20pt mai mare decât y. Nu numai că această gândire este un mare hassle pentru dezvoltator, dar nu prea are sens în panza receptivă, pentru că esti factorant într-o constantă, o valoare care nu se va schimba niciodată indiferent de dimensiunea ecranului. Pentru RWD, aceasta este o greșeală uriașă, deoarece nu ține cont în mod corespunzător de fluiditatea inerentă a web-ului.
Iată-l dreapta mod de a face acest lucru: X ar trebui să fie întotdeauna de 1,5 ori mai mare decât y. În acest fel, se acceptă că singura Adevărat ceea ce înseamnă că un design iese din font-size este cât de mare sau mic textul este comparat cu celălalt text din pagină. O valoare constantă, ca 24pt sau 67pt, nu are sens.
Odată ce ați realizat toate acestea, asigurați-vă că ați transmis aceste informații dezvoltatorului. Acesta este singurul mod de a vă asigura că deciziile dvs., ca designer, sunt afișate în pagina web actuală pe care spectatorii o vor încărca în browser și se vor bucura.
Ultima piesă din puzzle-ul Responsive este Media Queries. În cazul în care nu sunteți familiarizați, Media Queries reprezintă o modalitate de a aplica reguli CSS pe pagina bazată pe (în scopurile noastre) dimensiunea browserului de afișare.
Puterea incredibila a acestui lucru este ca puteti sa ajustati si chiar sa re-proiectati intregul layout al site-ului dumneavoastra pentru a se potrivi unui browser mai mic sau mai mare decat cel pentru care ati proiectat initial.
Pentru a proiecta cel mai bine pentru această eventualitate, ar trebui să începeți să vă gândiți la diferitele părți ale designului dvs., cum ar fi conținutul principal, bara laterală, antetul și navigația, nu ca niște piese dintr-un puzzle care trebuie să rămână în același loc unul față de celălalt , dar ca module care pot fi reorganizate, redimensionate și amestecate fără ca semnificația lor originală să se piardă.
Iată un exemplu: imaginați-vă că proiectați un site care arată astfel (sunt sigur că ați mai lucrat cu modele asemănătoare înainte):
Partea crucială a acestui exemplu este identificarea grupurilor de elemente care trebuie să rămână împreună orice aspect. De exemplu, toate legăturile de navigare trebuie să rămână împreună, deoarece altfel nu ar avea sens. Acesta este un modul, o secțiune de informații care poate fi mutată între celelalte module, fără a-și pierde semnificația.
Construindu-vă site-ul cu aceste module, vă este ușor să vă imaginați cum se va adapta aspectul pentru diferite dimensiuni ale ferestrei de vizualizare. De exemplu:
Aflați cum, deși modulele se află în locuri diferite, acestea afișează în continuare aceleași informații ca și originalul, într-o formă mai ușor digerată de dispozitive mobile sau de alte browsere de dimensiuni diferite.
Nu este nimic ce va trebui să vă schimbați în aspectul dvs. pentru a face această modularitate să funcționeze, este doar o modalitate diferită de a privi aceeași imagine. Sperăm însă că această nouă perspectivă vă va ajuta să luați decizii mai informate pe măsură ce lucrați la viitoarele proiecte de design.
La fel ca pe internet, Responsive Web Design este evoluționist, nu revoluționar. Este pur și simplu următorul pas natural pentru web, nu o regândire completă a tuturor lucrurilor. Ca designeri, trebuie să ne adaptăm în permanență fluxurile de lucru, iar acest moment nu este diferit.
Responsabil Web Design este viitorul sau, cel puțin, va fi atunci când dezvoltatorii și designerii îl vor îmbrățișa. În calitate de web designeri și dezvoltatori, suntem singurii care au puterea de a vedea acest nou standard minunat. Faceți-o să se întâmple, pentru dvs., pentru mine, pentru internetul în general!
Accentsconagua