10 Käftminskning Responsiva målsidor
"Responsive" är den senaste rörelsen i webbutveckling - och en som behövs ganska illa. Varje dag växer antalet enheter, plattformar och webbläsare som används för att komma åt internet. Och medan majoriteten av användarna fortfarande har tillgång till webben från traditionella plattformar, är efterfrågan på flytande och adaptiva webbplatser starkare än någonsin.
Många designers tar denna förändring till hjärta och skapar några spektakulära bitar som trivs i mobila, surfplattformar och skrivbordsmiljöer.
Följande webbplatser smälter skönhet med lyhörda webbdesigntekniker och visar verkligen vad som kan uppnås med lite innovation. Så ta några popcorn och en anteckningsblock, du kommer att vilja uppmärksamma.
StephenCaver.com
När du öppnar denna sajt på ditt skrivbord är det omedelbart fängslande. Den djärva, svarta, motiverade rubriken kontrasterar vackert med den nästan vattenfärgliknande kvaliteten på Mojave Desert-bakgrunden. När den här platsen anpassas till mobilstorlek är ändringen signifikant, och webbplatsen ser fortfarande bra ut.
FoodSense.is
Med sin breda layout, de rena linjerna och enkel struktur denna sajt är ett fantastiskt exempel på minimalistisk webbdesign. När den ses på en tablett eller mobil justeras den utan att kompromissa med komposition eller flöde.
Warface.co.uk
Användningen av färg är slående och den innovativa placeringen av 3D-figurerna i förgrunden av webbplatsen engagerar verkligen tittaren. Platsen är unik och spännande, och ingen av effekten går förlorad på mobilen.
DanielVane.com
Återigen låter konstruktören sitt arbete tala för sig själv. Målsidan är vacker i sin fulla enkelhet, och den bärs helt igenom på mobilen och lämnar en särskilt gripande illustration som innehåller en subtil logotyp.
SasquatchFestival.com
Denna sajt är kul och lekfull och unik bland de andra platserna på denna lista. De förblir ren enkelhet för att ha kul med färg, bilder och ikoner på ett sätt som fortfarande klarar av att leverera på stil. Det kan vara svårt att göra i ett litet utrymme, men designern Sasquatch lyckas utan problem.
GravitateDesign.com
Användning av form i denna sajt sticker ut omedelbart. Genom att undvika användningen av gränser och innehållslådor har de lyckats skapa en webbplats som visar sitt arbete som bäst.
VisualSupply.co
På samma sätt som Warspace är det bilderna som verkligen fungerar den här webbplatsen . Den är perfekt strukturerad och ser vacker ut på alla enheter.
StudioMds.co
Mörka färger kan ibland förbises i webbdesign, men Studio Mds förbättra sitt innehåll med sitt djärva beslut. Layouten justeras för att passa en mindre skärmstorlek och förlorar inget annat än överflödiga länkar.
ForefathersGroup.com
Denna sajt har en bra, vintage känsla och använder textur, bild och teckensnitt för att skapa det. Det slims ner vackert (men det är synd att förlora den apan).
MapBox.com
Färgschemat och användningen av bilder ger Mapbox ett rent utrymme för att visa upp sin produkt. Återigen vinner enkelheten över komplicerad eller noga design, och det är just därför det fungerar bra på en mindre skärm.
Saker att tänka på när du designar
Så nu när du har tittat på några stellar responsiva webbplatser är du förmodligen klåda för att börja designa din egen. Men innan du går av är här några saker att komma ihåg.
foton
Ett hinder för responsiv design är hur enheter visar bilder. En MacBook Pro med en näthinneskärm kommer att göra en bild med en mycket högre upplösning än en mobiltelefon, vilket ofta kan skapa problem. Ett sätt att göra sidan om problemet är att ladda upp både hög- och lågupplösningskopior av dina foton. Med CSS kan du sedan bestämma vilken bild som laddas baserat på enhetens skärmupplösning. Om du använder lagerfoton, se till att du splurge för det högre rez-alternativet.
Bestämning av brytpunkter
Ofta är responsiva mönster byggda kring vad som kallas "brytpunkter" - eller den upplösning som layouten ändras - baseras huvudsakligen på vanliga skärmstorlekar. Problemet med detta tillvägagångssätt är dock att det inte tar hänsyn till hur olika skärmstorlekar verkligen är. Det finns ingen "universell" storlek längre. Så istället för att bestämma brytpunkter vid 360px (mobil), 768px (tablett) och 1024px (skrivbord) är det bättre att låta din design tala för sig själv. Börja med en färdig layout och sedan ändra storlek på ditt fönster tills designen raderar - gör det här av dina brytpunkter och fortsätt sedan. Du kommer att upptäcka att din webbplats strömmar mycket mjukare.
Har du stött på en fantastiskt mottaglig målsida? Har du utformat en själv? Låt oss veta i kommentarerna.