Kuidas teha responsiivset veebisaiti? Siit saad infot selle adaptiivse tehnika kohta, mis põhineb tänapäeva veebimudelitel, mis tähendab, et ühe kujunduse all pääseb veebiportaali korrektselt igast arvutist või elektroonilisest seadmest juurde ja seda saab vaadata.
¿Kuidas teha reageerivat veebisaiti?
Veebisaidi muutmine võimalike kohanduste suhtes tundlikuks või tundlikuks on väga mugav. Lisaks mis tahes elektrooniliselt platvormilt Internetis korrektse töötamise edu tagamisele. Järgmistes ridades selgitatakse välja responsiivse veebi tegemise viis, mis tuleneb veebilehtede kohanemisvõime olemusest. Seetõttu saab responsiivse mudeli all veebilehte kujundades kohandada ja näha selle veebi välimust või pilti sõltuvalt navigeerimiseks kasutatavast elektroonilisest seadmest.
Keegi ei tea praegu Internetis navigeerimiseks kasutatavate seadmete või elektroonikaseadmete, näiteks arvutite, tahvelarvutite, nutitelefonide, sülearvutite jne mitmekülgsest hulgast. Interneti algusaegadel harjusid veebisaitide arendajad looma ühise pikslilaiusega lehti. Näiteks 90ndatel oli olemasolevatel monitoridel üks ekraan 14 tolli ja fikseeritud laius 640 pikslit. Veebilehtede kujundajad sobitasid oma kujundused ainsate monitoride standardmõõtmetega.
2000. aasta alguse lähedal ja kuni 2010. aastate saabumiseni varieerusid monitoride mudelid ja pikslite laiused. Veebikujundust kohandati vastavalt igale variandile. Alates 2010. aastast toimus suur tehnoloogiline revolutsioon, mis põhjustas veebilehe kujundamise stsenaariumi tasakaalustamatuse. Interneti valdkonnas võeti kasutusele mobiilside kaudu navigeerimine. See uus telefoniteenus kasutas brausereid nagu arvuti. Selle suure tehnoloogilise revolutsiooniga on kätte jõudnud aeg liikuda edasi nn tundliku kujunduse või veebilehtede adaptiivse disainina.
Responsiivse veebi loomise teadmise tähtsus
On väga oluline, et veebilehtede arendajad teaksid, kuidas responsiivset veebi luua; et isegi internetis suure prestiižiga firma Google märgib seda kui midagi ülimalt vajalikku. Kuna responsiivse mudeli järgi kujundatud veebileht võimaldab navigeerimist optimeerida, väldib sisu dubleerimist ja tagab erakordselt stabiilse pildikvaliteedi. Teised aspektid, mis on responsiivse veebisaidi loomisel olulised, on järgmised:
- Hüperteksti märgistuskeele (HTML) ja CSS-keele ühe kohandamisega on võimalik saavutada mis tahes ekraani eraldusvõime katmine. Nii väldite igat tüüpi seadme jaoks veebilehe loomist, mis võimaldab teil seda külastada või sirvida. See aspekt vähendab ka projekteerimise aega.
- See kohandub sirvimisel automaatselt, muutes lugemise ja suhtlemise võimalikuks igal konkreetsel külastusel.
- Nad suudavad end otsingumootorites paremini ja kiiremini positsioneerida. Kuna seda tüüpi kujundus väldib dubleerimist ja ümbersuunamisi.
- Selle kujundusega loodud veebilehed võimaldavad nende sisul kiiremini levida tänu nende originaalsele ja lihtsale jagamisviisile.
Mis on tundlik veebidisain
Responsiivne veebidisain, tuntud ka kui adaptiivne veebidisain, on viis veebilehtede kujundamiseks või arendamiseks. Selle süsteemi eripära on see, et see võimaldab ühe kujundusega loodud veebisaiti külastada või sellele juurde pääseda mis tahes arvutist või elektroonilisest platvormist. Nimi responsive on ingliskeelne termin, mis viitab millelegi, mis on reageeriv, kohanemisvõimeline, tajutav, nähtav jne.
See tehnika sai selle nime, kuna seda tüüpi veebisait suudab kohaneda iga ekraanilaiuse mõõtmisega. Selle kuvamise ja korrektse toimimise võimaldamine, tegemata vahet navigeerimiseks kasutataval seadmel.
See on võimalik tänu piltide ja sisu korraldusele, samuti tundliku veebimenüü lihtsusele. Neli peamist määrajat, mis määratlevad ja muudavad seda tüüpi veebilehtede kujunduse väga populaarseks, on järgmised:
- Lihtne
- Säästlik
- Kiire
- Ja ennekõike on need täiesti töökorras
Kuidas teha tundliku disainiga veebi ja selle keerukus
Võib öelda, et veebilehtede kujundamise ja arendamise keerukus tekkis 2010. aastatest, kui internetimaastikule hakkasid ilmuma navigatsiooniga mobiiltelefonid. Mis kasutas muu hulgas brausereid, nagu Google, Firefox, Explorer, nagu arvuti. Sel viisil avanevad uued võimalused erinevate veebisaitide külastamiseks. Sel ajal hakkasid ilmuma ka esimesed internetiühendusega elektroonilised tahvelarvutid.
Sealt edasi muutusid veebilehtede kujundamise vajadused keerukamaks. Veebisaitide kuvamiseks ja toimimiseks kasutatavate ekraanisuuruste suure valiku tõttu. Te pidite leidma disaini tüübi, mis töötaks igat tüüpi seadme jaoks, ja kohandama seda automaatselt.
Te ei saanud enam kujundada ühe, kahe või kolme suurema ekraani eraldusvõime jaoks. Tuli aru saada, et seadmete eraldusvõimed on järjest varieeruvamad, lisaks arvutimonitorist tunduvalt väiksemad.
See hetk tähistas veebidisaini jäikuse lõppu. Ja mitte ainult paljudele seadmetele, vaid ka igal neist on spetsiifilised omadused, näiteks:
- Ekraani suurus
- Ekraani lahutusvõime
- CPU võimsus
- Sistema operativo
- Muu hulgas mälumaht.
Seejärel tutvustatakse uut veebidisaini mudelit, mille eesmärk on, et ühe kujundusega oleks selle korrektne visualiseerimine võimalik sõltumata sirvimisseadmest. Seda tüüpi veebisaitide arendamine on aga oma keerukusastmega.
Mis on tundliku veebi arendamise keerukuse põhjus?
Veebisaidi arendamine kohanemisvõimega, mida nimetatakse reageerivaks, on isegi tänapäeval keeruline. Kahe peamise põhjuse tõttu, mis on toodud allpool:
1-Tegemist on tehnoloogiaga, mida pole pikka aega arendatud ja paljude rakendusviiside tõttu ei ole olnud võimalik kindlaks teha, milline võiks olla kõigist valikutest parim. Seda tüüpi veebidisaini osas tuleb alati esile uuendusi, mida tuleb igal hetkel edasi arendada. Seetõttu on raske määrata parimat raamistikku või tugitehnoloogiat ega ka üldist reeglit, mis tagab lahenduse võimalikult paljudele takistustele. Seda tüüpi veebisaitide arendamise lihtsustamiseks.
2- Teine põhjus on see, et adaptiivne projekteerimissüsteem ei põhine ainult tehnoloogilisel vaatenurgal. See, kuidas sait erineb olenevalt ekraanidest või seadmetest. Pigem peab see olema kavandatud ideega, kuidas see igas võimalikus navigeerimisstsenaariumis töötab. See põhjus muudab tundliku veebidisaini mudeli keerukamaks, mille saavad saidi arendajatena töötavad inimesed puhastada.
Adaptiivse või tundliku veebikujundusega töötamiseks vajalike oskuste treenimine ja omandamine nõuab rohkem aega kui mis tahes muud tüüpi veebidisaini puhul. Kuid loodetakse, et andmetöötluse arenguga väheneb keerukuse aste. Selleks, et selles osas edasi areneda, on selliste tundlike kujundustega seotud veebisaite tundvate töötajate hulgast professionaalsed töötajad, näiteks:
- Paigutused
- Disainerid
- Programmeerijad
- Kommerts- ja digitaalturunduse töötajad
Vähendage projekteerimisaega
Kui kaks eelmist põhjust lahenevad, siis võib-olla vähendab see tundliku veebi arendamise või loomise perioodi. Samas on võimalik see tavaliste veebilehtede kasutamiseks kättesaadavaks teha.
Samal ajal kui praegu on, võib mobiilseadmete jaoks nullist uue veebikujunduse väljatöötamine olla kiirem. veebi muutmiseks või ümberkujundamiseks, et muuta see kohandatavaks või tundlikuks. Alati jääb lootus, et kunagi keegi leiab viisi, kuidas seda teha ja selle saavutada, loodame sellele.
Vahepeal, mida saab teha?
Asjaolu, et terve veebis leiduva saidi ümberkujundamine, et muuta see kohandatavaks, on endiselt väga keeruline. See ei tähenda, et me lõpetaksime saidil väikeste muudatuste tegemise. Selle täiustamiseks ja kohandamiseks nii erinevatel brauseritel kui ka erinevatel elektroonilistel seadmetel.
Esimene asi, mida teha, on kontrollida, millist tüüpi veebikujundus navigeerimissaidil on. Kontrollige peamiselt:
- Veebilehe paigutus
- Milline on selle struktuur HTML-i ja CSS-i osas?
Neid kahte põhipunkti analüüsides võib tõdeda, et veebilehe täiustamiseks saab teha väikseid muudatusi.
Varasemad kaalutlused, mida tuleb arvestada, et teada saada, kuidas tundliku veebi luua
Kui teil on juba veebiportaal, maandumisleht või sisublogi, mis on välja töötatud tavapärase kujundusega ja soovite muuta selle responsive või kohanemisvõimega disainiga veebisaidiks. See on lihtsalt otsuse tegemine ja esimese sammu tegemine selle saavutamiseks, otsuse tegemine seda teha!
Veebisaidi muutmine tavapärasest disainist responsiivseks ei tähenda, et kogu algne töö kaob. Kuna kogu sisu ei visata ära, kuid see teeb selles väikesed ja väikesed muudatused. Sisu, näiteks pilte, tekste ja mõnda muud olemasoleva saidi elementi, saab kasutada ja see töötab koos teisendusega õigesti.
Siiski on koha kohandamise ja täiustamise alternatiiviga silmitsi seistes mugav teada mõningaid eelnevaid kaalutlusi, mis soosivad tehtavat tööd.
Kontrollige olemasolevat veebiliikumist
Enne olemasolevas veebis muudatuste tegemist on soovitatav kontrollida selle liiklust. See tähendab veebisaiti külastavate inimeste arvu statistikat. Selle teabe põhjal töötame kujunduse muutmise kallal, et saavutada suurem edu ja parem otsingupositsioon. Veebi ümberkujundamisel ja kohandamisel on mugav teada SEO tööriistad, sest need on parimad, kui on vaja võrgus paremat positsioneerimist.
Hea inspiratsioon on vajalik
Soovitav on ka pilk peale visata ja teha a konkurentide analüüs või leheküljed, mille sisu sarnaneb veebisaidiga, millele rakendatakse muudatusi tundliku veebikujunduse suunas. See eelvaade on mõeldud võimalike sisutäiustuste uurimiseks. Aga ka seda, kuidas need sarnased lehed erinevates seadmetes töötavad. Aspektid, mida tuleb arvesse võtta saitide valikul, mis võivad olla inspiratsiooniks või eeskujuks täiustustes. Need hõlbustavad nendel ja vähem suumimist või kerimist vajavatel lehtedel navigeerimist. Siit leiate parimad nipid Parandage SEO-d hea sisu saavutamiseks Rakenda neid!
Semantilise HTML-i eelised
Semantilise HTML-i kasutamine näitab, et algse veebisaidi paigutus loodi õigesti. See soosib või on suureks abiks, sest kasutati ainult olulisi HTML-i elemente. Pidades silmas veebi arendamisel iga sama veebikujunduse kohal oleva sildi semantikat. Disainitöö jätmine CSS-ile vastavalt klassidele ja ID-dele.
Responsiivse veebisaidi loomise protsessis on järgmised elemendid:
- DIV
- P
- UL
- LI muu hulgas
Kui aga on vaja järgida kogu mudeli disainist loobumise sammu. Kuna te ei saa kasutada pealetükkivat CSS-i, st ärge kasutage koodis ühtegi stiiliatribuuti. Kuna HTML on rafineeritum ja vähema DIV-ga, aitab see kohandamiste läbiviimist lihtsamaks muuta või veebi tundlikumaks muuta. Kuna CSS-i täiustatakse saadud tulemuses.
Reageeriva veebisaidi loomisel määrake suum õigesti
Veebisaitide täieliku kuvamise saavutamiseks on soovitatav mobiilibrauserites suumi õigesti valida. Mobiilseadmete brauserid olid olemas juba enne tundliku veebidisaini väljatöötamist. Nendes seadmetes veebisaitide täielikuks vaatamiseks peavad brauserid kasutama suumitööriistu. Nii et traditsioonilise disainiga veebisaidile pääsemisel mobiilseadmest. Mobiili loomulikku eraldusvõimet ei näe, kuid kuvatakse suumitööriistaga tehtud kohandust, kuni selle laius on 960 pikslit.
Kuna muud võimalust seda teha polnud, lõid arendajad HTML-i, mis viis suumi muutmise või reguleerimise läbi. Nii tulebki seadmete eraldusvõime kohandamisel meeskonnale käskida kasutada teist tüüpi skaleerimist. Sobiv tüüp kasutamiseks on vaateavana tuntud metasilt, mis sisestatakse veebisaidi päisesse. Selle metasildiga saate üksikasjalikult kirjeldada protseduuri, mida brauser teisendatud veebis käivitab. Vaadake järgmist süntaksit, kirjutatud sõna-sõnalt:
Seda vaateava metasildi sümboolset paigutust kasutatakse kõige sagedamini tundlikus veebikujunduses. Siiski on palju muid konfiguratsioone, mida saab sel eesmärgil kasutada. Ainult et esitatud süntaks sisaldab kahte muutujat, mis panevad mobiilibrauseri kohanema veebiga, mitte vastupidi. Need muutujad on:
Seadme laius või seadme laius
Muutuja width=device-width sisaldub konfiguratsioonis nii, et ekraani laius pikslites ühtib mobiilseadme laiusega. Nii kuvatakse mobiili enda eraldusvõime.
Parima võimaliku kasutuse tagamiseks kuvavad mobiilibrauserid lehte sarnaselt töölauaekraani laiusele. See laius võib olenevalt mobiilseadmest erineda. Kuid sageli on see tavaliselt üks umbes 980 pikslist. Seejärel püüab see optimeerida sisu välimust, suurendades fondi suurust ja muutes sisu skaalat nii, et see sobiks seadme ekraaniga.
See võib põhjustada kasutajatele, et see on mõnevõrra ebajärjekindel või segane ja seejärel peavad nad sisuga suhtlemiseks sisse suumimiseks topeltpuudutama. Vaateava metasildi muutuja: width=device-width kasutamine nõuab laiuse reguleerimiseks toimingut paigutuses. Nii, et leht saab sisu ümber kohandada nii, et see sobiks erinevate ekraanimõõtmetega, olgu see siis väikeses mobiiltelefonis või arvutimonitoril.
Algskaala või esialgne skaala
Muutuja esialgne skaala= sisaldub konfiguratsioonis, et määrata sõltuvalt seadmest relatsiooniskaala CSS-pikslite ja mobiilipikslite vahel. Ülaltoodud konfiguratsioonis on see näidatud algskaala jaoks: esialgne skaala = 1.0. Siin näitab süntaks, et pikslite suhe on 1:1, CSS-pikslit loetakse seadme piksliks. Seejärel antakse mobiilibrauserile korraldus see suumi väärtus kasutusele võtta ja seade kasutab seda väärtust. Vaatame siiski kahte järgmist võimalust:
- Kui algskaala muutuja on võrdne 1.0, viitab see ilma suumita kuvale, kuna see on üks ühele.
- Kui esialgne skaala = 2.0, viitab muutuja suumile, mis on kogu leheküljel kaks korda suurem.
Seetõttu oleks esimene sobiv võimalus kasutada veebilehel, mis sobib mobiili laiusele. See käsib seadmel suumi mitte rakendada. Kuid võib juhtuda ka juhtumeid, kus parim valik on seda muutujat mitte kaasata ega rakendada. Jättes nii, et seesama mobiil on see, kes kohandab suumi omaette, laiusele, mis on kujunduses märgitud.
Vaateava põhikonfiguratsioonid – rakendusnäited:
Olenemata sellest, kas teie laius on 500 pikslit ja antakse algskaala käsk, võtab veeb välja 500 piksli laiuse ekraani välimuse. Mobiilis kuvatakse selle algset konfiguratsiooni aga ligikaudse võrdväärse suhtega 320 pikslit veebi 500 piksli koguarvust.
Kui nüüd aga esialgset skaalat ei anta, kuvatakse kohandatud suumi all kogu veeb, see tähendab 500 pikslit. Vaateava märgendi kahe tüüpilise konfiguratsiooni süntaks oleks tekstiliselt järgmine:
Eelmine konfiguratsioon oleks mõeldud veebisaidi jaoks, mille responsiivne disain on õigesti kohandatud mobiili eraldusvõimega. Veebisaidi puhul, mis pole mobiili eraldusvõimega täielikult kohandatud, oleks konfiguratsioon järgmine:
Lisaks tüüpilistele konfiguratsioonidele on ka teisi konfiguratsioone. Üks neist on mobiili laiuse veebilehe kujundamine, kasutades suumi. Kuid seda tüüpi kujundus oleks kasutaja jaoks väga kummaline ja segadusse ajav.
Kuidas luua tundlik veebisait – meediapäringud
Kui soovite teada, kuidas luua reageerivat veebisaiti või kohandatavat lehte, peaksite teadma, et peate rakendama süsteemi, mida nimetatakse meediapäringuteks. See tehnika võimaldab teil sõltuvalt ekraani eraldusvõimest määrata tingimuse abil erinevaid kujundeid või stiile. Aga mis on meediapäringud?
Meediapäringud
Meediumipäringud on tehnika, mis koosneb CSS-lausete loomisest. Millega saate teha veebikujundusele kohaldatavaid avaldusi, kui on täidetud teatud juba antud või kehtestatud tingimused. Neid meediumipäringu avaldusi saab põhimõtteliselt rakendada kahes veebipunktis:
- Esiteks, CSS-faili kutses, täpsustades igas failis, millised on selle laadimise tingimused. Näide:
- Teiseks, samas CSS-failis eraldi ruumi loomine, kus kasutatakse kasutatavaid CSS-i murde. Näide:
@meediaekraan ja (min-width:320px) ja (max-width:480px){
/*Selle laiusevahemiku stiilideklaratsioonid */
Tegelikkuses on meediumipäringud võimas tööriist, mis võimaldab tundlikust veebidisainist lahkuda, et lahendada veebis muid erinevaid probleeme. Tasub hiljem dokumenteerida, natuke rohkem selle meediapäringute tehnika kohta.
Vahepeal piisab, kui on teada kaks punkti meediumipäringusüsteemi kohta:
- Meediumipäringute deklaratsioonide tegemise viis CSS-failis
- Kuidas värskendada vanamoodsatele Interneti-brauseritele meediapäringute tehnikat
Meediapäringu deklaratsioon
Eelmistes lõikudes oli võimalik jälgida kahte meediapäringute täitmise viisi. Esiteks välisel stiililehel ja teine viis otse stiililehele kirjutamiseks.
Responsiivse veebidisaini tegemise kontekstis tuleks mõista, et meediapäring on CSS-i deklaratsioon, mida kasutatakse indikaatorina, et olla teadlik, millal tuleks mobiili mõõtude või väärtuste põhjal teha mõni muu stiilideklaratsioon. või mõni muu seade, kus veebi kuvatakse.
Näide: meediumipäringuga määratletud tingimuse sees oleva CSS-i murdu deklareerimise meetodil on järgmine süntaksikonfiguratsioon:
@meediaekraan ja ([CONDITION]) {
/* Meie uued reeglid sellise või väiksema ekraanilaiusega */
}
Samuti saab olenevalt ekraani laiusest genereerida kolme tüüpi meediumipäringu avaldusi. Nii saate igal konkreetsel juhul oma taotluses kindel olla
-Esimest deklaratsiooni tuleb rakendada ainult nende eraldusvõimete puhul, mis on väiksemad kui pikslite laius = X:
@meediumiekraan ja (max-width:[WIDTH]px) {
/* Meie uued reeglid sellise või väiksema ekraanilaiusega */
}
-Teist deklaratsiooni tuleb rakendada ainult nende eraldusvõimete puhul, mis on suuremad kui pikslite laius = X:
@meediumiekraan ja (min-width:[WIDTH]px) {
/* Meie uued reeglid sellise või suurema ekraanilaiusega */
}
-Kolmandat deklaratsiooni tuleb rakendada nende eraldusvõimete puhul, mille laius on pikslite vahemikus, mis on määratletud X ja Y vahel:
@meediumiekraan ja (min-width:[WIDTH X]px) ja (max-width:[WIDTH Y]px) {
/* Meie uued reeglid sellise või suurema ekraanilaiusega */
}
Milline neist kolmest?
Otsus tehakse arendaja maitse järgi. Siiski on tavaline, et rakendatakse esimest ülaltoodud meediumipäringu lauset. Ainult et seda on soovitatav rakendada kumulatiivselt. Nii, et iga kord, kui laiust vähendatakse, muudetakse disaini elemente.
Muutke meediapäringud Internet Exploreriga ühilduvaks
Internet Explorer oli üks esimesi veebibrausereid. Seetõttu on väga võimalik, et see brauser ei toeta või ühildub paljude Interneti-kasutajate poolt sageli kasutatavate süsteemide, parameetrite või tehnikatega. Kuid veebiarenduses on palju tehnilisi töötajaid, kes on täielikult kaasatud uuenduste otsimisse. Mis on loonud hulga teeke, et võimaldada ja muuta need vanad brauserid ühilduvaks.
Et muuta Internet Exploreri ühilduvad versioonid alla üheksa (9). See rakendab lihtsalt järgmist JavaScripti teeki: css3-mediaqueries-js.
Kui asetate veebisaidi päisesse järgmise skripti, saate meediumipäringutega töötada ilma ebamugavusteta.
Saadud tulemus ei pruugi olla kõige täiuslikum, kuid üldiselt võimaldab see head ühilduvust.
Reageeriva veebisaidi loomine – põhilised kujundused
Veebisaidi kohandamiseks ja muutmiseks võib olla erinevaid viise, kuid tundlikul veebisaidil on praegu kolm kujunduse alust või vormi. Varem näidati arendajate eelvaateid koos mõne uue detailiga, mida nendes kujundustes rakendada. See tuleneb harjumusest arendada veebisaite, mida iseloomustatakse kui jäigad või fikseeritud. Liikuge tundlikele veebisaitidele, muutes seda jäikuse omadust.
Tänapäeval võite leida lõputult elektroonilisi seadmeid, millega saate veebi sirvida. Ja aja möödudes see summa suureneb. Veebisaitide arendajad nõuavad, et need veebisaidid saaksid selle paljude seadmetega õigesti kohaneda.
Põhilised kujundused töö lihtsustamiseks
Üks viis reageeriva disaini ülesande lihtsustamiseks on jagada või liigitada need kolme põhirühma, et teada saada, kuidas nendega toime tulla. Need kolm suurt kvalifikatsioonigruppi on:
- Suured ekraanid: kus veebilehel on piisavalt ruumi ja isegi rohkem, et seda oleks võimalik täiesti ilma ebamugavusteta vaadata.
- Vanad või väikesed ekraanid: kus veeb ei leia oma täielikuks visualiseerimiseks piisavat laiust, st ei mahu ekraani kaadrisse. See näitab isegi ebamugavat alumist riba, ilma igasuguse kasutuseta, mis võimaldab teil sisu veelgi vähem näha.
- Mobiilseadmete ekraanid: Veeb leiab nendel seadmetel nii väikese ruumi, et ainult üldise kujundusega on võimalik lugeda selle sisu infot.
Nii et kui soovite muuta veebisaidi algse kujunduse ja kujunduse uuendatud kujunduseks, mida saab kasutada ja mis on elujõuline. Vaja on lahendada need kolm põhirühma. Lahenduse leidmise raskusaste sõltub üldiselt sellest, kuidas mudel on sõnastatud. Kuid üldiselt saab tänapäeva tehnoloogiaga veebis mõningaid muudatusi saavutada.
Kuidas luua tundliku veebi suurte ekraanide jaoks – lahendus
Sellel baaspunktil ei kujuta see tavaliselt endast suuri raskusi. Kuna veeb on loodud nendes suurtes ekraanivormingutes vaatamiseks. Praegune standard on see, et veebisaidid põhinevad kesksel raamil, mille ekraanilaius on 960 pikslites. Nii, et kui see laaditakse kohandatud suumiga mobiiltelefonidesse, mahub see enamiku neist õigesti. Kuid vanemate veebisaitide puhul oli see pikslilaiune keskraam tõenäoliselt mõeldud 1024 piksli laiusega ekraanidele. Kõigil juhtudel on selle põhirühma jaoks mõistlik kasutada konteinereid, nagu on näidatud järgmise süntaksiga:
#main { laius:960px; marginaal: 0 auto; }
See konfiguratsioon toetab "peamise" konteineri seadistamist, mis võimaldab sellel olla veebikeskne. Koos selle konteineriga saab lisada erinevaid taustu, et rikastada veebi välisilmet. Selle disaini veidi arendades, et võimalikult palju vältida must-valget lehte.
Ühesõnaga, sellel suurte ekraanide tasemel ei tehta veebi muutmiseks palju. Kuigi võimalik, et leidub veebikasutajaid, kes soovivad seda vaadata suure ekraaniga telerist ja ka väikeselt vaatamiskauguselt.
Need juhtumid nõuavad suuri muudatusi nagu mobiili baasrühmas. Kuid kuna tavaliselt pole palju neid, kes telerit navigeerimiseks kasutavad, ei investeeri arendajad tavaliselt nendesse kohandustesse palju aega. Kui soovite siiski seda tüüpi kohandustega töötada, on soovitatav kehtestada mobiiligrupis kehtivatele reeglitele sarnased eeskirjad, mis on näidatud allpool.
Kuidas luua tundliku veebi väikeste ekraanide jaoks – lahendus
Sellest põhilisest disainirühmast algab kohandatava veebi ümberkujundamise keerukus. Stsenaarium on järgmine leht, mis on loodud teatud ekraanilaiusega töötamiseks. Et tegelikult külastavad paljud inimesed seda just sellele laiusele kohandatud arvutitest. Kuid arvestada tuleb ka suure protsendiga inimestest, kellel on veebi külastamiseks mõeldud seadmetest madalama eraldusvõimega seadmed.
Selles klassifikatsioonirühmas tuleb mobiilseadmetest eraldada seadmed, mille ekraani eraldusvõime on väiksem kui disain. Noh, neid juhtumeid analüüsitakse kolmandas disainijuhtumis. Seetõttu on vaja alustada selgest definitsioonist punkti kohta, kus väikese ekraaniga seade lõpeb ja kus mobiilseade algab.
Väikeste ekraanide puhul tuleb samamoodi algse veebisaidi eraldusvõimet vähendada, et seda nende seadmetega kohandada. Ainult, et üle minemata peab olema selge, kui suures ulatuses seda vähendamist teostatakse. Nii et suur hulk elemente ei oleks väikestele ekraanidele koondunud, vähendades veebi välimust.
Piiride seadmiseks vajalik teave
Allpool jagatakse teavet mobiilseadmetest. Mis on väga oluline, kui on vaja kehtestada piirid, millal see lakkab olemast väike ekraan, muutudes mobiilseadmeks. See teeb otsuse tegemise lihtsamaks.
mobiilne andmeside:
- Mobiilid, mida kasutatakse vertikaalselt, mis on kõige sagedamini kasutatav vorm. Tavaliselt võtab see vastu 320 piksli laiuse eraldusvõime.
- Horisontaalses asendis on mobiili eraldusvõime kohandatud seadme ekraani tegelikule suurusele. Selle eraldusvõime on üldiselt vahemikus 400–600 pikslit.
- Teisest küljest sõltub eraldusvõime tahvelarvutites seadmest. Üldiselt on enim müüdud mudelite statistikat arvesse võttes eraldusvõime umbes 600 pikslit lai. Võime jõuda isegi 1024 piksli laiuseni.
Ekraani laiuse piirangud
Suurim standardlaiuse piirang, mida selles klassifikatsioonis responsiivses veebidisainis kasutatakse, on ülaltoodud teabe kohaselt kuni 400 pikslit. Sellest laiuse mõõtmisest peab algama drastiline muutus veebi visualiseerimises, samuti toimuvad teatud muutused selle põhitöös.
Veelgi enam, mõned arendajad määravad selle piirangu laiusele 600 pikslit. Sellest eraldusvõimest loomine, vahepealsed kohandused väikeste ekraanide ja mobiilseadmete vahel.
Alumisel piirangul on seatud ekraani minimaalne laius kuni 320 pikslit. Igal juhul on veebiarendaja ülesanne kehtestada nendest piirangutest suurem vahemik. Kuid ei ole soovitatav püüda katta kõiki väikese ekraaniga seadmeid.
Peamised navigeerimisstiilid väikese ekraani lahenduses
Väikese ekraaniga adaptiivse lahenduse puhul võib piisata vähemalt nende kolme peamise navigeerimisstiili jäädvustusest. Mis on loetletud allpool:
- Vertikaalselt kasutatavad mobiilseadmed: Sel juhul võimaldab seadme ekraan ainult väga lihtsustatud lugemist ja navigeerimist, mis on kehtestatud eraldusvõime vahemikus 320–400 pikslit.
- Horisontaalselt kasutatavad mobiilseadmed ja tahvelarvutid: Sel juhul on juba võimalik saavutada traditsiooniline horisontaalne kuva. Siiski tuleb meeles pidada, et navigeerimine toimub puudutusega, mitte klõpsamisega. Selle järgi tuleks vältida toiminguid: onMouseOver 400, 600 või 800 piksliga.
- lauaseadmed: Sel juhul töötab tavaline veebikujundus probleemideta ekraanilaiusega üle 800 piksli.
Kõike ülaltoodut võttes tähendab väikeste ekraanide all mitmesuguseid personaalarvuteid, horisontaalpaigutusega mobiilseadmeid ja tahvelarvuteid. See mitmekesisus katab selle rühma pehme keerukusega, et kohandada veebi tundlikule kujundusele. Sel juhul on sellel suur tähtsus tööde lihtsustamisel, plokkide kaupa teostatavatel paigutustöödel. Kolme tüüpi seadmete ühendamiseks üheks toiminguks.
Kui on selgelt määratletud, millisest laiusest mobiiliekraaniga arvestatakse. Selgitatakse kuvatavat vahekuva vormingut. Selleks, et muuta praeguse paigutuse plokke nii, et need muudaksid suurust vastavalt ekraanile ja saaksid nii töötada kui ka õigesti kuvada.
Globaalse laiusega konteinerid
Veebisaidil olevad globaalsed konteinerid täidavad üldiste laiuste osutamise või näitamise funktsiooni. See tähendab, et nende elementidega saate veebisaidi tsentreerida ja määrata selle konkreetse laiuse. Need annavad konfiguratsioonile teatud paindlikkust, muutes fikseeritud laiuse maksimaalsele või kaane laiusele. Kehtestatakse veebiraamistiku algdeklaratsioonis, muutudes alates laius a max laiuse. Samamoodi määratakse minimaalne laius vastavalt eelnevalt kehtestatud vahemikele minimaalse laiuse deklaratsiooniga. Seega on võimalik juhtida nende seadmete laiust, mille kohta arvati, et need ei kuulu kontrolli alla. Võttes arvesse ülaltoodud ekraani laiuse piiranguid; Deklaratsiooni süntaks oleks järgmine:
#main {max-width:960px; min-laius: 320 pikslit; margin:0 auto;}
Suurte ekraanide puhul on lahendus sama. Veelgi enam, kui võrgu suurus samal ajal järk-järgult väheneb, vähendab keskraam seda laiuse osas.
Praktiline näide
Allpool on praktiline näide laiuse raami teisenduse sätete kohta. Selles näites on veebisait, mille laius on 1080 pikslit, mida rakendatakse päise, põhisisu ja jaluse elementidele. Esimene asi, mida teha, on märkida see laius erinevates globaalsetes konteineriplokkides mitte fikseeritud laiuseks, vaid lehe maksimaalseks laiuseks. Mis puutub lausetesse, siis need sõltuvad seda tüüpi plokkide arvust, mida kavatsetakse kasutada. Vaatame siis järgmist süntaksit:
#header #top {positsioon:suhteline; maksimaalne laius: 1074 pikslit; min-laius: 320 pikslit; kõrgus: 115 pikslit; marginaal: 0 auto; […]}
[...]
#header ul.menu {positsioon:suhteline; maksimaalne laius: 1008 pikslit; min-laius: 320 pikslit; kõrgus: 95 pikslit; […]}
[...]
#aux-main{positsioon:suhteline; maksimaalne laius: 1008 pikslit; min-laius: 320 pikslit; marginaal: 0 auto; […]}
[...]
#footer ul {max-width:768px; min-laius: 320 pikslit; veeris: 10px automaatne;}
Sisemised konteinerid
Siit edasi uurime veidi lähemalt, kuidas muuta responsiivne veebisait seda ümber kujundades. Peaaegu kindel on, et teisendatav leht koosneb kujundusest või küljendusest, mis on jagatud erinevateks elementideks, näiteks võivad need olla:
- Sajaprotsendiline laius päis
- Sisu, mis hõivab olulise osa laiusest
- Külje osas üks või mitu külgriba või külgmist riba
- Hõlmab sada protsenti laiusest, jalus
Nii et teil on mitu konteinerit, millel võib olla fikseeritud laius, mis määravad lehel veerud. Need mahutid võivad olla muudetud kolonnideks, kasutades erinevaid tehnikaid, näiteks:
- Ujub suurimas koguses
- Ekraan: mõnel juhul tekstisisene
- Display:box teistes neist
Järgmise sammuna tuleb need elemendid muuta mitte nii täpseteks väideteks. Nii et ülemkonteiner ei kalibreeriks täpselt algset väidet, millele osutati. Või mis on sama, peate muutma pikslitelt protsendiväärtustele kõigis nendes elementides, mis viitavad veebisaidi laiuses olevale tühikule, näiteks järgmised:
- laiused
- max-laiused
- Marginaalid ja
- Polsterdused
Varem tehtud paigutustöödega muutub see samm väga lihtsaks. Kuna see on ainult jagamine, siis on võimalik määrata, mis vastab konteineri elemendi pikslite mõõtmisele protsentides. Seetõttu arvutatakse protsent järgmise matemaatilise võrrandi abil:
[Sisemise elemendi laiuse pikslit] / [Praemelemendi laiuse pikslit] * 100
See on hea meetod veebiarendajatele, et harjuda protsentuaalselt mõõtudega veebimudeli kallal töötama, sest see samm oleks juba lahendatud.
Protsentide arvutamine
Järgmine samm on protsentide arvutamine. Selles osas võib veergude osas esitada midagi tüütut. Kuna eelmine veerg oli üles ehitatud ujukielementidega ja raami kokkutõmbamisel liigub külgriba sisu alla. Siiski rakendatakse ülalmainitud võrrandit. Ja sel viisil tehakse globaalse konteineri DIV iga elemendi protsendiarvutused. Mille laius, nagu eespool mainitud, oli 1080 pikslit. Teisendades need mõõtmised protsendiväärtusteks, saame järgmise süntaksi:
#main #content { float:left; laius:63.9880952%; veeris: 30 pikslit 0 0 1.98412698%; }
[...]
#main #sidebar { float:left; veeris: 20 pikslit 0 0 3.47222222%; laius:28.7698413%; }
Nagu näha, on nii laiused kui ka horisontaalsed veerised teisendatud. Nii säilitab veebisait ruudukujulise välimuse. Veel üks oluline punkt, mida tuleb tähele panna, on protsentides näidatud kümnendkohtade arv. Mille eesmärk on, et arvutus oleks võimalikult täpne algväärtusele pikslites.
Lahendus lahtistele sisustuselementidele, mis suurenevad
Veebilehe ümberkujundamise käigus on võimalik mudelist leida teatud lahtised elemendid, mis oma tüpoloogia tõttu võivad kasvada üle nende maksimaalse globaalse konteineri, max-width. Neid elemente saab tuvastada brauseri suurusega mängides, kuna need tuvastatakse, neid parandatakse. Teine kiire viis nende elementide parandamiseks või vältimiseks on valida konteinerid ja anda korraldus, et ükski sisemine element ei kasva üle konteineri enda suurusest.
Arendatavas näites rakendatakse seda viimast parandusvormi põhisisus ja külgribal. Nii saab teatud probleeme, mis vidinatest tekkida võivad, ise lahendada. Selle järgi oleks lahtiste sisustuselementide lahendamise konfiguratsioon järgmine:
#main #content { float:left; laius:63.9880952%; veeris: 30 pikslit 0 0 1.98412698%; }
#peamine #sisu * {max-width:100%}
[...]
#main #sidebar { float:left; veeris: 20 pikslit 0 0 3.47222222%; laius:28.7698413%; }
#main #sidebar * {max-width:100%}
Absoluudis paiknevad elemendid
Kõigi nende elementide jaoks, mis on veebilehel üldse paigutatud, teisendamiseks. Nende laiuste puhul tuleb rakendada sama eelmist protsessi, kohandades neid abstsisstellje väärtustega protsentides, et muuta nende laiust. Eeldusel, et arendatavas näites on mõned elemendid päises üldse paigutatud. Nende asendid peavad olema kohandatud nende elementidega, et need ei jääks võre mõõtmete vähendamisel õhus hõljuma. Selleks oleks konfiguratsioon järgmine:
[...]
#header #top p.leivapuru {positsioon:absoluutne; ülemine: 90px; vasak:3.72439479%; värv: valge;}
[...]
#header #top p.like { position:absolute; ülemine: 10px; vasak:54.0037244%; }
[...]
#header #top div.vcard{positsioon:absoluutne; ülemine: 11px; paremal:5.49348231%; laius:27.9329609%;}
Meediapäringute rakendamine interjööri elementides
Lehe laiuste kohandamisel on võimalik, et esineb elemente, mis oma sisu tõttu ümberkujunduses ruumi ei leia. Need võivad segada, muutes kohandused halvaks. Selle ebamugava olukorra vältimiseks kasutatakse lihtsaid meediumipäringuid, mis võimaldavad CSS-i drastiliselt muuta, kui ilmnevad teatud dimensioonid.
Meediapäringud on väga võimas tööriist, mille abil saab teha palju veidrusi. Seekord rakendatakse neid teatud tingimuste määratlemiseks ekraani laiuse ja CSS-i muutumise kohta. Selleks tuletame meelde järgmist süntaksit:
@meediumiekraan ja (max-width:[WIDTH]px) {
/* Meie uued reeglid sellise või väiksema ekraanilaiusega */
}
Selle meediumipäringu avalduse eesmärk on kohandada paigutust erinevate eraldusvõimetega. Seega saab seda rohkem kui midagi kasutada teatud sekundaarsete elementide peitmiseks, mis teatud ekraanilaiuste puhul võivad kasutajat rohkem häirida kui aidata. Lisaks serveerimisele väikeste liitmike tegemiseks, et mõned elemendid mahuksid ümberkujundusse erinevate stsenaariumide korral.
Öeldu illustreerimiseks peidetakse mõned elemendid, mille eraldusvõime on alla 800 ja 600 piksli. Et ühel juhul takistavad need kohandatava veebilehe avalehe sisu õiget nägemist. Vastavalt järgmisele süntaksile:
@meediaekraan ja (maksimaalne laius: 800 pikslit) {
#header #top p.like,
#header #top p.leivapuru,
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin,
#header #top div.vcard p.delicious,
#header #top div.vcard p.google,
.vcard h2{ display:none;}
}
@meediaekraan ja (maksimaalne laius: 600 pikslit) {
#sidebar .twitter {display:none;}
}
Nagu näha, on need peidetud eraldusvõimega, mis on väiksem kui 800 pikslit:
- Meeldimised
- Riivsai
- Muuhulgas sotsiaalsed nupud
Alates 600 pikslist allapoole eemaldatakse külgribalt viimased säutsud
Meediumipäringud võimaldavad teil ka mõningaid stiile muuta
Nagu juba näha, võimaldavad meediapäringud osa sisustuselemente peita. Kuid need võimaldavad teil ka mõnda stiili muuta. Seda eripära saab kasutada siis, kui elementi, lisaks sellele, et see ei ole laiuse poolest kohandatud, ei taheta või ei taheta, et see kaoks või peituks. Kui selline olukord tekib veebis, mida soovite muuta. Seejärel püütakse meediapäringute abil oma stiili delikaatselt muuta, et see kohaneks.
Eeldades, et töötamisel olevas veebis põhjustavad seda tüüpi probleeme sotsiaalsed nupud. Ja kui lehe laius langeb alla 960 piksli, otsustab ta oma vormingut delikaatselt muuta, eemaldades ikoonid ja vähendades fondi suurust. Konfiguratsioon oleks siis järgmine:
@meediaekraan ja (max-width:960px) {
#header #top div.vcard p {font-size:9px;}
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin a ,
#header #top div.vcard p.delicious a,
#header #top div.vcard p.google a {background:none; polsterdus:0;laius:50%; float:left;}
}
Mida teha menüüdega
Kuidas on lood menüüdega, kuidas luua väikestel ekraanidel tundlik veebisait? Vastus sellele küsimusele on, et see on mõnevõrra keeruline probleem, mida lahendada. Kuna see on elementide kogum, mis on tavaliselt mõnevõrra pikk, ja ka menüü ise, ei ole see veebi põhisisu. Seetõttu ei saa lubada, et lehe avamisel väikestel ekraanidel võtab menüü palju ruumi.
Puutetundlikes seadmetes võib kasutajat häirida, et ilmub pisikeste linkide nimekiri, mistõttu linkide kokkutõmbamine poleks just kõige mõistlikum lahendus. Alternatiiv, mis võib olla soodne, on menüü asendamine valitud elemendiga. Mis tähistab juhtelementi, mis näitab valikute menüüd, kus kasutaja saab mugavalt valida. Valimiselement vähendab pikad menüüloendid väikeseks plokiks, nii et selle kasutamine sobib ideaalselt selliste seadmete jaoks nagu tahvelarvutid ja mobiiltelefonid.
Kui teete selle asendamise uues tundlikus disainis, on soovitatav kasutada pistikprogrammi tinynav jquery. See pistikprogramm, mis on lihtne ja väga ühilduv, viitab kõigile UL-i üksustele menüüs. Ja see omakorda lisab loendi algusesse valitud elemendi koos näidatud tunnustega. Seejärel tuleb veel teha UL-i või valiku peitmine meediumipäringutega, kuni soodsa lahenduseni jõutakse.
Toimige valitud elemendiga
Menüü asendamine valitud elemendiga toimub ülalmainitud pistikprogrammi kaudu. Mis tuleks paigutada linkide loendi päisesse. Seega, kui leht hakkab langema eraldusvõimeni, mille laius on alla 800 piksli, asendatakse lingid valikuga Select. Seejärel tuleb järgida järgmisi samme:
- Lisage skript ja seadke jquery pluginas valmis kõne uuele elemendile. Vastavalt järgmisele:
$(«.menüü ul»).tinyNav();
See konfiguratsioon lisab valiku igasse ülamenüü lingiloendisse
- Käske CSS-il uued valitud elemendid peita järgmise deklaratsiooniga:
.tinynav { kuva: puudub }
- Kasutage sobivat meediumipäringut ja lisage sellesse valiku vorming ja loendi enda peitmise järjekord. Jättes konfiguratsiooni järgmiselt:
@meediaekraan ja (maksimaalne laius: 800 pikslit) {
#header ul.menu li ul {display:none}
.tinynav { kuva: block; positsioon: absoluutne; alumine: 5px; laius: 79%; margin-vasak: 15%}
}
Sel viisil on veebimenüü asendatud valitud elemendiga, vähendades ekraani eraldusvõimet alla 800 piksli laiusele.
Blokeerige taustad tundliku veebi loomisel
Veebi kohandamise hetkel sõltub raskusaste mudeli seisukorrast. Veebi kujundamisel kaunistatakse CSS-punktis plokid tavaliselt pilditaustadega. Kaunistamise protsessis kasutatakse suurt hulka tehnikaid. Mõned neist on suuruse muutmisel lihtsamad kui teised.
Mõned lahendused
Seetõttu võib protseduur olenevalt kasutatavast tehnikast olla vähem või lihtsam. Võib isegi juhtuda, et veebis olev taust kaotab oma eesmärgi, kui servad on peidetud. Nendel juhtudel on tulemuseks suur probleem, millest tuleb üle saada. Siin on mõned lahendused sellele:
- Muutke võimalikult palju taustu CSS3 stiilideks. Mis kohandub muutustega väga hästi. Nüüd on ümarate servade, varjude või gradientide kasutamisel enamiku brauserite ühildumine lihtne. Kolme CSS-i olukorra puhul on kujundustel keeruline nõuda plokkide loomiseks suurt hulka pilte.
- Tehke ilma taustpiltideta, et asendada need võimalikult suurel määral CSS3-ga, mis vastab sellele, kuidas meediumipäringud ja adaptiivsed laiused oma tööd teevad
- Kui tegemist on fondidega, mis juba ploki olukorras domineerivad. Soovitatav on seda stiili plokis dubleerida ja otsida, et algne taust oleks vähe eristatav
Teised lahendused kolme tüüpi taustapiltidele, mis võivad olla tüütud, on järgmised:
- Lehe raamis olevad ääristega pildid, mis isegi jäädes väljapoole kuvatavat osa lõpptulemus ei häiri, seetõttu jäetakse
- Teatud pealkirjades olevad ikoonid, mis parandatakse peites need meediapäringute eest, kui need hakkavad tüütama
- Päise globaalsel taustal on valge kast, kuhu läheb veebi autori nimi. Selleks saab autorikastis korrata sama stiili, nii et üks taust on teisega peidetud, vähendades lehe mõõdet.
Kuidas luua mobiiliekraanile reageeriv veebi – lahendus
Mitmeid aspekte, kuidas responsiivset veebisaiti väikestel ekraanidel teha, on juba varem nähtud. Selle teadmisega saab jäigast veebidisainist, mille laius on 1080 pikslit, jõuda väikeste ekraanide jaoks üsna kohandatava disainini, alates paljudest seadmetest. Kuid mobiiliekraanide tundlik disainilahendus puudub.
Väikeste ekraanide puhul nähtu rakendamisega mobiilseadmete disainis muudavad muudatused selle vastuvõetavaks. Täiustamist vajab veel, kuna kaheveeruline paigutus päises liidetud elementidega on mobiilide jaoks väga ebapraktiline
Seetõttu on asjakohane käivitada protsess, et saavutada mobiilseadmetes õige kuva. Oluline on märkida, et mobiiltelefonis navigeerimise kasutamine ei ole sama, mis tavalisel veebisaidil. Seejärel võiksite minna kaugemale kui lihtsad ekraanilaiuse kohandamise muudatused või elementide peitmine.
Vaateporti silt antud juhul
Vaateava element on hea tööriist veebi mobiiliga kohandamiseks. Esiteks sellepärast, et vaateava näitab mobiilile viisi, kuidas soovite selle suumi töötada, kui seade veebisaiti kuvab. See tähendab, et põhimõtteliselt saab esitada kaks võimalust, mis on näidatud allpool:
1 valik: tundliku kujundusega veebisaitide jaoks, mis on piisavalt ühendatud mobiili eraldusvõimega, on saadaval järgmine.
See valik on kõige ideaalsem, kuid ka kõige töömahukam. Sest kui vähendate veergude laiust alla 500 või 400 piksli, muutuvad laiused täiesti juhitamatuks. Seetõttu tuleb veebi visualiseerimises teha radikaalseid muudatusi.
2 valik: kui tegemist on veebisaitidega, mis pole veel ideaalselt mobiili eraldusvõimega kohandatud, on meil järgmised võimalused.
See teine võimalus võib olla kiirem. Sest ainult kujunduses on märgitud, et mobiili saab kuvada soovitud resolutsioonis. Teisisõnu, veeb on jätkuvalt tavaline leht, ainult vähendatud või kohandatud versioonis.
Võimalikud tagajärjed
Kui valite teise võimaluse, võib veebisaidi kohandamisel või tundlikuks kujundamisel tekkida kaks probleemi.
-Primero: sel juhul töötaks vaateava globaalselt kõigis mobiilibrauserites. Näiteks juhul, kui kuvatakse 500 piksli laiune vaateakna silt, kuvatakse umbes 800 piksli laiusega Ipad-seadmed vaid 500 piksli laiuse lehe. Suutmatus sada protsenti olemasolevast ruumist ära kasutada.
-Teine: jätkates 500 piksli laiuse vaateava tähistamise juhtumiga. Sel juhul kuvatakse 320 piksli laiuse eraldusvõimega veebi sisu, mille kallal töötatakse, väga vähendatud režiimis. Seega, kui mõnda kohandust ei tehta, ei tööta see. Teisest küljest, kui menüüde või allikate kohandamiseks tehakse teatud muudatusi, muudetakse veebiversiooni väikese ekraani puhul samamoodi tahvelarvutis kuvamiseks. Kokkuvõtteks võib öelda, et fikseeritud laiuse näitamise lahendus vaateava märgisega võib olla kiireim, kuid see pole enam tõhus.
Vaateava märgendi 2. valiku valimise tagajärgede nägemine muudab 1. valiku kõige soovitatavamaks. Nii on mobiilil endal lubatud näidata eraldusvõimet, milleks ta on võimeline, kasutades ülal lehe päises valikuna 1 märgitud vaateava.
Selle visualiseerimisotsusega tuleb hiljem mobiiliversiooni meediapäringu kallal töötada. Selleks on vaja liikuda veergudelt sajaprotsendilise laiusega plokkidele. Samuti kustutage, tihendage teatud elemente, kohandage fonte nii, et see oleks sõbralik lugemiseks 320 piksli laiusega.
veergude eemaldamine
Nagu eespool mainitud, on mobiilile reageeriva kohandamise jaoks vaja kahe veeru välimust täiustada, et vältida elementide kokkukleepumist päises. Selle protsessi jaoks eemaldatakse veerg, asetades ühe teise peale, kuid ilmneda võib kaks stsenaariumi:
-Et veerud on juba HTML-is järjestatud: Kui see nii on, esitatakse neid juba mobiili jaoks soovitud viisil. Vaja on ainult ujukide kadumist või kuva:inline-block või display:box muutmist, et asendada see tavalise kuvaga:plokiga. Rakendades järgmist süntaksit:
@meediaekraan ja (maksimaalne laius: 400 pikslit) {
#sisu {display:block; float:pole; }
}
-Kui veerud ei ole järjestatud: Selle stsenaariumi korral peate töötama absoluutsete positsioonidega, nii et alumised plokid hõivaksid lehe ülaosa. Nagu ka veeriste kasutamine ülemiste klotside liigutamiseks alumisse, et need ei kattuks. Näide, eeldades järgmist jaotust:
Selle struktureerimise puhul on soovitav, et mobiilis paikneksid külgriba elemendid enne sisu. Seega näeb CSS välja selline:
@meediaekraan ja (maksimaalne laius: 400 pikslit) {
#peamine {positsioon:suhteline; laius: 100%; }
#sisu{margin-top:80px; laius: 100%; float:none;}
#külgriba{kõrgus:80px; positsioon: absoluutne; ülemine:0; laius: 100%; float:pole; }
}
Teise stsenaariumi visualiseerimiseks, kus mobiiliversioonis tuleb kasutada absoluutseid positsioone, on toodud järgmine struktuurinäide
@meediaekraan ja (maksimaalne laius: 450 pikslit) {
#main #sidebar {display:block; float:pole !tähtis; laius: 100%; positsioon: absoluutne; ülemine: -80px; veeris:0 !tähtis; border-bottom: 1px solid #aaa; polsterdus: 0 0 20 pikslit 0;}
#main #content { float: none; laius:auto; veeris: 100 pikslit 0 0 0; }
}
Sel juhul on mobiiliversioonis ka muudatus 450 piksli laiusele.
Fontide reguleerimine
Teine aspekt, mida tuleb mobiiliversiooni reageeriva kohandamise puhul käsitleda, on fontide kohandamine. Sest kui veebi kujundati, oli see tehtud suuri monitore silmas pidades. Väikeste vertikaalsete ekraanidega mobiiliversioonidele üleminekul ei ole veebisaite sageli mugav lugeda ega vaadata. Veebi pealkirjad võtavad palju ruumi, sisu tekst muudab fondi suuruse tõttu lugemise raskeks. Selle järgi on vaja kõik allikad üle vaadata, viia need mobiiliekraanil kuvamiseks elujõulisse konfiguratsiooni.
Allpool on selle aspekti kohandused, kus muudeti menüü fonte, vähendati pealkirjade kirjasuurust ja suurendati sisu oma. Pange tähele järgmist konfiguratsiooni:
#header ul.menu li,
#header ul.menu li.analytics,
#header ul.menu li.development {background:none;}
#header ul.menu li h4 {margin:30px 0 0 0px; fondi suurus: 12 pikslit; text-taane:10%;}
#main #content .hnews h3 a,
#main #content .hnews h1 a{ font-size:22px; }
#main #content .hnews .entry-content {font-size:16px;}
Muud kohandused esteetika ja stiilide osas
Olen teinud kõik eelnevad responsiivse veebisaidi loomise protsessid mobiiliversiooni kujunduses. Jääb üle anda viimane lihv veebi välimusele ja stiilile. Sel juhul saate ümber kujundada need stiilid, mis ei kohandu uue versiooniga, ja loobuda nendest, millel on selles koht. Samamoodi saate mõnda elementi, näiteks külgribasid, teisaldada, et paigutada need teise asukohta, või teha muude reguleerimiste hulgas ka veerisid. Selleks, et lõpuks saavutada ilus mobiilne veeb, mis on valmis kasutamiseks.
Kuidas teha reageerivat veebisaiti? – testid ja testid
Kui kujundate mitte ainult veebiarenduse, vaid ka millegi uue loomise või struktureerimise osas. Seal on testimise või testimise etapp, kus saate kontrollida tulemusi, kui need on optimaalsed või vajavad täiustamist.
Sellegipoolest on mugav kontrollida või testida pärast kogu eelneva protseduuri läbiviimist. Need testid tuleks läbi viia sammude täitmise ajal ja selleks, et oleks võimalik kontrollida kõigis nendes saavutatud muudatusi. Samamoodi on veebi töös vaja läbi viia järgmised kaks kontrolli
Minge brauseris testima
Kui töötate tundliku kujundusega, peate reguleerima ekraani laiust. Selleks, et kontrollida uusi kohandusi, mis võtavad uusi vorme. Samamoodi saab tuvastada väikseid vigu ja seeläbi kohandada kasutatavaid meediumipäringuid. Ekraani laiuse kontrollimiseks on kaks võimalust:
- Tegutsege otse, eemaldades brauseri laiuse testimiseks maksimeerimise.
- Kasutage selliseid asju nagu ISH kasulikuks tööriistaks nende testisätete tegemiseks lihtsate käskudega.
Mööda mobiili vahemälust
Mobiilseadmed salvestavad oma olemuselt andmeid rohkem kui vaja, isegi rohkem kui tavaline brauser. Tavalistes rakendustes piisab tavaliselt CTRL+F5 käivitamisest, et tekitada laadimisi ilma vahemäluta. Kuigi seda tüüpi toimingud on mobiiltelefonides keerulised, on isegi teatud brauserites võimalik vahemälu keelata. Parema töö hõlbustamiseks ilma vahemäluta on soovitatav teha järgmist.
- Töötage Css-kõne muutujatega, näiteks:
"/styles.css?version=xxxx"
Muudatuste tegemine igal konkreetsel juhul versiooni number. Selleks, et URL oleks erinev, et see ei kasutaks vahemälu.
- Töötage otse brauseris. Suurendades õrnalt mobiili minimaalset eraldusvõimet vahemikus 420–450 pikslit. Nii saate selle brauseris kuvada, kuna see on piisavalt kahanenud. Teine võimalus on veebilehtede suurust muutvate tööriistade kasutamine.
Nende toimingute abil saavutatakse testide läbiviimisel kahtlemata praktilisem ja mugavam tulemus.
Kuidas teha reageerivat veebisaiti? - Järeldus
Kõiges eelnevas oli võimalik teada mõningaid tehnikaid, tehnoloogilisi tööriistu ja protseduure, mida responsiivse veebi kujundamisel sageli kasutatakse. Kõiki neid teadmisi saab rakendada ka olemasolevale veebisaidile, mida soovite kohandada kujundusega. Ilma, et peaksite uue veebisaidi loomisega tegelema.
Seega järgmise küsimuse juurde: Kas kõike õpitut tehes on võimalik teha responsiivse kujundusega veebisaiti? Ilmselgelt on vastus kindel ei. Miks? Sest saiti sai teha ainult kohanduste suhtes tundlikuks, mis algselt polnud. Kuna see loodi jäiga või fikseeritud olemusega.
Võimalikud tagajärjed või vead
Traditsioonilise või muudatuste suhtes tundlikuma veebisaidi kohandamise käigus võib see kaasa tuua mõningaid vigu ja seetõttu tekivad teatud tagajärjed, vaatame:
-Teatud elemendid, mis olid lehe loomisel üliolulised, tuleb eemaldada. Teisest küljest lähtuti nende kõrvaldamisel välimusest, mitte aga veebikülastajale edastatava sisu tähtsusest.
-See ei pruugi olla saavutanud täiuslikkust üldises visuaalses aspektis. Võimalus ainult olemasolevat parandada. Täiesti erinev juhtum, kui veeb loodi algusest peale.
-Sõltuvalt algse veebisaidi mudelist võib see jõuda muudatustega kohandamise lõpuni või mitte. Mõne maketiga saavad arendajad selle katse käigus teha vaid vahepealseid lahendusi.
Lõpuks tundliku disaini kohta
Lõpuks oli see, mis teostati, vaid lihtsad detailid. Rõhutades, kui tähtis on töötada selle nimel, et saada mudel, mida saab kohandada kujundusega, mis algselt polnud. Responsive Designi lugedes saate aru, et räägite disainist, mitte küljendustööst. Seetõttu peab responsiivse veebisaidi tegemine lähtuma originaalse uue kujunduse kontekstist.
Siiski on võimalus kuvada veebilehte, mis võib muutuda ja kohanduda mobiili eraldusvõimega, alustades jäigast, on üsna suur ja kasulik saavutus. Siin selgitatu ei tähenda, et olete juba tundliku disaini väljaõppe saanud. Selleks on vaja palju rohkem uuringuid.
Sest vaja oleks palju rohkem vundamenti, teadmisi ja erinevate üldistatumate, tehniliste protsesside õppimist.
Kuidas luua tundlik veebisait – viimased näpunäited
Kokkuvõtteks on oluline teada, et tundlik disain on see, mis veebis praegu on. Seda tüüpi veebidisain nõuab uut mõtteviisi. Nende veebisaitide arendamine võib olla lihtsam, järgides järgmisi näpunäiteid.
- Mõelge esmalt mobiilile: disainimisel on mugav alustada esmalt mobiiliekraani väiksusega kohanemisest. Seega pärast sisu kohandamist suuremate suurustega ekraanidele. Sest mobiilile mõeldes saab olla objektiivsem sisu osas, mida lehel kuvada, jättes esitlemiseks vaid tõeliselt olulise.
- ÄRGE optimeerige disaini konkreetse mobiiltelefoni või tahvelarvuti jaoks
- Järgige standardeid ja häid tavasid: näiteks ärge kasutage failis endas HTML-märgendite sees määratletud CSS-i stiile.
- Vältige kujunduses pikslite ori olemist: pidage meeles, et elemendid leiavad neile vastava asukoha. Seda seetõttu, et nad hoolitsevad mahutite voolavuse ja mõõtmete eest. Kui seda ei kuvata soovitud viisil, parandage lihtsalt elementide paigutust, rakendades meediumipäringuid.