A responzivan raspored postala norma u web dizajnu, ova vrsta izgleda stranice znači da ako prozor koji ga sadrži naglo promijeni veličinu, to jest od vrlo velikog do vrlo malog i obrnuto, naši elementi moraju biti u mogućnosti preuređivanja kako bi se održalo pristojno i funkcionalno korisničko iskustvo.
To je uvijek bilo dostupno uz pravila CSSMeđutim, u posljednjoj primjeni istih poduzete su bolje mjere, dijelom i zbog već postojanja modernog mobilnog svijeta, koji je jedan od velikih potrošača dizajna uzvratni.
Iako postoji nekoliko okvira poput Bootstrap ili Temelj koji nam zadaju responzivan izgled, ne možemo uvijek ovisiti o njima, zato je vrlo korisno znati kako možemo vlastitim sredstvima izgraditi izgled ovih karakteristika.
Zahtjevi
1- Za dovršetak ovog vodiča trebat ćemo imati osnovno znanje HTML Y CSS, budući da su od vitalnog značaja za razumijevanje primjera navedenih u vodiču.
2- S tehničke strane, potreban nam je barem moderan preglednik poput Google Chrome, uređivač teksta za pisanje našeg koda, možemo koristiti Uzvišen tekst o NotePad ++ ili čak Windows bilježnica ili Gedit na Linuxu ako se osjećamo avanturistički.
3- Konačno nam je potrebna internetska veza za preuzimanje jedne ili dvije slike ako je želimo staviti u svoj kôd, kao što ćemo vidjeti u jednom od prikazanih primjera.
Svojstva minwidth i maxwidth
Ovo je možda prvi aspekt na koji nailazimo pri radu s okruženjima uzvratni, budući da se mnogo puta koncentriramo na to da se stranica smanji, ali što je s novim zaslonima 4K? Zato ne smijemo zanemariti maksimalnu razlučivost pod kojom naša web stranica izgleda pristojno.
minwidth i maxwidthSvojstva ili atributi min. širina Y maksimalna širina CSS nam pomaže u borbi protiv ovog problema jer nam omogućuju utvrđivanje maksimalnih margina ispod kojih želimo da naš dizajn bude uzvratni, jer ako ne, ekstremi u veličinama mogu nas izigrati, osobito u ovim trenucima u kojima se rezolucije i dalje povećavaju, ali još nisu postale velike.
U sljedećem primjeru pokazat ćemo kako možemo regulirati svoje izgled zahvaljujući spomenutim svojstvima, za to ćemo stvoriti dokument HTML sa sljedećim sadržajem:
Primjer responzivnog izgleda 1Ono što smo učinili je stvorili tri elementa div koji rade kao svojevrsni stupci, pa u ovom slučaju govorimo njegovom elementu spremnika članak da će njegova najveća širina biti 1200 pxDakle, bez obzira na to koliko je zaslon velik, dizajn od tada više neće rasti, tada stvaramo tri klase, po jednu za svaki div, a drugu na ovaj način dodjeljujemo minimalnu širinu, bez obzira na to koliko se zaslon smanjio, Za održavanje tog minimalnog omjera, ovo je izvrsno za slike kao što ćemo vidjeti na snimci zaslona primjera, i na kraju do razreda plutati dodjeljujemo mu i minimalnu širinu. Pogledajmo kako naš primjer izgleda u pregledniku kada imamo veliku rezoluciju:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ulcericies in quis pain. Aliquam ac nisl vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ulcericies in quis pain. Aliquam ac nisl vehicula.
POVEĆAJTE
Pogledajmo sada kako se mjeri kad malo smanjimo prozor preglednika:
POVEĆAJTE
Na kraju, da vidimo rezultat kada učinimo da prozor ima veličinu sličnu veličini mobilnog telefona:
Mogli smo vidjeti kako se održavaju proporcije utvrđene kao minimum i maksimum, ali najvažnije je da je naš dizajn prilagođen različitim rezolucijama s kojima smo ga vizualizirali, te smo na taj način mogli osigurati da korisnik ne izgubi upotrebljivost u njihovom iskustvu s našim stranicama.
Naravno, ovo nije daleko od toga da se prikazuje u produkciji, ali daje nam ideju gdje bismo trebali usredotočiti neke napore kada radimo na stvarnom dizajnu naših aplikacija i stranica, zanimljivo je da stupci su prilagođeni tako da smo mogli vidjeti kako smo prešli s rasporeda s 3 stupca na izgled s jednim stupom.
Koristiti Relativno punjenje
The punjenje To je mjera koja nam omogućuje da zadržimo prostor sadržaja na rubovima spremnika tako da uspostavimo granicu koliko će daleko ići, ne treba ga miješati s marginom jer je to još jedan koncept.
Poanta je da je punjenje gotovo se ne uzima u obzir pri izradi a izgled biti uzvratni što rezultira tekstovima i sadržajem koji kasnije ostaju neestetski pri promjeni razlučivosti s kojom se gleda na dizajn.
U sljedećem kodu ono što ćemo učiniti je postaviti a punjenje koja radi relativno, odnosno kako se veličina prozora prilagođava, naša punjenje Promijenit će se kako bi se zadržale proporcije i na taj način sadržaj će uvijek ostati onakav kakvim smo ga dogovorili unatoč tome što ima manje prostora zbog promjene rezolucije. Pogledajmo naš primjer koda:
Relativno punjenjeOdržavajte proporcije relativnim podstavkomKao što vidimo definiramo svojstva punjenje svake klase s postotnim vrijednostima umjesto fiksnih vrijednosti s mjerenjima u pikselima, na ovaj će način tumač stilova preglednika dati mjerenje koje se odvija prema vrijednosti koju smo postavili, na kraju kada vidimo naš primjer u pregledniku dobivamo sljedeće:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
POVEĆAJTE
Sada, ako smanjimo veličinu prozora, vidjet ćemo kako se vrši podešavanje, ali zadržavajući proporcionalnu udaljenost od teksta do rubova:
Tada primjećujemo kako se naš dizajn održava i sprječava deformacije smanjujući razlučivost osobe koja ga sadrži, čime se održava dosljedan doživljaj za našeg korisnika.
Iako postoje napredniji koncepti kojih ćemo se dotaknuti u drugim vodičima, s ovih par trikova ili savjeta možemo uspjeti dati novi život našim starim web mjestima, a sada mnogo više od tražilica poput Google Traže od nas mobilnu verziju kako bi nam mogli dati prednosti u rezultatima. Najvažnija stvar za postizanje izvrsnih rezultata je eksperimentiranje i puno vježbanja kako bi ova rješenja prirodno izašla iz našeg uma i ne moraju uvijek pribjegavati vodičima.
Ovim smo završili ovaj vodič, jer vidimo da nam ne treba nikakav okvir za postizanje rezultata uzvratni, a također ne moramo napustiti kombinaciju HTML + CSSJedino je ako moramo izgraditi vlastite alate, zadovoljstvo zbog poboljšanja našeg dizajna velika je nagrada.
