Conţinut
- Proiectare pentru necunoscut
- O abordare pragmatică a proiectării
- Devenind aspect agnostic
- Codificare progresivă
- Scufundarea în marjă
Se pare că toată lumea vorbește despre designul web receptiv în aceste zile și cu un motiv întemeiat; pe măsură ce numărul de dispozitive compatibile cu web continuă să crească - fiecare cu funcții și funcții diferite - nu mai este logic să construiți site-uri web cu lățime fixă.
Adevărul este că nu a fost niciodată. Cu toate acestea, până în prezent s-a considerat cea mai bună practică pentru a proiecta experiențe care făceau o serie de ipoteze, fie că acestea se referă la rezoluția ecranului, la lățimea de bandă sau la metoda de introducere. Dacă ați proiectat vreodată un site web cu o lățime de 960 px, doar pentru a-l vizualiza pe netbook-ul cu ecran mic al unui prieten (și da, scriu aici din experiența dureroasă), veți înțelege de ce nu a fost o abordare deosebit de inteligentă. Acum, cu smartphone-uri și tablete aruncate în amestec, este clar că metodele noastre tradiționale nu mai sunt adecvate scopului.
Din fericire, apariția interogărilor media CSS și recunoașterea tot mai mare a faptului că web-ul este un mediu în sine, înseamnă că începem să îmbrățișăm adevărata natură a platformei, acceptând că universalitatea sa este un punct forte, nu o slăbiciune.
În următoarele cinci zile, vă voi ghida printr-o tehnică care recunoaște acest fapt: design web receptiv. Dezvoltat de Ethan Marcotte, acesta combină aspectele fluide, imaginile flexibile și interogările media pentru a ne ajuta să construim site-uri care se adaptează cu grație oricărui mediu pe care îl întâlnesc.
Voi demonstra această abordare arătându-vă cum să construiți o galerie media simplă. În exemplele mele, voi crea un mic site web pentru a documenta o călătorie rutieră recentă pe care am făcut-o în Statele Unite, dar nu ezitați să personalizați codul și designul pentru a se potrivi propriilor dvs. nevoi.
Proiectare pentru necunoscut
O mare parte din acest tutorial se va concentra în jurul aspectului de dezvoltare al designului receptiv. Dar, înainte de a căuta în orice cod, să luăm o clipă să ne gândim cum am putea proiecta un site web care ar putea avea, în mod imaginabil, aspecte infinite.
Acum, am noroc că pot proiecta interfețe și dezvoltați codul frontend care le face reale. Desigur, aceasta nu este o abilitate unică - dacă lucrezi pentru tine, probabil că ești același. Dar este cu siguranță avantajos să înțelegem modul în care conținutul se poate adapta și reface atunci când se elaborează modele fluide.
De asemenea, lucrez ca parte a unei echipe mai mari, unde rolul meu este mai specializat. Într-un astfel de mediu, designerul vizual se poate concentra exclusiv pe traducerea wireframe-urilor în compoziții atractive, captivante (semnate, perfecte pentru pixeli). Și nu este neobișnuit ca dezvoltatorii să fie localizați separat, traducând aceste aspecte într-un markup și CSS slab și eficient.
Cu toate acestea, astfel de fluxuri de lucru liniare și segregate se descompun rapid odată ce începem să evaluăm modul în care proiectele se vor adapta la medii diferite. La fel ca orice alt instrument sau tehnologie nouă, ar trebui să luăm în considerare și modalități de colaborare mai agile și mai agile. Multe dintre cele mai dificile probleme întâmpinate la proiectarea site-urilor web receptive pot fi rezolvate pur și simplu prin conversație, experimentare și iterație.
O abordare pragmatică a proiectării
Asta nu înseamnă că nu este posibil ca designerii să se gândească la modul în care un design poate funcționa în afara limitelor unui anumit dispozitiv.
La Clearleft, inițiam proiectarea vizuală din perspectiva desktopului. Începem prin a defini un limbaj de proiectare general și o estetică vizuală, bazându-ne deseori pe explorări inițiale în jurul unui conținut de bază. De exemplu, dacă proiectăm un site alimentar, vom începe cu o pagină de rețete; pentru un site de știri, o pagină de poveste.
Nu numai că este o pagină importantă a site-ului, dar probabil include un conținut suficient de structurat pentru ca noi să construim o paletă tipografică. De asemenea, ne vom gândi la modul în care aspectul se poate adapta - chiar dacă este doar în mintea noastră în această etapă.
O modalitate utilă de a testa testul unui design este de a lua o astfel de pagină și de a o adapta pentru un ecran mai îngust (~ 320px lățime). Probabil că veți descoperi că unele aspecte ale designului vor trebui regândite pentru ca acestea să funcționeze la această lățime. Aici sunt cateva exemple:
- Tipografie: Titlurile mari pot funcționa bine pe aspecte mai largi, dar pe ecrane mai mici pot ocupa mult spațiu vertical și, prin urmare, necesită derulare suplimentară. Pe măsură ce lungimile liniei se modifică, ar trebui să luați în considerare și înălțimile liniei și alte tratamente tipografice.
- Link-uri: Cum va funcționa designul dvs. pe dispozitivele cu ecran tactil? Deși nu avem încă o modalitate ușoară de a le detecta (ceea ce înseamnă că ar trebui să ținem cont de toate aspectele proiectării noastre), proiectarea pentru un ecran mai îngust ne poate oferi ocazia să ne gândim la zonele țintă pentru linkuri și alte elemente interactive. . Liniile directoare iOS recomandă ca acestea să fie de cel puțin 44 pixeli / puncte pătrate, ceea ce este o cifră bună de urmărit.
- Navigare: Aceasta va fi probabil cea mai incomodă componentă a oricărui design receptiv, mai ales dacă site-ul dvs. are multe secțiuni și o ierarhie profundă. Brad Frost a scris un rezumat al unor abordări diferite ale navigației care sunt luate în considerare în prezent.
- Conținut superflu: Nu este necesar un anumit conținut? Trebuie afișat alt conținut doar în anumite scenarii? Nu pledez pentru ascunderea conținutului pe baza dispozitivului pe care un utilizator îl folosește, dar tehnici precum încărcarea condiționată (pe care o vom analiza mai târziu în această săptămână) ne pot ajuta să difuzăm pagini mai mici care încarcă conținut complementar doar atunci când este necesar.
Proiectarea a două aspecte contrastante întărește ideea că un design se va adapta, în timp ce rezolvă potențialele devreme. Deși acest lucru sună ca o dublare a muncii, rețineți că nu proiectăm fiecare pagină cu o precizie perfectă pentru pixeli. În schimb, ne concentrăm pe construirea unui limbaj de proiectare scalabil - unul care va evolua pe măsură ce începem să îl implementăm în cod și unul care se bazează pe module și componente individuale.
Devenind aspect agnostic
În mod surprinzător, pentru o industrie care a tratat istoric rețeaua web ca tipărită, aspectele cu lățime fixă au pătruns în multe dintre livrabilele pe care le producem. Pe măsură ce începem proiectarea pentru un mediu adaptabil, sunt luate în considerare noi abordări care ne permit să rezolvăm probleme și să comunicăm idei, recunoscând în același timp natura fluidă a mediului. Iată câteva dintre preferatele mele:
- Diagramele descrierii paginii: În timp ce wireframe-urile pot implica deseori aspectul (și astfel presupun un anumit tip de dispozitiv), diagramele de descriere ale paginii elimină această ipoteză și în schimb descriu componentele individuale, aranjate în document în termeni de prioritate.
- Placi de stil: Atunci când comunicăm idei de proiectare cu clienții, ne putem găsi prezentând „tablouri de site-uri web”. Dacă nu suntem atenți, clienții vor cere pe bună dreptate să vadă concepte care să demonstreze cum va arăta un design și pe alte dispozitive. Acest lucru ne poate forța într-o situație nesustenabilă de a produce mai multe pagini pentru mai multe dispozitive. Samantha Warren s-a gândit la această problemă și a venit cu dale de stil. Acestea stau undeva între o placă de dispoziție (dar mai puțin vagă) și compoziții complet realizate (dar mai puțin precise) și ne ajută să comunicăm tipografia, stilurile butoanelor și tratamentele masthead. De asemenea, încurajează un nivel mai matur de discuții cu clienții noștri.
- Joc de design Mobilify: Acest exercițiu poate funcționa foarte bine în timpul atelierelor de proiectare colaborativă. În acest exercițiu, toată lumea notează pe notele Post-it elementele care pot apărea pe o anumită pagină. Acestea sunt apoi lipite de perete în ordinea importanței, ca și cum ar apărea liniarizate pe un telefon mobil. Discuția rezultată poate genera niște concluzii surprinzătoare. De exemplu, vă puteți da seama că navigarea nu este cea mai importantă componentă de pe pagină. Acest lucru ar putea urma până la proiectare, unde un link de omitere din partea de sus a paginii se leagă de navigarea din subsol.
Există încă loc pentru instrumentele pe care le folosim deja, desigur, dar atunci când proiectăm un site web în termeni generali, trebuie să avem în vedere că aspectul nu mai este cunoscut.
Codificare progresivă
Din fericire, nu trebuie să ne facem griji cu privire la designul vizual din exemplul la care lucrăm, deoarece s-a făcut munca grea pentru noi! În schimb, ne putem concentra asupra codificării designului nostru într-un site web complet receptiv.
Încă ceva înainte de a începe. Este important să ne amintim un principiu fondator al mediului cu care lucrăm: universalitatea. Asta înseamnă nu numai construirea pentru dispozitivele web de astăzi, ci asigurarea compatibilității cu cele de ieri și de mâine. John Allsopp a descris de ce acest principiu contează în postarea sa The Next 6 Billion:
„Următoarele șase miliarde sunt copii din India rurală, Africa, China, unde accesul la energie electrică și rețelele pot fi intermitente. Este cineva din Sumatra, cu o cutie Wintel veche de zece ani. Sunt oameni care vorbesc sute de limbi diferite, cu zeci de limbi diferite. sisteme de scriere. Sunt oamenii care sunt primii din familia lor care pot să citească și să scrie. Sunt 20% dintre oamenii din întreaga lume care nu știu să citească sau să scrie. Cu toate acestea.’
Ne putem urmări înțelegerea despre web uitându-ne la diferitele moduri (din lipsa unui cuvânt mai bun) care au luat avânt printre profesiile noastre: standarde web, accesibilitate, JavaScript discret ... toate sunt variante pe aceeași temă: îmbunătățirea progresivă. Același lucru este valabil și pentru designul web receptiv. Pentru a construi un cu adevărat site-ul web receptiv este de a construi un site care nu este compatibil doar cu versiunile anterioare, ci și pentru viitor.
Scufundarea în marjă
Bine, suficient din preambul, este timpul să deschideți un editor de text.Proiectantul nostru ne-a furnizat un design orientat spre desktop și a avut amabilitatea de a oferi exemple despre cum ar putea apărea acest lucru și într-o fereastră mai îngustă.
Ar putea fi tentant să le codificăm separat, dar voi sugera o abordare diferită. Plasând componentele separate - sau modelele - care alcătuiesc designul pe o singură pagină, putem crea un portofoliu de modele. Acest lucru ne permite să dezvoltăm componente în afara limitelor oricărui aspect al paginii și ne va oferi ceva la care să ne referim mai târziu pentru orice test de regresie. Să vedem marcajul inițial pe câteva dispozitive diferite:
Vizualizați portofoliul nostru de modele marcate
Ei bine, voi fi condamnat - avem deja un site web receptiv! Conținutul nostru se adaptează la limitele fiecărui dispozitiv, fie că este vorba de un iPad nou sau de un telefon cu funcții aruncate. Funcționează chiar și într-un browser numai text, cum ar fi Lynx.
Datorită principiilor fundamentale ale universalității, web-ul este receptiv în mod implicit. Este minunat, dar înseamnă, de asemenea, că orice facem codului de acum înainte poate compromite această adaptabilitate nativă.
Mâine: Vom călca cu atenție și vom începe să aplicăm primul aspect al designului receptiv: tipografie și rețele fluide.
