Responsive designmetoder er svært nyttige for utviklere fordi de tillater oss å tjene innhold til det bredeste utvalget av enheter uten å måtte opprettholde separate versjoner av nettstedet og uten noen av de negative ulempene til andre metoder som skalering og væskeoppsett.

Denne artikkelen vil markere de tre øverste feildesignerne støter på med responsive design, og vil gi noen strategier for å unngå disse feilene.

Scaling vs væske vs responsiv

Det er mye forvirring over disse vilkårene, og designere bruker ofte feilaktig utveksling. I sannhet er hver av disse forskjellige evolusjonære trinn i utformingsteknikk som har kommet over tid i tråd med fremskritt innen teknologi.

Skaleringsoppsett er utformet for å skalere hvert element i forhold til hvert annet element . De er lydhør i den forstand at de skal skalere innholdet dynamisk som svar på endringer i størrelsen på visningsporten. Oppsettet selv forblir statisk, og endrer størrelsen på hvert element for å opprettholde et konsekvent utseende.

skala

Ovenfor: Eksempel på en skaleringslayout ved forskjellige oppløsninger: Designet gir lesbarhet for konsistens.

Fluidoppsett er forskjellige fordi de skaler beholderelementer i forhold til størrelsen på visningsporten . Dette oppnås ved å bruke relative enheter som ems for å overvinne problemet med krympende tekst. Designet kan brytes av brukeren skalering det.

væske

Ovenfor: Eksempel på væskelayout ved forskjellige oppløsninger: Designet gir konsistens for lesbarhet.

Responsive layouter måler ikke noe. I stedet endrer de det som vises, avhengig av størrelsen på visningsporten.

mottakelig

Ovenfor: Et eksempel på et responsivt layout ved forskjellige oppløsninger.

Katastrofe 1) Innpakning menyer

Hvis du bruker en navbar øverst på siden din, må en responsiv design "snappe" den til et mer kompakt format når siden vises på en liten skjerm. Men dette virker ikke alltid perfekt hvis visningsområdet er bredere enn bruddpunktet, men for lite til å vise alle menypunktene i en enkelt linje. Resultatet er en meny som bryter inn.

wrap_menu

Det finnes flere måter å løse dette problemet på. Den første er å redusere antall gjenstander som vises horisontalt på navbaren ved å sortere dem i kategorier og underkategorier. Du kan deretter bruke rullegardinelementer til å vise underkategorier når en kategori er valgt.

Den andre måten er å bytte brytepunktet til en lavere verdi.   Det faktiske tallet som skal brukes er bredden som navbaren din begynner å mislykkes, ikke en bestemt enhetsstørrelse.

Den tredje måten er å bruke en annen meny for enheter, for eksempel en glideskuff.

Disaster 2) Bruke bilder med fast bredde

Innholdsområder er vanligvis satt til en størrelse i forhold til visningsporten. Så når et fast breddebilde er bredere enn størrelsen på området, oppstår bildet beskjæring.

bla

Ovenfor: Eksempel på et dårlig fast breddebilde som er for stort: ​​nå har det rullepaneler og innholdet skyves på skjermen.

Du kan unngå dette problemet ved å bruke relative enheter for å angi bredden på bildet, eller hvis du bruker et rammeverk som støtter det (for eksempel Bootstrap), kan du bruke en responsiv bildeklasse (f.eks .: class = "img-responsive" ).

endre størrelse på

Over: Det samme elementet med en responsiv bildeklasse tilnærming: nå er rullefeltet borte.

Disaster 3) Elementforvrengning

Denne er litt mer uklar, men i hovedsak hva som skjer når layoutet vises på et lite visningsport er at noen uhåndterte kolonner oppfører seg som rader. Dette er et problem fordi forvrengningen av innholdet utilsiktet endrer hierarkiet i designet ditt.

pakke inn

Over: Kolonne blir en rad, forvrengende innhold.

Løsningen er åpenbar, men det er overraskende hvor mange som sliter med det: Bare sett høyde, bredde og polstring av elementet eksplisitt. Hvis den beveger seg ut av posisjon og dekker andre elementer, kan du tvinge den til å være der du vil, ved å pakke den inn i div og innstillingsmargener.

Planlegging bidrar til å unngå feil

Denne artikkelen har bare diskutert de tre mest utsatte responsive designkatastrofer, men det er mange andre måter for en god design å gå galt. Forhindre feil er ikke for vanskelig. Moderne nettlesere har innebygd responsiv layout testing, så planlegg designen godt og test ofte.