Multifunktsionaalse veebidisaini kahe erineva lähenemise võrdlemine
Mõistlik ja kohanemisvõimeline veebidisain on mõlemad meetodid erinevate seadmetega sõbralike veebisaitide loomiseks, mis töötavad hästi erinevate ekraanisuuruste korral. Kuigi Google soovitab tundlikku veebidisaini ja see on kahe lähenemise populaarsus, on mõlemal multimeedia veebidisaini meetodil oma tugevused ja nõrkused.
Vaatame erinevusi tundlikule ja adaptiivsele veebidisainile, keskendudes eelkõige nendele olulistele valdkondadele:
- Lihtsus arengus
- Tase, mida teil on disaini üle kontrolli
- Seadme / ekraani toetuse laius
- Kuidas tulevikku sõbralik lahendus on
- Üldine allalaadimise kiirus ja saidi jõudlus
Mõned mõisted
Enne, kui jõuame meie reageerimisvõimelise ja adaptiivse veebidisaini võrdlusteni, võtame hetke mõlema lähenemisviisi kõrgetasemelise määratluse vaatamiseks.
Reageerivatel veebisaitidel on vedeliku paigutus, mis muutub ja kohandub, olenemata kasutatavast ekraani suurusest. Meediumipäringud võimaldavad tundlikel saitidel muuta brauseri suuruse muutmisel "lennult".
Adaptiivne disain kasutab fikseeritud suurusi, mis põhinevad eelnevalt määratud murdepunktidel, et pakkuda kõige sobivama ekraanisuuruse paigutusversiooni, mis leitakse lehe esmakordsel laadimisel.
Nende laiapõhjaliste määratlustega pöördume lähtuvalt meie põhivaldkondadest.
Arengu tase
Kõige olulisem erinevus tundlikule ja kohandatavale veebidisainile on selline, et neid lahendusi veebisaidile rakendatakse. Kuna reageeriv disain loob täiesti vedeliku kujunduse, on seda kõige parem kasutada projektide puhul, kus te redigeerite saidi maapinnast üles . Katsetamine olemasoleva veebisaidi koodi muutmiseks reageerimiseks on sageli kurnav asi, kuna teil pole lihtsalt kontrolli taset, mis teil oleks, kui arendaksite seda koodi nullist ja võtaksite selle protsessi esimestel etappidel arvestatavat disaini arvesse . See tähendab, et kui sait kohandatakse reageerivale saidile, olete sunnitud tegema kompromisse, et jääksid selles olemasolevasse kooditabelisse.
Kui töötate olemasoleva fikseeritud laiusega veebisaidiga, siis kohanduv lähenemisviis tähendab, et saate jätta suuruse, mida saidi kavandatud puutumata, ja lisada vajadusel täiendavaid kohanemisvõimalusi. Mõnel juhul, kui projekti eelarve on väike ja kui see mahuks vaid vähesele arendustööle, võite valida väiksemate ekraanimudelite / mobiilikeskmete suuruste jaoks uute adaptiivsete murdepunktide lisamise. See tähendab, et lubate suurematele ekraanidele kõigile kasutada sama paigutust - võib-olla 960 katkestuspunkti versiooni, mis oli selle ala algselt kavandatud versioon.
Kohanduv lähenemisviis on see, et saate paremini kasutada olemasoleva saidi koodi, kuid üks nõrkus on see, et luuakse erinevad paigutusmallid iga katkestuspunkti jaoks, mida soovite toetada. See avaldab mõju töökoormusele, mis on vajalik selle lahenduse arendamiseks ja säilitamiseks pikas perspektiivis.
Disainikontroll
Üks reageerivate veebisaitide tugevaid külgi on see, et nende voolavus võimaldab neil kohandada ja toetada kõiki ekraani suurusi, erinevalt ainult kohandatud lähenemisviisis määratletud eelnevalt määratud murdepunktidest. Reaalsuseks on aga see, et reageerivad saidid võivad teatud võtmeekraanide suuruses (tavaliselt suurused, mis vastavad turul kättesaadavatele populaarsetele seadmetele), suurepärased väljapanekud, kuid visuaalne disain sageli nende populaarsete resolutsioonide vahel laguneb.
Näiteks võib veebisait tunduda suurepäraselt 1400-pikslise ekraani suurusel, keskmise ekraani suurusega 960 pikslit ja väikese ekraaniga pilti 480 pikslit, aga mis on nende suuruste vaheliste seadete vahel? Disainerina on teil vähe kontrolli nende suuruste vahel ja nende lehekülgede visuaalne välimus on sageli ideaalis väiksem.
Kohandava veebisaidi abil on teil palju rohkem disaini üle erinevate kasutatavate paigutustega, sest need on fikseeritud suurusega, mis põhinevad teie määratud murdepunktidel. Need ebameeldivad riikidevahelised suhted ei ole enam probleemiks, sest olete hoolikalt kavandanud külastajate jaoks iga "välimuse" (mis tähendab iga pauspunkti kuvarit).
Nii atraktiivne kui see disainjuhtimise tase võib tunduda, peate olema teadlik, et see on hinnaga. Jah, teil on täielik kontroll iga pauspunkti välimuse kohta, kuid see tähendab, et peate investeerima iga unikaalse kujunduse kujundamiseks vajaliku disainiaja. Mida rohkem on teie poolt kavandatud murdepunktid, seda rohkem aega kulub selle protsessi jaoks.
Toetuse laius
Nii tundlik kui ka adaptiivne veebidisain toetavad eriti tugevalt kaasaegseid brausereid.
Kohanduvad veebisaidid vajavad ekraani suuruse tuvastamiseks kas serveripoolseid komponente või Javascripti. Loomulikult, kui adaptiivne sait vajab Javascripti, tähendab see seda, et brauseril peab olema see lubatud, et see sait toimiks õigesti. See ei pruugi teile suurt muret, kuna enamikel inimestel on brauseris Javascript, kuid igal ajal, kui saidil on midagi kriitilist sõltuvust, tuleb märkida.
Vastutustundlikud veebisaidid ja meediumipäringud, mis neid võimendavad, töötavad hästi kõigis kaasaegsetes brauserites. Ainus probleem, mis teil on, on Internet Exploreri vanimate versioonidega, kuna versioonid 8 ja allpool ei toeta meediumipäringuid . Selle ümbertegemiseks kasutatakse tihti Javascripti polüfillit , mis tähendab, et seal on olemas ka Javascripti sõltuvus, vähemalt nende IE vanade versioonide jaoks. Jällegi ei pruugi see teie jaoks palju muret, eriti kui teie saidi analüüs näitab, et te ei saa neid vanu brauseri versioone kasutades palju külastajaid.
Tulevikku sõbralikkus
Reageerivate veebisaitide vedeliku olemus annab neile eelise kohanemisvõimalustele, kui tegemist on tuleviku sõbralikkusega. Seda seetõttu, et need reageerivad saidid ei ole ehitatud, et mahutada ainult eelnevalt kindlaksmääratud murdarvute kogumit. Nad kohanduvad kõikidele ekraanidele , sealhulgas need, mis ei pruugi praegu turul olla. See tähendab, et reageerivad saidid ei pea olema fikseeritud, kui uue ekraani eraldusvõime muutub järsku populaarseks.
Vaadates seadme maastiku uskumatut mitmekesisust (alates 2015. aasta augustist oli turul rohkem kui 24 000 erinevat Android-seadet), on veebisaidil, mis sobib kõige laiemate ekraanide mahutamiseks, on see tuleviku jaoks sõbralikult tähtis. Seda seetõttu, et see maastik ei tule tulevikus tõenäoliselt vähem mitmekülgne, mis tähendab, et konkreetsete ekraanide või suuruste kujundamine muutub võimatuks, kui me pole seda tegelikkust veel jõudnud.
Selle võrdluse stsenaariumi teisel pool, kui sait on adaptiivne ja see ei võimalda uusi resolutsioone, mis võivad turul oluliseks muutuda, siis võib teil olla sunnitud lisada selle vahepunkti oma loodud saitidele. See lisab projektidele disaini ja väljatöötamise aega ning see tähendab, et neid kohanemisvõimalusi tuleb järjepidevalt jälgida, et tagada, et turule ei viida uusi murdepunkte, mis tuleb saidile lisada. Jällegi, kui seadme mitmekesisus on see, mis on see, on uute mõõtmete pidevaks kontrollimiseks ja uute piiripunktide kohanemiseks pidev väljakutse, mis mõjutab tööd, mida peate saidi ja selle hoolduse kulude katmiseks ettevõte või organisatsioon, kelle jaoks see sait on mõeldud.
Jõudlus
Vastutustundlik veebidisain on juba ammu süüdistatud (ebaõiglaselt nii paljudel juhtudel) olevat halb lahendus allalaadimise kiiruse / jõudluse seisukohast. See on suuresti tingitud asjaolust, et selle lähenemisviisi esimestel päevadel paljude veebidisaineritega lihtsalt käsitleti väikese ekraaniga meediumipäringuid saidi olemasolevale CSS-ile. See sundis suurematele ekraanidele mõeldud pilte ja ressursse edastama kõigile seadmetele, isegi kui need väiksemad ekraanid ei kasutanud neid lõplikes paigutustes. Sellest ajast alates on vastupidine disain jõudnud kaugele ja reaalsus on see, et tänu kvaliteedile reageerivatele saitidele ei esine tulemuslikkuse probleeme.
Aeglane allalaadimise kiirus ja pahandatud veebisaidid ei ole tundlik veebisaidi probleem - see on probleem, mida võib leida kõigil veebisaitidel. Kujutised, mis on liiga rasked, edastatakse sotsiaalmeediast, ülemäärastest skriptidest ja muudest ning kaalutakse saidi allapoole, kuid kiirlaadimise jaoks saab luua nii tundlikke kui ka adapteerivaid veebisaite. Loomulikult saab neid ehitada ka viisil, mis ei tooda esmajärjekorras esile jõudmist, kuid see ei ole lahendus iseenesest tunnusjoon, vaid pigem peegeldus meeskonnas, mis osales saidi enda arendamises.
Peale paigutuse
Kohandava veebidisaini üks kõige mõjuvamaid aspekte on see, et teil ei ole ainult kontrolli saidi disaini üle seatud piiripunktide jaoks, vaid ka nende saitide versioonidele tarnitud ressursse. Näiteks tähendab see, et võrkkesta kujutisi saab saata ainult võrk-seadmetele, samal ajal kui võrkkesta ekraanid saavad rohkem sobivaid pilte, mis on faili suurusest väiksemad. Muid saidi ressursse (Javascripti faile, CSS-stiile jne) saab nutikalt kätte toimetada ainult siis, kui neid on vaja ja neid kasutatakse.
Selline adaptiivse veebidisaini kasutamine läheb kaugemale lihtsast võrrandist: "kui teete veebisaiti ajakohasena, võib kohanemisvõimalus olla lihtsam lähenemisviis kasutada." Kõik saidid, kaasa arvatud täielikud redigeerimised, saavad kasu arukamast lähenemisest kohandatud kogemustele.
See stsenaarium näitab selle "tundliku ja adaptiivse" arutelu naiivset olemust. Kuigi on tõsi, et adaptiivne lähenemine võib olla kohasem kui kohapealsete moderniseerimine, võib see olla ka suurepärane lahendus täielikuks ümberkujundamiseks. Samamoodi võib mõnel juhul kasutada olemasolevat saidi koodibaasi tundlikule lähenemisele, andes sellele saidile kõik täielikult reageerimisvõimelise lähenemise eelised.
Milline lähenemine on parem?
Kui tegemist on vastutustundliku ja adaptiivse veebidisainiga, puudub selge "võitja", kuigi vastuseks on kindlasti rohkem populaarne lähenemisviis. Tõepoolest, "parem" lähenemine sõltub konkreetse projekti vajadustest. Lisaks sellele ei pea see olema "kas / või" olukorda. Seal on palju veebiprofessionaalid, kes loovad saidid, mis ühendavad kõige paremini reageerivat veebidisaini (vedeliku laius, tulevane tugi) koos adaptiivse disaini tugevusega (parem disainikontroll, saidi ressursside nutikal laadimine).
Tavaliselt tuntud kui RESS (vastupidine veebi disain serveri külgkomponentidega), näitab see lähenemisviis, et tegelikult ei ole "üks suurus sobib kõikide lahendustega." Mõlemal reageerival veebidisainil ja adaptiivsel on oma tugevused ja väljakutsed, nii et peate määrama, milline neist töötab teie konkreetse projekti jaoks kõige paremini või kui hübriidlahendus võib teile kõige paremini sobida.