Varhaisten verkkosivustojen kehittäjien ei tarvitse huolehtia paljon verkkosivujen suunnittelusta, koska käyttäjät näkisivät ne tietokoneissa ja niillä tietokoneilla oli kiinteä näytön resoluutio. Mobiiliversion myötä yhä useammat ihmiset etsivät mobiililaitteitaan - tabletteja tai matkapuhelimia - tietoja. Siksi sivuston kehittäjille on tullut välttämätöntä luoda verkkosivusto, joka palvelee kaikkea Windows-tietokoneesta mobiililaitteisiin. Tässä artikkelissa selitetään ero mukautuva vs. reagoiva web-suunnittelu ja voit päättää, mikä on parempi sinulle ja organisaatiossasi.
Responsive Web Design
Responsive Web Design sisältää ylimääräistä koodausta ja käyttää mitä kutsutaan "nestejärjes- telmiksi". Numerot on määritelty prosentteina pikselien tarkan määrän sijaan. Tämä tekee saman sivustokoodin renderöidä oikein tietokoneen näytöllä ja matkapuhelimen näytöllä. Niinpä riippumatta siitä, kuinka kokoasi muutat näytön kokoa, sama sivusto on helppo lukea. Pienemmille verkkosivustoille teksti ja kuvat kulkevat helposti näytön tilan avulla ja sopivat siihen rikkomatta verkkosivustoa tai rajaamalla sivuston osia.
Responsive web design lähestymistapa tekee pakolliseksi käyttää CSS3 sijaan vain CSS. Se käyttää myös skaalautuvia kuvia ja nesteverkkoja, joita on vaikea koodata.
Adaptive Web Design
Adaptive web design on myös keskittynyt esittämään nähtävissä verkkosivuilla tabletteja ja matkapuhelimia lisäksi PC-näytöt. Lähestymistapa on kuitenkin hieman erilainen. Reagoivassa web-suunnittelussa joustavuus mahdollisti ilmaisen tekstivirtauksen ja kuvien kokoamisen eri näytöille.
Adaptiivisessa web-suunnittelussa kehittäjät käyttävät ennalta määrättyjä näytön kokoja ja koodia vastaavasti. Eli kun käyttäjä päätyy verkkosivustoon, verkkosivusto määrittää käytettävän laitteen tyypin ja esittelee kyseisen laitteen näytön kokoa varten suunnitellun verkkosivuston. Joissakin tapauksissa sisältö voi vaihdella eri laitteissa.
Esimerkiksi kehittäjät harkitsisivat 1280 x 800 pikseliä tietokoneille, 8 "tabletteja ja 5" matkapuhelimille. Adaptiivisen web-suunnittelun alku- koodi sisältää näytön tunnistuksen. Jos se on tietokone, näytä verkkosivuston PC-versio. Jos se on 8 "tabletti, näytä verkkosivuston tablet-versio ja samoin, jos laite on matkapuhelin, näytä verkkosivuston mobiiliversio. Tämä saavutetaan käyttämällä IF-lauseketta, jota seuraa eri ulottuvuudet täsmälleen kuvapisteinä pikemminkin kuin prosenttiosuutena.
Jos uudet laitteet tulevat eri näytön tarkkuudella, kehittäjien on palattava koodaukseen sisällyttämään uudet näyttöresoluutiot. Sopeutuvassa web-suunnittelussa on siis joitain mahdollisuuksia leikata pienempiä laitteita, jos kehittäjät eivät ole varovaisia.
Vastaavaan web-suunnitteluun verrattuna adaptiivinen web-suunnittelu helpottaa koodia ja useimmat kehittäjät valitsevat jälkimmäisen reagoivan web-suunnittelun yli.
Responsive vs Adaptive web design
Vastaavat verkkosivustot on vaikea koodata. Koodi on monimutkainen ja käyttää prosenttiarvot kiinteiden pikseliarvojen sijasta. Se tarvitsee hyvää keskittymistä rakentaa verkkosivusto, joka laskee laitteiden näytön koon mukaan. Päinvastoin on helpompi luoda eri verkkosivustoja eri laitteille, kuten adaptiivisessa web-suunnittelussa. Vaikka työ onkin enemmän mukautuvassa web-suunnittelussa, kun kehittäjät tekevät erilaisia verkkosivustoja eri laitteiden koosta, se on silti helpompaa kuin vastaava web-suunnittelu.
Koska markkinoilla on liikaa mobiililaitteita, kehittäjät eivät välttämättä voi sisältää kaikentyyppisiä näytön resoluutioita. Tämä johtaa sivustojen rajaamiseen pienempiin näyttöihin, kun käytetään adaptiivista web-suunnittelutapaa.
Adaptiiviset verkkosivustot ovat vähän hitaita lataamisessa, sillä verkkosivulla on ensin selvitettävä, mitä laitetta ja mitä näytön tarkkuutta käytetään. Tämän perusteella siihen liittyvä verkkosivuston versio ladataan laitteen näytölle. Reaktiivisen web-suunnittelun tapauksessa käytetään yhtä koodia, ja se kutistuu automaattisesti mobiilitäyttöjen mukaan.
Haluat ehkä myös tarkastella tätä viestiä MSDN-nimikkeellä Miksi mieluummin mukautuva web design yli herkkä web design.
UPDATE: Linkitetty sivu ei ole käytettävissä Microsoftissa. Haluat ehkä tarkistaa SharePoint Responsive Web Design -ohjelman.
