Elektroninių programėlių suvartojamas interneto srautas tiesiogine prasme auga kiekvieną dieną. Šiuolaikiniams vartotojams reikia išteklių su jiems patogiausia sąsaja. Toks pat adaptyvus išdėstymas leidžia patenkinti šį poreikį, nes leidžia automatiškai pakeisti tinklalapius pagal mobiliųjų įrenginių charakteristikas.
Kas tai yra
Reaktyvus išdėstymas, dar žinomas kaip pritaikytas mobiliesiems, apima tam tikrų veiksmų, skirtų sukurti tinklalapius, kurie gali prisitaikyti prie skirtingų ekrano skiriamųjų gebų, atlikimą.
Prieš keletą metų šioje srityje dirbantys žmonės turėjo sukurti kelias tinklalapių versijas, kad išteklius būtų tinkamai rodomas „ktrnhjyys[“programėlėse su skirtingomis langų charakteristikomis. Taip maketuotojai dirbo iki 2010 m. Tada idėja, kaip pritaikyti svetainę, labai pasikeitė. Tada šiai funkcijai atlikti buvo naudojama speciali programavimo kalba – JavaScript.
Kaip padaryti svetainę interaktyvią visuose ekranuosemobiliuosius įrenginius šiandien? Dabar išdėstymas atliekamas naudojant CCS3 lenteles, taip pat specialią HTML5 kalbą.
Kodėl jums reikia interaktyvios svetainės
- Galite pasiekti žiniatinklį naudodami įtaisus su skirtinga ekrano skyra. Šiandien žmonės naudoja daugybę skirtingų įrenginių tiek buityje, tiek naudodamiesi internetu. Žinoma, viena ir ta pati svetainė turėtų būti rodoma kokybiškai ir gerai atrodyti skirtingų matmenų ir ekrano raiškos įrenginiuose. Naudotojai neturėtų jaustis nepatogiai dirbdami su konkrečia programėle.
- Interneto srauto padidėjimas, mobiliųjų programų ir įrenginių populiarumas. Dabartinė elektroninių programėlių, su kuriomis galite patekti į tinklą, paklausa yra gana pagrįsta ir vargu ar kas nors ginčytųsi su šiuo faktu. Tokio populiarumo tiesiog negalima ignoruoti, nes šie vartotojai tikriausiai sudaro liūto dalį visos jūsų auditorijos. Taigi, jei norite, kad jūsų ištekliaus lankytojų skaičius išliktų toks pat arba jį padidintų, tuomet turėtumėte daug dėmesio skirti jų poreikiams ir interesams. Kitaip tariant, jūs tikrai turite padaryti viską, kad svetainė būtų kuo patogesnė, kitaip jūsų klientai gali tiesiog kreiptis į jūsų konkurentus.
Neatidėliotinos pagalbos informacija. Jei jūsų specializacija yra naujienų ir kitos aktualios informacijos teikimas, žinoma, vartotojui jos gali prireikti skubiai irjis tuo metu gali neturėti nieko, išskyrus telefoną. Taigi jūsų užduotis yra užtikrinti, kad jis kuo greičiau gautų reikiamą informaciją
Interaktyvaus išdėstymo ir programos mobiliesiems palyginimas
Visų rūšių programos ir svetainės, kuriose atitinkamoms programėlėms naudojamos mobiliosios versijos, taip pat yra geras žingsnis, tačiau jos turi nemažai trūkumų.
- Aplikacija mobiliesiems būtinai turi atitikti operacinės sistemos tipą. Ir tam jūs turite išleisti ne tik laiką, bet ir pinigus.
- Programą reikia atsisiųsti. Norint naudoti programą, žinoma, ji turi būti įdiegta. Žinoma, vartotojas gali tai padaryti, bet tik su sąlyga, kad jam to reikia dažnai. Jei jis neturi tokio poreikio, greičiausiai jis atsisakys šio įsipareigojimo. Dėl to prarasite didelę auditorijos dalį.
Kodėl turėtumėte išeiti iš programų
- Eismo paskirstymas. Programos naudojimas nerodo išteklių lankomumo lygio. Kitaip tariant, programos ir svetainės srautas nesumuojamas, todėl jus dominantis rodiklis sumažėja.
- Išteklių medžiagų integravimas. Jei įsigijote programą, turėsite išleisti papildomų pinigų, kad sinchronizuotų visą medžiagą arba, užpildydami svetainę, taip pat perkelti turinį į programą. Dėl to vėl prarasite pinigus ir laiką.
Kaip prisitaikytisvetainės dizainas
Pirmasis žingsnis – suprojektuoti visą darbą. Šiame procese dizaineris turi sumaniai perteikti esmę ir pagrindines idėjas naudodamas palyginti mažą ekraną ir tik vieną meniu stulpelį.
Jei reikia, informacijos blokai mažinami, lieka tik reikšmingiausi elementai. Pradedančiųjų vadovas paprastai apima:
- mobilieji pirmiausia – elektroninių prietaisų kūrimas;
- lankstūs vaizdai – naudokite lanksčius vaizdus;
- tinkleliu pagrįstas išdėstymas – naudokite lanksčius tinklelio išdėstymus;
- medijos užklausos – medijos užklausų apdorojimas.
Kaip padaryti svetainę interaktyvią? Norėdami tai padaryti, galite naudoti kelių tipų išdėstymus.
- Guma. Šį tipą lengva įgyvendinti, jis retai sukelia sunkumų net pradedantiesiems. Pagrindiniai š altinio blokai suglaudinami tol, kol jie atitinka mobiliųjų įrenginių ekranų dydį. Jei suspausti neįmanoma, jie dedami juostos pavidalu.
- Perkelti blokus. Ši technika puikiai tinka ištekliams su keliais stulpeliais. Papildomų blokų išdėstymas skiriasi priklausomai nuo ekrano matmenų. Jei ekranas susitraukia, šoninės juostos pasislenka į apačią.
- Perjunkite išdėstymą. Tai gana daug laiko reikalaujantis metodas, kurio metu kiekvienai ekrano raiškai reikia naudoti specialiai sukurtą išdėstymą. Šis metodas labai palengvina svetainės tyrimą, tačiau dėl darbo sudėtingumo į jį nereikalaujama.
- Elementarus išdėstymas. Metodika, nepriekaištingatinka paprastiems ištekliams. Dizaineris tiesiog padidina paveikslėlių ir tipografijos mastelį. Nors šis metodas negali būti vadinamas paklausiu dėl lankstumo stokos.
- Plokštės. Ši technika sukurta mobiliųjų programų, kuriose pagalbinis meniu gali būti rodomas bet kurioje ekrano padėtyje. Dabar šis metodas taip pat nėra labai populiarus, nes mobilioji svetainės navigacija ne visada yra aiški naudotojams.
Nė vienas iš aprašytų išdėstymų negali būti vadinamas universaliu. Kaip padaryti svetainę reaguojančią? Visų pirma, atsižvelgiant į projektą, turite pasirinkti tinkamą išdėstymą. Jis turi visiškai atitikti ištekliaus galimybes ir tenkinti visus poreikius.
Kaip sukurti interaktyvų svetainės išdėstymą
Šiandien tam naudojami CSS3 ir HTML5. Pirmoji technologija – pažangios kartos kaskadiniai stalai. Jos pagalba sukuriamos taisyklės, pagal kurias vartotojo ekrane bus rodoma informacija apie svetainę.
Naudodami CSS3, galite nustatyti kelis parametrus: užimamos vietos procentą ir elemento matmenis esant tam tikra raiška. Naudodami šią technologiją dizaineriai gali sukurti skirtingas klases, atitinkančias tam tikras charakteristikas.
HTML5 naudojamas tam tikrų detalių vietai nurodyti, kitaip tariant, puslapiui pažymėti. Sugeneruotos CSS3 klasės yra nurodytos HTML žymose, kad naudojami objektai būtų modifikuojami atsižvelgiant į skiriamąją gebą.
Taigi, kaip sukurti interaktyvų svetainės dizainą naudojant html? Pirmiausia turite sukurti paprastą paveikslėlįtada ištempk.
Tai sukuria vaizdo apdorojimo apvalkalą.
Kaip padaryti svetainę prisitaikančią naudojant CSS? Nustatykite šiuos parametrus:
div {
plotis: 100 %;
}
div img {
plotis: 100 %;
aukštis: automatinis;
}
Tada pagal div plotį nustatykite vaizdo plotį img.
Taigi gausite vaizdą, kuris užims visą rodymo vietą esant bet kokiai skyrai.
Tinkinkite atskirus elementus
Svetainės antraštė. Įdėkite kelis elementus į antraštę:
logotipas -
slėpti meniu mygtuką -
pagrindinis meniu -
svetainės paieška -
- Blokuoti tekstiniu turiniu. Naudokite elementą, kad aptrauktumėte straipsnį.
- Šoninis stulpelis. Naudokite norėdami rasti kategorijų sąrašą, spustelėkite adresų sąrašą ir naujausius įrašus.
- Kaip sukurti pritaikomą svetainės meniu? Pridėkite elementą prie žymėjimo. Šis kodas pakeičia meniu aukštį, pritaikydamas turinį pagal reikiamus matmenis.
Mažosios galerijos kūrimas
Žinodami, kaip sukurti interaktyvią html ir css svetainę, galite papildyti savo š altinį naudingu ir įdomiu turiniu, tinkamu bet kokiai programėlei, pavyzdžiui, mini galerijai.
Jei norite į HTML pridėti keletą paveikslėlių, naudokite šiuos elementus:
Ir kad kiekvienas vaizdas sąveikautų su skirtinga raiška ir pakeistų jo dydį, naudokite CSS3:
div.image_gallery {
marža: 0 automatinis;
plotis: 1000 pikselių;
min-plotis: 500 pikselių;
}
img {
maksimalus plotis: 48 %;
pamušalas: 1 %; / nedidelis vaizdų užpildymas /
}
Štai viskas, jūsų mini galerija paruošta. Dabar žinote, kaip padaryti, kad jūsų svetainė prisitaikytų prie skirtingų įrenginių.
Kaip patikrinti darbo kokybę
- Google Chrome. Naršyklėje paspauskite F12. Po to atsidarys skydelis – spustelėkite jus dominančios programėlės piktogramą, pavyzdžiui, planšetinį kompiuterį ar išmanųjį telefoną. Ir kitame meniu pasirinkite reikiamą skiriamąją gebą.
- Įrenginys jautrus. Programa, su kuria galite patikrinti adaptyvų išdėstymą įkeldami svetainę per IFrame. Čia pamatysite skirtingą skiriamąją gebą įrenginių sąrašą.
- Aresponsivedesign.is. Tai pramogų š altinis. Pirma, svetainė įkeliama į IFrame langus, o tada perkeliama į Apple ekranus. Dėl to labai patogu daryti ekranų ekrano kopijas.
