Når responsiv design blir feil (og hvordan fikser jeg det)

De fleste nettsteder som bruker responsiv design, bruker det feil, noe som fører til problemer. Den generelle tilnærmingen til responsiv design er lat, og hvis du tar den tilnærmingen, vil noen av de responsive nettstedene dine fungere helt feilfritt, og mange av dem vil ikke. For de som fungerer perfekt, vil det sannsynligvis komme til et spørsmål om flaks.

Konseptet med responsiv design er enkelt, men veldig enkelhet er det som fører folk til å gjøre feil så lett. Designere med mange års erfaring har blitt vant til å designe for skrivebordet, og derfor planlegger de vanligvis et design basert på et skrivebordsoppsett.

Skrivebordslayouter skiller seg fra nettbrettoppsett og mobiloppsett fordi de normalt er flere kolonner, vanligvis inkluderer store mengder hvitt mellomrom, og alt er bare "stort", for mangel på et bedre ord. Hvis responsive designteknikker brukes, skal denne flerkolonneoppsettet brytes ned i en enkelt kolonne.

Hvis det er alt det responsive designet ditt faktisk gjør når det vises på en mobilenhet, kan du ha et problem. Hvor mye av et problem avhenger av holdningen din, men gode designere bryr seg om god UX. De bryr seg enda mer om dårlig UX. Hvis nettstedet ditt har dårlig UX og du vil være en god designer, må du fikse det.

Dette problemet med å kollapse et flersøyles oppsett i en enkelt kolonne, er at det ikke fungerer proporsjonalt. Hvis du må krympe noe horisontalt og ikke gjøre noen andre endringer, kommer det tydeligvis til å utvide loddrett.

Hell vann fra et kort fettglass i et høyt tynt glass, og vannet får formen som det høye tynne glasset, mens volumet av vann forblir nøyaktig det samme. Det designere trenger å forstå er at vi med et nettsted trenger volumet for å endre. Det er normalt ikke lurt å endre form, men beholde innholdet nøyaktig det samme. Noe må gi etter.

Noen som virkelig har fått tittelen designer vil forstå at dette representerer et problem som skal løses, og hva designere faktisk gjør er å finne løsninger for problemer. Derfor er det den perfekte jobben for deg å finne den beste måten å levere kjerneinnholdet på nettstedet uten å gjøre brukeropplevelsen om til en frustrerende rullefest. Her er noen av de tingene som er verdt å tenke på når du deler ned en stasjonær design til en mobil design:

1. "Mobile First" er moronic

Beklager, men det er det. Alle papegøyer dette, men som et konsept er det ikke veldig nyttig, for hvis du virkelig designer "mobil først", vil det være marerittaktig å prøve å skalere det opp til en stasjonær design med mindre du holder deg til et rent enkelt kolonnelayout hele veien. opp.

Den beste tilnærmingen er å fysisk utforme minst tre (og opptil 11) forskjellige oppsett. De minste du kan vurdere inkluderer:

  • desktop
  • Landskapsmobil
  • Portrett mobil

Hvis du vil være litt grundigere, bør du også vurdere:

  • Liggende nettbrett
  • Portrettbrett

Og hele listen, hvis du vil være helt komplett, ville være:

  • Stort skrivebord
  • Vanlig skrivebord
  • Stor landskapstavle
  • Stort portrettbrett
  • Liten landskapstavle
  • Liten portrettbrett
  • Stort landskapsmobil
  • Stor portrettmobil
  • Liten landskapsmobil
  • Liten portrettmobil
  • Bittesmå / bærbar

Med så mange forskjellige muligheter, er det åpenbart hvorfor en lat “one-size-fits-all” tilnærming er så fristende, men det er også åpenbart hvorfor det er så mange måter å ødelegge den på.

2. temme den viltvoksende sidefoten

Skrivebordsdesignet inkluderer en av de enorme bunntekstene på siden med mange interne lenker? Flott, det vil sannsynligvis være veldig nyttig på skrivebordet. På en mobil ser den latterlig ut, og er mer enn bare en touch irriterende. Du kan designe helt forskjellige sidefoten for hvert bruddpunkt for enheten. Bare gjør disse bunntekstkoblingene tilgjengelige i en modal dialog, og alle vinner.

3. Godta noen mindre påverv på uklare enheter

Hvis en bestemt enhet ikke er vanlig, er det ikke så ille hvis det er noen få påfunn i designen som bare vises når du ser på den enheten. Jo mer populær en enhet er, desto mer må du jobbe for å bli kvitt eventuelle påverv som vises på den.

4. Du kan skjule innhold som ikke bidrar til kjernemeldingen

Den viktigste delen av et nettsted er kjernemeldingen. Ja, på noen nettsteder er den viktigste delen reklamen, og de eksisterer bare for å levere den reklamen, men hvis du må velge mellom å vise kjernemeldingen eller vise reklamen, velger du meldingen. Det er mer sannsynlig at Google ser på deg som persona non grata hvis du skjuler kjerneinnhold og deretter viser opp en haug med annonser. Det er fordi det kjerneinnholdet er det Google indekserte deg basert på, og når innholdet ikke vises, ser Google på det som villedende.

I tillegg er ting som bilder som er rent dekorative eller estetiske, men som ikke bidrar vesentlig til kjernemeldingen, kandidater for reduksjon eller skjul helt.

Noen mennesker har foreslått at skjuling av innhold "straffer" mobilbrukere, men dette er litt absurd. Virkeligheten er at du gjemmer innholdet fordi det er der for å forbedre skrivebordsopplevelsen, men ikke i tilstrekkelig grad bidrar til kjernebudskapet til nettstedet for at det skal være nødvendig

5. Du kan bruke alternative bakgrunner

Nylig fikk jeg et latterlig oppdrag der nettstedseieren hadde betalt for en bestemt bakgrunn og ønsket at alt innholdet skulle skreddersys for å passe til den bakgrunnen. Punktpunkter måtte være et veldig nøyaktig antall tegn, det totale antall linjer måtte være nøyaktig, og så videre.

Dette er definitivt dårlig praksis innen webdesign, fordi du burde aldri utforme innhold for å passe til en layout. Oppsettet skal alltid være designet for å holde innholdet. Hvis oppsettet av en eller annen grunn ikke kan inneholde innholdet, bør oppsettet gjøres om, ikke innholdet. Det er fullt mulig å bruke forskjellig bakgrunn for forskjellige enheter. Du er en designer. Bruk fantasien din.

Innhold er livsnerven til et nettsted, og å endre det eller begrense det basert på begrensningene til en layout er et tydelig tegn på amatørskap hos nettstedseieren, og et tegn på at oppsettet var dårlig designet i den første plass. Stå etter prinsippene dine, fordi den klienten kommer til å bli problemer hvis du frikjenner.

Kunden har alltid rett, bortsett fra når den kunden er en webdesignklient. Klienter vet sjelden hva som er best for dem, og det er viktig å hevde deg som en webdesigner som vet hvordan de skal levere riktig resultat for kunden. Ellers risikerer du å opprette enda et nettsted styggedom.

6. Kontroller kollapsrekkefølgen manuelt (eller unngå romlige referanser innen innhold)

Dette er et sammensatt problem. Sammenleggingsrekkefølgen på et nettsted avhenger av rekkefølgen divene er stablet i. Du må stable divisjonene dine i riktig rekkefølge slik at de faller sammen i riktig rekkefølge.

Et av problemene som kommer fra dra-n-slipp WYSIWYG nettstedbyggere, er at du normalt ikke kan diktere hvilken rekkefølge divene blir stablet inn, og i veldig sjeldne tilfeller der du kan gjøre det, blir ditt harde arbeid annullert hver gang du gjør den minste redigeringen, og du må gå inn og hacke kildekoden igjen.

Hvis du ikke kontrollerer kollapsrekkefølgen, dette bildet forklarer tydelig hva som kan gå galt. Du bør også unngå å lage romlige referanser (som "i kolonnen til venstre") som på en mobil, uansett hva som var til venstre eller høyre, kan flyttes til over eller under, i tillegg til Hvis du får leseren til å tro at det er viktig nok å bla for å se, så må de bla tilbake igjen, og det er ikke kult.

7. Du kan trenge forskjellige skriftstørrelser for forskjellige oppsett

Det er enkelt å kontrollere skriftstørrelse med CSS, og du kan angi forskjellige skriftstørrelser og til og med forskjellige skrifttyper (hvis de vil se bedre ut) for bestemte størrelser på skjermen. Du kan finne visningsstørrelse med CSS-mediespørsmål, og deretter endre skriftstørrelsen eller skriftflaten til å være på verdier som vil vise innholdet til størst mulig fordel på enhetstypen du målretter mot.

8. Det er best å bruke lydhøre bilder

Alle bilder skal være lydhøre når det er mulig. Dette bringer med seg at detaljene i et bilde noen ganger kan gå tapt hvis det skaleres ned for mye. En løsning på dette problemet er å gjøre bildet klikkbart, slik at brukeren kan se en zoomet inn versjon av bildet separat til innholdet. Den normale måten å gjøre dette på er via en modal dialogboks.

header image med tillatelse fra

Bogdan Rancea

Bogdan er et grunnleggende medlem av Inspired Mag, etter å ha opparbeidet seg nesten 6 års erfaring i løpet av denne perioden. På fritiden liker han å studere klassisk musikk og utforske billedkunst. Han er ganske besatt av fixies også. Han eier 5 allerede.

kommentarer Response 1

  1. Mobil først betyr bare at i kodebasen er "standard" css for mobil, og du bygger endringer for bredere formater derfra. Jeg forstår virkelig ikke det første poenget ditt

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Vurdering *

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.

Bli en ekspert på e-handel

Skriv inn e-postadressen din for å få festen i gang