Når responsivt design går galt (og hvordan fikser man det)

De fleste websteder, der bruger responsivt design, bruger det forkert, hvilket fører til problemer. Den generelle tilgang til lydhør design er en doven, og hvis du tager den tilgang, vil nogle af dine lydhøre websteder fungere helt fejlfrit, og mange af dem vil ikke. For dem, der fungerer perfekt, kommer det sandsynligvis til et spørgsmål om held.

Begrebet responsivt design er enkelt, men dets meget enkelhed er, hvad der fører folk til at begå fejl så let. Designere med mange års erfaring er vant til at designe til skrivebordet, og derfor planlægger de normalt et design baseret på et skrivebordslayout.

Desktoplayouter adskiller sig fra tabletlayouter og mobillayouter, fordi de normalt er i flere kolonner, normalt inkluderer store mængder hvidt rum, og alt er bare ”stort” for mangel på et bedre ord. Hvis der anvendes responsive designteknikker, skal dette layout med flere kolonner brydes ned i en enkelt kolonne.

Hvis det faktisk er alt dit responsive design gør, når det vises på en mobilenhed, kan du have et problem. Hvor meget af et problem afhænger af din holdning, men gode designere er interesserede i god UX. De bekymrer sig endnu mere om dårlig UX. Hvis dit websted har en dårlig UX, og du ønsker at være en god designer, skal du løse 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 person, der virkelig har fået 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 kerneindholdet på webstedet uden at gøre brugeroplevelsen til en frustrerende rullefest. Her er et par af de ting, der er værd at overveje, når man opdeler et skrivebordsdesign til et mobilt design:

1. "Mobil først" er moronic

Undskyld, men det er det. Alle parroterer dette, men som et koncept er det ikke særlig nyttigt, for hvis du virkelig designer “mobil først”, vil det være mareridt, når du prøver at skalere det op til et desktop-design, medmindre du holder fast med 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:

  • Stort desktop
  • Almindeligt skrivebord
  • 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

Desktopdesignet inkluderer en af ​​disse enorme tykke sidefødder med masser af interne links? Fantastisk, det vil sandsynligvis være meget praktisk på et skrivebord. På en mobil ser det latterligt ud og er mere end bare et irriterende touch. Du kan designe helt forskellige sidefødder til hvert brudspunkt for enheden. Gør bare disse footer-links 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 skjuling af indhold "straffer" mobilbrugere, men det er lidt af en absurd forestilling. Virkeligheden er, at du skjuler indholdet, fordi det er der for at forbedre skrivebordsoplevelsen, men ikke i tilstrækkelig grad bidrager til kernens budskab på webstedet, for 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 denne kunde er en webdesignklient. Klienter ved sjældent, hvad der er bedst for dem, og det er vigtigt at hævde dig selv som en webdesigner, der ved, hvordan man leverer det rigtige resultat til klienten. Ellers risikerer du at oprette endnu et websted 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 lydhøre billeder

Alle billeder skal være lydhøre, når det er muligt. Dette bringer med sig, at detaljerne i et billede undertiden kan gå tabt, hvis det skaleres ned for meget. 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

Bogdan Rancea

Bogdan er et grundlæggende medlem af Inspired Mag og har akkumuleret næsten 6 års erfaring i denne periode. På fritiden kan han lide at studere klassisk musik og udforske billedkunst. Han er også ganske besat af fixies. Han ejer allerede 5.