Responsive webdesignista on tullut "catch-all" termi, jolla verkkosivustosi toimii hyvin alhaisilla resoluutioilla.
Älypuhelimet mullistivat mobiiliverkon, ja tabletit heittävät toista jakoavainta hammaspyöriinsä kasvavalla suosiolla. Kaikkien näkökohdat huomioon ottaen verkkosivustolla voi olla kokemusta matalan resoluution älypuhelimesta, keskitason resoluution tabletista tai korkean resoluution työpöydästä tai kannettavasta tietokoneesta. Kun heittävät verkkokalvonäytöt sekaan, potentiaalisten näytön koot ovat huimaavia. Ihannetapauksessa sivustosi näyttää ja toimii gracefully kaikilla edellä, missä tahansa päätöslauselmassa.
Responsive webdesign sinänsä on prosessi tehdä verkkosivuilla työtä hyvin pieniä näytöt, erittäin suuret näytöt ja milloin tahansa päätöslauselman välillä.
Viime vuosina teollisuus on kehittänyt kollektiivisesti lyhyen luettelon parhaista käytännöistä. Monet näistä käytännöistä keskittyvät jälkiasentamaan verkkosivustoja, jotka on tarkoitettu korkean resoluution pienemmille koolle. Toiset alkavat mobiililaitteissa ja toimivat aina suurempien näkökulmien puitteissa, optimoimalla tarvittaessa. Kaikki nämä käytännöt voidaan yleensä luokitella joko reagoiviksi tai mukautuviksi asetteluksi.
Reagoivat asettelut toimivat yleensä paremmin kuin adaptiiviset asettelut, mutta joissakin tapauksissa (esimerkiksi monimutkaiset verkkosovellukset) mukautuva lähestymistapa voisi palvella paremmin käyttäjille. Kummassakin tapauksessa tavoitteena on, että sivustosi näyttää aina parhaansa halutusta resoluutiosta.
Useimmat ihmiset käyttävät mediakyselyjä, kuten ne ovat kallioperäisiä ellei tarvitset tukea IE8: lle tai alla. Niille meistä, joilla on edelleen yleisö IE6 - 8: ssa, Scott Jehl on luonut JavaScript-polyfilli nimeltä Respond.js että asiat toimivat.
Ennen, monet webdesigners olivat vähäistä kommunikaatiota kehittäjien kanssa kanavanvaihtoon asti. Nyt suunnittelijoiden ja kehittäjien on kuitenkin työskenneltävä yhdessä suunnittelu- ja kehitysprosessin kautta, jotta kaikki toimisi sujuvasti. Käyttäjäanalyysistä, mitä voidaan tai jota ei voi järjestellä muutettaessa visuaalisuunnittelijoita - suunnittelijat ja kehittäjät ovat lähempänä kuin koskaan, ellei sama henkilö. Jos etsit inspiraatiota siitä, mitä reagoivat tai mukautuvat mallit näyttävät, MediaQueri.es on suosittu webdesign-galleria, jossa on neljä verkkosivustosta.
Kun idea reagoivasta webdesignistä alkoi ensin saada maata, sopeutumistekniikat hallitsivat jonkin aikaa. On helpompaa siirtyä suunnitteluun ja kehittämiseen näille asemoille, vaikka ne vaativat enemmän työtä kuin niiden reagoivat osat. Tämä on myös reitti, jota monet ihmiset tekevät, kun olemassa olevan verkkosivuston jälkiasennus on helppoa. Adaptiivisten asettelujen luonteesta johtuen ne antavat paljon enemmän hallintaa verkkosivujen suunnittelulle. Sinun tarvitsee vain suunnitella tiettyjä katseluosastoja, ja selaimet näyttävät vain korkeimman, joka sopii sen leveyteen. Nämä ulkoasut ovat niitä, jotka "napsauttavat", kun säätöä muutat selainikkunasi kokoa. Itse asiassa, jos kokoaisi ikkunasi pienemmäksi kuin 1024 pikseliä, näet tämän äkillisen muutoksen, josta puhun, koska tämän verkkosivuston ulkoasu sopeutuu keskittymään keskiraskaaseen näkymäkenttään.
Kehitettäessä mukautuvaa kehitystapaa työ on melko helppoa. Ennen kuin vastaus webdesignista tuli asia, olet yksinkertaisesti suunnitellut yhden ulkoasun ja kehittänyt sen. Nyt voit suunnitella useampia näkymäportteja ja kehittää niitä. Yleensä on helpompaa aloittaa matalan resoluution näkökulmista ja työskennellä matkalla. Jos aloitat korkean resoluution näkökulmista ja alas, asiat saattavat päätyä hieman ... kompaktiksi. Ja kun matkustat mobiiliin, sekaisin.
Suunnitelluille katselusummiesi määrä on täysin sinun ja kehittäjän tavoin, ja kehität käyttäjiesi perusteella suunnitelman. Jos nykyinen sivuston analytiikka näyttää käyttäjiä enimmäkseen pienillä ja keskisuurilla resoluutioilla, suunnitelkaa niille. Haluat vähintään kolme: yksi matalan resoluution kuvakäytöksistä (älypuhelimista), keskisuuret näkymät (tabletit) ja yksi korkean resoluution näytöille (pöytätietokoneet ja kannettavat tietokoneet). Ihannetapauksessa suunnittelu kuudelle on standardi, jossa on korkea ja matala tarkkuusasettelu jokaiselle edellä mainituista kolmesta näkökulmasta. Koska liian paljon enemmän kuin tämä tekee kehityksen ja ylläpidon liian paljon käsitellä, niin varo.
Adaptiivisen asettelun kehittäminen on varsin yksinkertaista. Olettaen, että olet työskennellyt suunnittelija (tai suunnittelija) get-go: n kanssa, se on kuin perinteisen verkkosivuston kehittäminen. Aloitat kehittämällä sivustoa mobiilissa matala-tarkkuusnäkymässä. Kun olet tehnyt tämän, käytämme mediakyselyt laajentaaksesi korkean resoluution näytötasettelun ulkoasua. Alla on matala, keskikokoinen ja korkean resoluution näyttömediakysely:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Tässä "snap" tulee sopeutuvasta lähestymistavasta. Koska kohdistamme useampia yleisnäkymän resoluutioita, menemme yhdestä toiseen kun ikkunan koon muuttaminen voi aiheuttaa asettelun hypätä. Kuten aiemmin mainitsin, adaptiivinen suunnittelu ja kehittäminen on vain erittäin hyödyllistä jälkiasennusta varten tai monimutkaisten web-sovellusten kannalta. Suunnittelu ja kehittäminen tälle monelle asettelulle riippumattomille katselukentille on paljon enemmän haasta, jos sitä ei tarvita.
Tunnetuista suunnitteluprosenteista ja kehityksestä on nykyään käytännöllinen lähestymistapa. Vaikka se tarjoaa pienemmän hallinnan asettelua verrattuna mukautuva lähestymistapa, se on paljon vähemmän työtä toteuttaa ja ylläpitää koska sinulla on teknisesti vain yksi layout. Se on myös räätälöity verkkosivustolle, ja se on avainasemassa. Voit tehdä omat raja-arvosi perustuen siihen, milloin suunnittelu rikkoo tai ei näytä tarkoitetulta.
Responsive-asettelut sisältävät myös neste-asettelut. Ennen reagoivan webdesignin saamista nestemäiset järjestelmät olivat suosittuja - asetteluja käyttäen prosenttiosuuksia leveydelle. Vaikka ne varmasti toimivat hyvin useimmissa tapauksissa, se oli ennen kuin meillä oli älypuhelimet ja tabletit. Nyt useimmat nestemäiset asettelut täydentävät mediakysymyksiä hyvin alhaisilla ja erittäin korkeilla resoluutioilla. Muussa tapauksessa saatat päätyä erittäin kompakteisiin tai äärimmäisen isoihin asetteluihin.
Vaikka sinulla on erittäin yksinkertainen opas seurata mukautuva suunnittelu, reagoiva suunnittelu ei ole niin selkeä leikkaus. On kiivasta keskustelua, että selaimessa suunnittelu on paras tapa kehittää sitä - suunnittelemaan ja kehittämään samaan aikaan. Koska suunniteltaessa otetaan olennaisilta osilta kaikki näkökulmat, suunnitteluun liittyy enemmän työtä. Ihannetapauksessa haluamme pitää näkökulmat mielessä, muttei suunnittelua mihinkään tiettyyn. Jos mahdollista, yritä tavata keskellä; Keskity keskellä olevaan tarkkuusnäkymään samalla kun pidät mielessäsi asettelun mukautuvan alempaan ja suurempaan tarkkuuteen myöhemmin.
On erittäin tärkeää käyttää nykyisiä käyttäjäanalyysejä, jos sinulla on niitä. Jos sivustossasi on jo analyyttisiä tietoja, jotka näyttävät, että yleisösi lukee ensisijaisesti alhaisen resoluution näkökulmista, suunnitelma keskittyy niihin. Kohdista yleisösi , vaikka se merkitsisi huomiotta joitain parhaita käytäntöjä siellä. Lopulta verkkosivustosi palvelee niitä, eikä ihmisiä, jotka koota nämä "parhaat" käytännöt.
Kun suunnitteluvaihe on valmis, kehitys on paikka, jossa todellinen hauska alkaa. Kuten aiemmin mainittiin, jos sinulla on analyyttiset tiedot tyypillisestä yleisöstäsi, aloita sinne. Kun kehität ulkoasun, käytät mediakyselyjä, jotta se olisi reagoiva. Sen sijaan, että määrität asetetut näkymät, sen sijaan muutat selaimesi manuaalisesti, kunnes ulkoasu on katkennut. Kun näin tapahtuu, tämä on teeskentekopisteen leveys - lisää mediakysely, jotta voit korjata suunnittelun tauon ja jatkaa kokoa. Ihannetapauksessa voit tehdä tämän korkean resoluution laitteella, jotta näet kaikki näkymäportit. Kun varmistat, että sinulla on tuki alhaisille ja korkean resoluution näytöille, siirry testaukseen.
Harvoin voi kohdata verkkosivusto, joka käyttää mukautettua ratkaisua, kuten {$lang_domain} . Yleisesti ottaen suurin osa verkosta kuuluu joko vastattaviksi tai mukautuviksi ryhmiksi, kuten edellä on kuvattu, mutta joskus ihmiset luovat ja tekevät omat ratkaisunsa. {$lang_domain} tekee näin aloittamalla standardin alhaiset, keskisuuret ja suuret raja-arvot, sitten täydentämällä tarpeen mukaan välissä, kun layout taukoa. Tämän lisäksi asettelu on myös luonteeltaan nestettä jopa asetetun maksimitarkkuuden mukaan. Kun tämä on mielessäsi, luovu ja luo jotain, joka rikkoo normia!
Valitettavasti tosiaankin ei ole mitään hyvää ratkaisua selaintestien testaamiseen näillä asetelmilla vielä. Paras tapa lähteä testeistä on tehdä se manuaalisesti: lataa sivu puhelimeesi, tablet-laitteellesi, kannettavaksi tietokoneellesi ja muuhun. Voit käyttää myös selaimesi katselusuihkuttajaa, jos se tukee tällaista laajennusta. Ripple Emulator on laajennus, jota käytän kromissa testata joitain matalan resoluution näkökulmia. Vaikka laitteiden testaaminen on epävarmaa, se antaa tarkemman kuvan sivustosi toiminnallisuudesta. Käyttöliittymä, joka näyttää kunnolla emulaattorilta, voi itse asiassa tehdä varsin huonosti todellisessa laitteessa.
Niin laaja kuin tässä artikkelissa, tämä on yksinkertaisesti alustapaino asettelutyyppien kohdalla. On paljon tietoa reagoivista webdesign-menetelmistä, joita ei ole tässä artikkelissa; UI-elementtien ja typografian optimointi, reagoivat kuvat ja tiedotusvälineet, laitteen pikselisuhteet ja paljon muuta ei selitetä tässä. On kuitenkin olemassa runsaasti lähteitä tällaiseen tietoon, paljon enemmän tietoa tiheä muotoja. Koska idea reagoivasta webdesignista tuli esiin, olemme toimineet erittäin laajalla tietämyksellä aiheesta. Toivon selvittämällä eron asettelutyyppien välillä tässä, voit paremmin käsitellä ajatusta reagoivasta verkosta ... menettämättä kanireikää.
Yhteisö luo jatkuvasti uusia tekniikoita ja luo luovia ratkaisuja ongelmiin, jotka olemme vasta alkamassa. Joten kun on olemassa valtava määrä tietoa saatavilla reagoivasta webdesign siellä, se on käsite vielä alkuvaiheessa. Vaikka parhaita käytäntöjä ja yleisiä käyttötapauksia on helppo noudattaa, on aina kannustettava luomaan omia ratkaisuja ja luomaan oma ratkaisu. Jos sinulla on vinkkejä tai ehdotuksia niille, jotka haluavat vain päästä tai laajentaa osaamistaan vastaamaan webdesign ja kehitys, herättää keskustelun alla!
Esitetty kuva / pikkukuva, käyttää reagoiva kuva kautta Shutterstock.