En omfattende veiledning for fiksing Responsive Designproblemer i 2023

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

Begrepet responsive Designet er enkelt, men det er veldig enkelt det som får folk til å gjøre feil så lett. Designere med mange års erfaring har blitt vant til å designe for desktop, og derfor vil de vanligvis planlegge et design basert på en desktop oppsett.

Desktop layouter skiller seg fra nettbrettoppsett og mobiloppsett fordi de vanligvis har flere kolonner, vanligvis inkluderer enorme mengder hvitt mellomrom, og alt er bare "stort", i mangel av et bedre ord. Hvis responsive designteknikker brukes, er dette flerkolonneoppsettet ment å bryte ned i en enkelt kolonne.

Hvis det er alt ditt responsive design faktisk gjør når det vises på en mobil enhet, kan det hende du har et problem. Hvor mye 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 ønsker å 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 må løses, og det designere faktisk gjør er å finne løsninger på 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 tingene som er verdt å vurdere når du bryter ned en desktop design til et mobilt design:

1. "Mobile First" er moronic

Beklager, men det er det. Alle lurer på dette, men som konsept er det ikke veldig nyttig, for hvis du virkelig designer "mobil først", vil det være marerittaktig å prøve å skalere det opp igjen til en desktop design med mindre du holder deg til et rent enkelt kolonneoppsett 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:

• Huge Desktop
• Ordinær Desktop
• 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

De desktop design inkluderer en av de enorme tykke sidebunntekstene med massevis av interne lenker? Flott, det vil nok være veldig nyttig på en desktop. På en mobil ser det latterlig ut, og er mer enn bare en berøring irriterende. Du kan designe helt forskjellige sidebunntekster for hvert enhetsbruddpunkt. Bare gjør disse bunntekstlenkene tilgjengelige i en modal dialog, så vinner alle.

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 det å skjule innhold er å "straffe" mobilbrukere, men dette er litt absurd. Realiteten er at du skjuler innholdet fordi det er der for å forbedre desktop erfaring, men bidrar ikke tilstrekkelig til kjernebudskapet til nettstedet til at det er 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. Kunder vet sjelden hva som er best for dem, og det er viktig å hevde seg som en webdesigner som vet hvordan man leverer det riktige resultatet for kunden. Annenwise du risikerer å lage 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 responsive bilder

Alle bilder skal være responsive når det er mulig. Dette fører med seg at noen ganger kan detaljene i et bilde 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 innzoomet versjon av bildet separat fra innholdet. Den normale måten å gjøre dette på er via en modal dialogboks.

header image med tillatelse fra Artur Martynowski