En omfattende veiledning for fiksing Responsive Designproblemer i 2023

Hvis du abonnerer på en tjeneste fra en lenke på denne siden, kan Reeves and Sons Limited tjene en provisjon. Se vår etisk uttalelse.

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, and so they’ll usually plan a design based on a desktop oppsett.

Desktop layouts differ from tablet layouts and mobile layouts because they’re normally multi-column, normally include huge amounts of white space, and everything is just “big”, for want of a better word. If responsive designteknikker brukes, er dette flerkolonneoppsettet ment å bryte ned i en enkelt kolonne.

If that’s all your responsive design actually does when it’s viewed on a mobile device, you may have a problem. How much of a problem depends on your attitude, but good designers care about good UX. They care even more about bad UX. If your site has bad UX and you want to be a good designer, then you need to fix it.

This problem with collapsing a multi-column layout into a single column is that it doesn’t work on a proportional basis. If you have to shrink something horizontally and you don’t make any other changes, it is obviously going to expand vertically.

Pour water from a short fat glass into a tall thin one, and the water takes the shape of the tall thin glass, while the volume of water stays exactly the same. What designers need to understand is that with a website, we do need the volume to change. It’s not normally a good idea to change the shape but keep the content nøyaktig the same. Something’s gotta give.

Somebody who really has earned the title of designer will understand that this represents a problem to be solved, and what designers actually do is find solutions for problems. Therefore it’s the perfect job for you to find the best way to deliver the core content of the site without turning the user experience into a frustrating scroll-fest. Here are a few of the things worth considering when breaking down a desktop design til et mobilt design:

1. "Mobile First" er moronic

Sorry, but it is. Everyone is parroting this, but as a concept it’s not very helpful because if you truly design “mobile first” then it will be nightmarish trying to scale it back up to a 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

With so many different possibilities, it’s obvious why a lazy “one-size-fits-all” approach is so tempting, but it’s also obvious why there are so many ways to ruin it.

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

If a particular device is not common, then it’s not so bad if there are a few quirks in the design that appear only when viewing on that device. The more popular a device is, the more you’ll have to work at getting rid of any quirks that appear on it.

4. You can hide content that doesn’t contribute to the core message

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 if you hide core content and then serve up a bunch of ads. It’s because that core content is what Google indexed you based on, and when that content is not shown, Google looks at that as deceptive.

Additionally, things like images that are purely decorative or aesthetic, but which don’t contribute significantly to the core message, are candidates for reduction or hiding altogether.

Some people have proposed that hiding content is “punishing” mobile users, but this is a bit of an absurd notion. The reality is that you’re hiding the content because it’s there to enhance the desktop experience, but doesn’t sufficiently contribute to the core message of the site for it to be necessary

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 be designed to hold the content. If for some reason the layout can’t hold the content, then the layout should be redesigned, not the content. It’s quite possible to use different backgrounds for different devices. You’re a designer. Use your imagination.

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.

The customer is always right, except when that customer is a web design client. Clients rarely know what is best for them, and it’s important to assert yourself as a web designer who knows how to deliver the right result for the client. Otherwise du risikerer å lage enda et nettsted styggedom.

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

This is a complex problem. The collapse order of a site depends on the order in which the divs are stacked. You need to stack your divs in the correct order so that they’ll collapse in the correct order.

One of the problems that comes from drag-n-drop WYSIWYG website builders is that you can’t normally dictate what order the divs get stacked in, and in the very rare instances where you can do that, your hard work gets undone every time you make the smallest edit, and you’ll have to go back in and hack the source code again.

If you don’t control the collapse order, 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 if you make the reader think it’s important enough to scroll to see, then they’ll have to scroll back again, and that’s not cool.

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

It’s easy to control font size with CSS and you can set different font sizes and even different font faces (if they’ll look better) for particular sizes of display. You can find the display size with CSS media queries, and then you modify the font size or font face to be at values that would display the content to maximum advantage on the device type you’re targeting.

8. It’s best to use 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

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.

Kommentar Response 1

  1. M p sier:

    Mobil først betyr bare at i kodebasen er "standard" css for mobil, og du bygger endringer for bredere formats 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.