Elokuussa 2011 7,12% kaikista verkkosivustojen osumista maailmanlaajuisesti tuli kannettavasta mobiililaitteesta. Elokuussa 2012 tämä luku oli noussut 11,78 prosenttiin.

Me voimme kirjaimellisesti katsoa, ​​että tabletit ja älypuhelimet ovat oletusvalintasi Internet-yhteyden muodostamiseksi. Ihmiset ovat jo pitkään tottuneet verkkoon elämäsi olennai- sena osana, eivät halukkaita elämään toista päivää, edes toista hetkeä olematta jatkuvasti yhteydessä toisiinsa.

Tämä siirtyminen työpöydältä mobiiliin vaatii web-suunnittelijoiden uudelleen kohdentamista. Ei välttämättä poissa työpöydän suunnittelusta, mutta varmasti kohti mobiilisuunnittelua. Mobiililaitteiden läsnäoloa, kuten erillistä mobiilisivustoa tai mobiilisovellusta, voi lähestyä useita tapoja. Uusin ja yhä suosituin lähestymistapa on herkkä web-suunnittelu.

Responsive-suunnittelu ratkaisee tällaisen valtavan ongelman web-suunnittelijoille, että on helppo unohtaa se, että se herättää omat ongelmansa.

Tässä artikkelissa haluan keskustella sekä mahdollisuuksista että haasteista, jotka tulevat reagoivaan muotoiluun. Aion valottaa tätä uutta ajattelutapaa ja auttaa sinua tekemään tietoon perustuvan valinnan seuraavalle hankkeelle.

Reagoivan web-suunnittelun tarjoamat mahdollisuudet

Responsive web design on kyse siitä, että se on yksinkertainen. Ajatuksena on luoda yksi verkkosivusto, joka sopii kirjaimellisesti kaikkiin näytön kokoihin, olipa kyseessä pöytä- tai kannettava tietokoneen näyttö, tabletti tai älypuhelin maisema- tai pystyasetelmassa. Vastaavat verkkosivustot on suunniteltu joustavalla verkolla. He käyttävät mediakyselyitä määrittäessään näytön koon jokaiselle yksittäiselle vierailulle ja muokata sisältöä vastaavasti.

Tarkastellaan etuja, jotka tulevat reagoivan suunnittelun lähestymistapaan.

1. Huono kunnossapito

Herkällä suunnittelulla tarvitset vain yhden sivuston ylläpitämisen. Asettelun muuttuessa sisältö pysyy samana eri laitteiden välillä. Voit samanaikaisesti päivittää sisältöä tai korjata vikoja kaikille laitteille.

Breaking News

Esimerkiksi uutissivustoilla, kuten breakingnews.com tämä on suurta etua. Nopeasti muuttuva sisältö ja usein päivitettävät päivitykset edellyttävät erittäin korkeaa ylläpitoa. Herkkä muotoilu säästää aikaa, mutta myös rahaa.

Voit keskittyä yhteen ainoaan sivustoon ja laittaa kaikki resurssit kyseisen sivuston optimointiin ja ylläpitoon. Sinun ei tarvitse enää priorisoida tai käsitellä sivustosi eri versioita erikseen.

2. Merkkien johdonmukaisuus

Yhdellä verkkosivustolla, joka toimii sekä työpöydällä että mobiililaitteilla, on entistä helpompi säilyttää johdonmukainen brändi-identiteetti. Ei enää tyylioppaita, jotka on ilmoitettava useiden osapuolten, kuten eri virastojen, työpöydän ja mobiiliversion välillä.

Spigot Design

Reagoivan verkkosivuston ulkoasu ja tunnelma ovat yhdenmukaiset kaikissa näytön kokoissa. spigotdesign.com ylläpitää ainutlaatuista tuotemerkkikokemusta kaikissa laitteissa. Tämä helpottaa ihmisten tunnistamista verkkosivustolla riippumatta siitä, missä ja miten he käyvät.

3. Käytettävyys

Responsive web design on erittäin käyttäjäystävällinen. Paitsi, että kävijät voivat paremmin liittyä tuotemerkkiisi, jos he tunnistavat verkkosivustosi mobiililaitteilla, he tietävät myös paremmin, miten sitä käytetään. Jatkuva tyyli ja johdonmukainen sisältö on tärkeä, koska käyttäjät eivät odota sen olevan erilaiset vain siksi, että ne käyttävät eri laitetta.

Smashing Magazine

Hyvän käytettävyyden tärkeä osa on vastata käyttäjän odotuksiin. Jos onnistut tekemään sen, heillä on vähemmän ongelmia navigoida sivustossasi. smashingmagazine.com tekee lukijoista erittäin helppoa selata sivustoa kaikissa laitteissa ja pitää myönteisen käyttökokemuksen. Hyvä kokemus lisää mahdollisuutta toistuvaan vierailuun.

4. Ei uudelleenohjauksia

Se, että sinulla on vain yksi sivusto kaikille laitteille, tarkoittaa myös, että sinulla on samat sivun URL-osoitteet sisällön toimittamiseksi kaikille käyttäjille. Sinun ei tarvitse huolehtia uudelleenohjauksista tai yhteensopimattomuuksista eri laitteiden välillä.

Kun mainostat linkkiä, voit olla varma, että ihmiset voivat käyttää sitä suoraan, riippumatta siitä, missä he ovat, tai miten he käyvät sivustossasi.

Esimerkiksi uutiskirjeitä lähetettäessä on todennäköistä, että lukijasi avaa sähköpostisi mobiililaitteella. Et halua heidän joutuvan siirtymään pöytätietokoneeseen tai kannettavaan tietokoneeseen, ennen kuin he voivat avata linkkisi.

Sinun kannattaa myös tarjota sisältöäsi, olipa se matkapuhelimella vai ei.

5. Latausaika

Ne kävijät, jotka käyttävät verkkosivustoasi vakaan wifi- tai kaapeliliitännän kautta, eivät pysty poistamaan suhteellisen suuria paloja tietoja, kuten erityisiä animaatioita tai suuria kuvia. Toisaalta matkapuhelinkäyttäjät, jotka käyttävät 3G- tai 4G-yhteyksiä, ovat kiitollisia mahdollisimman vähän tietoja.

Boston Globe

Jälleen uutiskohteet, kuten bostonglobe.com käytetään usein matkoilla, esimerkiksi päivittäisen työmatkan aikana. Responsive-muotoilu antaa heille mahdollisuuden valita erittäin tarkka sisältö jokaiselle laitteelle tai esikokoa kuvia.

Reagoivan web-suunnittelun haasteet

Responsive web design on suhteellisen uusi lähestymistapa mobiiliversioon. Jotkut sanovat, että se on vain suuntaus, toiset sanovat, että se on uusi ajattelutapa. Henkilökohtaisesti, uskon nopeasti ja jatkuvasti muuttuvan verkon puitteissa, kaikkea voidaan pitää jonkin verran suuntauksena. Älkää menkö tähän liian syvälle. Katsotaanpa parhaillaan haasteita, joita meidän on voitettava rakentamaan onnistuneita reagoivia verkkosivustoja.

1. Kehitysaika

Luultavasti ilmeisin miinuspiste siitä, että rakennetaan vastaava sivusto on, että se vie enemmän aikaa. On selvää, että säännöllisen työpöydän sivustolle tarvitaan vähemmän valmisteluaikaa, vähemmän resursseja sen rakentamiseen, ja myös testaaminen vaatii vähemmän työtä.

Nykyisen verkkosivuston muuttaminen kestää kauemmin kauemmin kuin luoda tyhjästä. Jos aiot siirtyä mobiililaitteille ja tehdä niin tekemällä verkkosivustosi herkästi, älkää aliarvioitko työtä, jonka tarvitset myös nykyiseen työpöytäversioon.

2. Erilaiset laitteet eroavat toisistaan

Ajatus siitä, että voit yksinkertaisesti luoda yhden verkkosivuston, joka toimii yhtä hyvin millä tahansa laitteella, on myytti. Varmasti on vain yksi koodisarja ja sivustosi sisältö ja rakenne säilyvät samoina, mutta erilaiset laitteet edellyttävät erilaista ajattelutapaa.

Ihmiset selata verkkosivustoasi niiden hyvin erityisten tarpeiden ja tavoitteiden mukaan, puhumattakaan heidän ainutlaatuisesta käyttöympäristöstään.

Choice Response

Suunnittelijat choiceresponse.com ovat selvästi priorisoineet sisällönsä mobiilikäyttöön. Vaikka työpöytäversio voi näyttää paljon sisältöä kerralla, pienemmissä näytöissä sinun on tiedettävä tarkalleen, mikä on tärkeätä.

Kuvittele, että olet vastuussa julkisen liikenteen verkkosivustosta. Yksi käyttäjä voi käydä työpöydän versiossa, selailemassa kärsivällisesti, toivoen löytävänsä erikoisen tarjouksen viikonlopun matkalle. Samaan aikaan joku muu voi tarkistaa mobiiliversion, toivoen selvittää, mihin alustoihin hän olisi ajettava ennen kuin juna lähtee alle minuutissa.

Yksi verkkosivusto, kaksi tilannetta ja kaksi täysin erilaista käyttäjäkohtaista skenaariota. Jotta voit luoda suuren käyttäjäkokemuksen kaikille käyttäjille, sinun on harkittava, että ihmiset käyttävät erilaisia ​​laitteita eri olosuhteissa ja eri tavoitteissa.

3. Erilaiset laitteet tarjoavat erilaisia ​​vuorovaikutuksia

Työpöydän versio ei poikkea vain mobiiliversiosta hypoteettisella, mutta myös käytännöllisellä tavalla. Interaktio, joka toimii hyvin yhdellä laitteella, saattaa olla merkityksetön toisessa. Tämä johtuu pääasiassa siitä, että vuorovaikutuksessa työpöydän ja mobiililaitteiden kanssa eroavat toisistaan.

Kun käytämme pikanäppäimiä ja hyvin määriteltyä hiiren osoittimen, jotta voimme selata verkkosivustoa yhdellä laitteella, meillä ei ole muuta kuin sormimme toisella.

Forefathers

Vaikka työpöydän versio forefathersgroup.com sisältää useita linkkejä hover-over-tehosteella, suunnittelija käytti näitä vaikutuksia vain sellaiseen sisältöön, joka ei tehnyt sitä mobiiliversioon. Jatkossa sisällön priorisointi on erittäin tärkeää herkässä suunnittelussa.

4. Mediakyselyjen rajoitettu tuki

Vastaavat verkkosivustot toimivat mediakyselyjen avulla, joiden avulla määritetään jokaisen kävijän näytön koko ja näytetään sitten oikea asettelu.

Ongelmana on, että vanhat selaimet, erityisesti Internet Explorerin versio 8 ja vanhemmat, eivät tunnista mediakyselyjä. Tällä hetkellä noin 14% verkon käyttäjistä käyttää edelleen IE8: ta. 14% on merkittävä osa yleisöäsi, ja tavoitteesi mukaan väestötiheys saattaa olla suurempi.

Tämä ei tarkoita sitä, että verkkosivustosi näyttäminen sivuilla näillä vanhemmilla selaimilla ei ole mahdollista. Sinun tarvitsee vain olla tietoinen tästä, kun työskentelet mediakyselyjen kanssa. Ongelma voi välttää useilla eri tavoilla, kuten esimerkiksi täysin erillisen tyylitiedoston käyttäminen IE: lle tai verkkosivustosi suunnittelusta ensin.

Korpi

Liikkuvaan ensimmäiseen lähestymistapaan perustuva ratkaisu tarkoittaa, että vain tyylejä, jotka pitäisi soveltaa laajempaan ulkoasuun, ovat median kyselyssä, eivätkä mobiiliversion sovelluksissa. Tällä tavalla selaimet, joilla ei ole tukea mediakyselyille, näkee vain mobiiliversion.

5. Skaalautuvat kuvat menettävät tietoja

Toinen rajoitetun reagoinnin muoto on kuvien skaalaus. Skaalatut kuvat menettävät nopeasti yksityiskohtia ja siten niiden merkitystä. Pohjimmiltaan tosi rajoitus ei ole skaalaus itse vaan se, että skaalaus tapahtuu tarkasti näytön koon perusteella eikä kontekstissa.

Oliver Russell

Päällä oliverrussell.com tämä ongelma on ratkaistu erittäin hyvin. Kuvat järjestetään uudelleen, jotta ne voivat venyttää koko näytön läpi tarpeen mukaan. Tämä luo tarpeeksi tilaa, jotta useimmat kuvat eivät muutu lainkaan.

Vaihtoehtona skaalauskuvien kannalta saattaa olla niiden rajaaminen. Vielä niiden merkitys ja siihen liittyvä kokemus muuttuvat viime kädessä.

6. Navigointivalikot

Viimeisenä mutta ei vähäisimpänä, navigointivalikot muodostavat tärkeän osan mistä tahansa verkkosivustosta. Erityisesti monimutkaisemmissa työpöydän sivustoissa käytetään monikerroksisia pudotusvalikoita. Pienemmissä laitteissa kohtaat aina rajoitetun näytön kiinteistöä, mikä tekee intuitiivisten navigointiohjelmien suunnittelusta haasteen.

Starbucks

Suunnittelijat starbucks.com ovat päättäneet piilottaa navigointivalikon pienten ruutukokojen mukaan oletusarvoisesti. Vain kun vasemmassa yläkulmassa on pieni kuvake, eri sisältöluokat näkyvät sormenpitävinä painikkeina.

Jokaisella laitteella peukalosääntö on löytää tasapaino helposti saatavien tietojen ja huomaamattoman suunnittelun välillä. Älä keksitse pyörää uudelleen, jos et tarvitse.

Asiat harkita

Haluatko mennä reagoimaan on lopulta alas teille, mutta jos päätät kokeilla sitä, tässä on muutamia asioita, jotka kannattaa harkita ennen kuin aloitat.

Valmistus on avainasemassa

Sujuva reagoiva web-suunnittelu alkaa kauan ennen ensimmäistä valokuvamallia. Myös kauan ennen ensimmäistä raitausta. Hyvä valmistelu on avain onnistuneeseen suunnitteluun. Mitä paremmin olet valmis, sitä enemmän aikaa ja rahaa säästät lopulta.

Koska verkkosivustosi vaihtelee eri laitteissa, sinun on oltava selkeä kuva siitä, miten haluat rakentaa sisältöäsi näille laitteille. Mitä pienempi laite saa, sitä enemmän valintoja sinun on tehtävä sisällön prioriteetin suhteen.

Aloittaa alusta

Jos sinulla on jo olemassa oleva työpöytäsuunnitelma ja olet harkitsemassa liikkuvan läsnäoloa ensimmäistä kertaa, harkitse tätä huolellisesti.

Voit kierrättää mallin vanhasta työpöytäsivustosta, mutta koodin muuttaminen voi kestää kauemmin kuin aloittaa tyhjästä.

Älä keksitse pyörää uudelleen

Verkossa on paljon työkaluja ja resursseja, joiden avulla voit kehittää vastaavan sivuston.

Älä yritä keksimään pyörää luomalla uutta lähestymistapaa. Oppiminen muiden virheistä nopeuttaa kehitysaikaasi huomattavasti.

Testaa, testata ja testata uudelleen

Tämä ei ole mikään uusi, eikä se saa olla yllätys. Aikaisempi ja toistuva käyttäjän testaus on välttämätöntä mikä tahansa onnistunut muotoilu, reagoiva tai ei.

Eri käyttäytyminen ja suunnittelun haaste samaan aikaan kosketuksiin ja säännöllisiin näyttöihin vaativat liiallista testausta. Aloita testaus kaikilla omilla laitteillasi. Jos kaikki toimii, lainata laitteita ystävien ja perheen kanssa ja testata niitä. Viimeisenä mutta ei vähäisimpänä, käy sähkökaupassa ja kokeile sivustosi laitteilla.

Valmistatko asiakkaille mielekkäitä malleja? Oletko ratkaissut nämä ongelmat? Kerro meille kommentit.  

Esitetty kuva / pikkukuva, mobiili internet kuva Shutterstockin kautta.