Prilikom dizajniranja vaše web stranice važno je pobrinuti se da izgleda odlično na bilo kojem uređaju, bez obzira na veličinu i oblik ekrana. Responzivne web stranice dizajnirane su tako da izgledaju dobro na svim vrstama modernih uređaja poput računara, 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 njenih elemenata ovisno o specifičnim uvjetima. Ovaj wikiHow vas uči kako planirati i implementirati osnovni responzivni web dizajn.
Koraci
Metoda 1 od 3: Planiranje prilagođenog dizajna
Korak 1. Saznajte kako vaša publika koristi vašu web stranicu
Ovih dana većina ljudi koji pregledavaju web to rade s mobilnih telefona 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 kod vaših korisnika (ako su ti podaci dostupni) i na način na koji koriste vašu web lokaciju. Koristeći softver za analitiku ili neki drugi oblik istraživanja saznajte:
- Koje uređaje najčešće koriste za pregledavanje web stranice, obraćajući posebnu pažnju na marke mobilnih telefona/tableta/računara i veličine ekrana/rezolucije.
- Koji su preglednici najpopularniji među vašim korisnicima. Što se globalne statistike tiče, Google Chrome je najpopularniji web preglednik u svijetu, ali 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 koju možete izostaviti.
Korak 2. Dizajnirajte različite rasporede za različite uređaje
Možete koristiti kombinaciju CSS -a i JavaScript -a za otkrivanje korisnikovog uređaja, kao i njegovih mogućnosti (podržava li Java, Flash, itd.) I u skladu s tim prikazati određenu verziju vaše web lokacije. CSS medijski upiti su posebno korisni za određivanje veličine/rezolucije uređaja.
Korak 3. Uzmite u obzir različite vrste interakcija
Vaš posjetitelj može komunicirati s vašom web lokacijom pomoću miša, tastature, ekrana osjetljivog na dodir ili čak čitača ekrana za osobe sa oštećenim vidom. 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 ekranu.
Efekti prelaska mišem ne rade ni s čim osim s mišem. Umjesto korištenja ovih efekata, možete koristiti da od posjetitelja kliknete gumb ili ikonu za prikaz svega što je prethodno prikazano pri prelasku mišem
Korak 4. Razmislite o upotrebi sistema 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 kao što su Joomla, Drupal ili Wordpress omogućuje vam da osigurate da vaša web stranica izgleda odlično na svim uređajima, bez da sami morate kodirati responzivne elemente. Provjerite sa svojim pružateljem usluga web hostinga koji CMS alati su dostupni s vašom uslugom.
Korak 5. Pomoću mrežnih alata testirajte svoju web stranicu
Sada kada je responzivni web dizajn sve popularniji, postoji niz besplatnih alata 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đenosti 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 ekranima.
- resizeMyBrowser: Omogućuje pregled vaše web lokacije u različitim rezolucijama.
- Odgovorni: Prikazuje vašu web lokaciju na različitim ekranima uređaja u različitim rasporedima (bočno ili desno na gore).
Metoda 2 od 3: Prilagodba izgleda stranice
Korak 1. Razmislite o besplatnom okviru za prilagodljive 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 okviri su testirani i optimizirani za rad sa svim preglednicima, tako da 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
- Skeleton
- Foundation
Korak 2. Postavite okvir za prikaz s meta oznakom
Ako ne koristite framework, počnite s najvažnijim aspektom kodiranja responzivne web stranice: Viewport. Okvir za pregled je dio web stranice koji je vidljiv korisniku. Ključ za pravilno prikazivanje vaše web stranice, bez obzira na veličinu ekrana, 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 stranici:
Korak 3. Odredite veličinu teksta u odnosu na okvir za prikaz
Nakon što je vaš prikaz postavljen, tekst na vašoj stranici će se prilagoditi veličini ekrana. Međutim, fontovi se mogu prikazati preveliki ili premali ako njihove veličine nisu navedene u odnosu na okvir za 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 veličinu:
wikiHow
Korak 4. Koristite medijske upite za prikaz različitih stilova za različite veličine ekrana
Medijski upiti omogućuju vam da odaberete želite li prikazati određene CSS elemente ovisno o veličini ekrana. Specifikacije vašeg medijskog upita možete navesti u CSS datoteci. U ovom primjeru, boja pozadine tijela će postati crvena ako je korisnički ekran 480 piksela ili veći:
wikiHow
@medijski ekran i (min-širina: 480px) {body {background-color: aqua; }}
Metoda 3 od 3: Prilagođavanje slika
Korak 1. Upotrijebite svojstvo širine CSS -a za skaliranje slika
Umjesto postavljanja širine slike na određenu količinu piksela (npr. 500px), upotrijebite postotak (npr. 100%) tako da slika gleda širinu svojih roditelja i prema tome se prilagođava. Postavljanje širine slike na 100% prisiljava sliku da se povećava i smanjuje u zavisnosti od veličine ekrana gledaoca. Da biste to učinili u liniji:
Korak 2. Koristite svojstvo max-width da 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 njen spremnik bez obzira na veličinu. To znači da ako je slika na manjoj strani, uvećat će se u odnosu na izvornu veličinu i izgledati manje kvalitete. Da se to spriječi, koristite max-width za postavljanje maksimalne veličine slike na 100% (njena stvarna veličina). Evo kako:
Korak 3. Koristite HTML element slike za prikaz različitih slika na različitim veličinama ekrana
Ako želite stvoriti slike prilagođene veličine za prikaz na ekranima različitih veličina, možete odrediti koje će se fotografije prikazivati u vašem HTML kodu. Kreirajte slike različitih veličina, a zatim upotrijebite ovaj kôd kao primjer za navođenje slike koju ćete koristiti na ekranima širine 600 i 1500 piksela:
