3 Responsive Design Disasters - ja miten välttää heidät
Reagoivat suunnittelumenetelmät ovat erittäin hyödyllisiä kehittäjille, koska ne antavat meille mahdollisuuden palvella sisältöä laajimmille laitteille ilman erillisiä versioita sivustosta ja ilman joitain kielteisiä haittoja muille menetelmille, kuten skaalaus ja nesteen asettelu.
Tässä artikkelissa korostetaan kolmen parhaan virheen suunnittelijat kohtaavat reagoivien mallien ja tarjoavat joitakin strategioita välttää näitä virheitä.
Skaalaus vs. neste vs. vasteellinen
Näillä termeillä on paljon hämmennystä, ja suunnittelijat usein väärin käyttävät niitä keskenään. Todellisuudessa jokainen näistä on erillisiä evoluutiovaiheita asettelutekniikassa, joka on kehittynyt ajan myötä tekniikan kehityksen mukaisesti.
Skaalausasettelut on suunniteltu skaalaamaan jokainen elementti suhteessa jokaiseen muuhun elementtiin . Ne ovat herkkiä siinä mielessä, että ne skaalaavat sisällön dynaamisesti vastauksena näkymän koon muutoksiin. Asettelu itsessään pysyy staattisena, muuttamalla jokaisen elementin kokoa johdonmukaisen ulkonäön säilyttämiseksi.
Edellä: esimerkki skaalausasettelusta eri resoluutioissa: suunnittelu uhraa luettavuutta johdonmukaisuuden suhteen.
Nestemäiset asettelut ovat erilaisia, koska ne skaalaavat säiliöelementtejä suhteessa näköalatasoon . Tämä saavutetaan käyttämällä suhteellisia yksiköitä, kuten ems, jotta voitaisiin poistaa tekstin kutistumisongelma. Suunnittelu voi rikkoa käyttäjä skaalaamalla sitä.
Yllä: esimerkki nesteen sijoittelusta eri resoluutiot: suunnittelu uhraa johdonmukaisuutta luettavuuden.
Responsive layouts eivät mittaa mitään. Sen sijaan ne muuttavat näkymää näytön koon mukaan.
Edellä: esimerkki reagoivasta ulkoasusta eri resoluutioissa.
Katastrofi 1) Käärintävalikot
Jos käytät navbaria sivun yläosassa, reagoivan mallin on tarkoitus "napsauttaa sitä" entistä pienemmäksi, kun sivu näkyy pienellä näytöllä. Mutta tämä ei aina toimi täydellisesti, jos näyttöalue on katkoviiva, mutta liian pieni näyttää kaikki valikkokohteet yhdelle riville. Tuloksena on valikko, joka käärii.
On monia tapoja ratkaista tämä ongelma. Ensimmäinen on alentaa navigaattorin vaakasuorassa olevien kohteiden määrää lajittelemalla ne luokkiin ja alaluokkiin. Tämän jälkeen voit käyttää alaosastoja avattavilla kohteilla, kun luokka on valittu.
Toinen tapa on muuttaa taitekohtaa alempaan arvoon. Käytettävä numero on leveys, jolla navbar alkaa epäonnistua, eikä tiettyä laitekokoa.
Kolmas tapa on käyttää eri valikkoa laitteisiin, kuten liukuvaan laatikkoon.
Katastrofi 2) Kiinteän leveän kuvan käyttäminen
Sisältöalueet asetetaan tavallisesti koon mukaan suhteessa katselupisteeseen. Joten kun kiinteä leveä kuva on laajempi kuin alueen koko, kuvan rajoitus tapahtuu.
Ylhäällä: esimerkki huonosta kiinteästä leveydestä, joka on liian suuri: nyt se on vierityspalkkeja ja sisältö työnnetään pois näytöstä.
Voit välttää tämän ongelman käyttämällä suhteellisia yksiköitä kuvan leveyden asettamiseksi, tai jos käytät sitä tukevaa kehystä (kuten Bootstrap), voit käyttää reagoivaa kuva-luokkaa (esim. Class = "img-responsive" ).
Yläpuolella: sama elementti, jossa on reagoiva kuvaluokan lähestymistapa: nyt vierityspalkki on poissa.
Katastrofi 3) Elementin vääristyminen
Tämä on hieman epämääräisempi, mutta lähinnä, mitä tapahtuu, kun ulkoasu näkyy pienellä katseluportaalla, on se, että kaikki käsittelemättömät sarakkeet toimivat kuin rivit. Tämä on ongelma, koska sisällön vääristyminen muuttaa tahattomasti suunnittelusi hierarkiaa.
Ylös: sarake tulee rivi, vääristää sisältöä.
Ratkaisu on ilmeinen, mutta se on yllättävää, kuinka monta ihmistä taistelee sen kanssa: yksinkertaisesti asetetaan elementin korkeus, leveys ja pehmuste selkeästi. Jos se liikkuu pois asemasta ja peittää muut elementit, voit pakottaa sen olevan missä haluat, käärittämällä se divaan ja asettamalla marginaalit.
Suunnittelu auttaa välttämään virheitä
Tässä artikkelissa on keskusteltu vain 3 yleisimmin havaitusta reagoivasta suunnittelun katastrofista, mutta hyviä suunnittelumalleja on paljon muitakin tapoja mennä pieleen. Virheiden estäminen ei ole liian vaikeaa. Nykyaikaisilla selaimilla on sisäänrakennettu reagoiva asettelu testaus, joten suunnittele suunnittelu hyvin ja testaa usein.