Prilagodljivi dizajn web stranice je zgodan sistem 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 laptopu, pametnom telefonu i drugim uređajima.
Odziv na webu postao je neophodan otkako su ljudi dobili gadgete različitih formata s omogućenim internetom. Kompanije, internet 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 karakteriše nekoliko glavnih kriterijuma.
- Veličina. Responzivni dizajn web stranice trebao bi imati manje razlike kada se stranica prikazuje na različitim uređajima, tako da bi veličine slika, teksta i drugih elemenata koji se pregledavaju trebali odgovarati veličinama samih uređaja. Da bi to učinili, web programeri prilagođavaju dizajn tako da ima više verzija prikaza.
- Prilagođavanje sadržaja. Materijal koji ispunjava stranicu (slike, video zapisii drugi multimedijalni elementi) također moraju odgovarati potrebnim rezolucijama ekrana bez gubitka kvaliteta prikaza.
- Fleksibilnost dizajna. Uključivanje u razvoj elemenata koji vam omogućavaju da brzo prilagodite dizajn stranice kada promijenite web stranicu koju gledate. Na primjer, korisnik pomiče stranicu gore-dolje, navigira kroz različite dijelove ili mijenja položaj ekrana iz vertikalnog u horizontalni i obrnuto.
- Pojednostavite stavke po uređaju za bolju upotrebljivost.
- Sakrij nevažne blokove na manjim ekranima.
Osnove
Izrada web stranica je svakako vezana za programske jezike, jer bez njih jednostavno ne možete. Koristeći HTML i CSS, pretraživač prepoznaje kompoziciju i redosled objekata (tekstova, ilustracija, video zapisa) - tako se formira sajt.
CSS je odgovoran za boju, stilove, veličine, fontove, poravnanja, padding, elemente pozadine, forme, itd. HTML je odgovoran za cjelokupni sadržaj i strukturu stranice. Dakle, web resurs je izgrađen u zbiru dvije najvažnije metode opisa.
CSS je, s druge strane, nezamjenjiv alat za dizajn. Ima veliki skup funkcija koje su superiornije od HTML-a:
- Omogućava konzistentnost dizajna na više stranica, izgled stranice i kontrolira prikaz HTML dokumenata.
- Daje 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 je označen imenom stila koji definira svojstva i opcije formatiranja. Govori pretraživaču na koji se specifični element svojstva odnose.
Imovina je strukturna jedinica. Definira vanjske parametre (veličinu, lokaciju, boju, oblik, itd.) i izražava se posebnim kodom.
Postoji skup definisanih CSS svojstava koja opisuju jedan objekat po izgledu i lokaciji.
Zajedno, ovi elementi čine sljedeću šemu:
Selektor { property1: vrijednost; vlasništvo2; 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 se uvode u platno, promatraju se posebne uvlake. Tako web dizajner pokazuje layout dizajneru principe strukturiranja buduće stranice i pravilnog rasporeda web elemenata.
Rezolucije i veličine responzivnog web dizajna za glavne tipove uređaja:
- Ovaj dizajn se pridržava principa početka rada sa mobilnom dozvolom. Izgled za pametni telefon je kreiran u veličini od 460 × 960 px.
- Veličina izgleda tableta je 768 × 1024.
- Veličina notebook-a je 1280 × 802.
- Veličina računara je 1600 × 992.
U mobilnoj verziji stranicetreba biti što je moguće pojednostavljen, uz zadržavanje svih glavnih funkcija. Ako se izgled priprema za internet prodavnicu, sa svim pojednostavljenjima u upotrebi, treba da ima glavni opis, katalog proizvoda, opciju narudžbe, korpu za kupovinu itd. - sve potrebne elemente za potpuno funkcioniranje, kao kod gledanja punog formata na računaru. Pogodnost mobilne verzije je što ovdje možete izbjeći dodatne stranice kako biste uštedjeli vrijeme prilikom učitavanja.
U adaptivnom sadržaju, koristeći html kod, možete sakriti neke elemente koji nisu zaista potrebni. Na primjer, u visokoj rezoluciji, stranica prikazuje karticu proizvoda s opisom, cijenom, podacima o isporuci i mogućnošću dodavanja u "Košu". U mobilnoj rezoluciji, proces je pojednostavljen na fotografiju, cijenu i dugme za kupovinu.
Srednje i minimalne rezolucije za responzivni dizajn trebaju uzeti u obzir lakoću čitanja i gledanja od strane korisnika.
Izgled
Svrha adaptivnog dizajna izgleda je kreiranje fleksibilnog izgleda, ili kako je uobičajeno reći: "gumeni šablon". Suština nije u jednocifrenim veličinama stranica, već u proporcionalnoj kompresibilnosti šablona za jednostavno gledanje na svim uređajima.
Napravljen je uglavnom na CSS-u. Tokom razvoja određuju se kontrolne tačke dimenzija ekrana. Tako se određuje širina preostalih objekata. Da biste to učinili, širinu stranice postavlja css max-width svojstvo, ovisno o ovim kriterijima, veličina ostalih elemenata se bira kao postotak. Na primjer, veličina bloka na glavnomstranica je 600px, a širina bloka bočne trake (bočne trake stranice) je 400px, odnosno širina sadržaja će biti 60%, a širina bočne trake 40%.
Postoji nekoliko tipova responzivnih izgleda. Svaki se bira pojedinačno, u zavisnosti od karakteristika i konstrukcije.
Pregledi:
- Tip rasporeda koji dozvoljava premotavanje blokova kada je rezolucija ekrana smanjena. Na sajtovima sa više kolona, dodatni blokovi se pomeraju na dno ekrana.
- Kada se razradi poseban obrazac za svaku dozvolu. Ova vrsta responsive dizajna traje duže, ali je najčitljivija.
- Jednostavna vrsta dizajna koja ima za cilj skaliranje svih elemenata. Nije fleksibilno.
- Tip panela je pogodan za upotrebu u mobilnim aplikacijama, kada se pojavljuju dodatne funkcije prilikom promjene položaja samog ekrana.
Kreiranje responzivnih slojeva je samo jedan dio posla. Adaptivne slike su poseban slučaj, koji ima svoje probleme i metode za njihovo rješavanje.
Pojedinačna slika mora biti jasno prikazana na različitim rezolucijama ekrana. Ovdje postoji problem - kako osigurati 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 treba primijeniti metodu u kojoj je ograničena veličina kontejnera koji sadrži sliku, a ne same slike. To će izgledati otprilike ovako: div img {max-width: 250px;}. Ova metoda rješava problemraspored malih slika, ali nije pogodan za velike ilustracije.
Stoga, mnogi programeri radije koriste javascript jezike koji vam omogućavaju da prilagodite bilo koju sliku bez preopterećenja servera. Javascript nudi veliki broj alternativnih skripti.
Prednosti i nedostaci responzivnog izgleda
Pozitivne:
- Sačuvajte lokaciju svih elemenata. Ovo je zgodno kada je korisnik naviknut na punu verziju stranice.
- Sačuvaj domene i adrese.
- Potpuno prilagođavanje za druge formate dozvola.
Negativne:
- Izgubljena je funkcionalna fleksibilnost
- Svako informativno preopterećenje je ispunjeno dugim pokretanjem web resursa, što primorava mnoge korisnike da se prebace na brže opcije.
Kreiranje web stranice
Struktura sajta je podeljena na nekoliko sekcija i blokova. Tradicionalno, izgled se sastoji od gornjeg dijela stranice (header), logotipa, menija, bloka sadržaja i završnog dijela stranice (na primjer, detaljne kontakt informacije). Hajde da vidimo kako napraviti responzivni dizajn web stranice od jednostavnog šablona.
Pomoćne oznake za pisanje:
- wrapper - oznaka koja kombinuje sve elemente šablona;
- header h1 - logo;
- header - zaglavlje za meni 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 ekran - postavljaželjena rezolucija.
Prilikom pisanja sajta, ovi elementi se mogu pomerati različitim redosledom, u zavisnosti od potrebe. Na primjer, pri visokim rezolucijama, meni se može prikazati okomito. U mobilnoj verziji, raspored se može napraviti na način da će meni kliziti u horizontalnom položaju.
- viewport - oznaka koja vam omogućava da sačuvate veličinu teksta u manjoj verziji dizajna. Nalazi se između oznaka.
- max-width - za optimizaciju stranice kako bi se izbjeglo rastezanje na rezolucijama preko 1000 piksela.
Prilikom implementacije izgleda, jQuery biblioteka puno pomaže kada trebate promijeniti stil i strukturu blokova.
Koja je razlika između responsive i mobilnog dizajna
Za potpuno razumijevanje, razmotrite nekoliko ilustrativnih primjera, jer zabuna između ova dva koncepta nije neuobičajena.
Morate shvatiti da je mobilna verzija analogna primarnoj stranici sa poddomenom. Vanjska prezentacija stranice u potpunosti ponavlja stil i funkcionalnost, dok se njena struktura i sadržaj može razlikovati od glavne verzije, budući da je verzija srezana na potrebne elemente.
Reaktivni dizajn je optimalan za sve rezolucije uređaja. Skalabilan je i korektno se prikazuje bez obzira na uslove 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. Neko hvali ovaj dizajn, ističući modni trend i mnoge 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 ovako 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.
Efikasna promocija u pretraživačima. Ono što se ne može pripisati glavnim prednostima adaptivnog uređaja. Pretraživači radije daju korisnicima responzivne web stranice.
Upotrebljivost. Responzivni dizajn je obično dizajniran u najboljim dizajnerskim rješenjima, što je lijep poklon za vizualnu percepciju korisnika.
Lakoća i jednostavnost kako u realizaciji projekta tako iu njegovom korištenju.
Dobre stope konverzije. Budući da sa adaptivnim dizajnom postoji više mogućnosti za prikaz, sama konverzija se povećava.
Ekonomija. To je relativno jeftinije od kreiranja i promocije zasebne mobilne verzije.
Prednosti i nedostaci mobilne verzije
Kreiranje responzivnog mobilnog dizajna zahtijeva svestranost i dosljednost. Prije svega, preporučuje se da detaljno napišete opis poslova, što će, naravno, pomoći da se izbjegne nepotrebni rad i uštedi vrijeme, kao i da se uzmu u obzir karakteristike servera na kojem će se web lokacija nalaziti.
Postoje određene prednosti i nedostaci mobilnog responzivnog dizajna.
Dodaci:
- Ako imate gotovu stranicu, nema potrebe da razvijate dizajn za mobilnu verziju od nule. Može se napraviti samo nekoliko izmjena, čime se ovaj izgled oslobađa od nepotrebnih funkcionalnosti.
- Zbog svih vrsta pojednostavljenja, mobilna verzija se smatra bržom prilikom preuzimanja.
- Korisnik vidi najvažniju informaciju u svim sadržajima.
- Brza implementacija. Postoje dodaci pomoću kojih možete implementirati mobilnu adaptaciju, čak i ako ne znate oznake i kodove.
- Izbor pretraživača daje prednost adaptivnim verzijama jer im je potrebno manje vremena za analizu.
Protiv:
- Ne mogu sve mobilne verzije odgovarati rezolucijama mobilnih uređaja. Stranica će se, naravno, otvoriti, ali rezolucija ekrana 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 sa objavljivanjem sadržaja. Ako postoji više verzija odjednom, sadržaj treba prilagoditi za sve formate odjednom. Podnošenje novog materijala na glavnu stranicu i 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 kreiranja dizajna rasporeda i izgleda, učitava se na potrebne dimenzije pomoćustranica operatera i glavni kod. Ovo je klasična metoda koja se koristi pri kreiranju srednjih i malih verzija (tableti, pametni telefoni, itd.).
- BootStrap je jednostavan i jasan skup alata za prilagođavanje. Pogodno za kreiranje verzija za Landing Page i druge ne baš složene web projekte. To daje dobru priliku za primjenu mnogo različitih stilova u funkcijama interfejsa.
- 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 odličnim alatima.
- Cookies - omogućava vam da implementirate responsive slike. Automatski prati fajlove koje traži pretraživač.
- ExpressionEngine je još jedan način za kreiranje responzivnih slika. Određuje da li je uređaj mobilni, da može promijeniti slike na potrebnu rezoluciju.
- ProtoFluid - Omogućava brzu izradu prototipa. Pogodno za sve vrste uređaja.
