En omfattande guide till reparation Responsive Designproblem 2023

Om du prenumererar på en tjänst från en länk på den här sidan kan Reeves and Sons Limited tjäna en provision. Se vår etik uttalande.

De flesta webbplatser använder responsive design använder det felaktigt, vilket leder till problem. Det allmänna förhållningssättet till responsive design är en lat sådan, och om du tar det tillvägagångssättet, några av dina responsive webbplatser kommer att fungera helt felfritt, och många av dem kommer inte att fungera. För dem som fungerar perfekt kommer det förmodligen att vara en fråga om tur.

Begreppet responsive Designen är enkel, men dess enkelhet är det som får människor att göra misstag så lätt. Designers med många års erfarenhet har blivit vana vid att designa för desktop, and so they’ll usually plan a design based on a desktop layout.

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 designtekniker används, denna flerkolumnlayout är tänkt att delas upp i en enda kolumn.

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 exakt 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 designa till en mobil design:

1. "Mobile First" är 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 såvida du inte håller fast vid en layout med en enda kolumn hela vägen upp.

Det bästa sättet är att fysiskt utforma minst tre (och upp till 11) olika layouter. De lägsta som du kan överväga inkluderar:

  • Desktop
  • Landskap Mobil
  • Stående mobil

Om du vill vara lite mer grundlig bör du också tänka på:

  • Landskapstablett
  • Stående surfplatta

Och hela listan, om du vill vara helt komplett, skulle vara:

  • Enorma Desktop
  • Vanlig Desktop
  • Stor landskapstablett
  • Stor stående surfplatta
  • Liten landskapstablett
  • Liten stående surfplatta
  • Stora landskapsmobil
  • Stor porträttmobil
  • Liten landskapsmobil
  • Liten stående mobil
  • Liten / 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. Tämja den spretande sidfoten

Smakämnen desktop designen innehåller en av de där enorma tjocka sidfotsfoten med massor av interna länkar? Jättebra, det kommer nog vara väldigt praktiskt på en desktop. På en mobil ser det löjligt ut och är mer än bara en touch irriterande. Du kan designa helt olika sidfötter för varje enhets brytpunkt. Gör bara dessa sidfotslänkar tillgängliga i en modal dialog så vinner alla.

3. Acceptera några mindre egendomar på oklara 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 viktigaste delen av en webbplats är kärnmeddelandet. Ja, på vissa webbplatser är den viktigaste delen reklamen och de finns bara för att leverera den reklamen, men om du måste välja mellan att visa kärnmeddelandet eller visa reklam, välj meddelandet. Google är mer benägna att betrakta dig 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 använda alternativa bakgrunder

Nyligen fick jag ett löjligt uppdrag där webbplatsägaren hade betalat för en viss bakgrund och ville att allt innehåll skulle skräddarsys för att passa den bakgrunden. Punktpunkter måste vara ett mycket exakt antal tecken, det totala antalet rader måste vara exakt och så vidare.

Detta är definitivt dålig praxis inom webbdesign, eftersom du borde göra det aldrig design innehåll för att passa en layout. Layouten bör 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.

Innehållet är en webbplatss livsblod, och att ändra den eller begränsa den baserat på begränsningarna för en layout är ett tydligt tecken på amatörskap hos webbplatsägaren, och ett tecken på att layouten var dåligt utformad i den första plats. Stå vid dina principer, eftersom den klienten kommer att bli problem om du frikänner.

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 riskerar att skapa ännu en webbplats avsky.

6. Manuellt kontrollera kollapsordningen (eller undvika rumsliga referenser inom innehållet)

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, denna bild förklarar tydligt vad som kan gå fel. Du bör också undvika att göra rumsliga referenser (som "i kolumnen till vänster") som på en mobil, vad som helst till vänster eller höger kan flyttas till över eller under, plus 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 behöva olika teckenstorlekar för olika layouter

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

Alla bilder ska vara responsive när det är möjligt. Detta för med sig att ibland kan detaljen i en bild gå förlorad om den skalas ner för mycket. En lösning på detta problem är att göra bilden klickbar så att användaren kan se en inzoomad version av bilden separat från innehållet. Det normala sättet att göra detta är via en modal dialogruta.

header image med tillstånd av

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.

Kommentarer Response 1

  1. M sid säger:

    Mobile first betyder bara att i kodbasen är "standard" css för mobil och du bygger ändringar för bredare formatär därifrån. Jag förstår verkligen inte din första poäng

Kommentera uppropet

E-postadressen publiceras inte. Obligatoriska fält är markerade *

Betyg *

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.