Reagoivat verkkosivustot ovat verkkosivustoja, jotka sopeutuvat kaikkiin näyttökokoihin ja tarkkuuksiin paitsi työpöydällä myös mobiililaitteella, tabletilla ja joskus jopa TV: llä.

Valtiomiehen mukaan , mobiililiikenteen osuus oli 52,64% maailmanlaajuisesta liikenteestä vuonna 2017, mikä tarkoittaa verkkosivustoa ei hyvin optimoitu mobiililaitteille on menettää noin puolet liikenteestään . Vuoden 2018 loppuun mennessä odotetaan mobiililaitteiden maailmanlaajuisen liikenteen osuuden kasvaa 79 prosenttiin , mikä on poikkeuksellinen lisäys.

Yritykset, joilla ei ole mobiilisivustoa, ovat jäljessä hälyttävän nopeasti, koska Kahdeksan kymmenestä kävijästä lopettaa sitoutumisen verkkosivustolla, joka ei näy hyvin heidän laitteellaan. Käyttäjien on aivan liian helppoa painaa takaisin-painiketta ja kokeilla sen sijaan kilpailevaa yritystä Google sijoittaa jopa verkkosivut, jotka eivät ole reagoivia, haulla .

Voit suorittaa Googlen mobiililaitteille sopivan testin tässä .

Tarkoittaako tämä mitään siitä, että mobiili on tärkeämpää kuin työpöytä? Ei. 83% matkapuhelimen käyttäjistä sanoo että heidän pitäisi pystyä jatkamaan kokemusta työpöydällä, jos he haluavat.

Katsokaa tätä mobiililaitteille optimoitua eBay-versiota verrattuna siihen, miltä se näyttäisi, jos se torjua mobiililaitteille optimoitu. Voisitko edes harkita optimoimatonta versiota?

Suunnitellakseen verkkosivustoja, jotka voivat kilpailla nykypäivän Internetissä, web-suunnittelijat on pakko olla asiantuntijoita reagoiva web-suunnittelu (RWD). Mistä heidän pitäisi aloittaa?

Mobiilikäyttöinen lähestymistapa reagoivaan web-suunnitteluun

Mobile-first web-suunnittelu tarkoittaa mobiilisivuston suunnittelua ensin ja työstämistä työpöytäversioon asti. On olemassa useita syitä, miksi tämä lähestymistapa toimii hyvin.

1. Mobiilisivustoilla on enemmän käytettävyyteen liittyviä huolenaiheita (tämä johtuu pääasiassa näytön kiinteistöjen puutteesta), joten on käytännöllistä ja tehokkaampaa keskittyä ensisijaisesti mobiilisuunnitteluun.
2. Se on helpompaa skaalata mobiiliversiota kuin on pienentää työpöytäversio (jälleen, koska mobiilisivustoilla ei ole tilaa).
3. Mobiililaitteiden ensimmäinen verkkosuunnittelu auttaa arvioimaan uudelleen visuaalisesti ja toiminnallisesti tarpeellisia.

Verkkosivuston suunnittelu ensin reagoivaksi mobiililaitteeksi -palveluksi pakottaa suunnittelijat esittämään useita tärkeitä kysymyksiä, koska siellä on vähemmän näytön kiinteistöjä, joiden kanssa työskennellä. Tässä on kysyttäviä kysymyksiä:

• Onko tämä ominaisuus / toiminto todella tarpeen?
• Kuinka voimme ensin suunnitella jotain minimalistista mobiililaitteille, joka myöhemmin laajenee hyvin työasemille?
• Onko tämän visuaalisen vaikutuksen arvoinen aika, joka kuluu matkapuhelimeen lataamiseen?
• Mikä on ensisijainen tavoite ja mitkä visuaaliset elementit auttavat käyttäjiä saavuttamaan sen?

Katsomme hetkessä joitain reagoivia verkkosuunnitteluesimerkkejä. Nyt puhutaan siitä, mitkä laitteet, näytön koot ja verkkoselaimet ovat nykyään merkityksellisiä.

Mitkä näytön tarkkuudet ovat merkityksellisiä reagoivalle verkkosuunnittelulle?

Tässä on yleisimmät näytön tarkkuudet mobiililaitteiden, tablettien ja pöytätietokoneiden käyttäjille ympäri maailmaa. Kuten näette, päätöslauselmia on laaja, joten matkapuhelin, tabletti tai työpöytä eivät hallitse markkinaosuutta tällä hetkellä - tämä kertoo meille, että suunnittelijoiden tulisi ottaa huomioon ne kaikki, kun he ajattelevat reagoivaa verkkosuunnittelua.

• 360x640 (pieni matkapuhelin): 22,64%
• 1366 x 768 (keskimääräinen kannettava tietokone): 11,98%
• 1920x1080 (iso työpöytä): 7,35%
• 375x667 (keskimääräinen matkapuhelin): 5%
• 1440x900 (keskimääräinen työpöytä): 3,17%
• 720x1280 (suuri matkapuhelin): 2,74%

Aivan kuten laitteiden erittelyssä, meidän on segmentoitava tiedot sijainnin mukaan vastaamaan kohdeyleisömme käyttäjien väestötietoja (tai odotettuja käyttäjien väestötietoja). Kannattaa myös suositella suosittuja ratkaisuja, koska vaikka jotkin näytön koot eivät tällä hetkellä ole niin yleisiä, ne saattavat olla tulevaisuudessa. Tämä auttaa reagoivat suunnittelijat futuurikestävä UX, joka toimii myös silloin, kun markkinaosuus muuttuu.

Esimerkiksi 360x640-tarkkuudet (jotka vastaavat enimmäkseen Androidia käyttäviä Samsung-laitteita) ovat nousseet 5,43% viime vuonna. Suunnittelijat voivat käyttää tällaisia ​​arvokkaita oivalluksia päättää tärkeimmistä reagoivista katkaisupisteistä ennen verkkosivujen suunnittelun aloittamista.

Mitkä selaimet ovat suosittuja tänään?

Reagoivan verkkosuunnittelun tarkoituksena on tarjota saumaton kokemus millä tahansa laitteella, ja koska eri verkkoselaimet renderöivät verkkosivuja eri tavoin, verkkosivustot on testattava sen varmistamiseksi, että ne ovat yhteensopivia useiden mobiililaitteiden ja tietokoneiden selainten kanssa.

Vaikka verkkosivuston mittakaavan tekeminen oikeisiin reagoiviin rajapisteisiin on ensisijaisesti verkkokehittäjän vastuulla, verkkosuunnittelija päättää tarkalleen, kuinka reagoiva verkkosivusto sopeutuu erikokoisiin näyttöihin optimaalisen käyttökokemuksen luomiseksi.

Tässä on maailmanlaajuinen erittely verkkoselaimen markkinaosuus mobiililaitteille ja työpöydälle.

• Kromi: 55,04%
• Safari: 14,86%
• UC-selain: 8,69%
• Firefox: 5,72%
• Ooppera: 4,03%
• Internet Explorer: 3,35%

Reagoiva suunnittelu ei ole vain 'kaiken sovittamista', vaan myös sopeutumista laitteen laitteiston ja verkkoselaimen ominaisuuksiin yhtä hyvin kuin laitteen tarkkuus. Yksi esimerkki tästä voi olla se, että vaikka Google Chrome tukee CSS-ominaisuutta overscroll-behavior: (mikä määrittää, mitä tapahtuu, kun käyttäjä vierittää liian voimakkaasti näkymän reunaa kohti), se on ei tueta missään muussa verkkoselaimessa .

Reagoivan suunnittelun parhaat käytännöt

Poista kitka

Kuten aiemmin mainittiin, mobiilikäyttöinen lähestymistapa reagoivaan verkkosuunnitteluun auttaa suunnittelijoita arvioimaan, mikä on todella välttämätöntä, jotta käyttäjä voi saavuttaa päätavoitteensa.

Kun muodostamme tablet-version (ja myöhemmin työpöydän version), voimme sitten alkaa ajatella toissijaisia ​​tavoitteita ja mikro-vuorovaikutukset , käyttäjävirrat ja CTA: t (toimintakehotukset), jotka tekevät kyseisten käyttäjien tavoitteista saavutettavissa. Mikä tärkeämpää on, että me keskity ensin käyttäjän ensisijaisiin tavoitteisiin ja poistaa tarpeeton kitka se ei auta ensisijaisia ​​eikä toissijaisia ​​tavoitteita.

Ensisijainen tavoite voi olla tuotteen ostaminen, kun taas toissijainen tavoite voi olla uutiskirjeen tilaaminen (mikä voi johtaa ostoon myöhemmin).

Tässä on loistava esimerkki kitkan poistamisesta: Koska mobiilikäyttöliittymissä on tyypillisesti vaikeampi navigoida, olisi parasta vaihtaa yhden sivun kassalle mobiili verkkokauppa myymälöissä ja ota käyttöön monivaiheinen kassa vain työpöydän verkkokaupoissa.

Suunnittelu peukaloille

Reagoiva verkkosivujen suunnittelu on hankalaa siinä mielessä, että käyttäjät ovat vuorovaikutuksessa työpöydän verkkosivuston kanssa napsautuksilla, mutta mobiiliversio napauttamalla ja pyyhkäisemällä. Fyysisiä eroja on myös. Pöytätietokoneiden tietokoneet ovat yleensä pinnalla, kun taas mobiilikäyttäjät pitävät laitteitaan käsissään. Nämä erot muuttavat merkittävästi tapaa mobiilikäyttöliittymän suunnittelijat suunnitella napautuskohteita ja muita tärkeitä käyttöliittymän elementtejä, joiden kanssa käyttäjät ovat vuorovaikutuksessa.

Katsotaanpa joitain esimerkkejä:

• Ihmiset yleensä odottavat, että päätyöpöydän navigointi on yläosassa. matkapuhelimessa sen pitäisi kuitenkin olla alareunassa. Peukalot eivät pääse huipulle mukavasti.
• Muiden vuorovaikutteisten elementtien tulisi myös olla helposti saavutettavissa. Tämä tarkoittaa niiden pitämistä ruudun keskellä, koska peukaloiden on vaikeampi päästä laitteen näyttöjen sivuihin ja kulmiin.
• Jotta niitä voidaan hyödyntää helposti, tärkeiden linkkien ja CTA: n korkeuden tulisi olla vähintään 44 kuvapistettä (pienemmät kosketuskohteet ovat haitallisia käytettävyydelle).

Suositeltava lukeminen: Perusopas mobiilikäytettävyyteen .

Hyödynnä mobiililaitteiden alkuperäisiä laitteita

Mobiililaitteita (kuten laitekamera tai GPS-palvelut) ei ole varattu nimenomaan natiivisovelluksille, ja kuten aiemmin mainittiin, reagoiva verkkosuunnittelu ei tarkoita vain kaiken sovittamista. Kyse on myös sopeutumisesta laitteen ominaisuuksiin. Matkapuhelinverkkosuunnittelun osalta, koska mobiililaitteilla on helppokäyttöiset kamerat, jotkut mikro-vuorovaikutukset - kuten tietojen syöttö - ovat todella helpompia pienemmillä näytöillä, kunhan verkkosivustot hyödyntävät käytettävissä olevaa alkuperäistä laitteistoa.

Katsotaanpa joitain esimerkkejä:

• Luotto- / lisäkorttitarkistus (koska lomakkeet ovat usein hankalia matkapuhelimella)
• Valokuvien jakaminen sosiaalisessa mediassa, koska media on jo laitteellasi
• Kaksivaiheinen todennus (koska olet jo mobiililaitteellasi)
• Tarkista osakkeet / analyysit nopeasti (koska mobiilisovellukset yksinkertaistavat tietoja)
• Suoritetaan a verkkohaku äänellä (koska handsfree on helpompaa kuin kirjoittaminen)

Tee oletusarvoisesti asetteluista sujuvat / mukautuvat

Kaikkien käyttäjien työpöytäselainta ei maksimoida. Tämä tarkoittaa sitä, että vaikka suunnittelijoiden on otettava huomioon käyttäjien nykyisin käyttämien laitteiden reagoivat katkaisupisteet, heidän on myös otettava huomioon, mitä näiden katkaisupisteiden välillä tapahtuu.

Reagoivia katkaisupisteitä on käytettävä asettelun ja sisällön 'palauttamiseksi' uudelle laitteelle, mutta kaikkien välissä olevien kokojen huomioon ottamiseksi (vain siinä tapauksessa), asettelujen on oltava toisin nestettä (eli ne mukautuvat luonnollisesti / venyvät selaimen koon muuttuessa).

Pidä nämä vinkit mielessä suunnitellessasi nestemäisiä / mukautuvia asetteluja:

• Prosenttiyksiköt sallivat elementtien olevan nestemäisiä.
• Minimi- ja maksimileveyksien asettaminen voi mahdollistaa skenaarion 'mutta älä mene tätä pienemmäksi / suuremmaksi'.
• SVG-kuvamuotoja voidaan skaalata ylös- ja alaspäin menettämättä laatua, ja ne ovat tarkkuudesta riippumattomia (toisin kuin JPG- ja PNG-tiedostot, jotka eivät ole).

Älä unohda maiseman suuntaa

Puhuimme aikaisemmin tietyistä reagoivista katkaisupisteistä, mutta meidän on myös otettava huomioon, että nämä mobiilinäkymät voidaan näyttää myös vaakasuunnassa. Suoritettaessa sujuvaa ulkoasua, se tekee sisällöstä teknisesti mukautuvaa, menettää kohtuullisen palan muotokuva näkymä voi olla este käytettävyydelle ja saatavuudelle.

Navigointi on yleensä turvallista (joskus se on itse asiassa parempaa, koska käyttäjät liikkuvat yleensä vaakasuunnassa kaksi peukalot), mutta vierittämisestä tulee huomattavasti vaikeampaa, mikä on vähemmän kuin optimaalinen, koska käyttäjän on vieritettävä enemmän vaakasuunnassa.

Suunnittelijat saattavat haluta harkita suunnittelua myös maiseman katkaisupisteille; esimerkiksi pystysuoraan matkapuhelimeen pinottavat kaakeloidut elementit voidaan näyttää liukusäätimenä vasemmalla ja oikealla navigointipainikkeella, mikä tarkoittaa, että käyttäjän ei tarvitse vierittää.

Muista, että typografia voi olla myös reagoiva

Vaikkakin UX-suunnittelijat tyypillisesti pikseliyksiköitä käytetään verkkosivustojen suunnitteluun, varsinaisessa verkossa yksi piste ei välttämättä ole enää yhtä pikseliä, koska eri laitteilla on erilainen resoluutio. Esimerkiksi iPhone X: llä on 458 PPI (pikseliä tuumalla), joten missä pikselikoko pienenee, voimme saavuttaa terävämmän grafiikan samassa fyysisessä tilassa (Apple kutsuu tätä 'Retina' -tekniikaksi ja Android kutsuu sitä 'HDPI').

Tämä tarkoittaa, että esimerkiksi 16px-kokoinen fonttikoko näyttäisi suuremmalta tai pienemmältä joissakin laitteissa sen resoluutiosta riippuen. Verkkokehittäjät yleensä määritä fonttikoot käyttämällä em-yksiköitä , jotka ovat reagoivan yksikön tyyppi, jossa 1em on yhtä suuri kuin 1 piste.

Suunnittele luovutustyökalut, kuten Zeplin , Sympli , Ihme ja InVision voi auttaa suunnittelijoita tekemään yhteistyötä kehittäjien kanssa asioissa, jotka ovat yhdessä vastuussa. Suunnittelijat toteuttavat suunnittelun ja kehittäjät koodin, mutta kokonaisuudessaan tuotesuunnittelun työnkulku on tiimityötä, joka vaatii vankkaa viestintää.

Reagoiva suunnittelun suorituskyvyn optimointivinkki ja parhaat käytännöt

Reagoiva verkkosuunnittelu ei ole vain sen ulkonäkö, vaan myös sen toiminta ja tunne. Sivustojen mukauttaminen siten, että ne latautuvat nopeammin aiottuun laitteeseen, on yhtä tärkeää.

Laiska ladata elintärkeitä kuvia ja videoita

Kuvat ja videot muodostavat suuren osan verkkosivuston kokonaislatauskoolta, mutta sinun ei tarvitse ladata niitä kaikkia kerralla. On kaksi skenaariota, joissa median renderointia voidaan viivästyttää: Sivun alaosaa voidaan ladata käyttäjän vierittäessä sivun alaosaa, ja renderöinnin estävä media tulisi ladata ladattavaksi vasta, kun asettelun ja sisällön on ladattu. Tätä käytäntöä kutsutaan laiskaksi lataukseksi, jossa raskaiden, ei-tärkeiden elementtien lataaminen viivästyy sivun suorituskyvyn parantamiseksi.

Ehdollinen lataus

Joitakin verkkosivustoelementtejä ei ole tarkoitettu mobiilikäyttäjille tai ne eivät ainakaan ole erityisen kognitiivisen kuormituksen arvoisia. Haluamme, että mobiilisivustomme ovat yksinkertaisia, joten on järkevää piilottaa elementtejä tietyissä tilanteissa. Tästä huolimatta meidän on varmistettava, että emme tuhlaa selaimen resursseja ja kaistanleveyttä lataamalla nämä elementit, vaikka ne olisivat piilossa. Siksi on suositeltavaa sisällyttää nämä elementit vain tietyissä olosuhteissa.

Jälleen kerran kehittäjä voi saavuttaa tämän koodilla; Suunnittelijat voivat kuitenkin parantaa sivun suorituskykyä ilmoittamalla ehdoista, milloin ja missä tiettyjen elementtien pitäisi ja ei pitäisi olla.

Reagoivat kuvat

Kuten aiemmin mainittiin, joissakin laitteissa on enemmän pikseleitä tuumalla, mikä voi johtaa kuvien epäselvyyteen, jos niitä ei viedä oikealla tarkkuudella. Laitteen tarkkuudesta riippuen jotkut vaativat kuvia kaksinkertaisina (@ 2x), kolminkertaisina (@ 3x) ja jopa nelinkertaisina (@ 4x). Verkkoselaimet tukevat nyt elementtiä, joka valitsee oikean kuvan tarkkuuden laitteesta riippuen.

Reagoivien verkkosivustojen suunnittelijat voivat räätälöidä kuvat oikeaan laitteeseen huolehtimalla siitä, että ne vievät kaikki nykyisillä laitteilla käytettävät tarkkuudet (jos et ole varma, kysy kehittäjältäsi - viestintä on avain reagoivaan verkkosuunnitteluun).

Johtopäätös

Lankakehyksen luominen voi auttaa ryppyjen silittämisessä suunnitteluprosessin alkuvaiheessa, ja tämä toimii hyvin, kun lähestyt nopeasti mobiilia web-suunnittelua. Ehkä on reagoiva katkaisupiste, joka vaatii ylimääräistä huomiota, tai ehkä on olemassa konsepti, joka ei yksinkertaisesti ole tehokas mobiilin reagoinnin kannalta. On parempi löytää kuoppia tielle ennemmin kuin myöhemmin (ts. Ennen visuaalisen estetiikan lisäämistä).

Nykyaikaiset suunnittelutyökalut, kuten Adobe XD , Ihme ja InVision antaa tiimien testata prototyyppejä todellisilla laitteilla, keskustella palautteesta kontekstissa ja tehdä yhteistyötä tiiminä, kunnes asettelu toimii kaikissa tilanteissa.

Käyttämällä vähäistä UX-työnkulkua, jossa reagoiva suunnittelu perustuu sisäiseen testaukseen ja palautteeseen, varmistetaan, että käyttökokemus toimii saumattomasti kaikilla alustoilla ja näytön tarkkuuksilla ennen kuin se esitetään todelliselle käyttäjälle ensimmäistä kertaa.

• • •

Lue lisää ApeeScape Design Blogista:

• eCommerce UX - yleiskatsaus parhaista käytännöistä (infografiikan kanssa)
• Ihmiskeskeisen suunnittelun merkitys tuotesuunnittelussa
• Parhaat UX-suunnittelijoiden salkut - inspiroivia tapaustutkimuksia ja esimerkkejä
• Heuristiset periaatteet mobiililiittymille
• Ennakoiva suunnittelu: Kuinka luoda maagisia käyttökokemuksia

Perustietojen ymmärtäminen

Mitä ovat reagoivan suunnittelun raja-arvot?

Katkaisupisteet ovat tärkeimpiä hetkiä, kun muotoilu mukautetaan uuteen näytön kokoon; esimerkiksi katkaisupiste voitaisiin määrittää 320 pikselillä, joka on useimpien mobiililaitteiden näkymien vaakakoko.

Mikä on reagoiva verkkosivujen suunnittelu?

Reagoiva verkkosuunnittelu edellyttää verkkosivustojen suunnitteluprosessia, jotka mukautuvat kaikkiin laitteisiin, alustoihin ja näyttökokoihin sekä muodon että toiminnan suhteen.

Mitä tarkoittaa olla mobiiliystävällinen?

Mobiiliystävällisten verkkosivustojen suunnittelu tarkoittaa verkkosivustojen mukauttamista mobiililaitteisiin. Google määrittelee mobiiliystävällisyyden sen mukaan, täyttävätkö kosketuskohteet vähintään 44 x 44 kuvapisteen vähimmäisvaatimukset, ovatko fontit riittävän suuria lukemiseen ja leikkaako sisältö muun muassa näkymästä.