Adaptiivne veebisaidi kujundus on mugav süsteem sama veebisaidi kuvamiseks erinevat tüüpi seadmetes võrgus. Lihtsam alt öeldes on see võimalus vaadata ühte veebilehte sülearvutis, nutitelefonis ja muudes vidinates.
Veebi reageerimisvõime on muutunud hädavajalikuks sellest ajast, kui inimesed said erinevas vormingus Interneti-toega vidinaid. Ettevõtted, veebipoed ja isegi lihts alt informatiivsed saidid püüavad oma publikule meeldida, kohanedes sellega igal võimalikul viisil. Tundlik disain lahendab mugavuse probleemi, seetõttu on see asendamatu tööartikkel.
Reageeriva veebidisaini omadused
Disaini mugavust iseloomustavad mitmed põhikriteeriumid.
- Suurus. Responsiivsel veebisaidi kujundusel peaks lehe kuvamisel erinevates seadmetes olema väikesed erinevused, seega peaksid piltide, teksti ja muude vaadatavate elementide suurused vastama seadmete endi suurustele. Selleks kohandavad veebiarendajad kujundust nii, et sellel oleks mitu vaateversiooni.
- Sisu kohandamine. Materjal, mis täidab saidi (pildid, videodja muud multimeediumielemendid) peavad vastama ka nõutavatele ekraani eraldusvõimetele ilma kuva kvaliteeti kaotamata.
- Disaini paindlikkus. Elementide kaasamine arendusse, mis võimaldavad teil vaadatava veebilehe muutmisel kiiresti saidi kujundust kohandada. Näiteks kerib kasutaja lehte üles ja alla, navigeerib erinevates jaotistes või muudab ekraani asendit vertikaalselt horisontaalseks ja vastupidi.
- Lihtsustage üksusi seadmete kaupa, et neid oleks parem kasutada.
- Peida väiksematel ekraanidel ebaolulised plokid.
Põhitõed
Veebilehe koostamine on kindlasti seotud programmeerimiskeeltega, sest ilma nendeta lihts alt ei saa. HTML-i ja CSS-i kasutades tunneb brauser ära objektide koostise ja järjestuse (tekstid, illustratsioonid, videod) – nii moodustub sait.
CSS vastutab värvide, stiilide, suuruste, fontide, joonduste, polsterduse, taustaelementide, vormide jms eest. HTML vastutab saidi üldise sisu ja struktuuri eest. Seega on veebiressurss ehitatud kahe kõige olulisema kirjeldamismeetodi koondmaterjalina.
CSS on seevastu asendamatu disainitööriist. Sellel on suur hulk funktsioone, mis on paremad kui HTML:
- Pakub kujunduse järjepidevust mitmel lehel, saidi välimust ja juhib HTML-dokumentide kuvamist.
- Annab teile võimaluse teha disaini ja sisu korraga.
- Rakendab mitut stiili ja võimalustvaatamine erinevates seadmetes.
- Teeb keerulisi disainiotsuseid.
- Iseloomustab suur kiirus.
Veebisaidi arendamiseks peate teadma mõnda põhimõistet.
CSS-i valijat tähistatakse stiili nimega, mis määrab omadused ja vormingusuvandid. See annab brauserile teada, millisele konkreetsele elemendile atribuudid kehtivad.
Kinnisvara on struktuuriüksus. See määratleb välised parameetrid (suurus, asukoht, värv, kuju jne) ja seda väljendatakse kindlas koodis.
Seal on hulk määratletud CSS-i atribuute, mis kirjeldavad ühte objekti välimuse ja asukoha poolest.
Need elemendid moodustavad koos järgmise skeemi:
Selector { property1: value; omadus2; väärtus }.
Paigutuse suurused ja eraldusvõimed
Disaini arendamine algab küljenduse ettevalmistamisega Photoshopis või muudes graafilistes programmides. Mugavuse huvides kantakse lõuendile moodulvõre spetsiaalsed märgised, jälgitakse spetsiaalseid taandeid. Seega näitab veebidisainer küljendajale tulevase saidi struktureerimise ja veebielementide õige paigutuse põhimõtteid.
Reageerivad veebidisaini eraldusvõimed ja suurused peamiste seadmetüüpide jaoks:
- See disain järgib põhimõtet alustada tööd mobiili loaga. Nutitelefoni paigutus on loodud suuruses 460 × 960 px.
- Tahvelarvuti paigutuse suurus on 768 × 1024.
- Sülearvuti suurus on 1280 × 802.
- Arvuti suurus on 1600 × 992.
Saidi mobiiliversioonistuleks võimalikult lihtsustada, säilitades samas kõik põhifunktsioonid. Kui küljendust koostatakse veebipoe jaoks, peaks kogu kasutusel olevate lihtsustuste juures olema põhikirjeldus, tootekataloog, tellimisvõimalus, ostukorv jne – kõik täisväärtuslikuks toimimiseks vajalikud elemendid, nagu arvutis täisformaadis vaatamise puhul. Mobiiliversiooni mugavus seisneb selles, et siin saate laadimisel aja säästmiseks vältida lisalehti.
Adaptiivses sisus saate html-koodi kasutades peita mõned elemendid, mida tegelikult vaja pole. Näiteks kõrge eraldusvõimega kuvatakse saidil tootekaart koos selle kirjelduse, hinna, tarneteabe ja võimalusega "korvi" lisada. Mobiili eraldusvõime puhul on protsess lihtsustatud foto, hinna ja ostunupuga.
Reageeriva disaini keskmine ja minimaalne eraldusvõime peaks võtma arvesse lugemise ja vaatamise lihtsust kasutaja poolt.
Paigutus
Adaptiivse kujunduspaigutuse eesmärk on luua paindlik paigutus ehk nagu on ka kombeks öelda: "kummist mall". Alumine rida ei ole ühekohalistes lehtede suurustes, vaid malli proportsionaalses tihendamises, et seda oleks lihtne kõigis seadmetes vaadata.
See on üles ehitatud peamiselt CSS-ile. Arenduse käigus määratakse ekraani mõõtmete kontrollpunktid. Seega määratakse ülejäänud objektide laius. Selleks määratakse lehe laius atribuudiga css max-width, sõltuv alt nendest kriteeriumidest valitakse teiste elementide suurus protsentides. Näiteks peamise ploki suuruslehe laius on 600 pikslit ja külgriba ploki (saidi külgriba) laius on vastav alt 400 pikslit, sisu laius on 60% ja külgriba laius 40%.
Reageerivaid paigutusi on mitut tüüpi. Igaüks neist valitakse individuaalselt, sõltuv alt funktsioonidest ja konstruktsioonist.
Vaatused:
- Paigutuse tüüp, mis võimaldab ekraani eraldusvõime vähendamisel plokkidel ümber murda. Mitme veeruga saitidel teisaldatakse täiendavad plokid ekraani allossa.
- Kui iga loa jaoks töötatakse välja eraldi muster. Seda tüüpi tundlik kujundus võtab kauem aega, kuid on kõige loetavam.
- Lihtne kujundus, mille eesmärk on skaleerida kõiki elemente. See ei ole paindlik.
- Paneelitüüp on mugav kasutada mobiilirakendustes, kui ekraani enda asendi muutmisel ilmuvad lisafunktsioonid.
Reageerivate kihtide loomine on vaid üks osa tööst. Kohanduvad pildid on eraldi juhtum, millel on oma probleemid ja nende lahendamise meetodid.
Üks pilt peab olema selgelt kuvatud erinevatel ekraanieraldusvõimetel. Siin on probleem – kuidas tagada, et pilt jääks alati samaks, sõltumata eraldusvõime muutusest. Sel juhul lihtsa CSS-koodi sisestamisest ei piisa.
Näide: img {max-width: 250px;} – siin peaksite rakendama meetodit, mille puhul on piiratud pilti sisaldava konteineri, mitte pildi enda suurus. See näeb välja umbes selline: div img {max-width: 250px;}. See meetod lahendab probleemiväikeste piltide paigutus, kuid ei sobi suurte illustratsioonide jaoks.
Seetõttu eelistavad paljud arendajad kasutada JavaScripti keeli, mis võimaldavad teil kohandada mis tahes pilti ilma serverit üle koormamata. Javascript pakub suurt hulka alternatiivseid skripte.
Reageeriva paigutuse plussid ja miinused
Positiivsed:
- Salvestage kõigi elementide asukoht. See on mugav, kui kasutaja on harjunud saidi täisversiooniga.
- Salvesta domeenid ja aadressid.
- Täielik kohandamine muude loavormingute jaoks.
Negatiivsed:
- Funktsionaalne paindlikkus on kadunud
- Iga informatiivne ülekoormus on tulvil veebiressursi pika käivitamisega, mis sunnib paljusid kasutajaid lülituma kiirematele valikutele.
Veebisaidi loomine
Saidi struktuur on jagatud mitmeks osaks ja plokiks. Traditsiooniliselt koosneb kujundus saidi ülemisest osast (päisest), logost, menüüst, sisuplokist ja saidi viimasest osast (näiteks üksikasjalikud kontaktandmed). Vaatame, kuidas luua lihtsa malli järgi responsiivne veebisaidi kujundus.
Abisildid kirjutamiseks:
- wrapper – silt, mis ühendab kõik mallielemendid;
- päis h1 – logo;
- päis – menüü ja muude oluliste elementide päis;
- sisu - plokk;
- colLeft – sisu suurus;
- colParem – külgriba (külgveerg);
- jalus – saidi viimane osa;
- meediaekraan – komplektidsoovitud eraldusvõime.
Saidi kirjutamisel võivad need elemendid liikuda olenev alt vajadusest erinevas järjekorras. Näiteks suure eraldusvõime korral võidakse menüü kuvada vertikaalselt. Mobiiliversioonis saab paigutuse üles ehitada nii, et menüü libiseb horisontaalasendis välja.
- vaateport - silt, mis võimaldab salvestada teksti suurust kujunduse väiksemas versioonis. See asub siltide. vahel
- max-width – saidi optimeerimiseks, et vältida venitamist eraldusvõimega üle 1000 piksli.
Paigutuse rakendamisel aitab jQuery teek palju, kui on vaja muuta plokkide stiili ja struktuuri.
Mis vahe on tundlikul ja mobiilsel disainil
Täieliku mõistmise huvides kaaluge mõnda illustreerivat näidet, sest nende kahe mõiste segamine ei ole haruldane.
Peate mõistma, et mobiiliversioon on alamdomeeniga peamise saidi analoog. Saidi väline esitlus kordab täielikult stiili ja funktsionaalsust, samas kui selle struktuur ja sisu võivad põhiversioonist erineda, kuna versioon on kärbitud vajalike elementideni.
Reagatiivne disain on optimaalne kõigi seadme eraldusvõimete jaoks. See on skaleeritav ja renderdab õigesti olenemata vaatamistingimustest.
Need on saidi kaks erinevat esitlust, mille ümber väsimatult raevuvad vaidlused, kumb on parem. Tuleb märkida, et kindlale otsusele pole veel jõutud. Keegi kiidab seda disaini, tuues välja moesuundi ja palju eeliseid. Mobiiliversioonil on ka mitmeid eeliseid, mida tundlikul disainil ei ole. Seetõttu peaksite alustuseks mõistma põhivajadusi.
Eelised
Kuidas on tundlik disain parem kui mobiil?
Mitmekülgsus. Meie ajal, nii meeletu turu kasvu juures, on lihts alt vaja infot teistmoodi esitada, rahuldades tarbijate soove. Tundlik disain lahendab selle probleemi.
Tõhus reklaamimine otsingumootorites. Mida ei saa seostada adaptiivse seadme peamiste eelistega. Otsingumootorid eelistavad pakkuda kasutajatele reageerivaid veebisaite.
Kasutusmugavus. Tundlik disain on tavaliselt kujundatud parimates disainilahendustes, mis on kena kingitus kasutajate visuaalsele tajumisele.
Lihtsus ja lihtsus nii projekti elluviimisel kui ka kasutamisel.
Head konversioonimäärad. Kuna adaptiivse disainiga on rohkem kuvamisvõimalusi, suureneb konversioon ise.
Majandus. See on suhteliselt odavam kui eraldi mobiiliversiooni loomine ja reklaamimine.
Mobiiliversiooni plussid ja miinused
Reageeriva mobiilidisaini loomine nõuab mitmekülgsust ja järjepidevust. Kõigepe alt on soovitatav lähteülesanne üksikasjalikult välja kirjutada, mis loomulikult aitab vältida tarbetut tööd ja säästa aega, samuti võtab arvesse selle serveri funktsioone, millel saiti majutatakse..
Mobiilitundlikul disainil on teatud eelised ja puudused.
Pussid:
- Kui teil on valmis sait, pole vaja mobiiliversiooni kujundust nullist välja töötada. Saate teha vaid mõned muudatused, mis vabastavad selle paigutuse mittevajalikest funktsioonidest.
- Igasuguste lihtsustuste tõttu peetakse mobiiliversiooni allalaadimisel kiiremaks.
- Kasutaja näeb kogu sisus kõige olulisemat teavet.
- Kiire rakendamine. Seal on pistikprogrammid, millega saate mobiiliga kohandada, isegi kui te ei tea silte ja koode.
- Otsingumootori valikud eelistavad adaptiivseid versioone, kuna nende analüüsimine võtab vähem aega.
Miinused:
- Kõik mobiiliversioonid ei pruugi ühtida mobiilseadmete eraldusvõimega. Sait muidugi avaneb, kuid ekraani eraldusvõime ei vasta alati paigutusele. Mõnikord võib hästi kujundatud nutitelefoni disain tahvelarvutina avades teistsugune välja näha.
- Mobiiliversioonid nõuavad eraldi tasulisi domeene.
- Sisu postitamisega on mõned väikesed probleemid. Kui korraga on mitu versiooni, tuleks sisu kohendada kõikide vormingute jaoks korraga. Varguseks võib pidada uue materjali esitamist põhisaidil ja selle kopeerimist mobiiliversioonile. Selle probleemi vältimiseks peate võib-olla tõestama ressursside seotust.
Rakendusmeetodid
Peamised rakendusmeetodid:
- Pärast paigutuste ja paigutuse kujunduse loomist laaditakse see vajalike mõõtmeteni, kasutadesoperaatori sait ja põhikood. See on klassikaline meetod, mida kasutatakse keskmiste ja väikeste versioonide (tahvelarvutid, nutitelefonid jne) loomisel.
- BootStrap on lihtne ja selge kohandamistööriistade komplekt. Sobib versioonide loomiseks sihtlehele ja muudele mitte väga keerukatele veebiprojektidele. See annab hea võimaluse rakendada liidese funktsioonides palju erinevaid stiile.
- Responsive Grid System on populaarne mitmekülgsete tööriistade komplekt. Lihtne rakendada ja ei nõua sügavaid teadmisi. Sisaldab laia valikut infograafikat.
- GUMBY – paindliku reageerimisvõime ja suurepäraste tööriistadega CSS-i raamistik.
- Küpsised – võimaldab rakendada reageerivaid pilte. Lisatakse automaatselt brauseri nõutud failidele.
- ExpressionEngine on veel üks viis tundlike piltide loomiseks. Määrab, kas seade on mobiilne ja suudab muuta pilte vajaliku eraldusvõimega.
- ProtoFluid – pakub kiiret prototüüpimist. Sobib igasugustele seadmetele.
