Prilagodljivi dizajn web stranice zgodan je sustav za prikazivanje iste web stranice na različitim vrstama uređaja na mreži. Jednostavno rečeno, ovo je mogućnost pregleda jedne web stranice na prijenosnom računalu, pametnom telefonu i drugim napravama.
Odzivnost weba postala je neophodna otkako su ljudi dobili gadgete različitih formata s omogućenim internetom. Tvrtke, internetske trgovine, pa čak i samo informativne stranice nastoje zadovoljiti svoju publiku, prilagođavajući joj se na sve moguće načine. Responzivni dizajn rješava problem praktičnosti, stoga je neizostavan radni predmet.
Karakteristike responzivnog web dizajna
Pogodnost dizajna karakterizira nekoliko glavnih kriterija.
- Veličina. Responzivni dizajn web stranice trebao bi imati manje razlike pri prikazivanju stranice na različitim uređajima, pa bi veličine slika, teksta i ostalih pregledanih elemenata trebale odgovarati veličinama samih uređaja. Da bi to učinili, web programeri prilagođavaju dizajn tako da ima više verzija prikaza.
- Prilagodba sadržaja. Materijal koji ispunjava stranicu (slike, video zapisii drugi multimedijski elementi) također moraju odgovarati potrebnim razlučivostima zaslona bez gubitka kvalitete prikaza.
- Fleksibilnost dizajna. Uključivanje u razvoj elemenata koji vam omogućuju brzu prilagodbu dizajna stranice kada promijenite web stranicu koju gledate. Na primjer, korisnik pomiče stranicu gore-dolje, kreće se kroz različite odjeljke ili mijenja položaj zaslona iz okomitog u horizontalni i obrnuto.
- Pojednostavite stavke po uređaju za bolju upotrebljivost.
- Sakrij nevažne blokove na manjim ekranima.
Osnove
Izrada web stranica svakako je vezana uz programske jezike, jer bez njih jednostavno ne možete. Koristeći HTML i CSS, preglednik prepoznaje sastav i redoslijed objekata (tekstova, ilustracija, videa) - tako se formira stranica.
CSS je odgovoran za boju, stilove, veličine, fontove, poravnanja, padding, pozadinske elemente, forme, itd. HTML je odgovoran za cjelokupni sadržaj i strukturu stranice. Dakle, web resurs je izgrađen u agregatu dvije najvažnije metode opisa.
CSS je, s druge strane, nezamjenjiv alat za dizajn. Ima veliki skup značajki koje su superiornije od HTML-a:
- Omogućuje dosljednost dizajna na više stranica, izgled web-mjesta i kontrolira prikaz HTML dokumenata.
- Pruža vam priliku da radite dizajn i sadržaj u isto vrijeme.
- Primjenjuje više stilova i mogućnost dagledanje na različitim uređajima.
- Donosi složene dizajnerske odluke.
- Odlikuje se velikom brzinom.
Da biste razvili web stranicu, morate znati neke osnovne koncepte.
CSS selektor označen je imenom stila koji definira svojstva i opcije oblikovanja. Govori pregledniku na koji se određeni element svojstva odnose.
Nekretnina je strukturna jedinica. Definira vanjske parametre (veličinu, mjesto, boju, oblik, itd.) i izražava se u određenom kodu.
Postoji skup definiranih CSS svojstava koja opisuju jedan objekt u izgledu i lokaciji.
Zajedno, ovi elementi čine sljedeću shemu:
Selektor { svojstvo1: vrijednost; svojstvo2; vrijednost }.
Veličine i rezolucije izgleda
Razvoj dizajna počinje pripremom izgleda u Photoshopu ili drugim grafičkim programima. Radi praktičnosti, posebne oznake modularne mreže uvode se u platno, promatraju se posebne uvlake. Dakle, web dizajner pokazuje dizajneru izgleda principe strukturiranja buduće stranice i ispravnog rasporeda web elemenata.
Rezolucije i veličine responzivnog web dizajna za glavne vrste uređaja:
- Ovaj dizajn se pridržava principa početka rada uz dopuštenje za mobitel. Izgled za pametni telefon kreiran je u veličini 460 × 960 px.
- Veličina izgleda tableta je 768 × 1024.
- Veličina bilježnice je 1280 × 802.
- Veličina računala je 1600 × 992.
U mobilnoj verziji stranicetreba biti što je više moguće pojednostavljen, uz zadržavanje svih glavnih funkcija. Ako se izgled priprema za internetsku trgovinu, sa svim pojednostavnjenjima u korištenju, trebao bi imati glavni opis, katalog proizvoda, opciju narudžbe, košaricu itd. - sve potrebne elemente za potpuno funkcioniranje, kao kod gledanja u punom formatu na računalu. Pogodnost mobilne verzije je da ovdje možete izbjeći dodatne stranice kako biste uštedjeli vrijeme pri učitavanju.
U adaptivnom sadržaju, pomoću html koda, možete sakriti neke elemente koji zapravo nisu potrebni. Na primjer, u visokoj rezoluciji, stranica prikazuje karticu proizvoda s opisom, cijenom, podacima o isporuci i mogućnošću dodavanja u "Košaricu". U mobilnoj rezoluciji, postupak je pojednostavljen na fotografiju, cijenu i gumb za kupnju.
Srednje i minimalne rezolucije za responzivni dizajn trebaju uzeti u obzir jednostavnost čitanja i pregledavanja od strane korisnika.
Izgled
Svrha adaptivnog dizajna izgleda je stvoriti fleksibilan izgled, ili kako je također uobičajeno reći: "gumeni šablon". Zaključak nije u jednoznamenkastim veličinama stranica, već u proporcionalnoj kompresibilnosti predloška za jednostavno gledanje na svim uređajima.
Napravljen je uglavnom na CSS-u. Tijekom razvoja određuju se kontrolne točke dimenzija zaslona. Tako se određuje širina preostalih objekata. Da biste to učinili, širinu stranice postavlja css max-width svojstvo, ovisno o tim kriterijima, veličina ostalih elemenata odabire se kao postotak. Na primjer, veličina bloka na glavnomstranica je 600px, a širina bloka bočne trake (bočna traka stranice) je 400px, odnosno širina sadržaja bit će 60%, a širina bočne trake 40%.
Postoji nekoliko vrsta responzivnih izgleda. Svaki se odabire pojedinačno, ovisno o karakteristikama i konstrukciji.
Pregledi:
- Vrsta izgleda koja omogućuje prelamanje blokova kada se razlučivost zaslona smanji. Na stranicama s više stupaca, dodatni blokovi se premještaju na dno zaslona.
- Kada se za svako dopuštenje izradi poseban uzorak. Ova vrsta responzivnog dizajna traje dulje, ali je najčitljivija.
- Jednostavna vrsta dizajna koja ima za cilj skalirati sve elemente. Nije fleksibilno.
- Tip panela je prikladan za korištenje u mobilnim aplikacijama, kada se pri promjeni položaja samog zaslona pojavljuju dodatne funkcije.
Izrada responzivnih slojeva samo je jedan dio posla. Prilagodljive slike su zaseban slučaj, koji ima svoje probleme i metode za njihovo rješavanje.
Pojedinačna slika mora biti jasno prikazana u različitim razlučivostima zaslona. Ovdje postoji problem – kako se pobrinuti da slika uvijek ostane ista, bez obzira na promjenu rezolucije. Unošenje jednostavnog CSS koda u ovom slučaju neće biti dovoljno.
Primjer: img {max-width: 250px;} - ovdje biste trebali primijeniti metodu u kojoj je veličina spremnika koji sadrži sliku ograničena, a ne sama slika. Izgledat će otprilike ovako: div img {max-width: 250px;}. Ova metoda rješava problemraspored malih slika, ali nije prikladan za velike ilustracije.
Stoga, mnogi programeri radije koriste javascript jezike koji vam omogućuju da prilagodite bilo koju sliku bez preopterećenja poslužitelja. Javascript nudi veliki broj alternativnih skripti.
Prednosti i nedostaci responzivnog izgleda
Pozitivne:
- Spremite lokaciju svih elemenata. Ovo je zgodno kada je korisnik naviknut na punu verziju stranice.
- Spremi domene i adrese.
- Potpuna prilagodba za druge formate dopuštenja.
Negativne:
- Izgubljena je funkcionalna fleksibilnost
- Svako informativno preopterećenje je ispunjeno dugim pokretanjem web-resursa, što mnoge korisnike tjera da se prebace na brže opcije.
Izrada web stranice
Struktura stranice podijeljena je u nekoliko sekcija i blokova. Tradicionalno, izgled se sastoji od gornjeg dijela stranice (header), logotipa, izbornika, bloka sadržaja i završnog dijela stranice (na primjer, detaljnih podataka za kontakt). Pogledajmo kako napraviti responzivni dizajn web stranice iz jednostavnog predloška.
Pomoćne oznake za pisanje:
- wrapper - oznaka koja kombinira sve elemente predloška;
- header h1 - logo;
- header - zaglavlje za izbornik i druge važne elemente;
- sadržaj - blok;
- colLeft - veličina sadržaja;
- colRight - bočna traka (bočni stupac);
- footer - završni dio stranice;
- medijski zaslon - postavljaželjena rezolucija.
Kada pišete web stranicu, ovi elementi se mogu pomicati različitim redoslijedom, ovisno o potrebi. Na primjer, pri visokim razlučivostima izbornik se može prikazati okomito. U mobilnoj verziji, izgled se može izraditi na način da će izbornik kliziti u vodoravnom položaju.
- viewport - oznaka koja vam omogućuje spremanje veličine teksta u manjoj verziji dizajna. Nalazi se između oznaka.
- max-width - za optimizaciju stranice kako bi se izbjeglo rastezanje pri razlučivosti većoj od 1000 piksela.
Prilikom implementacije izgleda, jQuery biblioteka puno pomaže kada trebate promijeniti stil i strukturu blokova.
Koja je razlika između responzivnog i mobilnog dizajna
Za potpuno razumijevanje, razmotrite nekoliko ilustrativnih primjera, jer zabuna između ova dva koncepta nije neuobičajena.
Morate razumjeti da je mobilna verzija analogna primarnoj web-lokaciji s poddomenom. Vanjska prezentacija stranice u potpunosti ponavlja stil i funkcionalnost, dok se njena struktura i sadržaj mogu razlikovati od glavne verzije, budući da je verzija srezana na potrebne elemente.
Responzivni dizajn optimalan je za sve rezolucije uređaja. Skalabilan je i ispravno se prikazuje bez obzira na uvjete gledanja.
Ovo su dvije različite prezentacije stranice, oko kojih se neumorno vode sporovi koja je bolja. Treba napomenuti da konačna odluka još nije donesena. Netko hvali ovaj dizajn, ističući modni trend i puno prednosti. Mobilna verzija također ima nekoliko prednosti koje responzivni dizajn nema. Stoga, za početak, trebali biste razumjeti osnovne potrebe.
Pogodnosti
Kako je responzivni dizajn bolji od mobilnog?
Svestranost. U naše vrijeme, s tako bjesomučnim rastom tržišta, jednostavno je potrebno informacije prezentirati na drugačiji način, zadovoljavajući želje potrošača. Responzivni dizajn rješava ovaj problem.
Učinkovita promocija u tražilicama. Ono što se ne može pripisati glavnim prednostima adaptivnog uređaja. Tražilice radije daju korisnicima responzivne web stranice.
Upotrebljivost. Responzivni dizajn obično je dizajniran u najboljim dizajnerskim rješenjima, što je lijep poklon za vizualnu percepciju korisnika.
Lakoća i jednostavnost kako u provedbi projekta tako iu njegovoj upotrebi.
Dobre stope konverzije. Budući da s prilagodljivim dizajnom postoji više mogućnosti za prikaz, sama konverzija se povećava.
Ekonomija. To je relativno jeftinije od stvaranja i promocije zasebne mobilne verzije.
Prednosti i nedostaci mobilne verzije
Stvaranje responzivnog mobilnog dizajna zahtijeva svestranost i dosljednost. Prije svega, preporuča se detaljno napisati opis poslova, što će, naravno, pomoći u izbjegavanju nepotrebnog rada i uštedi vremena, kao i uzeti u obzir značajke poslužitelja na kojem će se stranica nalaziti.
Postoje određene prednosti i nedostaci mobilnog responzivnog dizajna.
Dodaci:
- Ako imate gotovu stranicu, nema potrebe razvijati dizajn za mobilnu verziju od nule. Može se napraviti samo nekoliko promjena, čime se ovaj izgled oslobađa od nepotrebnih funkcija.
- Zbog svih vrsta pojednostavljenja, mobilna verzija smatra se bržom prilikom preuzimanja.
- Korisnik vidi najvažniju informaciju u svom sadržaju.
- Brza implementacija. Postoje dodaci s kojima možete implementirati mobilnu prilagodbu, čak i ako ne znate oznake i kodove.
- Odabir tražilice daje prednost adaptivnim verzijama jer im je potrebno manje vremena za analizu.
Protiv:
- Ne mogu se sve mobilne verzije podudarati s razlučivostima mobilnih uređaja. Stranica će se, naravno, otvoriti, ali razlučivost zaslona ne odgovara uvijek izgledu. Ponekad dobro dizajniran dizajn pametnog telefona može izgledati drugačije kada se otvori kao tablet.
- Mobilne verzije zahtijevaju zasebne plaćene domene.
- Postoje neki manji problemi s objavljivanjem sadržaja. Ako postoji nekoliko verzija odjednom, sadržaj treba prilagoditi za sve formate odjednom. Slanje novog materijala na glavnom mjestu i njegovo kopiranje na mobilnu verziju može se smatrati krađom. Da biste izbjegli ovaj problem, možda ćete morati dokazati povezanost resursa.
Metode implementacije
Glavne metode implementacije:
- Nakon izrade dizajna izgleda i izgleda, učitava se na potrebne dimenzije pomoćumjesto operatera i glavni kod. Ovo je klasična metoda koja se koristi pri izradi srednjih i malih verzija (tableti, pametni telefoni, itd.).
- BootStrap je jednostavan i jasan skup alata za prilagodbu. Pogodno za izradu verzija za Landing Page i druge ne baš složene web projekte. Daje dobru priliku za primjenu mnogo različitih stilova u funkcijama sučelja.
- Responsive Grid System je popularan skup svestranih alata. Lako se primjenjuje i ne zahtijeva duboko znanje. Uključuje širok izbor infografika.
- GUMBY - CSS okvir koji se može pohvaliti fleksibilnim odzivom i sjajnim alatima.
- Cookies - omogućuje vam implementaciju responzivnih slika. Automatski prati datoteke koje traži preglednik.
- ExpressionEngine je još jedan način za stvaranje responzivnih slika. Određuje je li uređaj mobilan, sposoban mijenjati slike na potrebnu razlučivost.
- ProtoFluid - Omogućuje brzu izradu prototipa. Prikladno za sve vrste uređaja.
