Premisa din spatele unei pagini receptive nu este aceea că site-urile web sunt construite într-un mod prietenos mobil. Este vorba despre stabilirea conținutului nostru gratuit, astfel încât acesta să poată fi experimentat prin toate mijloacele necesare - și aceasta include la scară largă. Să aruncăm o privire la considerentele de proiectare din spatele ecranului uriaș de birou de multe ori neglijat.
Cei care vă plac jocurile cu planuri flexibile vor face, fără îndoială, o lovitură ciudată, pentru a vă vedea cum se adaptează design-ul confortabil la porturile mici de vizualizare. Ceea ce a fost odată o frumoasă structură multi-coloană devine un stâlp la fel de frumos, strans, de text lizibil, fără agitate și nonsens inutil. Dar câți dintre voi vă gândiți la aspectul dvs. dincolo de confortul unei rețele de 960 de metri?
Credeți sau nu, există oameni care vă văd munca la gloria cinematografică de înaltă definiție hi-def (chiar și display-urile de iMac și Thunderbolt de la Apple de 27 "beneficiază de o rezoluție de 2560x1440 pixeli). Ecranele computerului devin tot mai mari, deci în cazul în care părăsesc 960 pixeli sensibil aspect? Plutitoare adrift în mijlocul unui ocean, este în cazul în care.
Peste cinci la sută din vizitatorii Webdesigntuts + au făcut-o ultima lună pe un ecran ca cel de mai sus, nu o figură care ar trebui să fie mirosită. Și înainte de a mă sari în gât în legătură cu aspectul acestui site, fiți siguri că o soluție este în lucru!
Se pare că suntem blocați la 960 de pixeli, o lățime care a devenit standard prin utilizarea sistemelor de rețea. De mult timp a fost greșit să găsim ecrane mai mari de 1024x768px, așadar aspectul cu lățimea fixă cu siguranță nu putea depăși acest aspect. 960px este de fapt o figură grozavă de a lucra cu:
Au apărut probleme când accesarea internetului pe dispozitivele mai mici a devenit obișnuită. Planșele mai mari sunt incomode pentru a vedea în mod corespunzător prin intermediul unor mici ferestre de vizualizare, astfel încât necesitatea de a fi mama invenției, atenția noastră a fost transformată în mod logic pentru a aborda această problemă. Un aspect de 960 pixeli va arăta bine pe un ecran mai mare, astfel încât designerii se gândesc adesea la un design web receptiv ca pe o modalitate de a face planșele mobil prietenos.
Suntem obișnuiți să proiectăm machete de dimensiuni medii. Din acest motiv, este mai ușor (deși mulți dintre voi nu o veți recunoaște) să vizualizați și să proiectați așa cum ați făcut întotdeauna, apoi să eliminați lucrurile în jos pentru mobil. Prima dvs. afacere în RWD va implica, probabil, degradări ale unor astfel de interogări (preluate din scheletul de schelet):
/ * toate stilurile tale initiale merg aici ... * / body width: big-ish; / * Mai mic decât standardul 960 (dispozitive și browsere) * / numai în ecranul @media și (max-width: 959px) / * -width: 768px) și (max-width: 959px) / * Toate dimensiunile mobile (dispozitive și browser) * / @media only screen și (max-width: 767px) (dimensiuni min-width: 480px) și (max-width: 767px) / * Dimensiune portret mobil la dimensiunea peisajului mobil (dispozitive și browsere) * / max-width: 479px)
Începeți mari, apoi faceți-vă drumul către dispozitive mai mici. Acest lucru este incomod din mai multe motive, nu în ultimul rând fiind faptul că vă înscrieți adesea la o lățime maximă a aspectului înainte de a vă aventura în alte dimensiuni potențiale ale ecranului. Revenirea la cont pentru dimensiuni mai mari ale ecranului înseamnă reemigrarea interogărilor media.
O primă abordare mobilă, pe de altă parte, înseamnă că ați întâlni mai întâi cele mai mici ecrane posibile, apoi construiți interogările dvs. media, deoarece porturile de vizualizare devin mai mari. Atacând o altă interogare media la sfârșit, pentru că observați un punct de întrerupere la 2000px, este direct.
Soluția evidentă este să permită modelelor noastre flexibile să răspândească întreaga lățime a oricărui ecran pe care sunt vizualizate. Uşor! Dar există un motiv pe care îl veți vedea adesea lățimea maximă
recoltarea în css receptiv; proiectarea pentru ecrane mari necesită o analiză atentă.
Lăsând deoparte obstacolele tehnice pentru o clipă, cum de fapt proiectăm pentru ecrane mai mari? Câteva abordări primăvară în minte, așa că haideți să ne străduim în mod logic.
Presupunând că avem de-a face cu o rețea fluidă, putem permite ca coloanele noastre să se răspândească proporțional și să umple spațiul disponibil pe ecran.
Problema flagrantă cu această abordare este de a avea coloane super-largi de text. Un corp de text de 30 cm lățime nu va face aspectul dvs. favorizează estetic, dar, mai important, lizibilitatea va fi de asemenea redusă.
Lățimea unei linii de text este tipografic denumită "măsură", iar pentru a păstra lizibilitatea ar trebui să aibă dimensiunea de aproximativ 45 până la 75 de caractere. Prea multe caractere și devine dificil pentru ochiul cititorului să se miște înapoi peste text și să găsească începutul liniei următoare. Acest lucru poate fi combătut prin creșterea înălțimii liniei (lider), destul de ușor de implementat la momentele adecvate prin interogări media, dar nu este o soluție completă.
Modulul CSS3 multi-layout arata promitator in acest sens. Odată ce un corp de text ajunge la o anumită lățime, împărțirea acestuia într-un număr corespunzător de coloane ar rezolva problemele de citire. Cu toate acestea, noi primim noi înșine. Implementarea browserului pentru coloanele CSS3 este inconsecventă și nu este suficientă pentru câteva detalii tipografice.
Cred că ne încălzim când am menționat creșterea înălțimii liniei, ceea ce mă duce la următoarea abordare ...
Uitați-vă cu mine pe asta - cum ziceți că scarăm totul? Desigur, în ceea ce privește tipul, este logic. Lizibilitatea este din nou în centrul acestei situații; ecranele mai mari sunt în general văzute de la distanță. Vedem ecrane cel mai confortabil cu un unghi de vizualizare de aproximativ 30 °.
Ceea ce înseamnă efectiv;
Cu cât ecranul este mai mare, cu atât este mai mare distanța de vizionare optimă.
Acest lucru se traduce la o distanță optimă de vizionare de 3-6 lățimi de ecran. Notă: aceste cifre se aplică în mod specific pentru vizionarea televiziunii, dar principiile pentru monitoarele desktop rămân aceleași. Apple vă recomandă să stați între 18 "și 24" de pe afișaj, în funcție de dimensiune. Ei sugerează 15 "de la cel mai nou iPad, 10" de la un iPhone 4.
Aceasta este o gamă semnificativă, deci ar părea sensibil să modificăm dimensiunea fontului în raport cu distanța de la care se citește.
Ems sunt prietenul nostru aici. Prin setarea tipului, înălțimea liniei, într-adevăr întreaga rețea de referință (există o provocare), folosind unități relative de măsurare (ems sau rems) este foarte ușor să scalați totul.
/ * setarea valorii inițiale * / html font-size: 100%; corp font-size: 0.875em; / * 14px * / / * amplifica-l cand ecranul timpului este doar * / @media numai si (min-width: 768px) body font-size: 1em; / * 16px * /
Sunt un fan de tip mare, lizibil, dar dacă ați fost vreodată precaut să vă stabiliți copia corpului la 16 pixeli, poate că un aspect de ecran mare este doar locul în care să vă murdăriți mâinile!
Modelele avansate de CSS sunt încă la fel, dar chiar și în lumea plutitoare putem reorganiza machetele fără prea multă dificultate. Dacă scopul acestui exercițiu este de a profita la maximum de proprietățile de ecran nefolosite, de ce nu pur și simplu să aduceți conținutul ascuns înapoi în imagine?
Luați, de exemplu, subsolul. De cele mai multe ori se găsește în ecranul ascuns, în partea de jos a paginii. Asta nu-i o problema; nu este exact locul pentru un conținut extrem de important, dar un subsol de pagină poate conține informații utile, așadar vă recomandăm să le atașați pe partea laterală a aspectului dvs. ca o coloană suplimentară.
Din punct de vedere semantic, este încă a . Marcajul indică în continuare conținutul său în raport cu ierarhia paginii, dar suntem liberi să-l punem acolo unde ne place. Lucrul la o rețea și lucrul la o structură modulară a aspectului va face acest lucru mai ușor de realizat.
Puteți, de asemenea, să schimbați conținutul corpului în sus prin repoziționarea elementelor orizontale, cum ar fi navigarea primară, transformând ceea ce era un aspect părtinit vertical într-o orientare mai orizontală.
Vă sugerez că o combinație a tuturor acestor abordări vă va face bine; construiți mai întâi pentru dispozitivele mobile, permiteți aspectul dvs. să curgă pe lățime, să crească scara (ușor) și să repoziționați elementele modulare.
Aruncați o privire la modul în care toate acestea se întâlnesc (chiar am aruncat multi-coloane CSS3 acolo pentru o măsură bună).
Există întotdeauna buts ...
Nu uitați spațiul alb. Spațiul alb la marginea unui aspect al paginii este ceea ce definește acel aspect foarte potrivit. Zonele goale ale unui ecran dau foc la zonele de conținut și ajută la direcționarea ochiului utilizatorului. Nu plimbați cu nerăbdare spațiul alb, deoarece ați putea.
Acest lucru este valabil în special în ceea ce privește abordarea noastră "repoziționării". Un aspect modular poate fi readusat fericit, astfel încât conținutul ascuns să fie adus în atenție. Dar prezentarea utilizatorului cu mai multe informații pentru a procesa poate dilua ceea ce încercați să obțineți.
Luați acest exemplu din ultimele sneek peeks ale Windows 8. Pe dispozitivele mai mici, interfața cu tigla este foarte eficientă:
Pe ecrane mai mari poate fi cel mai bine descris ca fiind confuz:
Deci, conceptul că "spațiul este acolo să fie umplut" nu este neapărat adevărat. Totuși, sper că acest lucru vă oferă mâncare pentru gândire și aștept cu nerăbdare să vă aud propriile experiențe atunci când proiectați pentru ecrane mari.