Veebisaidi reageerimisvõime on veebisaidi võime kuvada sellel õigesti erinevaid seadmeid erinevate omadustega.
Rohkem videoid meie kanalil – õppige SEMANTICA abil internetiturundust
Tänapäeval vaadatakse veebisaite personaalarvutites, tahvelarvutites ja nutitelefonides. Igal seadmel on oma omadused - kiirus, ekraani eraldusvõime.
Kui sait ei reageeri, kuvatakse see arvutis õigesti. Ja telefonis võib see "käida" - plokid kattuvad üksteisega, font võib muutuda loetamatuks.
Terminit reageerimisvõime ise on laialdaselt kasutatud alates Ethan Marcotti raamatu Responsive Web Design – Responsive Web Design ilmumisest. Saite, mis suudavad dünaamiliselt kohaneda vaatamisseadmete antud omadustega, on hakatud nimetama adaptiivseteks.
Tundliku paigutuse näide
Kuva arvutis:
Tahvelarvutis:
Nutitelefonis:
Miks on vaja responsiivset veebisaiti
Tehnoloogia areneb kiires tempos ja seadmetootjad ei jää neist palju maha. Nutitelefone, tahvelarvuteid, telereid ja muid internetti ühendatud elektroonikaseadmeid on saadaval igale maitsele ja eelarvele ning ekraani suuruse valikuid on palju.
Samal ajal suureneb sisu tarbimine plahvatuslikult. Võitluses kliendi pärast kasutavad saidi omanikud kõiki vahendeid ja meetodeid. Eelkõige annavad nad arendusetapis võimaluse oma veebiressurssi erinevates seadmetes õigesti kuvada.
Nende seadmete protsent, mis võimaldavad teil veebis teavet vaadata, kasvab iga aastaga. Erinevad vormingud ja eraldusvõimed muudavad arendusprotsessi kui terviku keerulisemaks, kõikides etappides tuleb arvestada lisanõuetega: kujundajad, küljendajad ja programmeerijad.
Adaptiivse disaini kontseptsioon võimaldab teil protsessi sujuvamaks muuta, kuna te ei pea looma mitut saitide varianti, nagu varem mobiiliversioonide puhul. Sel juhul kujundati eraldi funktsioonide komplekt eraldi alamdomeenil.
Vanad saidid vajavad täiustamist ja erinevad lähenemised kohanemisvõimele võimaldavad seda realiseerida. Peaasi on alguses õigesti hinnata mõõtkava, mõnel juhul on lihtsam, kiirem ja odavam kasutada uusi kujunduspaigutusi ja -malle. Kui teie ettevõtte identiteet ei ole äratuntav bränd, sunnib asjaolu, et see on moraalselt vananenud, teid sageli ümber töötama. Ja rebrändingut kui uuele tasemele ülemineku etappi pole tühistatud. Responsiivne veebisait on teie ettevõtte jaoks võimas tööriist.
On olemas teenused, mis kontrollivad, kuidas sait vastab kohanemisvõime nõuetele.
Veelgi enam, tänapäeval võtavad suurimad otsingumootorid Google ja Yandex seda parameetrit veebisaitide järjestamisel arvesse. Alates kasutatavusest on navigeerimine üks saidi kvaliteedi hindamise kohustuslikest teguritest. Teabe laadimise kiirus ja optimeeritud piltide puhul see langeb, loetamatu tekst ja moonutatud elemendid, mis on liiga väikesed või ei mahu ekraanile, raskendavad teabe leidmist ja põhjustavad lihtsalt põrgete suurenemist - kasutaja sulgeb lehe. Need on käitumuslikud tegurid, mis mõjutavad ka positsiooni otsingutulemustes.
Saidiomanike jaoks ei ole tehniline terminoloogia ja järjestuse parameetrid täiesti selged ja käegakatsutavad kriteeriumid. Kuid neile piisab, kui nad mõistavad, kuidas see kohaloleku dünaamikat mõjutab. Paljudes piirkondades on mobiilseadmete liikluse osakaal võrreldav töölaua liiklusega ja isegi ületab seda. Seda tuleb arvestada. Üha vähem on võimalik kohata arendajaid, kes ei paku veebisaidi kohandamist, kuid protsessi juhtimiseks ei tee sellest probleemist navigeerimine.
Kohanemisvõime põhimõtted
keermestamine
Oletame, et olete loodud lauaarvuti brauserite jaoks. Kõik on suurepärane. Seda saiti mobiilseadmest vaadates nihutatakse plokid ja lähevad üksteise alla.
Seda nimetatakse vooluks. Ja nüüd on see üks peamisi responsiivse disaini põhimõtteid. Kaaluge seda.
Ühiku relatiivsus
Koolifüüsika tundidest on teada, et kiirus võib olla absoluutne, kui olenemata sellest, kust liikumist jälgida, on kiirus sama. Ja suhteline - millal, sõltuvalt võrdluspunktist, võib kiirus muutuda.
Sama ka mõõtühikutega. Erinevatel seadmetel on erinev pikslitihedus. Ja suurus, näiteks 320 px, näeb arvuti ja nutitelefoni ekraanil erinev.
Lahenduseks on kasutada suhtelisi ühikuid. Kui määrate ploki kõik suurused, skaalad ja koordinaadid elemendi suhtes, mis on nii arvutiekraanil kui ka nutitelefoni ekraanil. Näiteks ülemine piir.
Katkestuspunktide kasutamine
Need on elemendid, mille asukoht muutub ainult siis, kui vaatamiseks kasutatakse teatud seadet. antud parameetrid ekraan.
Näiteks kui lehe sisu “libiseb minema”, siis on mõttekas selline punkt lisada ja sisu korda teha.
Miinimum- ja maksimumväärtused
Mobiiltelefonis saab artiklit kuvada nii, nagu peab. Kuid siin avate sama lehe laiekraanmonitoril ja pilt ei meeldi teile. Kõik on venitatud, loetavus ei tule kõne allagi.
Näiteks saate määrata atribuute. Kui ekraani laius on alla 1000 piksli, tuleb sisu kuvada täisekraanil. Vastasel juhul on maksimaalne laius 1000 pikslit.
Objektide pesastumine
See juhtub, et peate kasutama palju elemente, mis sõltuvad teiste plokkide asukohast. Seda on raske kontrollida. Selliseid objekte saate pesastada ühte konteinerisse. See sobib nendele plokkidele, mida te ei soovi kohandada ekraani parameetritega - nupud, logod jne.
Õiged fondid
Veebifondid näevad ilusad välja. Kuid ärge unustage, et need kõik on laetud. See mõjutab kasutaja lehe laadimise kiirust.
Raster- ja vektorgraafika õige kasutamine
Kui pildil on palju pisidetaile, siis kasuta rastervormingut. Muidu - vektor.
Aga ühtki pilti ei tohi kasutada ilma optimeerimiseta – tihendamiseta. Vektorpildid on tavaliselt juba tihendatud. Kuid mitte kõik vanemad brauserid ei toeta neid.
Vastavus paigutuse suurustele
On olemas üldised standardid selle kohta, millistele põhimõõtmetele on kombeks paigutuse väljatöötamisel keskenduda.
Tundliku disaini puhul on olemas selline asi nagu murdepunktid. Need on parameetrid, mis edastatakse meediumifunktsioonides. Märkige, milliste eraldusvõimetega disain muutub.
- Mobiili jaoks 320 pikslit, 480 pikslit.
- Tahvelarvutitele 768 pikslit.
- Netbookidele ja mõnele tahvelarvutile 1024px.
- Personaalarvutitele 1280 pikslit või rohkem.
Konkreetse eraldusvõimega sidumine pole keeruline. Sõltub seadme seadistustest ja parameetritest.
Vahel pole vaheresolutsioonide jaoks, näiteks 480px, paigutust vaja luua, kui paigutust kuvatakse õigesti vahemikus 768 - 320px.
Kui paigutus konkreetsel vidinal "katki läheb", kuvatakse erineva eraldusvõimega valesti, võetakse katkestuspunktideks selle ekraani tegelikud väärtused.
Meediapäringud
Adaptiivsete saitide arendamine põhineb stiiliparameetrite määratlemise põhimõttel meediapäringute (meediumipäringute) abil.
Taotlused määratlevad:
- Seadmete tüüp: projektorid, nutitelefonid, monitorid, telerid jne.
- Tingimused.
Vastaval päringul ja vastusel rakendatakse css-laadifailist seadmele vastavad kuvaseaded.
Veebisaidi reageerimisvõime kontroll
Saate kontrollida, kuidas teie saiti mobiilseadmetes kuvatakse, kasutades erinevaid teenuseid ja tööriistu.
Brauseri kasutamine
Näiteks Google Chrome'il on sisseehitatud tööriistakomplekt, mis võimaldab kontrollida veebisaidi kujundust mobiilseadmetes õige kuvamise osas. Peate vajutama klahvi F12 või klahvikombinatsiooni Ctrl + Shift + I või valima menüüst "Lisatööriistad" - "Arendaja tööriistad".
IN Mozilla Firefox seda saab teha nii "Menüü" - "Arendus" - "Reageeriv disain" või Ctrl + Shift + M.
Google'i mobiilisõbralik (Google'i otsingukonsool)
Sisestame stringi täieliku URL-i ja saame tulemused. Kontrollimiseks kulub tavaliselt vähem kui minut.
Adaptiivne veebisait on veebiarendusstandard, üks Interneti-ressursi kvaliteedi ja kasutaja vajadustesse tähelepaneliku suhtumise näitajaid.
Adaptiivne paigutus sait võimaldab veebilehtedel automaatselt kohanduda tahvelarvutite ja nutitelefonide ekraanidega. Mobiilse interneti liiklus kasvab iga aastaga ning selle liikluse efektiivseks töötlemiseks on vaja kasutajatele pakkuda kasutajasõbraliku liidesega adaptiivseid saite.
Otsingumootorid kasutavad saidi reageerimisvõime hindamiseks mobiilseadmetes vaatamisel mitmeid kriteeriume. Google üritab nutitelefonide ja tahvelarvutite omanike jaoks Interneti kasutamist lihtsustada, mobiiliväljastamisel on märgistus kohandatud mobiilseadmed spetsiaalse märgistusega saidid mobiilisõbralik. Yandexil on ka algoritm, mis eelistab mobiiliotsingu kasutajatele mobiilse / adaptiivse versiooniga saite.
Lehe kuvamist mobiilseadmetes saate kontrollida teenustes ja.
Riis. 1. Yandexi ja Google'i mobiilne väljastamine koos märkusega saidi sõbralikkuse kohta mobiilseadmete jaoks Mis on adaptiivne paigutus
Adaptiivne paigutus tähendab puudumist horisontaalne riba keritavad ja skaleeritavad alad mis tahes seadmes vaatamisel, loetav tekst ja suured alad klõpsatavate elementide jaoks. Meediumipäringute abil saate juhtida lehel olevate plokkide paigutust ja asukohta, korraldades malli ümber nii, et see kohandub seadme erinevate ekraanisuurustega.
Artiklis on toodud peamised kohanduva saidi loomise tehnikad. Sest tundlik disain saidi põhikonteineri laius määratakse % , samas kui see võib olla 100% brauseriakna laiusest või väiksem. Ruudustiku veergude laius on samuti määratud %. IN tundlik disain põhikonteineri ja ruudustiku veergude laius fikseeritakse väärtuste abil px .
Selles õpetuses käsitletav tundlik sujuva paigutuse tehnika töötab suurepäraselt kaheveerulise malli puhul, muutes saidi tundlikuks ja mobiilisõbralikuks. Mall eeldab lehtede põhisisu erinevat paigutust, selles õppetükis analüüsitakse põhilehe paigutust.
Pealehe paigutus
Leht koosneb kolmest põhiplokist: päisest (päisest), põhisisu ümbrisest ja külgribast ning jalusest (jalus). Võtame kujunduse murdepunktideks 768px ja 480px.
Esimeses punktis peidame ülemise menüü ja liigutame külgriba postitustega konteineri alla. Teises punktis muudame päise elementide asukohta, tühistame suhtlusvõrgustike nuppude paigutuse postitustes ja lehe jaluse veergude mähkimise.
Riis. 2. Adaptiivse paigutuse näide 1. Metasildid ja jaotis
1) Lisa jaotisesse
vajalikud failid - link kasutatud fontidele, jQuery teegile ja prefixfree pistikprogrammile (et mitte kirjutada brauseri eesliiteid atribuutidele):
2. Lehekülje päis
Lehe päises
logo ;
nuppu peamenüü kuvamiseks/peitmiseks
