3 Responsive Design Katastrofer - och hur man undviker dem
Responsiva designmetoder är till stor hjälp för utvecklare eftersom de tillåter oss att tjäna innehåll till det bredaste utbudet av enheter utan att behöva behålla separata versioner av webbplatsen och utan några negativa nackdelar med andra metoder, såsom skalning och vätskeformat.
Den här artikeln kommer att lyfta fram de tre bästa konstruktionsfelterna möter med lyhörda mönster och kommer att ge några strategier för att undvika dessa misstag.
Skalning vs vätska vs responsiv
Det finns mycket förvirring över dessa villkor och designers använder dem ofta felaktigt. I själva verket är varje av dem distinkta utvecklingssteg i layoutteknik som har uppstått över tiden i takt med tekniska framsteg.
Skalningslayouter är utformade för att skala varje element relativt alla andra element . De är mottagliga i den meningen att de kommer att skala in innehållet dynamiskt som svar på förändringar i visningsportens storlek. Layouten i sig förblir statisk och ändrar storleken på varje element för att bibehålla ett jämnt utseende.
Ovan: Ett exempel på en skalningslayout vid olika upplösningar: Designet ger läsbarhet för konsistens.
Vätskeformat är olika eftersom de skala behållarelement i förhållande till visningsportens storlek . Detta uppnås genom att använda relativa enheter som ems för att övervinna problemet med krympande text. Designen kan brytas av användaren som skalar den.
Ovan: Exempel på en vätskelayout vid olika upplösningar: Designet ger konsistens för läsbarhet.
Responsiva layouter skala inte någonting. Istället ändrar de vad som visas beroende på storleken på visningsporten.
Ovan: Ett exempel på en responsiv layout vid olika upplösningar.
Katastrof 1) Inpakning menyer
Om du använder en navbar högst upp på sidan, ska en responsiv design "snap" den till ett mer kompakt format när sidan visas på en liten skärm. Men det fungerar inte alltid perfekt om visningsområdet är bredare än brytpunkten, men för liten för att visa alla menyalternativ i en enda rad. Resultatet är en meny som wraps.
Det finns flera sätt att lösa detta problem. Den första är att minska antalet objekt som visas horisontellt på navbaren genom att sortera dem i kategorier och underkategorier. Du kan sedan använda nedrullningsobjekt för att visa underkategorierna när en kategori väljs.
Det andra sättet är att ändra brytpunkten till ett lägre värde. Det faktiska numret som ska användas är den bredd som nav navstarten börjar misslyckas, inte en specifik enhetstorlek.
Det tredje sättet är att använda en annan meny för enheter, till exempel en glidlådor.
Katastrof 2) Använda bilder med fast bredd
Innehållsområden är vanligtvis inställda på en storlek i förhållande till visningsporten. Så när en bild med fast bredd är bredare än områdets storlek, inträffar bildskärning.
Ovan: Exempel på en dålig bild med fast bredd som är för stor: nu har det rullningsfält och innehållet trycks ned på skärmen.
Du kan undvika detta problem genom att använda relativa enheter för att ställa in bildens bredd, eller om du använder en ram som stöder den (t.ex. Bootstrap) kan du använda en lyhörd bildklass (t.ex.: class = "img-responsive" ).
Ovan: Samma element med en responsiv bildklass approach: nu är rullningsfältet borta.
Katastrof 3) Elementförvrängning
Den här är lite mer obskär, men i huvudsak vad som händer när din layout visas på en liten viewport är att alla obearbetade kolumner beter sig som rader. Detta är ett problem eftersom förvrängningen av innehållet oavsiktligt ändrar hierarkin för din design.
Ovan: Kolumnen blir en rad, snedvrider innehållet.
Lösningen är uppenbar, men det är överraskande hur många som kämpar med det: helt enkelt uttrycka elementets höjd, bredd och vaddering. Om den rör sig ur position och täcker andra element kan du tvinga det att vara där du vill genom att lägga in det i div och inställningsmarginaler.
Planering hjälper till att undvika misstag
Den här artikeln har bara diskuterat de tre vanligast förekommande svåra designkatastroferna, men det finns många andra sätt att en bra design går fel. Att förebygga fel är inte för svårt. Moderna webbläsare har inbyggd responsiv layouttestning, så planera din design bra och testa ofta.