Kako narediti odzivno spletno stran? Tukaj lahko dobite informacije o tej prilagodljivi tehniki, ki temelji na današnjih spletnih modelih, kar pomeni, da je pod enim samim dizajnom do spletnega portala mogoče dostopati in si ga pravilno ogledati iz katerega koli računalnika ali elektronske naprave.
¿Kako narediti odzivno spletno stran?
Zelo priročno je narediti spletno stran odzivno ali občutljivo na morebitne prilagoditve. Poleg zagotavljanja uspeha pri pravilnem delu na internetu s katere koli elektronske platforme. V naslednjih vrsticah je pojasnjen način izdelave odzivnega spleta, ki izhaja iz same narave prilagodljivosti spletnih strani. Zato bo pri oblikovanju spletne strani po odzivnem modelu možno prilagajati in videti videz oziroma sliko omenjenega spleta glede na elektronsko napravo, ki se uporablja za navigacijo.
Nihče se ne zaveda raznovrstne količine opreme ali elektronskih naprav, ki trenutno obstajajo za navigacijo po internetu, kot so: računalniki, tablice, pametni telefoni, prenosniki itd. V zgodnjih dneh interneta so se razvijalci spletnih mest navadili ustvarjati strani s skupno širino slikovnih pik. Na primer, v 90-ih so imeli monitorji, ki so obstajali, en sam zaslon velikosti 14” s fiksno širino 640 slikovnih pik. Oblikovalci spletnih strani so svoje zasnove prilagodili standardnim dimenzijam edinih monitorjev, ki so obstajali.
Blizu začetka leta 2000 in vse do leta 2010 so bili modeli monitorjev in širine slikovnih pik različni. Spletni dizajn je bil prilagojen vsaki od različic. Od leta 2010 se je zgodila velika tehnološka revolucija, ki je povzročila neravnovesje v scenariju oblikovanja spletnih strani. Navigacija prek mobilne telefonije je bila uvedena na področju interneta. Ta nova telefonija je uporabljala brskalnike tako kot računalnik. S to veliko tehnološko revolucijo je prišel čas, da napredujemo k temu, kar je znano kot odzivno oblikovanje ali prilagodljivo oblikovanje spletnih strani.
Pomembno je vedeti, kako narediti odziven splet
Tako pomembno je, da razvijalci spletnih strani vedo, kako narediti odziven splet; da ga celo zelo ugledno podjetje Google na internetu navaja kot nekaj skrajno nujnega. Ker spletna stran, zasnovana po odzivnem modelu, omogoča optimizacijo navigacije, preprečuje podvojene vsebine in zagotavlja izjemno stabilno kakovost slike. Drugi vidiki, ki so pomembni pri ustvarjanju odzivnega spletnega mesta, so:
- Z eno samo prilagoditvijo označevalnega jezika hiperteksta (HTML) in jezika CSS je mogoče doseči, da pokrije katero koli ločljivost zaslona. Tako se izognete ustvarjanju spletne strani za vsako vrsto naprave, ki vam omogoča obisk ali brskanje po njej. Ta vidik tudi skrajša čas oblikovanja.
- Med brskanjem se samodejno prilagaja, kar omogoča branje in interakcijo ob vsakem posameznem obisku.
- V iskalnikih se uspejo bolje in hitreje pozicionirati. Ker se ta vrsta oblikovanja izogiba podvajanju in preusmeritvam.
- Spletne strani, ustvarjene po tej zasnovi, omogočajo, da njihova vsebina postane hitrejša zaradi izvirnega in preprostega načina deljenja.
Kaj je odzivno spletno oblikovanje
Odzivno spletno oblikovanje, znano tudi kot prilagodljivo spletno oblikovanje, je način oblikovanja ali razvoja spletnih strani. Ta sistem ima posebnost, da omogoča obisk spletne strani, ustvarjene z enim samim dizajnom, ali dostop do nje s katerega koli računalnika ali elektronske platforme. Ime responsive je angleški izraz, ki se nanaša na nekaj, kar je odzivno, prilagodljivo, zaznavno, vidno itd.
Ta tehnika je dobila to ime zaradi zmožnosti te vrste spletne strani, da se prilagodi vsaki meritvi širine zaslona. Omogočanje njegovega prikaza in pravilnega delovanja, brez razlikovanja glede naprave, ki se uporablja za navigacijo.
To je mogoče zahvaljujoč organizaciji slik in vsebine ter preprostosti odzivnega spletnega menija. Štirje glavni kvalifikatorji, ki opredeljujejo in naredijo to vrsto oblikovanja spletnih strani zelo priljubljeno, so:
- Preprosto
- Ekonomično
- Hitro
- Predvsem pa so popolnoma funkcionalni
Kako narediti odzivno oblikovanje spleta in njegova kompleksnost
Za kompleksnost pri oblikovanju in razvoju spletnih strani lahko rečemo, da se je pojavila v letih 2010, ko so se na internetni sceni začeli pojavljati mobilni telefoni z navigacijo. Ki je med drugim uporabljal brskalnike, kot so Google, Firefox, Explorer, tako kot osebni računalnik. Postajanje na ta način v novih možnostih obiskovanja različnih spletnih strani. V teh časih so se začele pojavljati tudi prve elektronske tablice z dostopom do interneta.
Od tam so postale potrebe po oblikovanju spletnih strani bolj zapletene. Zaradi široke palete velikosti zaslonov, ki so obstajale za prikaz in delovanje spletnih strani. Morali ste najti vrsto zasnove, ki bi delovala za katero koli vrsto naprave, in se samodejno prilagajati.
Niste mogli več oblikovati za eno, dve ali tri glavne ločljivosti zaslona. Treba je bilo razumeti, da bodo ločljivosti naprav vedno bolj spremenljive, poleg tega pa bodo veliko manjše od računalniškega monitorja.
Ta trenutek je pomenil konec togosti spletnega oblikovanja. In ne le na veliko različnih naprav, ampak ima vsaka od njih tudi posebne značilnosti, kot so:
- Velikost zaslona
- Razločljivost zaslona
- moč CPU
- Sistema operativo
- Zmogljivost pomnilnika med drugim.
Nato se predstavi nov model spletnega oblikovanja, katerega cilj je, da bi bila z enim samim dizajnom možna njegova pravilna vizualizacija ne glede na napravo za brskanje. Vendar pa ima razvoj te vrste spletnega mesta svojo stopnjo zapletenosti.
Kaj je razlog za kompleksnost razvoja odzivnega spleta?
Razvijanje spletne strani pod prilagodljivim dizajnom, imenovanim odzivni, ima svojo stopnjo kompleksnosti, tudi danes. Zaradi dveh glavnih vzrokov, ki sta navedena spodaj:
1-Gre za tehnologijo, ki že dolgo ni bila razvita in zaradi številnih načinov uporabe ni bilo mogoče ugotoviti, katera je od vseh možnosti najboljša. Inovacije se vedno pojavljajo v smislu tovrstnega spletnega oblikovanja, ki ga je treba razvijati v vsakem trenutku. Zato je težko določiti najboljši okvir ali podporno tehnologijo, niti splošno pravilo, ki zagotavlja rešitev največjega števila možnih ovir. Da bi poenostavili razvoj tovrstne spletne strani.
2- Drugi vzrok je, da sistem prilagodljivega načrtovanja ne temelji samo s tehnološkega vidika. Kar se tiče načina, se bo spletno mesto razlikovalo glede na različne zaslone ali naprave. Namesto tega mora biti zasnovan z idejo, kako bo deloval v vsakem od možnih scenarijev navigacije. Ta vzrok dodaja visoko stopnjo kompleksnosti odzivnemu modelu spletnega oblikovanja, ki ga morajo počistiti ljudje, ki delajo kot razvijalci spletnih mest.
Vadba in pridobivanje dovolj spretnosti za delo s prilagodljivimi ali odzivnimi spletnimi modeli zahtevata več časa kot pri kateri koli drugi vrsti spletnega oblikovanja. Vendar je upanje, da bo z napredkom v računalništva stopnja kompleksnosti manjša. Da bi se v zvezi s tem še naprej razvijali, od osebja z znanjem o spletnih straneh, ki sodeluje pri vrstah odzivnih dizajnov, strokovno osebje, kot so:
- Postavitve
- Oblikovalci
- Programerji
- Osebje za komercialno in digitalno trženje
Zmanjšajte čas oblikovanja
Če bosta prejšnja dva vzroka odpravljena, se bo morda s tem skrajšalo obdobje razvoja oziroma ustvarjanja odzivnega spleta. Hkrati ga je mogoče dati na voljo za uporabo običajnih spletnih mest.
Medtem, glede na to, kar imamo danes, bi bilo morda hitreje razviti nov spletni dizajn za mobilne naprave iz nič; preoblikovati ali preoblikovati splet, da postane prilagodljiv ali odziven. Vedno bo upanje, da bo nekoč nekdo našel način in to dosegel, upajmo na to.
Medtem, kaj je mogoče storiti?
Dejstvo, da je še vedno zelo zapleteno preoblikovati celotno spletno mesto, ki ga imamo na spletu, da ga naredimo prilagodljivo. To ne pomeni, da smo prenehali z majhnimi spremembami spletnega mesta. Da bi ga izboljšali in naredili odziven na prilagajanje na različnih brskalnikih in na različnih elektronskih napravah.
Prva stvar, ki jo morate storiti, je preveriti, kakšno vrsto spletnega oblikovanja ima navigacijsko spletno mesto. V glavnem preveri:
- Postavitev spletne strani
- Kakšna je njegova struktura glede na HTML in CSS
Z analizo teh dveh osnovnih točk je mogoče ugotoviti, da je mogoče narediti majhne spremembe za izboljšanje spletne strani.
Prejšnji premisleki, ki jih je treba upoštevati, če želite vedeti, kako narediti odziven splet
Če že imate spletni portal, ciljno stran ali vsebinski blog, ki je bil razvit po običajni zasnovi in ga želite preoblikovati v odzivno ali prilagodljivo oblikovalsko spletno stran. To je samo odločitev in prvi korak za dosego tega, odločitev, da to storite!
Dejstvo, da se spletno mesto spremeni iz običajnega dizajna v odzivno, ne pomeni, da bo izgubljeno vse izvirno delo. Ker vsa vsebina ne bo zavržena, bo pa v njej doživela manjše in majhne spremembe. Vsebine, kot so slike, besedila in nekateri drugi elementi obstoječega spletnega mesta, se lahko uporabljajo in delujejo pravilno s transformacijo.
Vendar pa je ob soočenju z možnostjo prilagajanja in izboljšanja strani primerno poznati nekaj predhodnih premislekov, ki bodo dali prednost delu, ki ga je treba izvesti.
Preverite obstoječe spletno gibanje
Pred izvedbo kakršnih koli sprememb v obstoječem spletu je priporočljivo preveriti promet, ki ga ima. To je statistika o številu ljudi, ki obiščejo spletno stran. Na podlagi teh informacij bomo delali na spremembi dizajna, da bi dosegli večji uspeh in boljše pozicioniranje pri iskanju. Pri preoblikovanju in prilagajanju spleta je priročno vedeti o SEO orodja, saj so najboljši, ko gre za doseganje boljšega pozicioniranja v omrežju.
Potreben je dober navdih
Priporočljivo je tudi, da si ogledate in naredite a analiza konkurentov ali strani z vsebino, podobno spletni strani, na kateri bodo uporabljene spremembe v smeri odzivnega spletnega oblikovanja. Ta predogled je namenjen raziskovanju možnih izboljšav vsebine. Toda tudi, kako te podobne strani delujejo na različnih napravah. Vidiki, ki jih je treba upoštevati pri izbiri mest, ki so lahko navdih ali vzorci pri izboljšavah. To bo enostavna navigacija po tistih straneh in tistih, ki zahtevajo manj povečave ali pomikanja. Tukaj lahko najdete najboljše trike za Izboljšajte SEO da bi dosegli dobro vsebino Uporabite jih!
Prednosti semantičnega HTML-ja
Uporaba semantičnega HTML-ja kaže, da je bila postavitev prvotne spletne strani pravilno vzpostavljena. To daje prednost oziroma je v veliko pomoč, saj so bili uporabljeni samo bistveni elementi HTML. Ob upoštevanju pri razvoju spleta semantika vsake oznake nad zasnovo istega spleta. CSS prepušča lastno delo oblikovanja, glede na razrede in ID-je.
Med postopkom izdelave odzivnega spletnega mesta so elementi, kot so:
- DIV
- P
- UL
- LI, med drugim
Vendar, če je treba upoštevati korak opustitve celotne zasnove modela. Ker ne morete uporabiti vsiljivega CSS, to pomeni, da v kodi ne uporabite nobenega atributa Style. Ker je Html bolj izpopolnjen in z manj DIV, bo pripomogel k lažjemu izvajanju prilagoditev ali k bolj občutljivemu spletu. Ker bo CSS izboljšan v dobljenem rezultatu.
Pravilno nastavite povečavo, kako narediti odzivno spletno mesto
Za dosego popolnega prikaza spletnih strani je priporočljiva pravilna izbira povečave v mobilnih brskalnikih. Brskalniki na mobilnih napravah so že obstajali, preden se je začelo razvijati odzivno spletno oblikovanje. Za popoln ogled spletnih mest na teh napravah se morajo brskalniki zateči k orodjem za povečavo. Torej, ko dostopate do tradicionalno oblikovanega spletnega mesta iz mobilne naprave. Naravna ločljivost mobilnega telefona ne bo vidna, vendar bo prikazana prilagoditev, ki jo izvede orodje za povečavo, dokler se ne prilagodi širini 960 slikovnih pik.
Ker drugega načina za to ni bilo, so razvijalci ustvarili HTML, ki je izvedel spremembo ali prilagoditev povečave. Tako je treba pri prilagajanju ločljivosti na napravah ekipi povedati, naj uporabi drugo vrsto skaliranja. Primerna vrsta za uporabo je meta oznaka, znana kot viewport, ki se vnese v glavo spletnega mesta. S to metaoznako lahko podrobno opišete postopek, ki ga bo brskalnik izvedel v preoblikovanem spletu. Glej naslednjo sintakso, napisano dobesedno:
Ta simbolna postavitev metaoznake vidnega polja je tista, ki se najpogosteje uporablja v odzivnem spletnem oblikovanju. Vendar pa obstaja veliko drugih konfiguracij, ki se lahko uporabljajo v ta namen. Le da predstavljena sintaksa vsebuje dve spremenljivki, zaradi katerih se mobilni brskalnik prilagaja spletu in ne obratno. Te spremenljivke so:
Širina ali širina naprave
Spremenljivka širina=device-width je vključena v konfiguracijo, tako da se širina v slikovnih pikah zaslona ujema s širino mobilne naprave. Na ta način je prikazana lastna ločljivost mobilnega telefona.
Da bi zagotovili najboljšo možno uporabo, mobilni brskalniki prikažejo stran podobno širini zaslona namizja. Ta širina se lahko razlikuje glede na mobilno napravo. Toda pogosto je običajno ena od približno 980 slikovnih pik. Nato skuša optimizirati videz vsebine s povečanjem velikosti pisave in spreminjanjem obsega vsebine, tako da se prilega zaslonu naprave.
Zaradi tega se lahko uporabniki zdijo nekoliko neskladni ali zmedeni, nato pa se morajo dvakrat dotakniti, da povečajo, da se vključijo v vsebino. Uporaba spremenljivke metaoznake vidnega polja: width=device-width zahteva dejanje na postavitvi za prilagoditev širine. Na način, da lahko stran prilagodi vsebino, da se prilega različnim dimenzijam zaslona, ne glede na to, ali je prikazana na majhnem mobilnem telefonu ali na računalniškem monitorju.
Začetna lestvica ali začetna lestvica
Spremenljivka initial-scale= je vključena v konfiguracijo za določitev relacijskega merila med slikovnimi pikami CSS in mobilnimi slikovnimi pikami, odvisno od naprave. V zgornji konfiguraciji je označeno za začetno merilo: initial-scale=1.0. Tukaj sintaksa označuje, da je razmerje med slikovnimi pikami 1:1, piksel CSS se prebere v piksel naprave. Nato se mobilnemu brskalniku izda ukaz, da sprejme to vrednost za povečavo in to bo tisto, ki jo uporablja naprava. Vendar pa si poglejmo naslednji dve možnosti:
- Ko je spremenljivka začetnega merila enaka 1.0, se nanaša na zaslon brez povečave, ker je ena proti ena.
- Medtem ko je začetni obseg = 2.0, se spremenljivka nanaša na povečavo, povečano na dvakratno velikost na celotni strani.
Zato bi bila ustrezna možnost za uporabo na spletnem mestu, oblikovanem tako, da ustreza širini mobilnega telefona, prva. To pove napravi, da ne uporablja nobene povečave. Vendar pa lahko obstajajo tudi primeri, v katerih je najboljša možnost, da te spremenljivke ne vključimo ali uporabimo. Na ta način pustimo, da je isti mobilnik tisti, ki sam prilagaja povečavo, na širino, ki je bila navedena v dizajnu.
Osnovne konfiguracije vidnega polja – Primeri aplikacij:
Ne glede na to, ali imate širino 500 slikovnih pik in je podan ukaz začetnega obsega, splet dobi videz zaslona širine 500 slikovnih pik. Vendar pa bo na mobilnem telefonu njegova prvotna konfiguracija prikazana s približnim ekvivalentnim razmerjem 320 slikovnih pik od skupnih 500 slikovnih pik spleta.
Zdaj, če po drugi strani ni podan začetni vrstni red, se prikaže celoten splet, torej 500 slikovnih pik, pod prilagojenim zoomom. Sintaksa teh dveh tipičnih konfiguracij oznake vidnega polja bi bila besedilno naslednja:
Prejšnja konfiguracija bi bila za spletno mesto z odzivno zasnovo, ustrezno prilagojeno mobilni ločljivosti. Medtem ko za spletno mesto, ki ni v celoti prilagojeno mobilni ločljivosti, bi bila konfiguracija naslednja:
Poleg običajnih obstaja še nekaj drugih konfiguracij. Eden od njih je oblikovanje spletne strani v širini mobilnega telefona z uporabo povečave. Toda ta vrsta oblikovanja bi bila za uporabnika zelo čudna in zmedena.
Kako narediti odzivno spletno mesto – medijske poizvedbe
Ko želite vedeti, kako narediti odzivno spletno mesto ali prilagodljivo stran, morate vedeti, da morate uporabiti sistem, znan kot medijske poizvedbe. Ta tehnika vam omogoča, da s pogojem določite različne oblike ali sloge, odvisno od ločljivosti zaslona. Toda kaj so medijske poizvedbe?
Medijske poizvedbe
Medijske poizvedbe so tehnika, ki sestoji iz vzpostavitve stavkov CSS. S katerim lahko podajate izjave, ki veljajo za spletne dizajne, če so izpolnjeni določeni pogoji, ki so že podani ali uveljavljeni. Te izjave medijskih poizvedb je mogoče v bistvu uporabiti na dveh točkah na spletu:
- Najprej v klicu datoteke CSS, pri čemer v vsaki določite, kakšni so pogoji za njeno nalaganje. Primer:
- Drugič, v isti datoteki CSS vzpostavite ločen prostor, kjer so vključeni ulomki CSS, ki jih je treba uporabiti. Primer:
@predstavnostni zaslon in (najmanjša širina: 320 slikovnih pik) in (največja širina: 480 slikovnih pik){
/*Deklaracije sloga za ta obseg širine */
V resnici so medijske poizvedbe močno orodje, ki omogoča možnost zapuščanja odzivnega spletnega oblikovanja, da se lotite drugih različnih vprašanj znotraj spleta. Vredno je dokumentirati pozneje, malo več o tej tehniki medijskih poizvedb.
Medtem je za zdaj dovolj vedeti dve točki o sistemu medijskih poizvedb:
- Način izdelave navedb medijskih poizvedb v datoteki CSS
- Kako posodobiti staromodne internetne brskalnike s tehniko medijskih poizvedb
Izjava medijske poizvedbe
V prejšnjih odstavkih je bilo mogoče opazovati dva načina izvajanja medijskih poizvedb. Prvič na zunanji strani s slogi in drugi način za pisanje neposredno na stran s slogom.
V kontekstu tega, kako narediti odzivno spletno zasnovo, je treba razumeti, da je medijska poizvedba izjava CSS, ki se uporablja kot indikator za zavedanje, kdaj je treba narediti drugo deklaracijo sloga na podlagi meritev ali vrednosti mobilnega telefona. ali drugo napravo, kjer bo splet prikazan.
Na primer, način deklariranja ulomka CSS, ki je znotraj pogojnika, ki ga definira medijska poizvedba, ima naslednjo konfiguracijo sintakse:
@predstavnostni zaslon in ([POGOJ]) {
/* Naša nova pravila s to širino zaslona ali manj */
}
Podobno, odvisno od širine zaslona, je mogoče ustvariti tri vrste izjav medijske poizvedbe. Tako ste lahko v vsakem primeru prepričani v svojo prijavo
-Prvo deklaracijo je treba uporabiti samo v tistih ločljivostih, ki so manjše od širine slikovnih pik = X:
@predstavnostni zaslon in (max-width:[WIDTH]px) {
/* Naša nova pravila s to širino zaslona ali manj */
}
-Druga deklaracija se uporablja samo v tistih ločljivostih, ki so večje od širine slikovnih pik = X:
@media screen in (min-width:[WIDTH]px) {
/* Naša nova pravila s to širino zaslona ali več */
}
– Tretjo deklaracijo je treba uporabiti v tistih ločljivostih, ki imajo širino med obsegom slikovnih pik, definiranim med X in Y:
@predstavnostni zaslon in (najmanjša širina:[WIDTH X]px) in (največja širina:[WIDTH Y]px) {
/* Naša nova pravila s to širino zaslona ali več */
}
Kateri od treh?
Odločitev bo temeljila na okusu razvijalca. Bolj pa je običajno uporabiti prvi stavek medijske poizvedbe, prikazan zgoraj. Priporočljivo je le, da se uporablja kumulativno. Na način, da se vsakič, ko se širina zmanjša, spremenijo elementi dizajna.
Naj bodo medijske poizvedbe združljive z Internet Explorerjem
Internet Explorer je bil eden prvih brskalnikov, ki je obstajal na spletu. Zato je zelo možno, da ta brskalnik ne podpira ali je združljiv z mnogimi sistemi, parametri ali tehnikami, ki jih uporabniki omrežja pogosto uporabljajo. A pri razvoju spletnih strani je veliko tehničnega osebja, ki je v celoti vključeno v iskanje inovacij. Ki so ustvarili vrsto knjižnic za omogočanje in združljivost teh starih brskalnikov.
Če želite narediti združljive različice Internet Explorerja pod številko devet (9). Uporablja samo naslednjo knjižnico javascript: css3-mediaqueries-js.
Če v glavo spletne strani postavite naslednji skript, boste lahko brez nevšečnosti delali z medijskimi poizvedbami.
Dobljeni rezultat morda ni najbolj popoln, vendar na splošno omogoča dobro stopnjo združljivosti.
Kako narediti odzivno spletno stran – osnovni dizajni
Obstajajo lahko različni načini za prilagoditev spletnega mesta in njegovo preoblikovanje, vendar ima odzivno spletno mesto trenutno tri osnove ali oblike zasnove. Prej so bili predogledi razvijalcev prikazani z nekaterimi novimi podrobnostmi, ki jih je treba uporabiti v teh modelih. Izhaja iz navade razvijanja spletnih mest, označenih kot toga ali fiksna. Za prehod na spletna mesta, zasnovana v odzivnem načinu, spremenite to značilnost togosti.
Danes lahko najdete neskončno število elektronskih naprav, s katerimi lahko brskate po spletu. In sčasoma bo znesek večji. Razvijalci spletnih mest zahtevajo, da se ta spletna mesta pravilno prilagodijo tej široki paleti naprav.
Osnovni dizajni za poenostavitev dela
Eden od načinov za poenostavitev naloge odzivnega oblikovanja je, da jih razdelimo ali razvrstimo v tri osnovne skupine, da bi vedeli, kako se z njimi spopasti. Te tri velike kvalifikacijske skupine so:
- Veliki zasloni: na katerih ima spletno mesto dovolj prostora in še več, da si ga lahko ogledate v celoti brez nevšečnosti.
- Stari ali majhni zasloni: pri katerih splet ne najde ustrezne širine za svojo popolno vizualizacijo, torej se ne prilega v okvir zaslona. Prikazuje celo neudobno spodnjo vrstico, brez kakršne koli uporabe, ki vam omogoča, da vidite še manj vsebine.
- Zasloni mobilnih naprav: splet najde tako majhen prostor na teh napravah, da je le s splošnim dizajnom mogoče prebrati informacije o njegovi vsebini.
Torej, če želite prvotno zasnovo in postavitev spletnega mesta spremeniti v posodobljeno, ki jo je mogoče uporabiti in je izvedljiva. Potrebno je rešiti te tri osnovne skupine. Stopnja težavnosti pri pridobivanju rešitve bo na splošno odvisna od tega, kako je bil model formuliran. Toda na splošno je z današnjo tehnologijo mogoče nekaj sprememb doseči na spletu.
Kako narediti odziven splet za velike zaslone – rešitev
Na tej osnovni točki običajno ne predstavlja večjih težav. Ker je bil splet zasnovan za ogled v teh formatih velikega zaslona. Trenutni standard je, da spletne strani temeljijo na osrednjem okvirju širine zaslona v slikovnih pikah 960. Tako, da se pri nalaganju na mobilnih telefonih s prilagojenim zoomom v večino pravilno prilega. . Toda v primeru starejših spletnih mest je bil osrednji okvir s širino slikovnih pik verjetno zasnovan za zaslone s širino 1024 slikovnih pik. V vsakem od primerov je za to osnovno skupino smiselno uporabiti vsebnike, kot kaže naslednja sintaksa:
#main { width:960px; rob:0 sam; }
Ta konfiguracija podpira nastavitev "glavnega" vsebnika, ki omogoča, da je osredotočen na splet. Poleg tega vsebnika je mogoče dodati različna ozadja za obogatitev zunanjega videza spleta. Nekoliko razvijamo svojo zasnovo, da se čim bolj izognemo črno-beli strani.
Skratka, na tej ravni velikih zaslonov se ne naredi veliko za preoblikovanje spleta. Čeprav je možno, da se najdejo uporabniki spleta, ki si ga želijo ogledati s televizorja z velikim zaslonom in tudi na kratki razdalji gledanja.
Ti primeri zahtevajo velike spremembe kot pri mobilni osnovni skupini. Ker pa običajno ni veliko tistih, ki uporabljajo televizor za navigacijo, razvijalci običajno ne vlagajo veliko časa v te prilagoditve. Če še vedno želite delati na tovrstni prilagoditvi, je priporočljivo določiti predpise, podobne tistim, ki se uporabljajo v mobilni skupini, ki je navedena spodaj.
Kako narediti odziven splet za majhne zaslone – rešitev
Od te osnovne oblikovalske skupine se začne kompleksnost transformacije spleta, ki ga je treba prilagoditi. Scenarij je naslednji stran, ustvarjena za delo na dani širini zaslona. Da ga pravzaprav veliko ljudi obišče iz računalnikov, prilagojenih tej širini. Vendar je treba upoštevati tudi velik odstotek ljudi, ki imajo naprave z ločljivostjo, nižjo od ločljivosti dizajna, da obiščejo splet.
V tej klasifikacijski skupini je treba naprave z ločljivostjo zaslona, ki je nižja od dizajna, ločiti od mobilnih naprav. No, ti primeri so analizirani v tretjem primeru načrtovanja. Zato je treba izhajati iz jasne opredelitve točke, kjer se naprava z majhnim zaslonom konča in točke, kjer se začne mobilna naprava.
Za majhne zaslone je treba na enak način zmanjšati ločljivost izvirnega spletnega mesta, da se prilagodi tem napravam. Le, da mora biti jasno, v kolikšni meri se bo to znižanje izvajalo, ne da bi prestopili. Tako, da veliko število elementov ni konglomerirano na majhnih zaslonih, kar zmanjšuje videz spleta.
Informacije, potrebne za nastavitev mej
Podatki iz mobilnih naprav so deljeni spodaj. Kar bo zelo pomembno, ko bo treba vzpostaviti meje, kdaj preneha biti majhen zaslon, da postane mobilna naprava. To bo olajšalo odločitev.
mobilnih podatkov:
- Mobilni telefoni, ki se uporabljajo navpično, kar je najpogosteje uporabljena oblika. Običajno sprejme ločljivost 320 slikovnih pik v širino.
- V vodoravnem položaju je ločljivost mobilne naprave prilagojena resnični velikosti zaslona naprave. Ta ločljivost je običajno široka med 400 in 600 slikovnimi pikami.
- Po drugi strani pa bo pri tablicah ločljivost odvisna od naprave. Na splošno je ob upoštevanju statistike najbolje prodajanih modelov ločljivost široka okoli 600 slikovnih pik. Lahko doseže celo 1024 slikovnih pik v širino.
Omejitve širine zaslona
Največja standardna omejitev širine, ki jo je treba sprejeti pri odzivnem spletnem oblikovanju v tej klasifikaciji, je glede na zgornje informacije do širine 400 slikovnih pik. Od te meritve širine se mora drastično začeti sprememba vizualizacije spleta, pa tudi njegovo osnovno delovanje bo doživelo določene spremembe.
Več pa so nekateri razvijalci to mejo postavili na širino 600 slikovnih pik. Ustvarjanje iz te ločljivosti, vmesne prilagoditve med majhnimi zasloni in mobilnimi napravami.
Na strani spodnje meje je nastavljeno, da sprejme minimalno širino zaslona do 320 slikovnih pik. V vsakem primeru je na spletnem razvijalcu, da določi obseg, večji od teh danih omejitev. Vendar ni priporočljivo, da poskušate pokriti vse naprave z majhnim zaslonom.
Glavni navigacijski slogi v rešitvi za majhne zaslone
Zajemanje vsaj teh treh glavnih navigacijskih slogov lahko zadostuje za prilagodljivo rešitev za majhen zaslon. Ki so navedeni spodaj:
- Mobilne naprave, ki se uporabljajo navpično: V tem primeru zaslon naprave omogoča le zelo poenostavljeno branje in navigacijo, vzpostavljeno v območju ločljivosti med 320 in 400 slikovnimi pikami.
- Mobilne naprave, ki se uporabljajo vodoravno, in tablice: V tem primeru je že mogoče doseči tradicionalni horizontalni prikaz. Vendar je treba upoštevati, da se navigacija ustvari z dotikom in ne s klikom. V skladu s tem se je treba izogibati dejanjem: onMouseOver v 400, 600 ali 800 slikovnih pikah.
- namizne naprave: V teh primerih običajno spletno oblikovanje deluje brez težav pri širini zaslona nad 800 slikovnih pik.
Glede na vse zgoraj navedeno, majhen zaslon razumemo kot različne osebne računalnike, ležeče mobilne naprave in tablice. Ta raznolikost pokriva to skupino z mehko kompleksnostjo za prilagoditev spleta odzivnemu dizajnu. V tem primeru je zelo pomembno za poenostavitev dela, postavitev, ki jo izvajajo bloki. Da bi združili tri vrste naprav v eno samo dejanje.
Če je jasno opredeljeno, od katere širine se upošteva mobilni zaslon. Pojasnjen je vmesni format zaslona, ki bo prikazan. Za preoblikovanje blokov trenutne postavitve tako, da spreminjajo velikost glede na zaslon in lahko delujejo in se pravilno prikazujejo.
Vsebniki globalne širine
Globalni vsebniki na spletnem mestu opravljajo funkcijo kazalca ali označevanja globalnih širin. To pomeni, da lahko s temi elementi centrirate in določite specifično širino spletnega mesta. Konfiguraciji dajejo določeno prilagodljivost s spreminjanjem iz fiksne širine v največjo širino ali širino pokrova. Vzpostavljeno v začetni izjavi za spletni okvir, spreminjanje iz širina a max širine. Na enak način se določi najmanjša širina v skladu s predhodno določenimi razponi, z deklaracijo minimalne širine. Tako bo mogoče nadzorovati širine tistih naprav, za katere se je menilo, da niso v nadzoru. Ob upoštevanju razpona zgornjih omejitev širine zaslona; Sintaksa deklaracije bi bila naslednja:
#main {max-width:960px; najmanjša širina: 320 slikovnih pik; margin:0 auto;}
Za velike zaslone je rešitev enaka. Še več, ko se splet postopoma hkrati zmanjšuje v velikosti, bo osrednji okvir to storil po širini.
Praktični primer
Spodaj je praktičen primer nastavitev za preoblikovanje okvirja širine. V tem primeru je spletna stran s širino 1080 slikovnih pik, ki je uporabljena za elemente glave, glavne vsebine in noge. Prva stvar, ki jo morate storiti, je, da to širino v različnih globalnih blokih vsebnika označite, ne kot fiksno širino, temveč kot največjo širino strani. Kar zadeva stavke, bodo odvisni od števila blokov te vrste, ki bodo uporabljeni. Poglejmo si torej naslednjo sintakso:
#header #top {position:relative; največja širina: 1074 slikovnih pik; najmanjša širina: 320 slikovnih pik; višina: 115px; margin:0 auto; […]}
[...]
#header ul.menu {position:relative; največja širina: 1008 slikovnih pik; najmanjša širina: 320 slikovnih pik; višina: 95px; […]}
[...]
#aux-main{position:relative; največja širina: 1008 slikovnih pik; najmanjša širina: 320 slikovnih pik; margin:0 auto; […]}
[...]
#footer ul {max-width:768px; najmanjša širina: 320 slikovnih pik; margin:10px auto;}
Notranji zabojniki
Od te točke se bomo malo bolj poglobili v to, kako narediti odzivno spletno stran s preoblikovanjem. Skoraj gotovo je, da je stran, ki jo želite preoblikovati, sestavljena iz dizajna ali postavitve, razdeljene na različne elemente, na primer:
- Stoodstotna širina glave
- Vsebina, ki zavzema precejšen del širine
- V delu strani ena ali več stranskih ali stranskih palic
- Zavzema sto odstotkov širine, noga
Tako boste imeli več vsebnikov, ki imajo morda fiksno širino, ki določajo stolpce na strani. Te posode so lahko preoblikovali v stolpce z uporabo različnih tehnik, kot so:
- Plava v največji količini
- Prikaz: v nekaterih primerih
- Display:box v drugih od njih
Naslednji korak, ki ga morate narediti, je, da boste te elemente lahko preoblikovali v ne tako natančne izjave. Tako da nadrejeni vsebnik ne kalibrira natančno prvotnega stavka, na katerega je opozoril. Ali kar je enako, morate spremeniti iz slikovnih pik v odstotke vrednosti v vseh tistih elementih, ki se nanašajo na prostor v širini spletnega mesta, kot so naslednji:
- širine
- največje širine
- Marže in
- Padding
S predhodno opravljenim delom na postavitvi postane ta korak zelo preprost. Ker gre samo za delitev, da lahko ugotovimo, kaj ustreza meritvi v slikovnih pikah elementa vsebnika v odstotkih. Odstotek se torej izračuna z uporabo naslednje matematične enačbe:
[Px širine notranjega elementa] / [Px širine nadrejenega elementa] * 100
Za spletne razvijalce je dobra metoda, da se navadijo delati na spletnem modelu z meritvami v odstotkih, saj bi ta korak že bil rešen.
Izračun odstotkov
Naslednji korak je izračun odstotkov. V tem delu je mogoče predstaviti nekaj nadležnega v smislu stolpcev. Ker je bilo prejšnje koloniranje zgrajeno s plavajočimi elementi, in ko skrčite okvir, se stranska vrstica premakne pod vsebino. Vendar se uporablja prej omenjena enačba. Na ta način se izvedejo izračuni odstotkov vsakega elementa v globalnem vsebniku DIV. Kot je bilo omenjeno zgoraj, je imela širino 1080 slikovnih pik. Če te meritve pretvorimo v odstotne vrednosti, dobimo naslednjo sintakso:
#main #content { float:left; širina: 63.9880952 %; margin:30px 0 0 1.98412698 %; }
[...]
#main #sidebar { float:left; margin:20px 0 0 3.47222222%; širina: 28.7698413 %; }
Kot je razvidno, so se tako širine kot vodoravni robovi preoblikovali. Tako bo spletna stran ohranila kvadraten videz. Druga pomembna točka, ki jo je treba opozoriti, je število decimalnih mest, ki so navedene v odstotkih. Njen namen je, da je izračun čim bolj natančen na prvotno vrednost v slikovnih pikah.
Rešitev za ohlapne notranje elemente, ki se povečajo
V procesu preoblikovanja spletne strani je v modelu mogoče najti določene ohlapne elemente, ki lahko zaradi svoje tipologije zrastejo nad njihovo največjo globalno širino, max. Te elemente je mogoče zaznati z igranjem z velikostjo brskalnika, ko jih zaznamo, jih popravimo. Drug hiter način za popravljanje ali izogibanje tem elementom je, da izberete vsebnike in date ukaz, da noben notranji element ne raste nad velikostjo samega vsebnika.
V primeru, ki se razvija, je ta zadnja oblika popravka uporabljena znotraj glavne vsebine in stranske vrstice. Tako je mogoče nekatere težave, ki lahko nastanejo zaradi pripomočkov, rešiti same. V skladu s tem bi bila konfiguracija za reševanje ohlapnih notranjih elementov naslednja:
#main #content { float:left; širina: 63.9880952 %; margin:30px 0 0 1.98412698 %; }
#main #content * {max-width:100%}
[...]
#main #sidebar { float:left; margin:20px 0 0 3.47222222%; širina: 28.7698413 %; }
#main #sidebar * {max-width:100%}
Elementi pozicionirani v absolutnem položaju
Za vse tiste elemente, ki so sploh pozicionirani na spletni strani za preoblikovanje. Enak prejšnji postopek je treba uporabiti zanje s širinami in jih prilagoditi vrednostim v odstotkih na abscisni osi, da se spremeni njihova širina. Ob predpostavki, da je v primeru, ki se razvija, nekateri elementi sploh nameščeni v glavi. Njihovi položaji morajo biti prilagojeni tem elementom, tako da ne ostanejo lebdeti v zraku, ko se dimenzije traku zmanjšajo. Za to bi bila konfiguracija naslednja:
[...]
#header #top p.breadcrumb {position:absolute; zgoraj: 90px; levo: 3.72439479 %; barva:bela;}
[...]
#header #top p.like { position:absolute; vrh: 10px; levo: 54.0037244 %; }
[...]
#header #top div.vcard{position:absolute; vrh: 11px; desno: 5.49348231 %; širina: 27.9329609 %;}
Uporaba medijskih poizvedb v notranjih elementih
Pri prilagajanju širin strani je možno, da se pojavijo elementi, ki zaradi svoje vsebine ne najdejo prostora pri preoblikovanju. Te lahko ovirajo, tako da prilagoditve izgledajo slabo. Da bi se izognili tej neprijetni situaciji, se uporabljajo preproste medijske poizvedbe, ki omogočajo drastično modifikacijo CSS, ko se pojavijo nekatere posebne dimenzije.
Medijske poizvedbe so zelo zmogljivo orodje, s katerim je mogoče narediti številne umetnosti. Tokrat bodo uporabljeni za določitev določenih pogojev glede širine zaslona in od kod se bo spremenil CSS. Za to si bomo spomnili naslednjo sintakso:
@predstavnostni zaslon in (max-width:[WIDTH]px) {
/* Naša nova pravila s to širino zaslona ali manj */
}
Ta izjava medijske poizvedbe želi posebej prilagoditi postavitev različnim ločljivostim. Zato ga je mogoče bolj kot karkoli uporabiti za skrivanje določenih sekundarnih elementov, ki lahko glede na določene širine zaslona uporabnika bolj motijo kot pomagajo. Poleg tega služi za izdelavo majhnih spojk, tako da se lahko nekateri elementi prilegajo pri preoblikovanju v različnih scenarijih.
Za ponazoritev povedanega bodo nekateri elementi ločljivosti pod 800 in 600 slikovnimi pikami skriti. Da v enem primeru ovirajo pravilen pogled na vsebino glavne strani spletne strani, ki jo je treba prilagoditi. V skladu z naslednjo sintaksi:
zaslon @media in (največja širina: 800px) {
#header #top p.like,
#header #top p.breadcrumb,
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin,
#header #top div.vcard p.delicious,
#header #top div.vcard p.google,
.vcard h2{ display:none;}
}
zaslon @media in (največja širina: 600px) {
#sidebar .twitter {display:none;}
}
Kot je razvidno, so skrite v ločljivostih manj kot 800 slikovnih pik:
-Všečki
-Drobtine
-Socialni gumbi, med drugim
Od 600 slikovnih pik navzdol se zadnji tviti odstranijo iz stranske vrstice
Medijske poizvedbe vam omogočajo tudi spreminjanje nekaterih slogov
Kot lahko že vidite, vam medijske poizvedbe omogočajo, da skrijete nekatere notranje elemente. Omogočajo pa vam tudi spreminjanje nekaterih stilov. To posebnost je mogoče uporabiti, če element, poleg tega, da ni prilagojen po širini, ni želen ali ne želi, da bi izginil ali se skril. Če se ta situacija pojavi na spletu, ki ga želite preoblikovati. Nato se bo z uporabo medijskih poizvedb poskušalo subtilno spremeniti svoj slog, tako da se bo prilagodil.
Ob predpostavki, da na spletu, na katerem se dela, socialni gumbi povzročajo tovrstno težavo. In se odloči, da bo subtilno spremenil svoje oblikovanje, tako da odstrani ikone in zmanjša velikost pisave, ko stran pade pod 960 slikovnih pik. Konfiguracija bi bila potem naslednja:
@predstavnostni zaslon in (max-width:960px) {
#header #top div.vcard p {font-size:9px;}
#header #top div.vcard p.twitter to,
#header #top div.vcard p.linkedin a ,
#header #top div.vcard p.delicious a,
#header #top div.vcard p.google a {background:none; oblazinjenje:0;širina:50%; float:levo;}
}
Kaj storiti z meniji
Kaj pa meniji, v procesu, kako narediti odzivno spletno mesto na majhnih zaslonih? Odgovor na to vprašanje je, da je to nekoliko zapleten problem za reševanje. Ker gre za nabor elementov, ki so običajno nekoliko dolgi, in tudi meni sam, ni glavna vsebina spleta. Zato ni mogoče dovoliti, da ko stran odprete na majhnih zaslonih, meni zavzame veliko prostora.
Pri napravah na dotik je lahko za uporabnika moteče, da se prikaže seznam drobnih povezav, zato krčenje povezav ne bi bila najbolj izvedljiva rešitev. Alternativa, ki je lahko ugodna, je zamenjava menija z izbranim elementom. Ki predstavlja kontrolnik, ki prikazuje meni možnosti, kjer lahko uporabnik udobno izbira. Element Select zmanjša dolge sezname menijev v majhen blok, zato je njegova uporaba idealna za naprave, kot so tablični računalniki in mobilni telefoni.
Ko izvajate to zamenjavo v novem odzivnem dizajnu, je priporočljivo uporabiti vtičnik tinynav jquery. Kar je preprosto in zelo združljivo, se ta vtičnik nanaša na vse elemente UL v meniju. To pa doda izbrani element na začetek seznama z navedenimi značilnostmi. Nato je korak, ki ga je treba narediti, skriti UL ali izbiro z medijskimi poizvedbami, dokler ni dosežena ugodna rešitev.
Postopek z izbranim elementom
Postopek zamenjave menija z izbranim elementom bo izveden preko zgoraj omenjenega vtičnika. Ki ga je treba postaviti v glavo na seznamu povezav. Torej, ko se stran začne spuščati do ločljivosti manj kot 800 slikovnih pik, bodo povezave zamenjane z izbiro. Nato sledite naslednjim korakom:
- Dodajte skript in v vtičniku jquery ready nastavite klic na nov element. Glede na naslednje:
$(".menu ul").tinyNav();
Ta konfiguracija doda izbiro v vsak seznam povezav v zgornjem meniju
- Povejte osnovnemu CSS, naj skrije nove elemente za izbiro, z naslednjo izjavo:
.tinynav { prikaz: brez }
- Uporabite ustrezno medijsko poizvedbo in v njej dodajte obliko izbire in vrstni red, da skrijete sam seznam. Konfiguracijo zapustimo na naslednji način:
zaslon @media in (največja širina: 800px) {
#header ul.menu li ul {display:none}
.tinynav { display: block; položaj: absolutni; spodaj: 5px; širina: 79 %; margin-left: 15 %}
}
Na ta način bo spletni meni zamenjan z izbranim elementom z znižanjem ločljivosti zaslona na manj kot 800 slikovnih pik v širino.
Blokirajte ozadja pri izdelavi odzivnega spleta
Na tej točki prilagajanja spleta bo stopnja težavnosti odvisna od tega, kakšen je model. Pri oblikovanju spleta so na točki CSS bloki običajno okrašeni s slikovnimi ozadji. V procesu dekoracije se uporablja veliko število tehnik. Nekateri so lažji od drugih, ko gre za spreminjanje velikosti.
Nekatere rešitve
Zato je lahko postopek, odvisno od uporabljene tehnike, manj ali bolj preprost. Lahko se celo zgodi, da ozadje, ki ga ima splet, izgubi cilj, ko so robovi skriti. V teh primerih je to velik problem, ki ga je treba premagati. Tukaj je nekaj rešitev za to:
- Spremenite čim več ozadij v sloge CSS3. Ki se bo zelo dobro prilagajal spremembam. Zdaj je enostavno doseči združljivost večine brskalnikov, ko uporabljate zaobljene robove, sence ali prelive. Pri treh situacijah CSS je za načrte težko zahtevati veliko število slik za vzpostavitev blokov.
- Brez slik v ozadju, da jih čim bolj nadomestite s CSS3, ki je najbližji temu, kako medijske poizvedbe in prilagodljive širine opravljajo svoje delo
- Če gre za sredstva, ki že prevladujejo v situaciji bloka. Priporočljivo je, da ta slog podvojite v bloku in poiščite izvirno ozadje, ki bo malo razločeno
Druge rešitve za tri vrste slik ozadja, ki so lahko moteče, so:
- Slike z obrobami v okvirju strani, da tudi če ostanejo izven prikazanega dela, končni rezultat ne moti, zato ostane
- Ikone v določenih naslovih, kar je popravljeno tako, da se skrijejo z medijskimi poizvedbami, ko postanejo moteče
- Globalno ozadje glave vključuje belo polje, kamor je ime avtorja spleta. Za to se lahko isti slog ponovi v polju avtorja, tako da se eno ozadje skrije z drugim z zmanjšanjem dimenzije strani.
Kako narediti odziven splet za mobilni zaslon – rešitev
Več vidikov, kako narediti odzivno spletno mesto na malih zaslonih, smo že videli. S tem znanjem lahko preidete od togega spletnega dizajna s fiksno širino 1080 slikovnih pik do dizajna, ki je precej prilagodljiv majhnim zaslonom, iz velikega števila naprav. Manjka pa odzivna oblikovalska rešitev za mobilne zaslone.
Z uporabo tega, kar smo opazili pri majhnih zaslonih pri oblikovanju za mobilne naprave, je zaradi sprememb videti sprejemljivo. Še več je treba izpopolniti, saj je dvostolpčna postavitev z elementi, ki so aglutinirani v glavi, zelo nepraktična za mobilne telefone
Zato je primerno začeti postopek za doseganje pravilnega prikaza na mobilnih napravah. Pomembno je omeniti, da uporaba navigacije na mobilnem telefonu ni enaka kot na običajni spletni strani. Potem boste morda želeli iti dlje od preprostih sprememb prilagodljivosti širine zaslona ali skrivanja elementov.
Oznaka Viewport v tem primeru
Element vidnega polja je dobro orodje za prilagajanje spleta mobilnim telefonom. Prvič, zato, ker prikazno polje mobilnemu telefonu nakazuje, na kakšen način želite, da njegova povečava deluje, ko naprava prikaže spletno mesto. Kljub temu sta lahko v bistvu predstavljeni dve možnosti, navedeni spodaj:
Možnost 1: Za spletna mesta z odzivnim dizajnom, ki je ustrezno povezana z mobilnimi ločljivostmi, je na voljo naslednje:
Ta možnost je najbolj idealna, a tudi najbolj naporna. Ker ko zmanjšate širino stolpcev pod 500 ali 400 slikovnih pik, postanejo širine popolnoma neobvladljive. Zato je treba v vizualizacijo spleta narediti korenite spremembe.
Možnost 2: Če gre za spletna mesta, ki še niso popolnoma prilagojena ločljivosti mobilnega telefona, imamo naslednje:
Ta druga možnost je morda bolj hitra. Ker je v dizajnu samo navedeno, da je mobilnik mogoče prikazati v želeni ločljivosti. Z drugimi besedami, splet bo še naprej običajna stran, le v bolj zmanjšani ali prilagojeni različici.
Možne posledice
Če se odločite za drugo možnost, se lahko pojavita dve težavi s spletno stranjo, ki jo je treba prilagoditi ali oblikovati odzivno.
-Prvi: Ogledno območje bi v tem primeru delovalo globalno v vseh mobilnih brskalnikih. Glede na primer, ko je na primer označena oznaka vidnega polja s širino 500 slikovnih pik, bo to povzročilo, da naprave iPad s širino okoli 800 slikovnih pik prikazujejo stran, široko le 500 slikovnih pik. Neizkoriščanje stoodstotnega razpoložljivega prostora.
-Drugo: Nadaljevanje s primerom označevanja vidnega polja širokega 500 slikovnih pik. V tem primeru bo pri ločljivostih 320 slikovnih pik vsebina spleta, na kateri se dela, prikazana v zelo zmanjšanem načinu. Če torej nekaj prilagoditev ne bo izvedeno, ne bo delovalo. Po drugi strani pa, če se izvedejo določene prilagoditve za prilagoditev menijev ali virov, bo spletna različica spremenjena na enak način, da bo prikazana na tabličnem računalniku, v primeru majhnega zaslona. Skratka, rešitev označevanja fiksne širine z oznako vidnega polja je morda najhitrejša, vendar ni več učinkovita.
Če vidite posledice izbire možnosti 2 oznake za prikazno območje, je možnost 1 najbolj priporočljiva. Na ta način lahko mobilni telefon sam prikaže ločljivost, ki jo je sposoben, ko uporablja vidno polje, ki je zgoraj navedeno kot možnost 1 v glavi strani.
S to odločitvijo o vizualizaciji je pozneje treba delati na medijski poizvedbi za mobilno različico. To zahteva prehod iz stolpcev v bloke s stoodstotno širino. Prav tako izbrišite, stisnite določene elemente, prilagodite pisave, tako da bodo prijazne za branje pri širini 320 slikovnih pik.
odstranjevanje stolpcev
Kot že omenjeno, je za prilagajanje mobilnih odzivov potrebno izpopolniti zasnovo v videzu dveh stolpcev, da se izognemo združevanju elementov v glavi. Za ta postopek bo stolpec izločen tako, da se en prekrije z drugim, vendar se lahko zgodita dva scenarija:
-Da so stolpci že urejeni v Html: Če je temu tako, so že predstavljeni na želeni način za mobilne naprave. Potrebno bo le izginiti plavajoče ali spremeniti display:inline-block ali display:box, da ga nadomestite z običajnim display:block. Z uporabo naslednje sintakse:
zaslon @media in (največja širina: 400px) {
#content {display:block; float:nobe; }
}
-Če stolpci niso urejeni: V tem scenariju morate delati z absolutnimi položaji, tako da spodnji bloki zasedajo vrh strani. Kot tudi z uporabo robov za premikanje zgornjih blokov na spodnjega, tako da se ne prekrivajo. Primer, ob predpostavki naslednje porazdelitve:
Pri tem strukturiranju je zaželeno, da se na mobilnem telefonu elementi stranske vrstice nahajajo pred vsebino. Nato je CSS predstavljen na naslednji način:
zaslon @media in (največja širina: 400px) {
#main {position:relative; širina: 100 %; }
#content{margin-top:80px; širina: 100 %; float:none;}
#sidebar{height:80px; položaj: absolutni; vrh: 0; širina: 100 %; float:nobe; }
}
Za vizualizacijo drugega scenarija, v katerem je treba uporabiti absolutne pozicije v mobilni različici, je predstavljen naslednji primer strukture
zaslon @media in (največja širina: 450px) {
#main #sidebar {display:block; float:none !pomembno; širina: 100 %; položaj: absolutni; zgoraj:-80px; margin:0 !pomembno; border-bottom:1px solid #aaa; padding:0 0 20px 0;}
#main #content { float: none; širina: samodejno; margin:100px 0 0 0; }
}
V tem primeru gre tudi za spremembo na širino 450 slikovnih pik v mobilni različici.
Prilagajanje pisav
Drug vidik, ki ga je treba obravnavati pri odzivni prilagoditvi v mobilni različici, je prilagoditev pisav. Ker, ko je bil splet zasnovan, je bil narejen z mislijo na velike monitorje. Pri prehodu na mobilne različice z majhnimi navpičnimi zasloni spletna mesta pogosto niso udobna za branje ali ogled. Naslovi spleta zavzamejo veliko prostora, besedilo vsebine zaradi velikosti pisave otežuje branje. V skladu s tem je treba pregledati vse vire in jih spraviti v izvedljivo konfiguracijo za prikaz na mobilnem zaslonu.
Spodaj so prilagoditve glede tega vidika, kjer so bile spremenjene pisave menija, zmanjšana velikost pisave naslovov in povečana vsebina. Upoštevajte naslednjo konfiguracijo:
#header ul.menu li,
#header ul.menu li.analytics,
#header ul.menu li.development {background:none;}
#header ul.menu li h4 {margin:30px 0 0 0px; velikost pisave:12px; zamik besedila: 10 %;}
#main #content .hnews h3 a,
#main #content .hnews h1 a{ font-size:22px; }
#main #content .hnews .entry-content {font-size:16px;}
Druge prilagoditve v smislu estetike in stilov
Opravil sem ves prejšnji postopek, kako narediti odzivno spletno mesto v oblikovanju za mobilno različico. Ostaja le še piko na i na videz in slog spleta. V tem primeru lahko preoblikujete tiste sloge, ki se ne prilagajajo novi različici, in zavržete tiste, ki imajo v njej svoje mesto. Na enak način lahko premaknete nekatere elemente, kot so stranske vrstice, na primer, da jih postavite na drugo mesto, ali pa med drugimi prilagoditvami spremenite robove. Da bi končno dosegli čudovit mobilni splet, pripravljen za uporabo.
Kako narediti odzivno spletno stran? – Testi in testi
Ko ne oblikujete samo v smislu spletnega razvoja, temveč pri ustvarjanju ali strukturiranju nečesa novega. Obstaja faza testiranja ali testiranja, kjer lahko preverite rezultate, ali so optimalni ali zahtevajo izboljšave.
Kljub temu je priročno opraviti preverjanje ali preizkus po izvedbi vseh prejšnjih postopkov. Te preizkuse je treba izvajati, ko se koraki izvajajo, in da bi lahko preverili spremembe, ki so bile dosežene v vsakem od njih. Na enak način je treba izvesti naslednja dva preverjanja delovanja spleta
Pojdite na testiranje v brskalniku
Ko delate na odzivnem dizajnu, morate prilagoditi širino zaslona. Da bi preverili nove prilagoditve, ki dobivajo nove oblike. Na enak način je mogoče zaznati majhne napake in tako prilagoditi uporabljene medijske poizvedbe. Za preverjanje širine zaslona obstajata dva načina:
- Delujte v živo tako, da odstranite maksimiranje brskalnika, da preizkusite njegovo širino.
- Uporabite stvari, kot je ISH, uporabno orodje za izvajanje teh testnih nastavitev s preprostimi ukazi.
Zaobide mobilni predpomnilnik
Mobilne naprave po svoji naravi predpomnijo podatke, ki presegajo to, kar je potrebno, celo več kot običajen brskalnik. V običajnih je običajno dovolj, da izvedete CTRL+F5 za induciranje nalaganja brez predpomnilnika. Čeprav je tovrstno dejanje na mobilnih telefonih težko, imajo celo nekateri brskalniki možnost onemogočiti predpomnilnik. Za lažje delo brez predpomnilnika priporočamo naslednje:
- Delajte s spremenljivkami v klicu Css, kot so:
"/styles.css?version=xxxx"
Izvedba spremembe v vsakem posameznem primeru številka različice. Da bi bil URL drugačen, tako da ne uporablja predpomnilnika.
- Delajte neposredno v brskalniku. Nežno povečevanje minimalne mobilne ločljivosti, med 420 in 450 slikovnimi pikami. Na ta način lahko povzročite, da se prikaže v brskalniku, tako da se dovolj skrči. Drug način je uporaba orodij, ki spreminjajo velikost spletnih strani.
S temi dejanji bo nedvomno pri izvajanju testov dosežen bolj praktičen in udoben rezultat.
Kako narediti odzivno spletno stran? - Zaključek
Pri vsem naštetem je bilo mogoče poznati nekatere tehnike, tehnološka orodja in postopke, ki se pogosto uporabljajo pri oblikovanju odzivnega spleta. Vse to znanje lahko uporabite tudi na obstoječem spletnem mestu, ki ga želite prenesti v prilagodljivo zasnovo. Brez dela pri izdelavi nove spletne strani.
Zato k naslednjemu vprašanju: Ali je mogoče narediti spletno stran z odzivnim dizajnom, če naredite vse, kar ste se naučili? Očitno je odgovor odločen NE. zakaj? Ker je bilo mogoče samo spletno stran narediti občutljivo na prilagoditve, kar prvotno ni bilo. Ker je bil zasnovan pod togo ali fiksno naravo.
Možne posledice ali napake
Med postopkom prilagajanja tradicionalnega spletnega mesta ali ene bolj občutljive na spremembe lahko pride do nekaterih napak in zato bodo nastale določene posledice, poglejmo:
- Odstraniti je treba nekatere elemente, ki so bili ključnega pomena, ko je bila stran ustvarjena. Po drugi strani pa je bila akcija njihovega odpravljanja narejena na podlagi videza in ne zaradi pomembnosti vsebine, ki jo je treba posredovati spletnemu obiskovalcu.
-V splošnem vizualnem vidiku morda ni dosegel popolnosti. Biti sposoben samo izboljšati obstoječega. Povsem drugačen primer, če je bil splet ustvarjen od začetka.
-Odvisno od modela izvirne spletne strani lahko pride do konca prilagajanja spremembam ali pa tudi ne. Z nekaterimi maketami bodo razvijalci v tem poskusu lahko izdelali le vmesne rešitve.
Končno o odzivnem dizajnu
Končno so bile izvedene le preproste podrobnosti. Poudarjanje pomena dela za pridobitev modela, ki je prilagojen dizajnu, ki prvotno ni bil. Ko berete odzivno oblikovanje, razumete, da govorite o oblikovanju in ne o postavitvi. Zato mora način izdelave odzivne spletne strani izhajati iz konteksta izvirnega novega dizajna.
Vendar pa je možnost prikazati spletno mesto, ki se lahko spreminja in prilagaja ločljivosti mobilnega telefona, začenši s tisto, ki je bila tog, precej velik in uporaben dosežek. To, kar je razloženo tukaj, ne pomeni, da ste že usposobljeni za odzivno oblikovanje. Za to je potrebnih veliko več raziskav.
Ker bi bilo potrebno veliko več temeljev, znanja in učenja različnih bolj posplošenih, več tehničnih procesov.
Kako narediti odzivno spletno mesto – zadnji nasveti
Za zaključek je pomembno vedeti, da je odzivno oblikovanje tisto, kar je aktualno na spletu. Ta vrsta spletnega oblikovanja zahteva nov način razmišljanja. Razvoj teh spletnih mest je lahko lažji, če upoštevate naslednje nasvete:
- Najprej pomislite na mobilne naprave: pri načrtovanju je priročno začeti najprej tako, da se prilagodite majhni velikosti mobilnega zaslona. Tako po prilagoditvi vsebine zaslonom večjih velikosti. Ker ste pri oblikovanju z mislijo na mobilni telefon lahko bolj objektivni z vsebino, ki naj bo prikazana na strani, pri čemer pustite le tisto, kar je resnično pomembno za predstaviti.
- NE optimizirajte zasnove za določen mobilni telefon ali tablični računalnik
- Upoštevajte standarde in dobre prakse: na primer ne uporabljajte slogov CSS, določenih v sami datoteki, znotraj oznak Html.
- Izogibajte se suženj pikslov pri oblikovanju: ne pozabite, da elementi najdejo položaj, ki jim ustreza. To je zato, ker skrbijo za pretočnost posod in dimenzioniranje. Če se zgodi, da ni prikazan po želji, popravite postavitev elementov z uporabo medijskih poizvedb.