Selailen internetiä päivittäin, useilla laitteilla. Käytän MacBook Pro-, iMac-, PC-, iPad-, iPhone- ja kyllä-televisiota. Joten se todella häiritsee minua, kun näen verkkosivustoja, joita ei ole optimoitu suurempien näyttösovellusten vuoksi tai jotka kestää kaksi minuuttia lataamaan mobiililaitteellani.

Olemme kaikki omaksuneet käsityksen reagoivan suunnittelun. Hyvin harvat väittävät sitä vastaan. Itse asiassa vain äskettäin äskettäin saanut vakuuttava repos on, että asiakas ei halua maksaa lisäaikaa. Mutta kuten kaikki uudet käytännöt, myytit ovat kasvaneet vastapainoksi.

Katsotaanpa, voimmeko rikkoa joitakin näistä väärinkäsityksistä ...

Responsive design on kyse mobiilista

Kyllä mobiiliviihde on räjähtävä ja kyllä ​​se on liikkeellepaneva voima herkkä muotoilu, mutta kun ajatellaan reagoivaa suunnittelua, meidän on harkittava enemmän kuin vain mobiili. Verkkokalvojen ja videopeliselainten käyttöönoton myötä internetin käyttäjät katsovat verkkosivustoja suuremmilla näyttösovelluksilla ja monissa eri konteksteissa.

Yritä ottaa huomioon erilaiset käyttäjäympäristöt suunniteltaessa ja kehitettäessä vastaavia verkkosivustoja. Sinun täytyy miettiä, mitä laitetta käyttäjä käyttää: onko käyttäjä mobiililaitteessa vai kotona television edessä? Sinun täytyy miettiä, missä käyttäjä sijaitsee: onko käyttäjä verkossa ruokakaupassa tai retkeilemässä erämaassa? Hyvällä sisällöllä ei ole mitään, jos sivustosi kestää kymmenen minuuttia, kun käyttäjät istuvat rannalla, jolla on margariitti.

Sisältö on kaiken, mutta konteksti on kaikkialla ja se on jotain, jolla ei ole mitään hallintaa. Siksi sisältösi on realistisesti skaalattava kaikenkokoisille, suurille tai pienikokoisille ratkaisuille. Käytössämme on joukko työkaluja, joiden avulla voimme manipuloida asetteluja, optimoida tekstinkokoja ja lisätä suorituskykyä mihin tahansa kontekstiin, joten muista käyttää niitä.

Muista, että konteksti siirtyy koko ajan, joten siksi on niin tärkeää tasapainottaa visuaalisen asettelun, käyttäjän tarpeet ja suorituskyky lähestyttäessä reagoivaa muotoilua. Se ei ole vain mobiili.

Reagoiva muotoilu ei toimi kaikissa käyttötapauksissa

Minulla oli tapana väittää, että reagoiva web design ei toimi kaikissa projekteissa ja että se riippuu käyttötapauksesta. No, olen äskettäin muuttanut näkemääni ja uskon vakaasti, että jos aiomme olla käyttäjälähtöisiä suunnittelijoita ja kehittäjiä, meidän on lähestyttävä jokaista hanketta miellyttävän muotoilun näkökulmasta.

Kiinteät leveys-sivustot voivat rajoittaa suurempia ja pienempiä näytön tarkkuuksia. Lähtökohtana on, että verkkosivustojemme on oltava kaikkien ulottuvilla riippumatta siitä, mitä laitteita tai näyttöresursseja he käyttävät ilman rajoituksia.

Responsive design on laitteen laukaisupisteistä

Olen huomannut kehityssuuntausta, jossa suunnittelijat ja kehittäjät rakentavat reagoivia verkkosivustoja, jotka skaalaavat vain tiettyihin laitteiden ratkaisuihin, ja olen syyllinen myös tähän. Kolme yleisintä laitetta ovat tietenkin kannettavat tietokoneet / työasemat, iPadit ja iPhones (tai muut mobiililaitteet). Suunnittelijoina meidän on ymmärrettävä, että reagoiva muotoilu koskee suunnittelupisteitä ja tekee sisällön luettavaksi ja kaikkien ulottuville, ei vain tiettyjen laitteiden käyttäjille.

Se on sanottu, että jos suunnittelet verkkosivustoja ohjelmistossa, on tärkeää, että tietynlaiset puitteet, joilla on raja-arvot, päätyvät pois. Ehdotan luomaan omasi. Optimoi asettasi sisällön mukaan. Paras tapa selvittää, mitkä raja-arvot toimivat parhaiten on piirtää muutamia lanka-alueita ensin saadaksesi idean, joten voit aloittaa määrittämään pikseleitä valitsemassasi ohjelmistossa. Varmista, että työskentelet samalta ruudukolta, kun viirata ja suunnittele.

Jos olet kuin minä, voit koodata wireframes ja luoda elävä prototyyppi. Tämä on auttanut minua paljon reagoivaan työnkulkuuni, koska voin luoda nestemäisen mallin ja lisätä rajapintoja muotoiluun, kun muotoilu hajoaa sen sijaan, että yrittäisivät pilkkoa pikseleitä Photoshopissa.

Responsive design vahingoittaa typografiaa

Yksi suurimmista ongelmista, joita olen huomannut useilla reagoivilla verkkosivustoilla, on, että typografia heitetään susille, kun suunnittelijat ja kehittäjät päättävät käyttää laitteen raja-arvoja suunnittelupisteiden yli. Mielestäni laitteen valitseminen mallin perusteella osoittaa, että julkaisematon sisältö on täysin virheellinen ja että käyttäjä käyttää tätä sisältöä. Sisällön tulisi säilyttää sen luettavuus, kunnes se on sovitettava säilyttämään sen luettavuus. Sisällöstä tulee aina kuninkaan, ja sisällön saavutettavuus ja luettavuus on aina oltava etusijalla.

Yksi tapa, jolla haluan käsitellä sisällön luettavuuden ylläpitämistä reagoivassa suunnittelussa, on käyttää suhteellisia yksiköitä kuten ems fonttikoon, pehmusteiden, marginaalien ja layoutin suhteen. Responsive design on kyse suhteellisista asetteluista ja mielestäni ems sopii täydellisesti.

Ems ovat suhteellisia yksiköitä, jotka ovat skaalautuvia elementtien elementtien fonttikokoon, ne voivat säästää paljon aikaa ja vaivaa, ja ne auttavat säilyttämään koko ulkoasun rakenteen. Mitä tämä tarkoittaa, mitä pyydätte? Se merkitsee sitä, että perusfontin koon kasvaessa tai pienentämisenä asettelu säätyy tasaisesti ilman, että se hajoaa.

Tässä on esimerkki, jonka mukaan olemme löytäneet kaksi suunnittelupoikkipistettä, joista yksi on erittäin suuri työpöydän näyttö superresoluutiolla ja yksi pienelle tablet-laitteelle. Sanotaan myös, että tukipohja-fontimme on 16px, joka on 1.0em ja we bump base fontin koon jopa 22px, kun sivustoa tarkastellaan 3840 x 2160 (superresoluutio) resoluutiolla ja pienennämme sitä fonttikokoa 14px tarkkuudella 800 x 600 (pieni kannettava tietokone / tabletti). Olemme vain dramaattisesti muuttaneet verkkosivujen tyypin ja ulkoasun kokoa kahteen määriteltyyn katkoviivoon, yksi suuri ja yksi pieni. 1.4em-otsikko, jossa on 22px-peruspohjainen fonttikoko suuremmille resoluutioille, merkitsee sitä, että 1.4em vastaa 30.8px ja 14px: n pienemmällä fontilla, 1.4em olisi yhtä suuri kuin 19.6px. Vaikka kirjasimen koko kasvoi dramaattisesti suuremmaksi 3840 x 2160, meidän ei tarvitse huolehtia asettelun rikkomisesta, koska se on myös sopeutunut. Sanotaan, että elementtimme sisälsi leveyden 50em. 800 x 600: n tarkkuudella, joka olisi 700 pikseliä, mutta 3840 x 2160: n tarkkuudella se olisi 1100 pikseliä. Pehmusteemme ja marginaalit olisivat myös sopeutuneet. Suuremmassa resoluutiossa, jonka fonttikoot ja layout on asetettu emsille, on suunnitelmamme mitoitettu suhteellisesti, mikä tekee sisällöstä entistä helpommin ja luettavammaksi.

Reagoiva muotoilu piilottaa sisältöä

Herkän suunnittelun tarkoitus on saada sisältösi kaikkien ulottuville, myös vammaisille, kaikkiin näytön resoluutioihin ja laitteisiin. Sisällön piilottaminen ei ole koskaan hyvä ajatus, ja mahdollisuudet ovat, jos sinun täytyy piilottaa sitä, et tarvinnut sitä aluksi. Sisällön piilottaminen tekee lukemattomista näytöistä lukukelvottomaksi, ja sisällönsi on nyt saavuttamattomissa niille, joilla on visuaalinen tai kognitiivinen vamma. Pidä tämä mielessä, sisällön on oltava universaali kaikilla laitteilla, älä rankaise käyttäjiäsi rajoittamalla sitä, mitä he voivat tarkastella erillisellä laitteella.

Tästä huolimatta löydän vielä muutamia käyttötapauksia, joissa näyttö: ei mitään; on kätevä. Useimmissa käyttötapauksissa käsitellään jonkinlaista navigointia, ja käytän näyttöä: none; jotka vaihtelevat muotoa eri laitteissa. Ei ole koskaan hyvä idea rajoittaa tai piilottaa sisältöä eri laitteissa, koska olet todennäköisesti perustanut päätöksen oletukseen ja jotkut käyttäjät, jostain, saavat erittäin huonon kokemuksen.

Responsive design uhraa suorituskykyä

Useita sivustoja, jotka olen nähnyt viime aikoina, ovat osoittaneet empatian puutetta vähäisen kaistanleveyden omaaville käyttäjille. Suurin osa näistä sivustoista on yhteisiä, suuria kuvia ja suuria JavaScript-kirjastoja samoja asioita, ja monet näistä verkkosivustoista olisi voitu optimoida, jos ne on suunniteltu mobiilin ensimmäisen lähestymistavan avulla.

Koska paljon vastaavia kuvia on vielä paljon, kenenkään on vaikea sitoutua mihinkään ratkaisuun. Ymmärrän ongelman, mutta odotan täydellistä ratkaisua, joka on standardi kaikissa selaimissa ja laitteissa, ei tee nykyisestä verkkosivustostasi helpompaa käyttää laitteita, joilla on rajoitettu kaistanleveys. Löydä ratkaisu, joka parhaiten korjaa ongelman ja ajaa sen kanssa. Ratkaisun etsiminen tarkoittaa suorituskykyä kaikille, ja se kokonaan tappioi reagoivan suunnittelun tarkoituksen.

Suuri JavaScript-kirjasto voi myös aiheuttaa ongelmia pienissä laitteissa. Yritä löytää tapa kutsua heidät ehdollisesti näyttöruudun tai laitteen tyypin perusteella. Suorituskyvyn ei pitäisi olla jälkikäteen, kun kyseessä on herkkä muotoilu.

johtopäätös

Verkko on räjähtänyt ja mobiili- ja älypuhelintekniikan kynnyksellä voimme käyttää sisältöä missä ja missä tahansa yhteydessä. On tärkeää varmistaa, että voimme tavoittaa kaikki käyttäjät ja antaa heille, mitä he haluavat, kun he haluavat sitä. Reagoiva muotoilu on hyvin uusi tekniikka ja mielestäni se on täydellinen tekniikka yhtenäistää sisältöä verkossa.

Mitä muitakin myytteisen suunnittelun myyttejä haluat paljastaa? Ovatko haittaohjelmat haitallisia? Kerro meille kommentit.

Esitetty kuva / pikkukuva, reagoiva web-kuva kautta Shutterstock.