10 Jaw Droping Responsive Landing Pages
'Responsive' er den siste utviklingen i webutvikling - og en som trengs ganske dårlig. Hver dag vokser antallet enheter, plattformer og nettlesere som brukes til å få tilgang til internett. Og mens de fleste brukerne fortsatt har tilgang til nettet fra tradisjonelle plattformer, er etterspørselen etter flytende og adaptive nettsteder sterkere enn noensinne.
Mange designere tar denne forandringen til sinns og skaper noen spektakulære stykker som trives i mobile, tablett- og skrivebordsmiljøer.
Følgende nettsteder smelter skjønnhet med responsive webdesignteknikker og viser virkelig hva som kan oppnås med litt innovasjon. Så ta noen popcorn og et notisblokk, du vil ønske å være oppmerksom.
StephenCaver.com
Når du åpner denne siden på skrivebordet ditt er det umiddelbart fengslende. Den dristige, svarte, begrunnede overskriften kontrasterer vakkert med den nesten akvarelllignende kvaliteten på Mojave-ørkenen. Når dette nettstedet tilpasser seg mobilstørrelse, er endringen signifikant, og nettstedet ser fortsatt bra ut.
FoodSense.is
Med det brede oppsettet, de rene linjene og enkel struktur denne siden er et fantastisk eksempel på minimalistisk webdesign. Når den vises på en tavle eller mobil, justeres den uten å gå på kompromiss med sammensetning eller flyt.
Warface.co.uk
Bruken av farge er slående, og den nyskapende plasseringen av 3D-figurene i forgrunnen av nettstedet virkelig engasjerer betrakteren. Siden er unik og spennende, og ingen av effekten går tapt på mobilen.
DanielVane.com
Igjen her lar designeren sitt arbeid tale for seg selv. Destinasjonssiden er vakker i sin fullstendige enkelhet, og dette gjennomføres perfekt på mobil, og etterlater en spesielt arrestativ illustrasjon som inkluderer en subtil logo.
SasquatchFestival.com
Denne siden er morsomt og lekfullt og unikt blant de andre nettstedene på denne listen. De forløper ren enkelhet for å ha det gøy med farge, bilder og ikoner på en måte som fremdeles klarer å levere på stil. Dette kan være vanskelig å gjøre i et lite rom, men designerne av Sasquatch klarer uten problemer.
GravitateDesign.com
Bruk av form i denne siden skiller seg ut med det samme. Ved å unngå bruk av grenser og innholdskasser har de klart å skape et nettsted som viser sitt arbeid på sitt beste.
VisualSupply.co
På samme måte som Warspace, er det bildene som virkelig fungerer for denne nettsiden . Den er perfekt strukturert og ser vakker ut på hver enhet.
StudioMds.co
Mørke farger kan noen ganger overses i webdesign, men Studio Mds forbedre innholdet med sin dristige beslutning. Oppsettet justerer for å passe til en mindre skjermstørrelse som mister ingenting, men overflødige koblinger.
ForefathersGroup.com
Denne siden har en flott vintage følelse og bruker tekstur, bilder og skrift for å skape det. Det glir ned vakkert (men det er synd å miste den apen).
MapBox.com
Fargevalg og bruk av bilder gir Mapbox et rent rom for å vise frem sitt produkt. Igjen vinner enkelhet over kompleks eller masete design, og det er nettopp hvorfor det fungerer bra på en mindre skjerm.
Ting å huske på når du designer
Så, nå som du har sett på noen stjernespørsmålssider, er du sannsynligvis kløe for å begynne å designe din egen. Men før du går av, er det noen ting å huske.
Bilder
Et hinder for responsiv design er hvordan enheter viser bilder. En MacBook Pro med en retina-skjerm skal gi et bilde med en mye høyere oppløsning enn en mobiltelefon, noe som ofte kan skape problemer. En vei til side trinnet dette problemet er å laste opp både høy og lav oppløsning kopier av bildene dine. Ved hjelp av CSS kan du deretter bestemme hvilket bilde som er lastet basert på enhetens skjermoppløsning. Hvis du bruker lagerbilder, sørg for at du splurge for det høyere rez-alternativet.
Bestemme bruddpunkter
Ofte er responsive design bygget rundt det som kalles "pausepunkter" - eller oppløsningen der layoutet endres - basert hovedsakelig på vanlige skjermstørrelser for enhetsenheter. Problemet med denne tilnærmingen er imidlertid at det ikke tar hensyn til hvor forskjellige skjermstørrelser egentlig er. Det er ingen "universell" størrelse lenger. Så, i stedet for å bestemme breakpoints på 360px (mobil), 768px (tablett) og 1024px (desktop), er det bedre å la designet snakke for seg selv. Start med en ferdig layout og endre størrelsen på vinduet til designbruddene - gjør dette til en av dine brytpunkter og fortsett deretter. Du finner at nettstedet ditt flyter mye jevnere.
Har du kommet over en fantastisk responsiv destinasjonsside? Har du laget en selv? Gi oss beskjed i kommentarene.