Vertaamalla kahta erilaista lähestymistapaa moniulotteiseen Web-suunnitteluun
Responsive ja adaptiivinen web-suunnittelu ovat molemmat menetelmiä monikäyttöisten verkkosivustojen luomiseen, jotka toimivat hyvin erilaisilla näytön kokoilla. Vaikka Googlen suosittelisi reagoivan web-suunnittelun ja se on suosittu näistä kahdesta lähestymistavasta, molemmilla näillä menetelmillä moni-laite-verkon suunnitteluun on vahvuuksia ja heikkouksia.
Katsotaanpa eroja herkän ja mukautuvan web-suunnittelun välisistä eroista keskittyen erityisesti näihin avainalueisiin:
- Kehityksen helppous
- Suunnittelun taso, jota hallitset
- Laitteen / näytön tuen leveys
- Kuinka tulevaisuuden ystävällinen ratkaisu on
- Yleinen latausnopeus ja sivuston suorituskyky
Joitakin määritelmiä
Ennen kuin pääsemme rinnakkain vastaaviin ja mukautuvaan web-suunnitteluun, tarkastellaan hetken aikaa näiden kahden lähestymistavan korkean tason määrittelyä.
Vastuullisilla verkkosivustoilla on nesteensiirto, joka muuttuu ja mukautuu käytettävän näytön koosta riippumatta. Mediakyselyt sallivat reagoivien sivustojen muuttamisen jopa "lennossa", jos selaimen kokoa muutetaan.
Adaptiivinen muotoilu käyttää ennalta määrätyillä raja-arvoilla määritettyjä kiinteitä kokoja, jotta saadaan mahdollisimman sopiva asennusversio näytön kokoa varten, joka havaitaan ensimmäisen sivun lataamisen yhteydessä.
Kun nämä laajat määritelmät ovat käytössä, käännymme tärkeimpiin painopistealueisiin.
Kehityksen helppous
Merkittävin ero reagoivan ja mukautuvan web-suunnittelun välillä on tapa, jolla näitä ratkaisuja sovelletaan verkkosivustoon. Koska reagoiva muotoilu luo täysin nestemäisen ulkoasun, sitä käytetään parhaiten projekteissa, joissa uudistat sivuston alusta . Yritetään jäljitellä olemassa olevaa verkkosivustonosakoodia, jotta se muuttuisi reagoimaan. Tämä on usein hankalaa asiaa, koska sinulla ei yksinkertaisesti ole sellaista hallintatasoa, jota sinulla olisi, jos kehität koodin alusta ja otat vastaavan suunnittelun huomioon prosessin varhaisimmista vaiheista . Tämä tarkoittaa sitä, että kun laitat sivuston jälkiasennettavaksi, sinun on pakko tehdä kompromisseja, jotta pysyisi olemassa olevassa koodisivustossa.
Jos työskentelet nykyisen kiinteän leveän verkkosivuston kanssa, sopeutuva lähestymistapa tarkoittaa sitä, että jätät sivuston koon, jota sivusto on suunniteltu ehjiksi, ja lisää tarvittaessa mukautuvia katkoksia. Joissakin tapauksissa, jos projektin budjetti on pieni ja jos vain pieni määrä kehitystyötä on käytettävissä, voit valita vain lisäämällä uusia mukautettavia raja-arvoja pienemmille näyttö- / mobiilikeskisuuksille. Tämä tarkoittaa sitä, että sallisit suurempien näyttöjen käyttämisen samassa ulkoasussa - ehkä 960 breakpoint -versiossa, joka oli se, minkä sivuston todennäköisesti alun perin suunniteltu.
Adaptiivisen lähestymistavan yläpuolella on, että voit hyödyntää nykyistä sivuston koodia paremmin, mutta yksi haittapuolista on, että luot eri ulkoasumalleja jokaiselle valitulle taitopisteelle. Tämä vaikuttaa työn vaativuuden kehittämiseen ja ylläpitämiseen pitkällä aikavälillä.
Suunnitteluohjaus
Eräs vahvuus verkkosivustolla on, että niiden sujuvuus sallii niiden sopeuttamisen ja tukemisen kaikissa näytön kokoluokissa vastakohtana vain ennalta asetetuista raja-arvoista, jotka määritellään mukautuvassa lähestymistavassa. Tosiasia on kuitenkin se, että reagoivat sivustot saattavat näyttää hyviltä tiettyjen avainkoon koon mukaan (tyypillisesti koot, jotka vastaavat suosittuja markkinoilla olevia laitteita), mutta visuaalinen muotoilu jakautuu usein näiden suosittujen päätöslauselmien kesken.
Esimerkiksi sivusto voi näyttää hyvältä 1400 pikselin laajakuvanäytöllä, 960 pikselin keskikokoisella kokoisella näytöllä ja pienellä näytöllä 480 pikseliä, mutta entä näiden koon välisten tilojen välillä. Suunnittelijana sinulla on vain vähän hallitsematonta näiden välissä olevien koon ja sivun visuaalinen ulkoasu näissä kooissa on usein vähemmän kuin ihanteellinen.
Adaptiivisella verkkosivustolla sinulla on paljon enemmän suunnittelun hallintaa erilaisten asettelujen käytössä, koska ne ovat kiinteitä kokoja, jotka perustuvat vakiintuneisiin raja-asentoihin. Nämä hankalat väliset valtiot eivät ole enää ongelma, koska olet huolellisesti suunnitellut jokaisen "look" (eli kukin breakpointin näyttö), joka toimitetaan vierailijoille.
Niin houkutteleva kuin tämä suunnittelumallin taso saattaa kuulostaa, sinun on tiedostettava, että se tulee hinnasta. Kyllä, sinulla on täysi hallinta jokaisen taitopisteen ulkoasua varten, mutta se tarkoittaa, että sinun on investoitava suunnitteluun tarvittava aika kunkin näistä ainutlaatuisista asetteluista. Mitä enemmän rajapintoja haluat suunnitella, sitä enemmän aikaa sinun on käytettävä tähän prosessiin.
Tuen leveys
Sekä herkkä ja mukautuva web-suunnittelu nauttivat melko tukevasta tuesta, varsinkin moderneissa selaimissa.
Adaptiiviset verkkosivustot edellyttävät joko palvelimen puolella olevia komponentteja tai Javascriptia näytön koon havaitsemiseen. On selvää, että jos mukautuva sivusto tarvitsee Javascriptia, se tarkoittaa, että selaimen on oltava käytössä, jotta kyseinen sivusto toimisi oikein. Tämä ei voi olla suuri huolenaihe, koska useimmat ihmiset saavat Javascriptin selaimissaan, mutta milloin tahansa sivustolla on kriittinen riippuvuus mistään, se on huomattava.
Vastaavat verkkosivustot ja mediakyselyt, jotka palvelevat niitä, toimivat hyvin kaikissa moderneissa selaimissa. Ainoat ongelmat ovat Internet Explorerin vanhimmat versiot, koska versiot 8 ja uudemmat eivät tue mediakyselyjä . Tämän ongelman ratkaisemiseksi käytetään usein Javascript-polyfilliä , mikä tarkoittaa, että Javascript on riippuvainen myös ainakin IE vanhimmista versioista. Tämä ei ehkä ole kovinkaan huolestuttavaa, varsinkin jos sivustosi analyysi osoittaa, että et saa paljon kävijöitä, jotka käyttävät näitä vanhempia selainversioita.
Tulevaisuus
Reagoivien verkkosivustojen nestemäinen luonne antaa heille etulyöntiaseman sopeutumiskykyisten sivustojen suhteen, kun kyseessä on tulevaisuusystävällisyys. Tämä johtuu siitä, että vastaavia sivustoja ei rakenneta vastaamaan aiemmin määritettyjä raja-arvojen sarjoja. Ne sopeutuvat sopiviksi kaikkiin näyttöihin , mukaan lukien ne, jotka eivät välttämättä ole markkinoilla tänään. Tämä tarkoittaa, että reagoivien sivustojen ei tarvitse olla "kiinteät", jos uusi näytön erotuskyky yhtäkkiä tulee suosittu.
Kun tarkastelemme laitteen maiseman uskomattomia lajikkeita (elokuusta 2015 lähtien markkinoilla oli yli 24 000 erilaista Android-laitetta), sillä sivustolla, joka parhaimmillaan mahtuu tähän laajaan valikoimaan, on kriittisesti tärkeä tulevaisuuden kannalta. Tämä johtuu siitä, että maisemaa ei todennäköisesti tule tulevaisuudessa vähemmän monimuotoiseksi, mikä tarkoittaa, että tiettyjen näyttöjen tai koon suunnittelusta tulee mahdotonta, ellemme ole jo saavuttaneet tätä todellisuutta.
Jos vertailutapahtuma on toisinpäin, jos sivusto on sopeutuva eikä siinä löydy uusia markkinoiden kannalta tärkeitä päätöslauselmia, silloin saatat joutua lisäämään kyseinen taittopiste luomiisi sivustoihin. Tämä lisää suunnittelua ja kehitysaikaa projekteihin, ja se tarkoittaa, että näitä mukautuvia sivustoja on seurattava jatkuvasti sen varmistamiseksi, että markkinoille ei ole lisätty uusia raja-arvoja, jotka on lisättävä sivustoon. Jälleen, koska laitteen monimuotoisuus on se, mitä se on, jatkuvasti tarkistaa uusista kokoluokista ja ottaa ne käyttöön uusilla raja-arvoilla, on jatkuva haaste, jolla on vaikutusta työhön, jota sinun on tuettava sivustolle ja ylläpidon kustannuksista. yritys tai organisaatio, jolle sivusto on tarkoitettu.
Esitys
Responsive web design on pitkään syytetty (epäoikeudenmukaisesti niin monissa tapauksissa) on huono ratkaisu download nopeus / suorituskykyä näkökulmasta. Tämä johtuu suurelta osin siitä, että tämän lähestymistavan alkuvuodesta monet web-suunnittelijat yksinkertaisesti kiinnittivät pieniä näyttösovelluksia kyselyihin sivuston olemassa olevalle CSS: lle. Tämä pakotti suurille näytöille tarkoitetut kuvat ja resurssit toimitettavaksi kaikkiin laitteisiin, vaikka pienemmät näytöt eivät olisikaan käyttäneet niitä lopullisessa asettelussaan. Reagoiva muotoilu on tullut kaukaa jo näinä päivinä, ja todellisuus on se, että laatuun reagoivat sivustot eivät nykyään kärsi suorituskykyongelmista.
Hidas latausnopeus ja paisutetut verkkosivustot eivät ole reagoiva verkkosivustoongelma - se on ongelma, joka löytyy kaikista verkkosivustoista. Kuvat, jotka ovat liian raskas, syötetään sosiaalisesta mediasta, liiallisista skripteistä ja paljon muuta ja painavat sivuston alas, mutta sekä reaaliaikainen että mukautuva verkkosivusto voidaan rakentaa nopeasti ladattavaksi. Tietenkin ne voidaan myös rakentaa tavalla, joka ei tee suorituskykyä etusijalle, mutta tämä ei ole itse ratkaisun piirre, vaan pikemminkin heijastus tiimin, joka oli mukana sivuston kehittämisessä.
Beyond Layout
Yksi adaptiivisen web-suunnittelun tärkeimmistä näkökohdista on se, että sinulla ei ole vain valvontaa sivuston suunnittelua varten asetetuista raja-arvoista, vaan myös resursseja, jotka toimitetaan näille sivuston versioille. Tämä tarkoittaa esimerkiksi, että verkkokalvon kuvia voidaan lähettää vain verkkokalvon laitteille, kun taas verkkokalvonäytöt saavat parempia kuvia, jotka ovat pienempiä tiedostokokoa. Muut sivuston resurssit (Javascript-tiedostot, CSS-tyylit jne.) Voidaan toimittaa älykkäästi vain, kun niitä tarvitaan ja niitä käytetään.
Tämä adaptiivisen web-suunnittelun käyttö menee paljon pidemmälle kuin yksinkertainen yhtälö "jos asennat verkkosivustoa, mukautuva voi olla helpompi käyttää." Kaikki sivustot, mukaan lukien täydelliset uudelleensuunnittelut, voivat hyötyä älykkäämmistä lähestymistavoista räätälöityyn kokemukseen.
Tämä skenaario osoittaa tämän "reagoivan vs. adaptiivisen" keskustelun värikkään luonteen. Vaikka onkin totta, että mukautuva lähestymistapa saattaa olla paremmin sopiva kuin reitin mukauttaminen, se voi myös olla erinomainen ratkaisu täydelle uudelleensuunnittelulle. Vastaavasti joissakin tapauksissa olemassa olevan sivustokoodipohjan kohdalla voidaan lisätä reagoiva lähestymistapa, jolloin sivustolla on kaikki täysin reagoivaan lähestymistapaan liittyvät edut.
Mikä lähestymistapa on parempi?
Kun kyseessä on herkkä tai mukautuva web-suunnittelu, ei ole selvää "voittajaa", vaikka vastaava on varmasti suosittu lähestymistapa. Todellisuudessa "parempi" lähestymistapa riippuu tietyn hankkeen tarpeista. Tämän lisäksi ei tarvitse olla "tai / tai" tilannetta. Monet web-ammattilaiset ovat rakennushankkeita, jotka yhdistävät parhaiten reagoivan web-suunnittelun (nesteen leveydet, tuleva tuki) ja mukautuvat suunnittelun vahvuudet (paremman suunnittelun ohjaus, sivuston resurssien älykkäät lataukset).
Tämä lähestymistapa tunnetaan yleisesti nimellä RESS (Responsive Web Design ja Server Side Components), jossa ei ole todellakaan "yhtä kokoa sopiva ratkaisu." Sekä reagoiva web-suunnittelu että mukautuva omaavat vahvuudet ja haasteet, joten sinun on määritettävä, mikä toimivat parhaiten omalla projektillasi tai jos hybridi ratkaisu todella sopii sinulle parhaiten.