Responsiv webbdesign kräver ett helt annat sätt att tänka på layout som är både utmanande och spännande. Konsten att layout var redan komplex nog för århundradena att den definierades av fasta element, nu blir saker exponentiellt mer komplicerade, eftersom layouterna blir alltmer adaptiva.
För att hjälpa omprogrammera din hjärna för att överväga layouter på nya sätt, kommer vi att titta på några intressanta lyhörda designmönster som implementeras av begåvade designers över hela webben.
Börjar små
Ett av de mest populära sätten jag ser responsiv design implementeras är att helt enkelt tilldela en fluidbredd till innehållets kolumner på sidan som blir smalare och smalare som sidbredd minskar tills den ena stora hoppa till en enkelkolonns mobillayout . Vi kan se denna teknik på jobbet på lyxhotellwebbplatsen 137 Pillars House.
Som du kan se går layouten verkligen bara genom en enda större omvandling. Resten av anpassningen är mycket gradvis och är bara en inskränkning av den ursprungliga layouten.
Detta verkar vara hur många designers som klibbar sina ordspråkiga tår i för att testa vattnet i lyhörd design. Det är ett bra ställe att starta eftersom det kan kräva mycket mindre tid och ansträngning än flera större omvandlingar, samtidigt som det fortfarande är fördelaktigt att servera en webbsida som ser bra ut i vilken visningsportstorlek som helst.
Snarare än att helt enkelt flörta med lyhördhet, men jag vill uppmuntra dig att ta stöten och utforska de stora möjligheterna som du nu har tillgång till när det gäller layoutdesign. Förse mig inte fel, det är inget fel med tillvägagångssättet ovan, men det är alltid en bra idé att ta dina färdigheter ett steg längre och sträcka vad du anser vara själv att kunna dra av.
Mondrian
Vårt första mottagliga webbdesignmönster var en som Piet Mondrian skulle ha uppskattat. Den använder tre enkla och stora innehållsdelar åtskilda av tjocka linjer. Det ursprungliga tillståndet är ganska mångsidigt och kan hålla sig bra under en ganska intensiv minskning av bredden.
En gång blir det för smal för initialtillståndet trots att widescreen-layouten anpassas och blir en vertikal layout. Detta uppnås genom att ta de två mindre rutorna till höger och flytta dem under den stora, presenterade rutan. Denna layout bryter sedan ner till vår standard enkelspels mobilvy där varje innehållsdel helt enkelt staplas under det sista.
I det vilda
Vi finner att detta mönster används på Andersson-Wise, ett arkitektfirma. Vi kan se att det är perfekt för att visa stora, vackra bilder. För att komplettera det primära fokuset är fotot, de två rutorna på sidan enkla och fyllda med en fast färg som samplas från bilden. Typen är stark och ren, vilket ger webbplatsen en mycket sofistikerad känsla.
Med tanke på att layouten är så boxdriven, är det ett ganska enkelt lyhörd mönster för att ta sig om dig. Om du har en minimal mängd innehåll att arbeta med, borde du ge det ett skott.
Grundläggande galleri
Thumbnail gallerier är ett populärt designmönster som har funnits nästan lika länge som webben. Dessa dagar håller konstruktörer vanligen dem ganska minimala: enkla rektanglar ordnade jämnt på en solid bakgrund. Det här formatet är super lätt att återlämna när visningsporten ändras. Du måste helt enkelt minska antalet kolumner några gånger.
Vi gick förbi denna process i djupet i vår artikel om att bygga ett lyhört miniatyrgalleri så var noga med att kolla in det om du letar efter en stegvis guide för processen.
I det vilda
För att se detta mönster på en verklig webbplats, kolla in Brad Sawickis portfölj. Höger på sin hemsida börjar han med ett enkelt tre kolumn galleri som kollapsar ner till en dubbel och äntligen en enkelspel layout. Fördelen här är att arbetsförhandsgranskningens bildstorlekar gör det mesta av det tillgängliga visningsporten så att tittaren alltid kan se dem i ett fint stort format.
Erbjudna objekt
Den här är mycket som gallerilayouten, bara den är mer inriktad på att markera några saker i motsats till flera. Exemplet här använder fyra utvalda objekt men det är lika populärt, eller ännu mer, att se tre objekt istället.
Som du kan se börjar layouten med de fyra utvalda objekten sida vid sida med ett inledande innehåll ovan. Det följer sedan galleriets väg som det hoppar ner till två kolumner och äntligen en. Lägg märke till hur det inledande innehållet anpassas också: navigeringen går från höger sida för att spola åt vänster under huvudrubriken eller logotypen.
I det vilda
Webbdesignföretaget Splendid gör perfekt användning av detta mönster på deras webbplats. De animerar även övergångarna, något som rent utförs för designnerds skull, som ändrar storleken på webbläsaren för att se transformationen.
Denna speciella webbplats är en riktigt bra implementering av lyhörd webbdesign. Det känns aldrig ens lite men hanterar varje visningsstorlek du kan kasta på den med perfekt perfekt finess.
Kolumn Flip
Detta är det mest komplicerade mönstret än. Överst i layouten finns några riktigt stora element som tar upp din uppmärksamhet och presenterar webbplatsen. Nästa del är uppdelad i tre kolumner, men när du minskar webbläsarens storlek, viker den första kolumnen på sin sida och blir en rad som sitter ovanför de andra två kolumnerna.
Det är en ganska komplicerad omvandling men det är ganska effektivt. Du kan enkelt dra av det genom att lägga till i en mediefråga som flyter objekten i den kolumnen till vänster och sedan rensa float så de andra två kolumnerna förblir intakta.
Det sista steget är naturligtvis att återflöda allt igen till en bred kolumn. Det kan göra mycket rullning, men så länge du inte överfyller sidan med innehåll är det inte så illa.
I det vilda
Inspirationen för denna layout kommer från Palantir, ett annat utvecklingsföretag. Observera att webbutvecklare först experimenterar med responsiv design på sina egna webbplatser, vilket kan fungera som både en bra lärande och ett exempel för kunder.
Palantir är ett lysande exempel på hur drastiska dina omvandlingar i lyhörd webbdesign kan vara. Det här är mer än att bara minska bredden på en kolumn eller eliminera den helt, den representerar en stor reflowing av sidans innehåll för att kontinuerligt maximera tillgänglig bredd.
Feature Shuffle
Det här sista mönstret är en annorlunda tanke på den presenterade objektidén. Jag gillar det verkligen eftersom det slår en liten kurva under den första återflödet. I stället för att helt enkelt släppa till två kolumner och flyta till vänster skapar det en förskjuten två kolonnlayout där sektionerna floats åt vardera sidan.
För enkelspelets layout släpps miniatyrbilderna helt och hållet för att tillåta större tonvikt på textinnehållet. Det här är valfritt självklart, ett av de föregående enkelspaltformaten kan lika enkelt genomföras.
I det vilda
Orestis använder detta mönster på deras webbplats. De tre utvalda objekten är de tjänster som de erbjuder, som var och en representeras av en färgstark illustration.
När du ändrar storleken på webbläsaren staplas tjänsterna och bilderna flyttas antingen till vänster eller höger. Det är en rolig och knäppig sida som du måste kolla in dig själv för att verkligen få en känsla för hur allting fungerar.
Fler mönster
I min forskning för denna del kom jag över en befintlig artikel av Luke Wroblewski i samma ämne. I stället för att titta på mycket specifika mönster som jag har gjort här gör Luke ett fantastiskt jobb att verkligen bryta gemensamma layouter ner till deras mest grundläggande idéer och visa dig hur de fungerar. Det är en riktigt bra bit och jag gillar verkligen hur han visar hur layouten fungerar både inom och utanför kanfasen.
Slutsats
Jag hoppas att ditt sinne nu är överdriven och tänker på responsiva layouter. Webbdesignsgemenskapen har spenderat massor av tid på att diskutera de tekniska aspekterna om hur responsiv CSS uppnås genom mediefrågor. Det är definitivt dags att vi börjar ge en djup tanke på de faktiska designaspekterna av denna spännande nya gräns.
Lämna en kommentar nedan och låt oss veta vad du tycker om dessa lyhörda designmönster. Skulle du använda någon av dem i ditt eget arbete? Varför eller varför inte?