Prilagodljivo oblikovanje spletne strani je priročen sistem za prikaz istega spletnega mesta na različnih vrstah naprav na spletu. Preprosto povedano, to je možnost ogleda ene spletne strani na prenosnem računalniku, pametnem telefonu in drugih pripomočkih.
Odzivnost spleta je postala nujna, odkar so ljudje dobili internetne pripomočke različnih formatov. Podjetja, spletne trgovine in celo samo informativna spletna mesta si prizadevajo zadovoljiti svoje občinstvo in se mu na vse možne načine prilagajajo. Odzivni dizajn rešuje problem udobja, zato je nepogrešljiv delovni kos.
Značilnosti odzivnega spletnega oblikovanja
Priročnost oblikovanja je značilna po več glavnih merilih.
- Velikost. Odzivna zasnova spletne strani bi morala imeti manjše razlike pri prikazovanju strani na različnih napravah, zato naj se velikosti slik, besedila in drugih ogledovanih elementov ujemajo z velikostjo samih naprav. V ta namen spletni razvijalci prilagodijo zasnovo tako, da ima več različic pogledov.
- Prilagajanje vsebine. Material, ki zapolnjuje spletno mesto (slike, videoposnetkiin drugi multimedijski elementi) se morajo prav tako ujemati z zahtevano ločljivostjo zaslona, ne da bi pri tem izgubili kakovost zaslona.
- Prilagodljivost oblikovanja. Vključitev v razvoj elementov, ki vam omogočajo hitro prilagajanje oblikovanja strani, ko spremenite spletno stran, ki si jo ogledujete. Na primer, uporabnik se pomika po strani navzgor in navzdol, se pomika po različnih razdelkih ali spremeni položaj zaslona iz navpične v vodoravno in obratno.
- Poenostavite predmete glede na napravo za boljšo uporabnost.
- Skrij nepomembne bloke na manjših zaslonih.
Osnove
Izdelava spletnih strani je vsekakor povezana s programskimi jeziki, saj brez njih preprosto ne gre. S pomočjo HTML in CSS brskalnik prepozna sestavo in vrstni red predmetov (besedila, ilustracije, video posnetki) – tako nastane spletno mesto.
CSS je odgovoren za barve, sloge, velikosti, pisave, poravnave, oblazinjenje, elemente ozadja, obrazce itd. HTML je odgovoren za celotno vsebino in strukturo spletnega mesta. Tako je spletni vir zgrajen v agregatu dveh najpomembnejših opisnih metod.
CSS je po drugi strani nepogrešljivo orodje za oblikovanje. Ima velik nabor funkcij, ki so boljše od HTML:
- Zagotavlja doslednost oblikovanja na več straneh, videz spletnega mesta in nadzoruje prikaz dokumentov HTML.
- Daje vam priložnost za oblikovanje in vsebino hkrati.
- Uporablja več stilov in možnostogled na različnih napravah.
- Sprejemanje kompleksnih oblikovalskih odločitev.
- Zaznamuje visoka hitrost.
Če želite razviti spletno mesto, morate poznati nekaj osnovnih konceptov.
Izbirnik CSS je označen z imenom sloga, ki določa lastnosti in možnosti oblikovanja. Brskalniku pove, za kateri določen element veljajo lastnosti.
Nepremičnina je strukturna enota. Določa zunanje parametre (velikost, lokacijo, barvo, obliko itd.) in je izražena v določeni kodi.
Obstaja niz definiranih lastnosti CSS, ki opisujejo en sam predmet po videzu in lokaciji.
Ti elementi skupaj tvorijo naslednjo shemo:
Selektor { lastnost1: vrednost; lastnina2; vrednost }.
Velikosti in ločljivosti postavitve
Razvoj dizajna se začne s pripravo postavitve v Photoshopu ali drugih grafičnih programih. Za udobje se v platno vnesejo posebne oznake modularne mreže, opazimo posebne alinee. Tako spletni oblikovalec pokaže oblikovalcu postavitve načela strukturiranja bodoče strani in pravilne razporeditve spletnih elementov.
Odzivne ločljivosti in velikosti spletnega oblikovanja za glavne vrste naprav:
- Ta dizajn se drži načela začetka dela z dovoljenjem za mobilne naprave. Postavitev za pametni telefon je ustvarjena v velikosti 460 × 960 px.
- Velikost postavitve tabličnega računalnika je 768 × 1024.
- Velikost zvezka je 1280 × 802.
- velikost računalnika je 1600 × 992.
V mobilni različici spletnega mestaje treba čim bolj poenostaviti, hkrati pa ohraniti vse glavne funkcije. Če se postavitev pripravlja za spletno trgovino z vso poenostavitvijo v uporabi, mora imeti glavni opis, katalog izdelkov, možnost naročila, nakupovalni voziček itd. - vse potrebne elemente za polnopravno delovanje, kot pri gledanju celotnega formata na osebnem računalniku. Priročnost mobilne različice je, da se tukaj lahko izognete dodatnim stranem, da prihranite čas pri nalaganju.
V prilagodljivi vsebini lahko z uporabo html kode skrijete nekatere elemente, ki v resnici niso potrebni. Na primer, pri visoki ločljivosti spletno mesto prikaže kartico izdelka z opisom, ceno, podatki o dostavi in možnostjo dodajanja v "Košaro". V mobilni ločljivosti je postopek poenostavljen na fotografijo, ceno in gumb za nakup.
Srednje in minimalne ločljivosti za odzivno oblikovanje morajo upoštevati enostavnost branja in gledanja s strani uporabnika.
Postavitev
Namen prilagodljive postavitve oblikovanja je ustvariti prilagodljivo postavitev, ali kot je tudi običajno reči: "gumijasta šablona". Bistvo ni v enomestne velikosti strani, ampak v sorazmerni stisljivosti predloge za enostaven ogled na vseh napravah.
Zgrajen je predvsem na CSS. Med razvojem se določijo kontrolne točke dimenzij zaslona. Tako se določi širina preostalih predmetov. Za to je širina strani nastavljena z lastnostjo max-width css, odvisno od teh meril je velikost drugih elementov izbrana v odstotkih. Na primer velikost bloka na glavnem mestustran je 600 slikovnih pik, širina bloka stranske vrstice (stranska vrstica spletnega mesta) pa 400 slikovnih pik, širina vsebine pa bo 60 %, širina stranske vrstice pa 40 %.
Obstaja več vrst odzivnih postavitev. Vsak je izbran posebej, odvisno od lastnosti in konstrukcije.
Ogledi:
- Vrsta postavitve, ki omogoča ovijanje blokov, ko je ločljivost zaslona zmanjšana. Na spletnih mestih z več stolpci so dodatni bloki premaknjeni na dno zaslona.
- Ko se za vsako dovoljenje izdela ločen vzorec. Ta vrsta odzivnega dizajna traja dlje, vendar je najbolj berljiva.
- Preprosta oblika oblikovanja, katere cilj je povečati vse elemente. Ni prilagodljiv.
- Tip plošče je priročen za uporabo v mobilnih aplikacijah, ko se pri spreminjanju položaja samega zaslona pojavijo dodatne funkcije.
Ustvarjanje odzivnih slojev je le en del dela. Prilagodljive slike so ločen primer, ki ima svoje težave in načine za njihovo reševanje.
Posamezna slika mora biti jasno prikazana pri različnih ločljivostih zaslona. Tu je problem – kako poskrbeti, da bo slika vedno enaka, ne glede na spremembo ločljivosti. Vnos preproste kode CSS v tem primeru ne bo dovolj.
Primer: img {max-width: 250px;} - tukaj morate uporabiti metodo, pri kateri je omejena velikost vsebnika, ki vsebuje sliko, in ne same slike. Videti bo nekako takole: div img {max-width: 250px;}. Ta metoda rešuje problempostavitev majhnih slik, vendar ni primerna za velike ilustracije.
Zato mnogi razvijalci raje uporabljajo jezike javascript, ki vam omogočajo prilagoditev katere koli slike brez preobremenitve strežnika. Javascript ponuja veliko število alternativnih skript.
Prednosti in slabosti odzivne postavitve
Pozitiv:
- Shrani lokacijo vseh elementov. To je priročno, če je uporabnik navajen na polno različico spletnega mesta.
- Shrani domene in naslove.
- Popolna prilagoditev za druge oblike dovoljenj.
Negativno:
- Izgubljena je funkcionalna fleksibilnost
- Vsaka informativna preobremenitev je preobremenjena z dolgotrajnim zagonom spletnega vira, ki mnoge uporabnike prisili, da preklopijo na hitrejše možnosti.
Ustvarjanje spletnega mesta
Struktura spletnega mesta je razdeljena na več razdelkov in blokov. Tradicionalno je postavitev sestavljena iz zgornjega dela spletnega mesta (glave), logotipa, menija, bloka vsebine in končnega dela spletnega mesta (na primer podrobnih kontaktnih podatkov). Poglejmo, kako narediti odzivno zasnovo spletnega mesta iz preproste predloge.
Pomožne oznake za pisanje:
- wrapper - oznaka, ki združuje vse elemente predloge;
- glava h1 - logotip;
- header - glava za meni in druge pomembne elemente;
- vsebina - blok;
- colLeft - velikost vsebine;
- colRight - stranska vrstica (stranski stolpec);
- footer - zadnji del strani;
- predstavnostni zaslon - niziželena ločljivost.
Pri pisanju spletnega mesta se ti elementi lahko premikajo v drugačnem vrstnem redu, odvisno od potrebe. Na primer, pri visokih ločljivostih je meni lahko prikazan navpično. V mobilni različici je postavitev lahko sestavljena tako, da bo meni zdrsnil ven v vodoravnem položaju.
- viewport - oznaka, ki vam omogoča, da shranite velikost besedila v manjši različici dizajna. Nahaja se med oznakami.
- max-width - za optimizacijo spletnega mesta, da se prepreči raztezanje pri ločljivostih nad 1000 slikovnih pik.
Pri implementaciji postavitve vam knjižnica jQuery zelo pomaga, ko morate spremeniti slog in strukturo blokov.
Kakšna je razlika med odzivnim in mobilnim dizajnom
Za popolno razumevanje si oglejte nekaj ilustrativnih primerov, saj zmeda med tema dvema konceptoma ni redka.
Razumeti morate, da je mobilna različica analog primarnega spletnega mesta s poddomeno. Zunanja predstavitev strani popolnoma ponavlja slog in funkcionalnost, medtem ko se njena struktura in vsebina lahko razlikujeta od glavne različice, saj je različica razrezana na potrebne elemente.
Odzivna zasnova je optimalna za vse ločljivosti naprav. Je prilagodljiv in se pravilno upodablja ne glede na pogoje gledanja.
To sta dve različni predstavitvi strani, okoli katerih neutrudno divjajo spori, katera je boljša. Treba je opozoriti, da dokončna odločitev še ni bila sprejeta. Nekdo hvali ta dizajn, opozarja na modni trend in veliko prednosti. Mobilna različica ima tudi več prednosti, ki jih odzivni dizajn nima. Zato morate za začetek razumeti osnovne potrebe.
Ugodnosti
Kako je odzivno oblikovanje boljše od mobilnega?
Vsestranskost. V našem času, s tako noro rastjo trga, je preprosto treba predstaviti informacije na drugačen način, ki zadovolji želje potrošnikov. Odzivni dizajn rešuje to težavo.
Učinkovita promocija v iskalnikih. Česa ni mogoče pripisati glavnim prednostim prilagodljive naprave. Iskalniki raje dajejo uporabnikom odzivna spletna mesta.
Uporabnost. Odzivno oblikovanje je običajno zasnovano v najboljših oblikovalskih rešitvah, kar je lepo darilo za vizualno percepcijo uporabnikov.
Enostavnost in enostavnost tako pri izvedbi projekta kot pri njegovi uporabi.
Dobre stopnje konverzije. Ker je s prilagodljivim dizajnom več možnosti za prikaz, se sama pretvorba poveča.
Ekonomija. To je relativno ceneje kot ustvarjanje in promocija ločene mobilne različice.
Prednosti in slabosti mobilne različice
Ustvarjanje odzivnega mobilnega dizajna zahteva vsestranskost in doslednost. Najprej je priporočljivo, da podrobno napišete pogoje poslovanja, kar bo seveda pomagalo preprečiti nepotrebno delo in prihraniti čas ter upoštevati značilnosti strežnika, na katerem bo spletno mesto gostovalo..
Odzivni dizajn za mobilne naprave ima določene prednosti in slabosti.
Prednosti:
- Če imate že pripravljeno spletno mesto, vam ni treba razvijati dizajna za mobilno različico iz nič. Izvedenih je lahko le nekaj sprememb, ki osvobodijo to postavitev nepotrebne funkcionalnosti.
- Zaradi vseh vrst poenostavitev velja, da je mobilna različica hitrejša pri prenosu.
- Uporabnik vidi najpomembnejšo informacijo v vsej vsebini.
- Hitra implementacija. Obstajajo vtičniki, s katerimi lahko implementirate mobilno prilagoditev, tudi če ne poznate oznak in kod.
- Izbire iskalnikov dajejo prednost prilagodljivim različicam, ker potrebujejo manj časa za analizo.
Proti:
- Vse mobilne različice morda ne ustrezajo ločljivostim mobilnih naprav. Spletno mesto se bo seveda odprlo, vendar se ločljivost zaslona ne ujema vedno s postavitvijo. Včasih je lahko dobro oblikovana zasnova pametnega telefona videti drugače, ko jo odprete kot tablico.
- Mobilne različice zahtevajo ločene plačljive domene.
- Pri objavljanju vsebine je nekaj manjših težav. Če obstaja več različic hkrati, je treba vsebino prilagoditi za vse formate hkrati. Oddaja novega gradiva na glavnem mestu in njegovo kopiranje v mobilno različico se lahko šteje za krajo. Da se izognete tej težavi, boste morda morali dokazati povezavo virov.
Načini izvedbe
Glavne izvedbene metode:
- Po izdelavi zasnove postavitev in postavitve se naloži na zahtevane dimenzije zmesto operaterja in glavna koda. To je klasična metoda, ki se uporablja pri ustvarjanju srednjih in majhnih različic (tablice, pametni telefoni itd.).
- BootStrap je preprost in jasen nabor orodij za prilagajanje. Primerno za ustvarjanje različic za ciljno stran in druge ne preveč zapletene spletne projekte. Daje dobro priložnost za uporabo številnih različnih stilov v funkcijah vmesnika.
- Responsive Grid System je priljubljen nabor vsestranskih orodij. Enostaven za uporabo in ne zahteva globokega znanja. Vključuje široko paleto infografik.
- GUMBY - okvir CSS, ki se ponaša s prilagodljivo odzivnostjo in odličnim orodjem.
- Piškotki - omogoča implementacijo odzivnih slik. Samodejno spremlja datoteke, ki jih zahteva brskalnik.
- ExpressionEngine je še en način za ustvarjanje odzivnih slik. Določa, ali je naprava mobilna in lahko spreminja slike na zahtevano ločljivost.
- ProtoFluid - Zagotavlja hitro izdelavo prototipov. Primerno za vse vrste naprav.
