Prilikom projektiranja vaše web stranice važno je pobrinuti se da izgleda sjajno na bilo kojem uređaju, bez obzira na veličinu i oblik zaslona. Responzivne web stranice osmišljene su tako da izgledaju dobro na svim vrstama modernih uređaja poput računala, telefona, tableta, televizora, nosive opreme, pa čak i ekrana automobila. Da bi web stranica bila responzivna, morat ćete izmijeniti svoj CSS i HTML kôd kako bi automatski promijenili veličinu njezinih elemenata ovisno o posebnim uvjetima. Ovaj wikiHow vas uči kako planirati i implementirati osnovni responzivni web dizajn.
Koraci
Metoda 1 od 3: Planiranje prilagodljivog dizajna
Korak 1. Saznajte kako vaša publika koristi vašu web stranicu
Ovih dana većina ljudi koji pregledavaju web to rade s mobitela i tableta. Da bi web lokacija bila responzivna, morate osigurati da se pravilno prikazuje bez obzira na to gdje se pregledava. Ako su vrijeme i novac najvažniji, usredotočite se na vrste uređaja koji su najpopularniji među vašim korisnicima (ako su ti podaci dostupni) i na način na koji koriste vaše web mjesto. Koristeći svoj analitički softver ili neki drugi oblik istraživanja saznajte:
- Koje uređaje najčešće koriste za pregledavanje web stranice, obraćajući posebnu pozornost na robne marke mobilnih telefona/tableta/računala i veličine zaslona/razlučivosti.
- Koji su preglednici najpopularniji među vašim korisnicima. Što se globalnih statistika tiče, Google Chrome najpopularniji je web preglednik u svijetu, no Safari je na drugom mjestu.
- Kako vaši posjetitelji koriste vašu web stranicu, na primjer koliko vremena provode pregledavajući je, gdje je pregledavaju i koji je sadržaj najpopularniji. To vam može pomoći da odredite koju vrstu sadržaja je važno uključiti, a koji se može izostaviti.
Korak 2. Dizajnirajte različite izglede za različite uređaje
Možete upotrijebiti kombinaciju CSS -a i JavaScripta za otkrivanje korisnikovog uređaja, kao i njegovih mogućnosti (podržava li Java, Flash itd.,) I prema tome prikazati određenu verziju vaše web stranice. CSS medijski upiti osobito su korisni za određivanje veličine/razlučivosti uređaja.
Korak 3. Računajte različite vrste interakcija
Vaš bi posjetitelj mogao komunicirati s vašom web lokacijom pomoću miša, tipkovnice, zaslona osjetljivog na dodir ili čak čitača zaslona za osobe s oštećenjem vida. S obzirom na to, vaša web stranica trebala bi reagirati na klikove mišem, tipke na tipkovnici (Tab, Enter, Return itd.) I dodir prstiju na zaslonu.
Efekti prelaska mišem ne rade ni s čim osim s mišem. Umjesto korištenja ovih efekata, mogli biste upotrijebiti da posjetitelj klikne gumb ili ikonu za prikaz svega što je prethodno bilo prikazano pri mišu
Korak 4. Razmislite o korištenju Sustava za upravljanje sadržajem (CMS)
Jednostavan način da osigurate da dizajn vaše web stranice odgovara je korištenje CMS-a s unaprijed izgrađenom responzivnom temom. Korištenje CMS -a poput Joomle, Drupala ili Wordpressa omogućuje vam da web stranica izgleda sjajno na svim uređajima, a da sami ne morate kodirati responzivne elemente. Provjerite sa svojim davateljem usluga webhostinga koji su CMS alati dostupni s vašom uslugom.
Korak 5. Pomoću mrežnih alata testirajte svoju web stranicu
Sada kada je responzivni web dizajn sve popularniji, postoje različiti besplatni alati koje možete koristiti za testiranje svoje web stranice. Ako ste već kodirali svoju web stranicu, upotrijebite ove alate da biste testirali kako izgleda u različitim uvjetima kako biste znali gdje trebate poboljšati odziv:
- Googleov test prilagođen mobilnim uređajima: Omogućuje vam da znate funkcionira li vaša web lokacija jednako dobro na mobilnim uređajima kao i na računalnim zaslonima.
- resizeMyBrowser: Omogućuje pregled vaše web stranice u različitim rezolucijama.
- Odgovornik: Prikazuje vašu web lokaciju na različitim zaslonima uređaja u različitim izgledima (bočno ili s desne strane).
Metoda 2 od 3: Prilagodba izgleda stranice
Korak 1. Razmislite o besplatnom okviru za responzivne stilove
Okvir je unaprijed napisani skup HTML-a, CSS-a i/ili JavaScript-a koji možete koristiti kao kostur za svoju web lokaciju. Svi su okviri testirani i optimizirani za rad sa svim preglednicima, pa sve što trebate učiniti je umetnuti svoj sadržaj, dodati svoje postavke medija i boja te objaviti svoju web lokaciju. Neki popularni okviri su:
- Bootstrap
- Kostur
- Temelj
Korak 2. Postavite okvir za prikaz s meta oznakom
Ako ne koristite okvir, počnite s najvažnijim aspektom kodiranja responzivne web stranice: Viewport. Okvir za pregled dio je web stranice koji je vidljiv korisniku. Ključ za pravilno prikazivanje vaše web stranice, bez obzira na veličinu zaslona, je skaliranje veličine okvira za prikaz u META oznaci. Da biste to učinili, uključite ovu oznaku na vrh svake stranice na web mjestu:
Korak 3. Odredite veličinu teksta u odnosu na okvir za prikaz
Kad postavite okvir za prikaz, tekst na vašoj stranici će se prilagoditi veličini zaslona. Međutim, fontovi se mogu prikazati preveliki ili premali ako njihove veličine nisu navedene u odnosu na prikaz. To možete učiniti definiranjem veličine fonta kao određenog postotka okvira za prikaz pomoću jedinice vw. Ovaj primjer govori zaglavljima H1 da se prikazuju na 10% širine okvira za prikaz, bez obzira na njegovu veličinu:
wikiHow
Korak 4. Koristite medijske upite za prikaz različitih stilova za različite veličine zaslona
Medijski upiti omogućuju vam da odaberete želite li prikazati određene CSS elemente ovisno o veličini zaslona. Specifikacije vašeg medijskog upita možete navesti u CSS datoteci. U ovom primjeru boja pozadine tijela će postati crvena ako je korisnički zaslon veličine 480 piksela ili veći:
wikiHow
@medijski zaslon i (minimalna širina: 480px) {tijelo {pozadinska boja: aqua; }}
Metoda 3 od 3: Prilagodba slika
Korak 1. Upotrijebite svojstvo širine CSS -a za skaliranje slika
Umjesto postavljanja širine slike na određenu količinu piksela (npr. 500 piksela), upotrijebite postotak (npr. 100%) tako da slika gleda širinu svog roditelja i prema tome se prilagodi. Postavljanje širine slike na 100% prisiljava sliku da se povećava prema gore i dolje, ovisno o veličini zaslona gledatelja. Da biste to učinili linijski:
Korak 2. Pomoću svojstva max-width ograničite skaliranje stvarne veličine slike
Ako koristite svojstvo width u prethodnom koraku za skaliranje slike na 100%, slika će se povećati ili smanjiti kako bi stala 100% u njezin spremnik, bez obzira na veličinu. To znači da će slika, ako je na manjoj strani, biti veća od izvorne veličine i izgledati manje kvalitete. Kako se to ne bi dogodilo, pomoću max-width postavite maksimalnu veličinu skaliranja slike na 100% (njezina stvarna veličina). Evo kako:
Korak 3. Koristite HTML element slike za prikaz različitih slika na različitim veličinama zaslona
Ako želite stvoriti slike prilagođene veličine za prikaz na zaslonima različitih veličina, možete odrediti koje će se fotografije prikazivati u vašem HTML kodu. Izradite slike različitih veličina, a zatim upotrijebite ovaj kôd kao primjer za navođenje slike koju ćete koristiti na zaslonima širine 600 i 1500 piksela:
