10 Jaw Droping Responsive Landing Pages
'Responsive' er den seneste bevægelse i webudvikling - og en der er brug for ret dårligt. Hver dag vokser antallet af enheder, platforme og browsere, der bruges til at få adgang til internettet. Og mens de fleste brugere stadig har adgang til internettet fra traditionelle platforme, er efterspørgslen efter flydende og adaptive websites stærkere end nogensinde.
Mange designere tager denne forandring til hjerte og skaber nogle spektakulære stykker, der trives i mobil-, tablet- og skrivebordsmiljøer.
Følgende steder smelter skønhed med lydhurtige webdesignteknikker og viser virkelig, hvad der kan opnås med lidt innovation. Så tag nogle popcorn og et notesblok, du vil gerne være opmærksom.
StephenCaver.com
Når du åbner denne side på dit skrivebord er det straks fængslende. Den modige, sorte, begrundede overskrift kontrasterer smukt med den næsten vandfarvelignende kvalitet af Mojave-ørkenens baggrund. Når dette websted tilpasser til mobilstørrelse, er ændringen signifikant, og webstedet ser stadig godt ud.
FoodSense.is
Med det brede layout, de rene linjer og enkel struktur denne side er et fantastisk eksempel på minimalistisk webdesign. Når den ses på en tablet eller mobil, justeres den uden at gå på kompromis med sammensætning eller strømning.
Warface.co.uk
Brugen af farve er slående, og den innovative placering af 3D-figurerne i forgrunden af webstedet involverer virkelig seeren. Siden er unik og spændende, og ingen af virkningerne går tabt på mobilen.
DanielVane.com
Herefter lader designeren sit arbejde tale for sig selv. Landingssiden er smuk i sin fulde enkelthed, og det bæres perfekt på mobilen, hvilket efterlader en særligt arresterende illustration, der indeholder et subtile logo.
SasquatchFestival.com
Denne side er sjov og legesyg og unik blandt de andre steder på denne liste. De foregår ren enkelhed for at have det sjovt med farve, billeder og ikoner på en måde, der stadig klarer at levere på stil. Dette kan være svært at gøre i et lille rum, men designerne af Sasquatch klare ubesværet.
GravitateDesign.com
Anvendelse af form i denne side skiller sig ud med det samme. Ved at undgå brugen af grænser og indholdskasser har de formået at oprette et websted, der viser deres arbejde på sit bedste.
VisualSupply.co
På samme måde som Warspace er det billedet der virkelig virker denne hjemmeside . Det er perfekt struktureret og ser smukt ud på alle enheder.
StudioMds.co
Mørke farver kan undertiden overses i webdesign, men Studio Mds forbedre deres indhold med deres dristige beslutning. Layoutet justeres for at passe til en mindre skærmstørrelse, der kun taber overflødige links.
ForefathersGroup.com
Denne side har en god vintage følelse og bruger tekstur, billedbehandling og skrifttype til at skabe det. Det smutter ned smukt (men det er en skam at miste den abe).
MapBox.com
Farveskemaet og brugen af fotos giver Mapbox et rent rum til at fremvise deres produkt. Igen vinder simplicitet ud over kompliceret eller kræftigt design, og det er netop derfor, det fungerer godt på en mindre skærm.
Ting at huske på, når du designer
Så nu hvor du har kigget på nogle stjernens lydhøre websteder, er du sikkert kløe for at begynde at designe din egen. Men før du løber af, er her et par ting at huske.
Billeder
En hindring for lydhør design er, hvordan enheder viser fotos. En MacBook Pro med en nethindenhed skal gøre et billede med en meget højere opløsning end en mobiltelefon, hvilket ofte kan skabe problemer. Engang til side trin dette problem er at uploade både høj og lav opløsning kopier af dine fotos. Ved hjælp af CSS kan du derefter bestemme hvilket billede der indlæses baseret på enhedens skærmopløsning. Hvis du bruger lagerbilleder, skal du sørge for at splurge for den højere rez-indstilling.
Bestemmelse af breakpoints
Oftentimes lydhørige design er bygget op omkring, hvad der er kendt som "break points" - eller den opløsning, som layoutet ændrer - primært baseret på almindelige enhedens skærmstørrelser. Problemet med denne tilgang er imidlertid, at det ikke tager højde for, hvor forskellige skærmstørrelser virkelig er. Der er ingen "universel" størrelse længere. Så i stedet for forudbestemte breakpoints på 360px (mobil), 768px (tablet) og 1024px (desktop) er det bedre at lade dit design tale for sig selv. Start med et færdigt layout, og skræddersy størrelsen på dit vindue, indtil designet bryder - gør dette til et af dine breakpoints og fortsæt derefter. Du vil opdage, at dit websted flyder meget glattere.
Har du stødt på en fantastisk lydhurtig destinationsside? Har du designet en selv? Lad os vide i kommentarerne.