Pri oblikovanju spletnega mesta je pomembno, da se prepriča, da je videti odlično na kateri koli napravi, ne glede na velikost in obliko zaslona. Odzivna spletna mesta so zasnovana tako, da izgledajo dobro na vseh vrstah sodobnih naprav, kot so računalniki, telefoni, tablični računalniki, televizorji, nosljivi izdelki in celo zasloni avtomobilov. Če želite, da bo spletno mesto odzivno, morate spremeniti svojo kodo CSS in HTML, da samodejno spremeni velikost elementov glede na posebne pogoje. Ta wikiHow vas uči, kako načrtovati in izvajati osnovno odzivno spletno oblikovanje.
Koraki
Metoda 1 od 3: Načrtovanje odzivnega oblikovanja
Korak 1. Ugotovite, kako občinstvo uporablja vaše spletno mesto
Danes večina ljudi brska po spletu z mobilnimi telefoni in tabličnimi računalniki. Za odzivnost spletnega mesta morate zagotoviti, da se pravilno prikaže, ne glede na to, kje si ga ogledujete. Če sta čas in denar bistvenega pomena, se osredotočite na vrste naprav, ki so najbolj priljubljene pri vaših uporabnikih (če so ti podatki na voljo), in na to, kako uporabljajo vaše spletno mesto. S programsko opremo za analizo ali drugo obliko raziskovanja ugotovite:
- Katere naprave najpogosteje uporabljajo za ogled spletnega mesta, pri čemer so posebno pozornost namenili blagovnim znamkam mobilnih telefonov/tabličnih računalnikov/računalnikov ter velikosti zaslona/ločljivosti.
- Kateri brskalniki so pri vaših uporabnikih najbolj priljubljeni. Kar zadeva globalne statistike, je Google Chrome najbolj priljubljen spletni brskalnik po vsem svetu, Safari pa je na drugem mestu.
- Kako vaši obiskovalci uporabljajo vaše spletno mesto, na primer koliko časa porabijo za ogled, kje si ga ogledajo in katera vsebina je najbolj priljubljena. Tako lahko ugotovite, katero vrsto vsebine je pomembno vključiti in katero lahko izpustite.
Korak 2. Oblikujte različne postavitve za različne naprave
S kombinacijo CSS in JavaScript lahko odkrijete uporabnikovo napravo ter njene zmogljivosti (ali podpira Java, Flash itd.) In ustrezno prikažete določeno različico svojega spletnega mesta. CSS Media Queries so še posebej uporabne za določanje velikosti/ločljivosti naprave.
Korak 3. Upoštevajte različne vrste interakcij
Vaš obiskovalec lahko komunicira z vašim spletnim mestom z miško, tipkovnico, zaslonom na dotik ali celo bralnikom zaslona za slabovidne. Glede na to bi se moralo vaše spletno mesto odzvati na klike miške, tipke na tipkovnici (Tab, Enter, Return itd.) In na prste na zaslonu.
Učinki miške ne delujejo z ničemer, razen z miško. Namesto da bi uporabili te učinke, lahko zahtevate, da obiskovalec klikne gumb ali ikono, da prikaže vse, kar je bilo prej prikazano pri miški miške
Korak 4. Razmislite o uporabi sistema za upravljanje vsebine (CMS)
Enostaven način, da se prepričate, da je oblikovanje vašega spletnega mesta odzivno, je uporaba CMS-ja z vnaprej pripravljeno odzivno temo. Z uporabo CMS, kot so Joomla, Drupal ali Wordpress, lahko zagotovite, da bo vaše spletno mesto videti odlično na vseh napravah, ne da bi morali sami kodirati odzivne elemente. Pri ponudniku spletnega gostovanja preverite, katera orodja CMS so na voljo za vašo storitev.
Korak 5. S spletnimi orodji preizkusite svojo spletno stran
Zdaj, ko je priljubljenost odzivnega spletnega oblikovanja vse večja, obstajajo različna brezplačna orodja, s katerimi lahko preizkusite svojo spletno stran. Če ste svoje spletno mesto že kodirali, uporabite ta orodja, da preizkusite, kako izgleda v različnih pogojih, da boste vedeli, kje morate izboljšati odzivnost:
- Googlov preizkus prijaznosti do mobilnih naprav: omogoča vam, da ugotovite, ali vaše spletno mesto deluje tako dobro na mobilnih napravah kot na računalniških zaslonih.
- resizeMyBrowser: Omogoča ogled vašega spletnega mesta v različnih ločljivostih.
- Odgovorni: prikaže vaše spletno mesto na različnih zaslonih naprav v različnih postavitvah (vstran ali desno navzgor).
Metoda 2 od 3: Prilagodite postavitev strani
Korak 1. Razmislite o brezplačnem odzivnem okvirju slogovnih listov
Okvir je vnaprej napisan niz HTML, CSS in/ali JavaScript, ki ga lahko uporabite kot okostje svojega spletnega mesta. Okviri so preizkušeni in optimizirani za delo z vsemi brskalniki, zato morate le vstaviti svojo vsebino, dodati medijske in barvne nastavitve ter objaviti svoje spletno mesto. Nekateri priljubljeni okviri so:
- Bootstrap
- Okostje
- Fundacija
Korak 2. Nastavite vidno polje z meta oznako
Če ne uporabljate ogrodja, boste začeli z najpomembnejšim vidikom kodiranja odzivnega spletnega mesta: Viewport. Ogledno polje je del spletnega mesta, ki je viden uporabniku. Ključ do pravilnega prikaza vašega spletnega mesta, ne glede na velikost zaslona, je povečati velikost prikaza v oznaki META. Če želite to narediti, vključite to oznako na vrh vsake strani na spletnem mestu:
Korak 3. Določite velikost besedila glede na pogled
Ko je območje prikaza nastavljeno, se besedilo na vaši strani prilagodi velikosti zaslona. Pisave pa se lahko prikažejo prevelike ali premajhne, če njihove velikosti niso določene glede na pogled. To lahko storite tako, da z enoto vw določite velikost pisave kot določen odstotek vidnega polja. Ta primer pove, da se glave H1 prikažejo pri 10% širine okna, ne glede na velikost:
wikiKako
Korak 4. Uporabite medijske poizvedbe za prikaz različnih slogov za različne velikosti zaslona
Predstavnostne poizvedbe vam omogočajo, da izberete, ali želite prikazati nekatere elemente CSS, odvisno od velikosti zaslona. V datoteki CSS lahko podate posebnosti medijske poizvedbe. V tem primeru bo barva ozadja telesa rdeča, če je velikost uporabnikovega zaslona 480 px ali več:
wikiKako
@medijski zaslon in (minimalna širina: 480px) {body {ozadje-barva: aqua; }}
Metoda 3 od 3: Odzivnost slik
Korak 1. Uporabite lastnost širine CSS za spreminjanje velikosti slik
Namesto da širino slike nastavite na določeno količino slikovnih pik (npr. 500 slikovnih pik), uporabite odstotek (npr. 100%), tako da slika gleda na širino svojih nadrejenih in se temu ustrezno prilagodi. Če nastavite širino slike na 100%, se slika prilagodi navzgor in navzdol, odvisno od velikosti zaslona gledalca. Če želite to narediti v vrstici:
Korak 2. Z lastnostjo max-width omejite povečanje dejanske velikosti slike
Če uporabite lastnost width v prejšnjem koraku za prilagoditev slike na 100%, se bo slika povečala ali skrčila, da bo ustrezala 100% vsebnika, ne glede na velikost. To pomeni, da če je slika na manjši strani, se bo povečala v primerjavi s prvotno velikostjo in izgledala manj kakovostno. Če želite to preprečiti, z največjo širino nastavite največjo velikost slike na 100% (njeno dejansko velikost). Takole:
Korak 3. Uporabite element slike HTML za prikaz različnih slik na različnih velikostih zaslona
Če želite ustvariti slike po meri za prikaz na zaslonih različnih velikosti, lahko določite, katere fotografije bodo prikazane v vaši kodi HTML. Ustvarite slike različnih velikosti in nato uporabite to kodo kot primer za določitev, katero sliko želite uporabiti na zaslonih širine 600 in 1500 slikovnih pik:
