Responsiv webbdesign är ett av de hetaste ämnena bland designers och utvecklare just nu. Om du inte är helt säker på vad det handlar om kommer vi att gå igenom vad det är, hur det fungerar och hur CSS-mediafrågor är något du behöver för att börja integrera i dina egna mönster.
För att avsluta det hela kommer vi att sluta med tjugo seriöst imponerande av lyhörda mönster som använder mediefrågor för att presentera erfarenheter som särskilt tillgodoses olika besökare.
#
Vad är mediefrågor?
CSS3 har medfört en massa snygga visuella effekter som skuggor och animationer, men hur är det med praktiska förbättringar? Finns det något om CSS3 som faktiskt förbättrar sättet att bygga webbplatser från en användbarhetssynpunkt?
Svaret är en rungande? Ja? och beror i stor utsträckning på att mediafrågor inkluderas. Mediafrågor är otroligt användbara eftersom de löser ett stort problem som uppstod ganska plötsligt i webbdesign: behovet av att designa för väldigt olika skärmstorlekar.
Användarens skärmstorlekar har alltid skiljts men för det mesta var skillnaden begränsad till några inches och du kan satsa på en stor majoritet av din publik som passar inom parametrar som var ganska lätta att designa runt. Dessa dagar men du har några användare på en 27 "Apple Cinema Display och andra på en 3,5" smartphone.
Det är en stor skillnad och det finns gott om stopp på vägen. Det ständigt växande antalet enheter som är webbvänliga gör det allt svårare för designers att presentera en statisk lösning som tillgodoser allas behov.
Detta behov har fött tanken på en responsiv webbdesign, som går långt bortom vätskesidans bredd och ändrar dramatiskt layouten på en sida eftersom storleken på webbläsarfönstret eller enhetsskärmens storlek ändras. Mediafrågor är ett av de kraftfullaste verktygen för att uppnå detta mål eftersom de tillåter designern att ställa in speciell CSS enligt vissa förinställda regler.
Owltastic: Ett utmärkt exempel på Responsive Web Design
Informationen ovan är lite abstrakt, så låt oss se hur det här fungerar i den verkliga världen genom att titta på ett exempel från den begåvade designern och utvecklaren Meagan Fisher. Så här ser hennes webbplats ut i mitt 13-tums MacBooks webbläsarfönster på helskärm.
Nu, om jag justerar den här fönsterstorleken börjar mycket att hända. Kolumnerna anpassar sin bredd, layoutskiftet blir mer vertikalt och icke-väsentliga objekt försvinner helt. Här är en skärmdump med två sidbredd, kolla in hur mycket designen anpassar sig till olika situationer.
Observera att vi började med en tre kolumnlayout, som sedan förvandlades till en två kolumnlayout och äntligen landade i en enkelspelslayout med mitt webbläsarfönster så lite som det skulle gå. Det här är mer än bara en formgivare som visar sig på andra. Det här är ett allvarligt imponerande försök att göra webbplatsen inte bara användbar, men speciellt optimerad för det brett utbud av enheter som sannolikt kommer att se den.
Hur det fungerar
Det kan tyckas att det kommer att bli massor av extra arbete, och jag skulle ljuga om jag sa att det är en smärtfri process, men den goda nyheten är att CSS och mediasökningar gör mycket av det tunga för dig. Låt oss hoppa in i Owltastics kod lite för att se hur allting fungerar.
Till att börja med kommer du att se mycket expert användning av flottor och procentsatser som används för limning. Notera i satsen under Meagan använda procentandelar för både elementets bredd och marginen. Hon är också noggrann att berätta för var dessa procentsatser kommer ifrån i form av en kommentar med lite snabb matte.
Detta gör layout definitivt lite knepigare, men det lägger en bra grund för flexibla sidbredder, även innan hon kommer till mediafrågorna. De egenskaper som visas ovan är dock för det mesta vad du ser att manipuleras vidare inom mediefrågorna.
Här kan vi se att Meagan har riktade en maximal skärmbredd på 800px och definierade sedan en serie stilar som direkt gäller enheter som uppfyller specifikationen. Härifrån är floats, margins, padding, display och jämna bilder tweaked för optimal layout i den storleken.
Totalt fem olika mediafrågor ställs in för olika omständigheter: maxbredd: 960px, 800px, 640px, 540px och 480px. Var och en av dessa är ganska noggranna för att beskriva specifika beteenden för den skärmstorleken. Här är sektionen för maxbredd: 480px.
Ett intressant knep här som du bör ägna särskild uppmärksamhet åt är användningen av flytande bilder. Genom att ställa in bredden på en bild till 100% kommer den att passa in i behållarens bredd och ändra storlek när webbläsarfönstret ändras. Ethan Marcotte förklarar denna teknik fördjupad på sin webbplats Unstoppable Robot Ninja.Var noga med att ändra storlek på ditt webbläsarfönster på sin webbplats och kolla rubrikbilderna svara.
Fler Live-exempel
Det bästa sättet att studera lyhörda webbdesign och mediafrågor är att få en glimt av dem i åtgärd. Här är en kort lista som innehåller några webbplatser som jag fann imponerande. Med varje sida, titta inte bara på designen, testa den genom att ändra storlek på ditt webbläsarfönster. Gra dig också in i CSS för att se hur webbplatser fungerar och fundera på hur du kan implementera dessa tekniker i dina egna mönster.
En lista Apart: Artikel Exempel
Trent Walton
Tänk på vitamin
Deren K.
Gör föreläsningar
About.com
Sasquatch Festival
Earth Hour
BMX Feed
Remo - Powerstroke Pro
De moderna herrarna
Naomi Atkinson
Converge SE
Sleepstreet
Alsacreations
En annan design
Yiibu
Sweet Hat Club
Laufbild Werkstatt
Upphöra
Dmig 5
Slutsats
Sammanfattningsvis gör det stora antalet enheter som använder webben dessa dagar det nödvändigt att skapa webbdesigner som kan anpassas till många olika skärmstorlekar och CSS-mediafrågor ger ett enkelt sätt att göra exakt det.
För att vara ärlig, när jag först hörde om mediefrågor rullade jag mina ögon och tänkte att det bara skulle lägga till ytterligare ett lager av arbetet på alla de steg som vi redan måste gå igenom för att göra våra mönster passande som användbara. Men ju mer jag lär mig om och experimenterar med dem, desto mer är jag övertygad om att det här är hur webbdesign ska kontaktas i vad Steve Jobs kallar? En post-PC-era ?.