Načela responzivnog web dizajna

Danas je uobičajena praksa izgradnja web stranice ili aplikacije koja prilagođava korisničko sučelje ovisno o pregledniku ili uređaju. Postoje dva pristupa za postizanje ovog cilja. Prvi uključuje stvaranje različitih verzija vaše web stranice ili aplikacije za različite uređaje. No, to je neučinkovito i može dovesti do nepredvidivih pogrešaka.

U potrazi za pouzdanim pristupom zasnovanim na budućnosti, osmišljen je responzivni-ili adaptivni-dizajn. Usredotočuje se na izradu jedne verzije izgleda koja se automatski prilagođava različitim preglednicima ili uređajima.

U ovom ćemo članku naučiti o responzivnom web dizajnu i temeljnim načelima koja će vam pomoći da napravite izvrsnu web stranicu.

Sastojci responzivnog web dizajna

Responzivni web dizajn nije toliko kompliciran koliko zvuči. To je skup praksi koje možete koristiti pri pisanju CSS -a, a ne zasebna tehnologija koju ćete morati naučiti ispočetka. Možda ste već slijedili nekoliko ovih načela, a da toga niste ni svjesni. Responzivni web dizajn možete razumjeti istražujući njegova četiri sastojka: fluidne rasporede, responzivne jedinice, fleksibilne slike i medijske upite.

Rasporedi tekućina

S fluidnim izgledom možete stvoriti web stranice koje se prilagođavaju trenutnoj širini i visini okvira za prikaz. Uobičajena praksa uključuje korištenje maksimalna širina svojstvo umjesto davanja fiksne širine elementu. Također, koristeći postotak (%), visina prikaza (vh) ili širinu okvira prikaza (vw) pomaže poboljšati prilagodljivost koja nije moguća s pikselima (px). Dakle, sljedeći put kada budete gradili izgled, svakako uvedite ove male promjene i počnite imati koristi od tehnika responzivnog dizajna.

Responzivne jedinice

Kako prelazite na napredniji CSS, često ćete vidjeti upotrebu rem i em jedinice za duljinu umjesto px jedinice. To je zato što je rem Jedinica olakšava skaliranje cijelog izgleda. Prema zadanim postavkama 1rem je jednako 16px jer je proporcionalno veličina fonta elementa, obično 16px. Međutim, možete postaviti 1rem jednak 10px (ili bilo koju drugu vrijednost) za lakše izračune, prilagođavanjem veličine fonta na najvišoj razini.

Fleksibilne slike

Slike su glavna briga pri dizajniranju čak i najosnovnijeg izgleda. Uvijek morate paziti da ih pravilno dimenzionirate kako bi odgovarali dizajnu. Također, prema zadanim postavkama ne skaliraju se s promjenama u prikazu. Dakle, trebali biste koristiti % za dimenzije vaših slika, zajedno sa maksimalna širina imovine.

Odzivne web stranice možete oživjeti pomoću medijskih upita. Rešetke tekućina dobre su za početak, ali otkrit ćete da postoji nekoliko točaka u kojima se izgled počinje raspadati. Dodavanje točaka prekida za ove širine okvira za prikaz prilagođava izgled za različite uređaje. Medijski upiti pomažu vam u selektivnoj primjeni CSS -a na temelju rezultata ispitivanja značajki medija. Možete istraživati ​​novo CSS značajke za izradu responzivne web stranice u kraćem vremenu.

Načela responzivnog web dizajna

Iako je responzivni web dizajn spasitelj problema s više zaslona, ​​možda nemate fiksno fizičko ograničenje na koje se možete pozvati. Stoga postoji šest osnovnih načela responzivnog web dizajna s kojima možete započeti pri projektiranju responzivnog izgleda.

Upotrijebite prekidne točke temeljene na sadržaju

Jedno od temeljnih načela dizajna kaže da dizajn vaše web stranice treba podržavati sadržaj, a ne obrnuto. Medijski sadržaj, poput videozapisa, fotografija i tekstualnog sadržaja, poput duge i kratke web -kopije, trebao bi biti optimalno prikazan na svim zaslonima. Ključ responzivnog web dizajna je korištenje prijelomnih točaka zasnovanih na sadržaju, a ne onih zasnovanih na uređaju.

Pametno odaberite web -fontove i sistemske fontove

Web fontovi izgledaju zapanjujuće! Imate brojne mogućnosti za promjenu svog dizajna sa super fontovima web stranica. No, trebali biste znati da će preglednici morati preuzeti svaki web font. Više web fontova, više vremena za preuzimanje. Nasuprot tome, sistemski fontovi su munjeviti. Ako korisnik nema imenovani font sustava na svom lokalnom uređaju, vratit će se na sljedeći font u skup font-obitelji. Stoga pri odabiru fontova uzmite u obzir vrijeme učitavanja i zahtjeve dizajna.

Optimizirajte slike i vektore bitmapa

Imate li na svojoj web stranici različite ikone koje podržavaju sadržaj? Često je dobra praksa koristiti format bitmape ako vaše ikone imaju mnogo detalja. S druge strane, vektorski su formati način za odabir ikona koje se lijepo povećavaju i smanjuju. Vektori su često sićušni, ali mana je što ih neki stariji preglednici možda ne podržavaju. Također, postoje slučajevi kada su vektori teži od bitmapa, primjerice kada je slika vrlo detaljna. Stoga uvijek osigurajte da optimizirate svoje slike i vektore bitmape prije nego što se pojave na internetu.

Provedite testove za prvi odaziv

Prvi preklop web stranice je prikaz koji posjetitelji vide pri prvom učitavanju, prije bilo kakvog pomicanja. Često uključuje odjeljak heroja s responzivna navigacijska traka, uvodna kopija i mediji te CTA. Odzivnost nije ograničena samo na mobilne uređaje. Trebali biste uzeti u obzir i tablete, igraće konzole i druge zaslone. Dakle, ključno je provoditi česte testove barem za prvi pregled stranice. Možete koristiti Chrome DevTools (Svjetionik) za provjeru kvalitete web stranice.

Ne skrivajte sadržaj na manjim zaslonima

Mnogi su ljudi znali pretpostaviti da su korisnici mobilnih uređaja uvijek u žurbi, tražeći podatke veličine, dok se korisnici stolnih računala više bave sadržajem dugog oblika. Sada prepoznajemo da to nije istina u današnjem svijetu. Ljudi svugdje koriste mobilne uređaje, traže potpuni sadržaj i potpuni pristup svim uslugama. Morate osigurati da, umjesto skrivanja sadržaja, upravljate izgledom i prekidnim točkama kako biste ih predstavili što je moguće lakše i bez napora.

Upravljajte izgledom pomoću ugniježđenih objekata

Pravilna izrada izgleda web stranice i elemenata pozicioniranja zahtijeva pristojan napor. Možda ste također imali poteškoća u upravljanju mnogim elementima koji međusobno ovise. Stoga biste trebali razmisliti o umotavanju povezanih elemenata u spremnik ili. To pomaže smanjiti zadatak postavljanja nekoliko elemenata na jedan u kojem postavljate samo jedan element.

Responzivan dizajn: Trebate li prvo krenuti s radnom površinom ili mobitelom?

Prvi pristup radnoj površini znači da ćete pisati CSS za velike zaslone, a zatim primijeniti medijske upite kako biste smanjili dizajn za manje zaslone. Nasuprot tome, prvi pristup mobilnim uređajima uključuje pisanje CSS -a za mobilne uređaje s manjim zaslonima, a zatim primjenu medijskih upita za proširenje dizajna za veće zaslone. Glavni fokus je svesti web stranicu i aplikacije na najnužnije.

Ako tek počinjete s responzivnim web razvojem, prvo biste trebali pristupiti radnoj površini pristup, jer ćete na kraju dana morati slagati kontejner jedan na drugi na mobilnom uređaju uređaja. Iako je to potpuno osobna odluka, pristup putem mobilnog telefona pomaže vam u strukturiranju HTML na bolji način, dok će vam pristup na radnoj površini pomoći pri izgledu i razmaku Tehnike.

Top 6 tečajeva za učenje UX dizajna

Ako želite naučiti UX dizajn ili poboljšati svoje vještine, evo šest najboljih online tečajeva koje možete pohađati.

Pročitajte Dalje

O autoru