Načela odzivnega spletnega oblikovanja

Danes je običajna praksa izdelava spletnega mesta ali aplikacije, ki svoj uporabniški vmesnik prilagodi glede na brskalnik ali napravo. Za dosego tega cilja obstajata dva pristopa. Prva vključuje ustvarjanje različnih različic vašega spletnega mesta ali aplikacije za različne naprave. Vendar je neučinkovit in lahko povzroči nepredvidljive napake.

V iskanju zanesljivega pristopa, odpornega proti prihodnosti, je bil skovan odziven-ali prilagodljiv-dizajn. Osredotoča se na izdelavo ene različice vaše postavitve, ki se samodejno prilagodi različnim brskalnikom ali napravam.

V tem članku bomo spoznali odzivno spletno oblikovanje in temeljna načela, ki vam bodo pomagala narediti čudovito spletno mesto.

Odzivne sestavine spletnega oblikovanja

Odzivno spletno oblikovanje ni tako zapleteno, kot se sliši. To je niz praks, ki jih lahko uporabite pri pisanju CSS, ne ločena tehnologija, ki se je boste morali naučiti iz nič. Morda že sledite več tem načelom, ne da bi se tega zavedali. Odzivno spletno oblikovanje lahko razumete tako, da raziščete njegove štiri sestavine: tekoče postavitve, odzivne enote, prilagodljive slike in medijske poizvedbe.

Postavitve tekočin

S tekočo postavitvijo lahko ustvarite spletne strani, ki se prilagajajo trenutni širini in višini vidnega polja. Običajna praksa vključuje uporabo največja širina lastnost, namesto da bi elementu dali fiksno širino. Tudi z uporabo odstotka (%), višina vidnega polja (vh) ali širino vidnega polja (vw) pomaga izboljšati prilagodljivost, ki s piksli ni mogoča (px). Torej, ko naslednjič gradite postavitev, vnesite te majhne spremembe in začnite uživati ​​v odzivnih tehnikah oblikovanja.

Odzivne enote

Ko preidete na naprednejši CSS, boste pogosto videli uporabo rem in em enote za dolžino namesto px enote. To je zato, ker rem enota omogoča zelo enostavno prilagajanje celotne postavitve. 1rem je privzeto enako 16px, ker je sorazmeren z velikost pisave elementa, običajno 16 slikovnih pik. Za lažje izračune pa lahko nastavite 1rem na 10 px (ali katero koli drugo vrednost), tako da prilagodite velikost pisave na najvišji ravni.

Prilagodljive slike

Slike so glavna skrb pri oblikovanju tudi najosnovnejše postavitve. Vedno morate paziti, da jih pravilno dimenzionirate, da se prilegajo oblikovanju. Prav tako se privzeto ne spreminjajo s spremembami v vidnem polju. Torej bi morali uporabiti % za dimenzije vaših slik skupaj z največja širina lastnine.

Odzivna spletna mesta lahko oživite z uporabo medijskih poizvedb. Mreže s tekočinami so dobre za začetek, vendar boste ugotovili, da obstaja nekaj točk, kjer se postavitev začne zrušiti. Dodajanje prelomnih točk za te širine vidnega polja prilagodi postavitev za različne naprave. Medijske poizvedbe vam pomagajo pri selektivni uporabi CSS na podlagi rezultatov preskusov medijskih funkcij. Lahko raziskujete novo Funkcije CSS za odzivno spletno mesto v krajšem času.

Načela odzivnega spletnega oblikovanja

Čeprav je odzivno spletno oblikovanje rešitelj pri težavah z več zasloni, morda nimate določenih fizičnih omejitev. Zato je pri oblikovanju odzivne postavitve treba začeti šest osnovnih načel odzivnega spletnega oblikovanja.

Uporabite vsebinske prelomne točke

Eno temeljnih načel oblikovanja določa, da mora oblikovanje vaše spletne strani podpirati vsebino in ne obratno. Medijske vsebine, kot so video posnetki, fotografije in besedilne vsebine, kot so dolga in kratka spletna kopija, je treba optimalno upodobiti na vseh zaslonih. Ključ do odzivnega spletnega oblikovanja je uporaba vsebinskih prelomnih točk namesto tistih, ki temeljijo na napravah.

Pametno izberite Spletne pisave in Sistemske pisave

Spletne pisave izgledajo osupljivo! Na voljo so vam številne možnosti za spreminjanje oblikovanja s kul spletnimi pisavami. Vendar morate vedeti, da bodo brskalniki morali prenesti vsako spletno pisavo. Več spletnih pisav, več časa za prenos. Nasprotno pa so sistemske pisave bliskovito hitre. Če uporabnik v svoji lokalni napravi nima imenovane sistemske pisave, se bo vrnil na naslednjo pisavo sklad družine pisav. Zato pri izbiri pisav upoštevajte čas nalaganja in oblikovno povpraševanje.

Optimizirajte bitne slike in vektorje

Ali imate na svojem spletnem mestu različne ikone, ki podpirajo vsebino? Če je v vaših ikonah veliko podrobnosti, je pogosto dobro uporabiti obliko bitne slike. Po drugi strani pa so vektorski formati pot do ikon, ki se lepo povečujejo in spuščajo. Vektorji so pogosto majhni, a slaba stran je, da jih nekateri starejši brskalniki morda ne podpirajo. Obstajajo tudi primeri, ko so vektorji težji od bitnih slik, na primer, ko je slika zelo podrobna. Zato vedno poskrbite, da optimizirate svoje bitne slike in vektorje, preden gredo v splet.

Izvedite teste za odzivno prvo zložbo

Prva stran spletnega mesta je pogled, ki ga obiskovalci vidijo ob prvem nalaganju, pred kakršnim koli drsenjem. Pogosto vključuje razdelek junakov z odzivna vrstica za krmarjenje, uvodni izvod in mediji ter CTA. Odzivnost ni omejena le na mobilne naprave. Upoštevati morate tudi tablične računalnike, igralne konzole in druge zaslone. Ključno je torej, da izvajamo pogoste teste vsaj za prvi pogled na spletno stran. Uporabite lahko Chrome DevTools (Svetilnik), da preizkusite kakovost spletne strani.

Ne skrivajte vsebine na manjših zaslonih

Mnogi so domnevali, da se uporabniki mobilnih telefonov vedno mudijo in iščejo informacije o velikosti, medtem ko se uporabniki namiznih računalnikov bolj ukvarjajo z dolgotrajno vsebino. Zdaj se zavedamo, da to v današnjem svetu ne drži. Ljudje povsod uporabljajo mobilne naprave, iščejo popolno vsebino in popoln dostop do vseh storitev. Zagotoviti morate, da namesto skrivanja vsebine upravljate postavitev in prelomne točke, da jih predstavite čim lažje in brez napora.

Upravljanje postavitve z uporabo ugnezdenih predmetov

Ustvarjanje pravilne postavitve spletnega mesta in postavitev elementov zahteva precejšen napor. Morda ste imeli tudi težave pri upravljanju številnih elementov, ki so odvisni drug od drugega. Zato razmislite o zavijanju sorodnih elementov v posodo oz. To pomaga zmanjšati nalogo postavitve več elementov na enega, v katerem postavljate samo en element.

Odzivno oblikovanje: Najprej se odločite za namizje ali mobilne naprave?

Prvi pristop namizja pomeni, da boste za velike zaslone napisali CSS, nato pa uporabite medijske poizvedbe, da zmanjšate zasnovo za manjše zaslone. Nasprotno pa prvi pristop mobilnih telefonov vključuje pisanje CSS za mobilne naprave z manjšimi zasloni in nato uporabo medijskih poizvedb za razširitev zasnove za večje zaslone. Glavni poudarek je na tem, da se spletno mesto in aplikacije zmanjšajo na bistveno.

Če šele začenjate z odzivnim spletnim razvojem, se najprej obrnite na namizje pristop, saj boste morali na koncu dneva posodo zložiti drug na drugega v mobilnem telefonu naprave. Čeprav je to povsem osebna odločitev, vam mobilni pristop pomaga pri strukturiranju HTML na boljši način, medtem ko vam bo pristop prvi na namizju pomagal pri postavitvi in ​​razmiku tehnike.

Top 6 tečajev za učenje UX oblikovanja

Če se želite naučiti oblikovanja UX ali izboljšati svoje sposobnosti, je tukaj šest najboljših spletnih tečajev.

Preberite Naprej

O avtorju