En omfattende guide til reparation Responsive Designproblemer i 2023

De fleste hjemmesider bruger responsive design bruger det forkert, hvilket fører til problemer. Den generelle tilgang til responsive design er en doven, og hvis du tager den tilgang, nogle af dine responsive websteder vil fungere fuldstændigt fejlfrit, og mange af dem vil ikke. For dem, der fungerer perfekt, vil det sandsynligvis komme ned til et spørgsmål om held.

Begrebet responsive Designet er enkelt, men dets enkelthed er det, der får folk til at lave fejl så let. Designere med mange års erfaring er blevet vant til at designe til desktop, og så vil de normalt planlægge et design baseret på en desktop layout.

Desktop Layouter adskiller sig fra tabletlayouts og mobillayouts, fordi de normalt har flere kolonner, normalt indeholder enorme mængder hvidt mellemrum, og alt er bare "stort", fordi det mangler et bedre ord. Hvis responsive designteknikker bruges, er dette multi-søjlelayout formodet at bryde ned i en enkelt kolonne.

Hvis det er alt dit responsive design faktisk gør, når det ses på en mobilenhed, kan du have et problem. Hvor meget et problem afhænger af din holdning, men gode designere bekymrer sig om god UX. De bekymrer sig endnu mere om dårlig UX. Hvis dit websted har dårlig UX, og du vil være en god designer, så skal du rette det.

Dette problem med at kollapse et flersøjleslayout i en enkelt kolonne er, at det ikke fungerer på en proportional basis. Hvis du er nødt til at krympe noget vandret, og du ikke foretager andre ændringer, vil det tydeligvis udvides lodret.

Hæld vand fra et kort fedtglas i et højt tyndt glas, og vandet får formen af ​​det høje tynde glas, mens vandmængden forbliver nøjagtigt den samme. Hvad designere har brug for at forstå, er, at vi med et websted har brug for lydstyrken for at ændre sig. Det er normalt ikke en god ide at ændre form, men beholde indholdet præcist nok det samme. Noget skal give.

En, der virkelig har fortjent titlen designer, vil forstå, at dette repræsenterer et problem, der skal løses, og hvad designere faktisk gør, er at finde løsninger på problemer. Derfor er det det perfekte job for dig at finde den bedste måde at levere webstedets kerneindhold på uden at gøre brugeroplevelsen til en frustrerende scroll-fest. Her er et par af de ting, der er værd at overveje, når du nedbryder en desktop design til et mobilt design:

1. "Mobil først" er moronic

Undskyld, men det er det. Alle efterlyser dette, men som et koncept er det ikke særlig nyttigt, for hvis du virkelig designer "mobil først", så vil det være mareridtsagtigt at prøve at skalere det tilbage til en desktop design, medmindre du holder dig til et rent enkelt kolonnelayout hele vejen op.

Den bedste fremgangsmåde er at fysisk designe mindst tre (og op til 11) forskellige layouts. De mindste, du kan overveje, inkluderer:

• Desktop
• Landskabsmobil
• Portræt mobil

Hvis du vil være lidt mere grundig, skal du også overveje:

• Landskabstablet
• Stående tablet

Og den fulde liste, hvis du vil være helt komplet, ville være:

• Kæmpe Desktop
• Almindelig Desktop
• Stor landskabstablet
• Stor portræt-tablet
• Lille landskabstablet
• Lille portræt-tablet
• Stort landskabsmobil
• Stor portræt mobil
• Lille landskabsmobil
• Lille portræt mobil
• Lille / bærbar

Med så mange forskellige muligheder er det indlysende, hvorfor en doven “one-size-fits-all” tilgang er så fristende, men det er også indlysende, hvorfor der er så mange måder at ødelægge det på.

2. Tæm den spredte sidefod

desktop design indeholder en af ​​de store chunky sidefødder med masser af interne links? Fantastisk, det vil nok være meget praktisk på en desktop. På en mobil ser det latterligt ud, og er mere end blot en berøring irriterende. Du kan designe helt forskellige sidefødder for hvert enhedsbrudpunkt. Bare gør disse sidefodslinks tilgængelige i en modal dialog, og alle vinder.

3. Accepter nogle mindre påstande på uklare enheder

Hvis en bestemt enhed ikke er almindelig, er det ikke så slemt, hvis der er et par forældre i designet, der kun vises, når du ser på den enhed. Jo mere populær en enhed er, desto mere bliver du nødt til at arbejde på at slippe af med eventuelle forældre, der vises på den.

4. Du kan skjule indhold, der ikke bidrager til kernemeddelelsen

Den vigtigste del af et websted er kernemeddelelsen. Ja, på nogle websteder er den vigtigste del reklamen, og de findes kun for at levere den reklame, men hvis du skal vælge mellem at vise kernemeddelelsen eller vise reklamen, skal du vælge beskeden. Det er sandsynligt, at Google betragter dig som persona non grata hvis du skjuler kerneindhold og derefter viser en masse annoncer. Det skyldes, at det centrale indhold er det, som Google indekserede dig baseret på, og når dette indhold ikke vises, ser Google det som vildledende.

Derudover er ting som billeder, der er rent dekorative eller æstetiske, men som ikke bidrager væsentligt til kernemeddelelsen, kandidater til reduktion eller skjul helt.

Nogle mennesker har foreslået, at det at skjule indhold "straffer" mobilbrugere, men det er lidt absurd. Virkeligheden er, at du skjuler indholdet, fordi det er der for at forbedre desktop erfaring, men bidrager ikke tilstrækkeligt til webstedets kernebudskab til, at det er nødvendigt

5. Du kan bruge alternative baggrunde

For nylig fik jeg en latterlig opgave, hvor webstedsejeren havde betalt for en bestemt baggrund og ønskede, at alt indhold skulle være skræddersyet til at passe til den baggrund. Punktpunkterne skulle være et meget nøjagtigt antal tegn, det samlede antal linjer skulle være nøjagtigt, og så videre.

Dette er bestemt dårlig praksis i webdesign, fordi du burde aldrig design indhold, der passer til et layout. Layouten skal altid være designet til at indeholde indholdet. Hvis layoutet af en eller anden grund ikke kan indeholde indholdet, skal layoutet redesignes, ikke indholdet. Det er meget muligt at bruge forskellige baggrunde til forskellige enheder. Du er en designer. Brug din fantasi.

Indhold er livets blod fra et websted, og at ændre det eller begrænse det baseret på begrænsningerne i et layout er et klart tegn på amatørmændighed fra sideejerens side, og et tegn på, at layoutet var dårligt designet i den første placere. Stå ved dine principper, fordi den klient vil have problemer, hvis du frifindes.

Kunden har altid ret, undtagen når kunden er en webdesignklient. Kunder ved sjældent, hvad der er bedst for dem, og det er vigtigt at hævde sig selv som en webdesigner, der forstår at levere det rigtige resultat til kunden. Andetwise du risikerer at oprette endnu en hjemmeside vederstyggelighed.

6. Styr manuelt sammenbrudets rækkefølge (eller undgå rumlige referencer inden for indhold)

Dette er et komplekst problem. Sammenfaldsrækkefølgen på et sted afhænger af rækkefølgen, hvor diverne er stablet. Du er nødt til at stable dine divs i den rigtige rækkefølge, så de falder sammen i den rigtige rækkefølge.

Et af problemerne, der kommer fra WYSIWYG-webstedsbyggerne fra drag-n-drop, er, at du normalt ikke kan diktere, hvilken rækkefølge diverne bliver stablet i, og i de meget sjældne tilfælde, hvor du kan gøre det, bliver dit hårde arbejde fortrydt hver gang du foretager den mindste redigering, og du bliver nødt til at gå tilbage og hacke kildekoden igen.

Hvis du ikke kontrollerer sammenbrud rækkefølgen, dette billede forklarer tydeligt, hvad der kan gå galt. Du bør også undgå at foretage geografiske referencer (som "i kolonnen til venstre"), da uanset hvad der var til venstre eller højre på en mobil kan flyttes til over eller under, plus Hvis du får læseren til at tro, at det er vigtigt nok at rulle for at se, så bliver de nødt til at rulle tilbage igen, og det er ikke cool.

7. Du har muligvis brug for forskellige skriftstørrelser til forskellige layouts

Det er let at kontrollere skrifttypestørrelse med CSS, og du kan indstille forskellige skriftstørrelser og endda forskellige skrifttyper (hvis de ser bedre ud) til bestemte størrelser på skærmen. Du kan finde visningsstørrelsen med CSS-medieforespørgsler, og derefter ændrer du skriftstørrelsen eller skrifttypen til at være på værdier, der viser indholdet med størst mulig fordel på den enhedstype, du målretter mod.

8. Det er bedst at bruge responsive billeder

Alle billeder skal være responsive når det er muligt. Dette medfører, at nogle gange kan detaljerne i et billede gå tabt, hvis det skaleres for meget ned. En løsning på dette problem er at gøre billedet klikbart, så brugeren kan se en zoomet version af billedet adskilt fra indholdet. Den normale måde at gøre dette på er via en modal dialogboks.

header image med tilladelse fra Artur Martynowski