3 Responsive Design Katastrofer - og hvordan man undgår dem
Responsive designmetoder er meget nyttige for udviklere, fordi de giver os mulighed for at betjene indhold til det bredeste udvalg af enheder uden at skulle opretholde separate versioner af webstedet og uden nogle af de negative ulemper ved andre metoder som skalering og væskelayout.
Denne artikel vil fremhæve de top 3 fejldesignere støder på med lydhøre design, og vil give nogle strategier for at undgå disse fejl.
Scaling vs væske vs responsiv
Der er meget forvirring over disse vilkår, og designere bruger ofte dem ukorrekt. I virkeligheden er hver af disse forskellige evolutionære trin i layoutteknik, der er opstået over tid i tråd med teknologiske fremskridt.
Skalering layout er designet til at skalere hvert element i forhold til hvert andet element . De er lydhør i den forstand, at de vil skalere indholdet dynamisk som svar på ændringer i visningsportens størrelse. Layoutet selv forbliver statisk og ændrer størrelsen på hvert element for at opretholde et ensartet udseende.
Ovenstående: Eksempel på et skaleringslayout ved forskellige opløsninger: Designet giver læsbarhed for konsistens.
Fluidlayouter er forskellige, fordi de skalerer beholderelementer i forhold til størrelsen af visningsporten . Dette opnås ved at bruge relative enheder som ems til at overvinde problemet med krympende tekst. Designet kan brydes af brugeren, der skalerer det.
Ovenstående: Eksempel på et væskelayout ved forskellige opløsninger: Designet giver konsistens for læsbarhed.
Responsive layouts måler ikke noget. I stedet ændrer de, hvad der vises, afhængigt af størrelsen på visningsporten.
Ovenstående: Et eksempel på et responsivt layout ved forskellige opløsninger.
Katastrofe 1) Indpakning menuer
Hvis du bruger en navbar øverst på din side, skal et responsivt design "snappe" det til et mere kompakt format, når siden vises på en lille skærm. Men dette virker ikke altid perfekt, hvis visningsområdet er bredere end brudpunktet, men for lille til at vise alle menupunkterne i en enkelt linje. Resultatet er en menu, der wraps.
Der er flere måder at løse dette problem på. Den første er at reducere antallet af elementer, der vises vandret på navbjælken ved at sortere dem i kategorier og underkategorier. Du kan derefter bruge rullemenuer til at vise underkategorierne, når en kategori er valgt.
Den anden måde er at ændre break point til en lavere værdi. Det egentlige tal, der skal bruges, er den bredde, hvor navlen begynder at mislykkes, ikke en bestemt enhedsstørrelse.
Den tredje måde er at bruge en anden menu til enheder, såsom en glideskuffe.
Katastrofe 2) Brug billeder med fast bredde
Indholdsområder er normalt sat til en størrelse i forhold til visningsporten. Så når et billede med fast bredde er bredere end områdets størrelse, forekommer billedbeskæring.
Ovenstående: Eksempel på et dårligt fast breddebillede, der er for stort: Nu har det rullefelter, og indholdet trykkes på skærmen.
Du kan undgå dette problem ved at bruge relative enheder til at indstille bredden af billedet, eller hvis du bruger en ramme, der understøtter den (f.eks. Bootstrap), kan du bruge en lydhør billedklasse (f.eks .: class = "img-responsive" ).
Ovenfor: Det samme element med en følsom billedklasse tilgang: nu er rullefeltet væk.
Disaster 3) Elementforvrængning
Dette er lidt mere uklart, men i det væsentlige hvad der sker, når dit layout vises på en lille viewport, er det, at alle uhåndterede kolonner opfører sig som rækker. Dette er et problem, fordi forvrængningen af indholdet utilsigtet ændrer dit designs hierarki.
Ovenstående: Søjlen bliver en række, der forvrider indholdet.
Løsningen er indlysende, men det er overraskende, hvor mange mennesker kæmper med det: Du skal blot sætte elementets højde, bredde og polstring udtrykkeligt. Hvis det bevæger sig uden for position og dækker andre elementer, kan du tvinge det til at være, hvor du vil, ved at indpakke det i en div og indstillingsmarginaler.
Planlægning hjælper med at undgå fejl
Denne artikel har kun drøftet de 3 mest almindeligt modståede designkatastrofer, men der er mange andre måder til et godt design at gå galt. Forebyggelse af fejl er ikke for svært. Moderne browsere har indbygget responsiv layout test, så planlæg dit design godt og test ofte.