Principii responsive de proiectare web

În zilele noastre, este o practică obișnuită să creezi un site web sau o aplicație care să-și regleze interfața cu utilizatorul în funcție de browser sau dispozitiv. Există două abordări pentru atingerea acestui obiectiv. Prima presupune crearea de versiuni diferite ale site-ului sau aplicației dvs. pentru diferite dispozitive. Dar este ineficient și poate duce la erori imprevizibile.

În căutarea unei abordări fiabile, rezistente la viitor, a fost inventat designul adaptiv sau adaptiv. Se concentrează pe crearea unei singure versiuni a aspectului dvs. care se adaptează automat la diferite browsere sau dispozitive.

În acest articol, vom afla despre designul web receptiv și principiile fundamentale care vă vor ajuta să creați un site web minunat.

Ingrediente de design web responsive

Proiectarea web receptivă nu este atât de complicată pe cât pare. Este un set de practici pe care le puteți folosi atunci când scrieți CSS, nu o tehnologie separată pe care va trebui să o învățați de la zero. S-ar putea să urmați deja mai multe dintre aceste principii fără să vă dați seama. Puteți înțelege designul web receptiv explorând cele patru ingrediente ale acestuia: machete fluide, unități receptive, imagini flexibile și interogări media.

Aspecte fluide

Cu un aspect fluid, puteți crea pagini web care se adaptează la lățimea și înălțimea curentă a ferestrei de vizualizare. Practica obișnuită include utilizarea lățimea maximă proprietate în loc să dea o lățime fixă ​​unui element. De asemenea, folosind procentajul (%), înălțimea ferestrei (vh), sau lățimea ferestrei (vw) ajută la îmbunătățirea adaptabilității care nu este posibilă cu pixeli (px). Așadar, data viitoare când creați un aspect, asigurați-vă că introduceți aceste mici modificări și începeți să beneficiați de tehnici de proiectare receptive.

Unități receptive

Pe măsură ce treceți la CSS mai avansat, veți vedea adesea utilizarea rem și em unități pentru lungime în loc de px unități. Acest lucru se datorează faptului că rem Unitatea facilitează scalarea întregului aspect. În mod implicit, 1rem este egal cu 16 px, deoarece este proporțional cu dimensiunea fontului elementului, de obicei 16 px. Cu toate acestea, puteți seta 1rem egal cu 10 px (sau orice altă valoare) pentru calcule mai ușoare, ajustând dimensiunea fontului de nivel superior.

Imagini flexibile

Imaginile reprezintă o preocupare principală în timp ce proiectează chiar și aspectul cel mai de bază. Întotdeauna trebuie să aveți grijă să le dimensionați corect, astfel încât să se potrivească designului. De asemenea, în mod implicit, acestea nu se scalează cu modificările din fereastra de vizualizare. Deci, ar trebui să utilizați % pentru dimensiunile imaginilor dvs., împreună cu lățimea maximă proprietate.

Puteți da viață site-urilor receptive utilizând interogări media. Rețelele fluide sunt bune pentru început, dar veți constata că există câteva puncte în care aspectul începe să se descompună. Adăugarea punctelor de întrerupere pentru aceste lățimi ale ferestrei de vizualizare reglează aspectul pentru diferite dispozitive. Interogările media vă ajută să aplicați selectiv CSS pe baza rezultatelor testelor de caracteristici media. Puteți explora noi Caracteristici CSS pentru a crea un site web receptiv în mai puțin timp.

Principii responsive de proiectare web

Deși designul web receptiv este un salvator atunci când vine vorba de probleme cu mai multe ecrane, este posibil să nu aveți o constrângere fizică fixă ​​la care să faceți referire. Prin urmare, există șase principii de bază pentru designul web receptiv cu care trebuie să începeți atunci când proiectați un aspect receptiv.

Utilizați puncte de întrerupere bazate pe conținut

Unul dintre principiile fundamentale de proiectare afirmă că proiectarea site-ului dvs. web ar trebui să susțină conținutul, nu invers. Conținutul media, cum ar fi videoclipurile, fotografiile și conținutul text, cum ar fi copiile web lungi și scurte, trebuie redate în mod optim pe toate ecranele. Cheia pentru designul web receptiv este de a utiliza puncte de întrerupere bazate pe conținut, mai degrabă decât cele bazate pe dispozitive.

Alegeți Fonturi Web și Fonturi Sistem în mod înțelept

Fonturile web arată uimitoare! Aveți numeroase opțiuni pentru a vă modifica designul cu fonturi web cu aspect cool. Dar trebuie să știți că browserele vor trebui să descarce fiecare font web. Mai multe fonturi web, mai mult timp de descărcare. În contrast, fonturile de sistem sunt extrem de rapide. Dacă utilizatorul nu are un font de sistem numit pe dispozitivul său local, acesta va reveni la următorul font din stiva de tip font-family. Prin urmare, asigurați-vă că luați în considerare timpul de încărcare și cererea de proiectare atunci când alegeți fonturile.

Optimizați imaginile și vectorii Bitmap

Aveți diferite pictograme pe site-ul dvs. web, care susțin conținutul? Este adesea o bună practică să folosiți un format bitmap dacă pictogramele dvs. au multe detalii. Pe de altă parte, formatele vectoriale sunt calea de urmat pentru pictogramele care cresc în sus și în jos frumos. Vectorii sunt adesea mici, dar dezavantajul este că este posibil ca unele browsere mai vechi să nu le accepte. De asemenea, există cazuri în care vectorii sunt mai grei decât bitmap-urile, cum ar fi atunci când imaginea este foarte detaliată. Prin urmare, asigurați-vă întotdeauna că vă optimizați imaginile și vectorii bitmap înainte de a intra online.

Efectuați teste pentru primul răspuns sensibil

Prima pagină a unui site web este vizualizarea pe care vizitatorii o văd când se încarcă prima dată, înainte de orice derulare. Adesea include o secțiune erou cu un bara de navigare receptivă, copie introductivă și suport media și un CTA. Răspunsul nu se limitează doar la dispozitivele mobile. Ar trebui să luați în considerare și tabletele, consolele de jocuri și alte ecrane. Deci, cheia este de a efectua teste frecvente cel puțin pentru prima vizualizare a site-ului web. Puteți utiliza Chrome DevTools (Far) pentru a testa calitatea paginii web.

Nu ascundeți conținut pe ecrane mai mici

Mulți oameni obișnuiau să presupună că utilizatorii de telefonie mobilă sunt mereu grăbiți, în căutarea informațiilor de dimensiuni mușcate, în timp ce utilizatorii de desktop sunt mai îndrăgiți de conținutul de formă lungă. Acum recunoaștem că acest lucru nu este adevărat în lumea de astăzi. Oamenii folosesc dispozitive mobile peste tot, caută conținut complet și acces complet la toate serviciile. Ar trebui să vă asigurați că, în loc să ascundeți conținutul, gestionați aspectul și punctele de întrerupere pentru a-l prezenta cât mai ușor și fără efort.

Gestionați aspectul utilizând obiecte imbricate

Construirea corectă a unui site și elemente de poziționare necesită un efort decent. De asemenea, este posibil să fi întâmpinat dificultăți în gestionarea multor elemente care sunt dependente unul de celălalt. Prin urmare, ar trebui să luați în considerare împachetarea elementelor conexe într-un container sau. Acest lucru ajută la reducerea sarcinii de a prezenta mai multe elemente la unul în care așezați doar un singur element.

Design receptiv: ar trebui să mergeți mai întâi pe desktop sau mai întâi pe mobil?

Prima abordare pentru desktop înseamnă că veți scrie CSS pentru ecrane mari și apoi veți aplica interogări media pentru a micșora designul pentru ecrane mai mici. În schimb, prima abordare mobilă implică scrierea CSS pentru dispozitive mobile, cu ecrane mai mici și apoi aplicarea interogărilor media pentru a extinde designul pentru ecrane mai mari. Accentul principal este de a reduce site-ul web și aplicațiile la elementele esențiale absolute.

Dacă abia începeți cu dezvoltarea web receptivă, atunci ar trebui să mergeți mai întâi la desktop apropiați-vă ca la sfârșitul zilei, va trebui să stivați containerul unul peste altul pe mobil dispozitive. Deși este complet o decizie personală, prima abordare mobilă vă ajută în structurarea HTML într-un mod mai bun, în timp ce abordarea primului desktop vă va ajuta cu aspectul și spațierea tehnici.

Top 6 cursuri pentru a învăța design UX

Dacă doriți să învățați designul UX sau să vă îmbunătățiți abilitățile, iată cele mai bune șase cursuri online pe care le puteți urma.

Citiți în continuare

Despre autor