Veebisaitide kohanduv paigutus

Sisukord:

Veebisaitide kohanduv paigutus
Veebisaitide kohanduv paigutus
Anonim

Mida populaarsemaks muutuvad mobiilseadmed, seda ebamugavamaks on kerimine enamikul saitidel. Seetõttu on veebihaldurid alates 2012. aastast kasutanud lahendust, mis muudab ressursside vaatamise madala eraldusvõimega ekraanidel mugavamaks – adaptiivset paigutust.

Moodne trend

Adaptiivne paigutus
Adaptiivne paigutus

Täna kasutab Maal mobiiltelefone umbes viis miljardit inimest, kellest kolmandikul on nutitelefon. Seetõttu muutub mobiililiiklus veebisaitide omanike jaoks üha olulisemaks. On tõenäoline, et selline külastajate allikas aja jooksul ainult kasvab. Otsingumootorid reageerisid sellele trendile kiiresti. Suured ettevõtted "Yandex" ja Google on teinud olulisi muudatusi oma algoritmides saitide järjestamiseks otsingutulemustes, võttes arvesse adaptiivse paigutuse ja kujunduse kättesaadavust. Lihtsam alt öeldes on mobiiltelefonide, nutitelefonide ja tahvelarvutite jaoks optimeeritud veebiressurssidel konkurentide ees teatud eelised.

Reageeriva paigutuse määratlus

Adaptiivne paigutus on meetod veebilehe raami loomiseks,plokkide asukoha automaatne muutmine vastav alt selle seadme ekraani eraldusvõimele, millel seda vaadatakse. See tähendab, et selle lähenemisviisiga luuakse erinevate eraldusvõimete jaoks eraldi stiilid. See efekt saavutatakse spetsiaalsete CSS-failide kirjutamisega.

adaptiivne eraldusvõimega paigutus
adaptiivne eraldusvõimega paigutus

Varem lahendati probleem veidi teisiti. Arendajad pidid tegema palju rohkem “keha liigutusi”, luues saidi põhiversiooni paigutuse ja kujunduse ning tegema sama ka mobiili jaoks. Olenev alt selle seadme ekraanist, millel Interneti-projekti koos saadaoleva mobiiliplatvormiga vaadati, käivitati saidi sobiv versioon.

See lähenemine ei õigustanud ennast mitmel viisil ja enamik veebihaldureid ei hakanud kunagi mobiiliversiooni looma. Nüüd on see järjekord asendatud adaptiivse paigutusega. Selle tehnoloogia abil saidi skeleti luues koondab veebihaldur kõik oma jõupingutused projekti ühe versiooni loomisele ning külastajad saavad seda sama mugav alt vaadata nii suurel arvutiekraanil kui ka mobiiltelefonis, nutitelefonis või tahvelarvutis.

Reageeriva paigutuse eelised

Millised on adaptiivse veebisaidi paigutuse eelised? Varem märgiti, et eeliseks on kõigi leheplokkide õige kuvamine mis tahes seadmes. Samuti on selle lähenemise positiivseks küljeks malli loomisel muudatuste rakendamise kiirus. Mida see tähendab?

tundlik paigutusmall
tundlik paigutusmall

Kui saidil oli kaks platvormi, pidid paigutuses tehtud muudatused olemaesm alt rakendatakse tööversioonis ja seejärel mobiiliversioonis. Kui koodi muudatused olid üsna olulised, võib selliste muudatuste tegemine võtta kaua aega. Adaptiivse paigutusega tehakse tööd saidil ühes failis. Veebilehe kujunduses tehtud muudatused kajastuvad peagi nii tootmis- kui ka mobiiliversioonides.

Selle lähenemisviisi puuduseks nimetavad mõned veebimeistrid selle rakendamise keerukust. Kuid CSS 3 tulekuga on tundliku paigutuse malli loomine muutunud üsna lihtsaks. Isegi kogenematud veebimeistrid saavad muuta oma saidi mobiilisõbralikuks.

Kohanduva paigutuse põhimõtted ja funktsioonid

Millised põhimõtted on veebidisaini tundliku paigutusmeetodi aluseks?

- vedela paigutuse tüübi kasutamine.

- "kummist" kujutised.

- Meediumipäringute (meediumipäringute) kasutamine.

- vajadus mõelda mobiilseadmetele juba paigutuse algusest peale.

Nendest malli loomise meetodi aluspõhimõtetest tulenevad järgmised adaptiivse paigutuse omadused:

1. Veebisaidi kujunduse kujundamine ja loomine, võttes arvesse tööd kogu eraldusvõimega: mobiilist laiekraanekraanideni.

2. Kaskaadlaadilehtedega paigutus, kasutades CSS 3-s kasutusele võetud meediumipäringu tehnoloogiat.

3. Programmeerimine nii kliendi kui ka serveri poolel piltide saatmiseks väiksema suuruse ja eraldusvõimega mobiilseadmetesse.

Oluline aspekt, võttes arvesse, milline adaptiivne paigutus luuakse, onpopulaarsete elektroonikaseadmete eraldusvõime maatriks. Selline lähenemine disaini arendamisele muudab veebisirvimise igal ekraanil väga mugavaks. Aga kuidas sa tead, milliseid stiilidesse lisada?

Kust alustada tundliku paigutusega?

Enamik veebisaite on tehtud nii, et nutitelefonide ja tahvelarvutite ekraanidele ilmuvad kerimisribad, mis pole nii mugavad surfamiseks, ning paljude internetiprojektide kujundus ja paigutus lihts alt “ujuvad”. Veebisaidid, mis on loodud veebidisaini õpetamiseks, sisaldavad mitmesuguste seadmete ekraani eraldusvõimet, mille alla tasub oma saidi lehed paigutada.

adaptiivse paigutuse näited
adaptiivse paigutuse näited

Adaptiivsel paigutusel, mille näiteid võib üsna sageli leida, on palju eeliseid. Mida tuleks sellisel viisil lehe paigutusele lähenedes silmas pidada?

Malliga töötamist alustades on oluline perioodiliselt testida, kui hästi sisu ja paigutusplokke erinevatel ekraanidel kuvatakse. Selleks piisab mõnikord lihts alt brauseriakna laiuse muutmisest. Stiilifail võtab vastu meediumipäringu ja paigutab plokid ümber, tehes olulisi muudatusi. Hea tööriist tundliku paigutuse malli testimiseks võivad olla saidid, mis jäljendavad erinevate mudelite mobiilseadmete ekraane. Sellised teenused võimaldavad teil hoolik alt kaaluda ja hinnata, kuidas kujundus erinevate mobiilseadmete ekraanidel välja näeb.

Kuigi sellise tundliku paigutuse tehnoloogia pole nii lihtne, kannab selle valdamine vilja üsna pea.

Soovitan: