En omfattande guide till reparation Responsive Designproblem 2023

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, och så kommer de vanligtvis att planera en design baserad på en desktop layout.

Desktop Layouter skiljer sig från surfplattelayouter och mobillayouter eftersom de normalt har flera kolumner, normalt innehåller enorma mängder vitt utrymme och allt är bara "stort", i brist på ett bättre ord. Om responsive designtekniker används, denna flerkolumnlayout är tänkt att delas upp i en enda kolumn.

Om det är allt ditt responsive design faktiskt gör när den visas på en mobil enhet, kan du ha ett problem. Hur mycket ett problem beror på din attityd, men bra designers bryr sig om bra UX. De bryr sig ännu mer om dålig UX. Om din webbplats har dålig UX och du vill bli en bra designer, måste du fixa det.

Problemet med att kollapsa en flerspelars layout i en enda kolumn är att den inte fungerar på proportionell basis. Om du måste krympa något horisontellt och inte göra några andra förändringar kommer det uppenbarligen att expandera vertikalt.

Häll vatten från ett kort fettglas i ett högt tunt glas, och vattnet har formen på det höga tunna glaset, medan vattenvolymen förblir exakt densamma. Vad designers behöver förstå är att med en webbplats behöver vi volymen för att ändras. Det är normalt inte bra att ändra form men behålla innehållet exakt det samma. Något måste ge.

Någon som verkligen har förtjänat titeln designer kommer att förstå att detta representerar ett problem som måste lösas, och vad designers faktiskt gör är att hitta lösningar på problem. Därför är det det perfekta jobbet för dig att hitta det bästa sättet att leverera sajtens kärninnehåll utan att förvandla användarupplevelsen till en frustrerande scroll-fest. Här är några av de saker som är värda att tänka på när du bryter ner en desktop designa till en mobil design:

1. "Mobile First" är moronic

Förlåt, men det är det. Alla pekar på detta, men som ett koncept är det inte särskilt användbart, för om du verkligen designar "mobil först" kommer det att bli mardrömslikt att försöka skala upp den igen till en 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

Med så många olika möjligheter är det uppenbart varför en lat "one-size-fits-all" -metod är så frestande, men det är också uppenbart varför det finns så många sätt att förstöra det.

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

Om en viss enhet inte är vanligt är det inte så illa om det finns några underliga saker i designen som bara visas när du tittar på den enheten. Ju mer populär en enhet är, desto mer måste du arbeta för att bli av med alla egendomar som visas på den.

4. Du kan dölja innehåll som inte bidrar till kärnmeddelandet

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 om du döljer kärninnehåll och sedan visar upp ett gäng annonser. Det beror på att det här kärninnehållet är det som Google indexerade dig baserat på, och när det innehållet inte visas ser Google på det som lura.

Dessutom är saker som bilder som är rent dekorativa eller estetiska, men som inte bidrar väsentligt till kärnmeddelandet, kandidater för att reducera eller gömma sig helt.

Vissa människor har föreslagit att att dölja innehåll är att "straffa" mobilanvändare, men detta är lite absurt. Verkligheten är att du döljer innehållet eftersom det är till för att förbättra desktop erfarenhet, men bidrar inte tillräckligt till sajtens kärnbudskap för att det ska vara nödvändigt

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 vara utformad för att hålla innehållet. Om layouten av någon anledning inte kan innehålla innehållet, bör layouten omformas, inte innehållet. Det är fullt möjligt att använda olika bakgrunder för olika enheter. Du är en designer. Använd din fantasi.

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.

Kunden har alltid rätt, förutom när den kunden är en webbdesignklient. Kunder vet sällan vad som är bäst för dem, och det är viktigt att hävda sig som en webbdesigner som vet hur man levererar rätt resultat för kunden. Övrigwise du riskerar att skapa ännu en webbplats avsky.

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

Detta är ett komplicerat problem. Kollapsordningen för en webbplats beror på i vilken ordning divserna staplas. Du måste stapla dina divisions i rätt ordning så att de kollapsar i rätt ordning.

Ett av problemen som kommer från dra-n-drop WYSIWYG-webbplatsbyggare är att du normalt inte kan diktera vilken ordning divarna får staplade i, och i mycket sällsynta fall där du kan göra det blir ditt hårda arbete ångrat varje gång du gör den minsta redigeringen, och du måste gå in igen och hacka källkoden igen.

Om du inte kontrollerar kollapsordningen, 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 om du får läsaren att tro att det är viktigt nog att bläddra för att se, då måste de bläddra tillbaka igen, och det är inte coolt.

7. Du kan behöva olika teckenstorlekar för olika layouter

Det är enkelt att kontrollera teckensnittstorlek med CSS och du kan ställa in olika teckenstorlekar och till och med olika teckensnitt (om de ser bättre ut) för vissa visningsstorlekar. Du kan hitta visningsstorleken med CSS-mediefrågor, och sedan ändrar du teckenstorlek eller teckensnitt för att vara värden som skulle visa innehållet till största fördel på den enhetstyp du riktar dig in.

8. Det är bäst att använda 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 Artur Martynowski