10 Jaw Dropping Responsive Landing Pages
'Responsive' is de nieuwste beweging in webontwikkeling - en die is behoorlijk nodig. Elke dag groeit het aantal apparaten, platforms en browsers dat wordt gebruikt voor toegang tot internet. En hoewel de meerderheid van de gebruikers nog steeds toegang heeft tot internet via traditionele platforms, is de vraag naar vloeibare en aangepaste websites sterker dan ooit.
Veel ontwerpers nemen deze verandering ter harte en creëren een aantal spectaculaire stukken die gedijen in mobiele, tablet- en desktopomgevingen.
De volgende sites combineren schoonheid met responsieve webontwerptechnieken en laten echt zien wat met een beetje innovatie kan worden bereikt. Dus pak wat popcorn en een notitieblok, je gaat aandacht willen besteden.
StephenCaver.com
Wanneer je opent deze site op je bureaublad is het meteen boeiend. De gedurfde, zwarte, gerechtvaardigde kop contrasteert mooi met de bijna aquarelachtige kwaliteit van de Mojave-woestijnachtergrond. Wanneer deze site zich aanpast aan de mobiele grootte, is de wijziging aanzienlijk en ziet de site er nog steeds fantastisch uit.
FoodSense.is
Met zijn brede lay-out, de strakke lijnen en eenvoudige structuur deze site is een fantastisch voorbeeld van minimalistisch webdesign. Wanneer bekeken op een tablet of mobiel past het zich aan zonder afbreuk te doen aan de compositie of flow.
Warface.co.uk
Het gebruik van kleur valt op en de innovatieve plaatsing van de 3D-figuurtjes op de voorgrond van de site houdt echt de kijker bezig. De site is uniek en opwindend en geen enkele impact is verloren op mobiel.
DanielVane.com
Ook hier laat de ontwerper zijn werk voor zichzelf spreken. De bestemmingspagina is mooi in zijn full-sized eenvoud en dit draagt perfect bij op mobiel, met als resultaat een bijzonder aansprekende illustratie met een subtiel logo.
SasquatchFestival.com
Deze site is leuk en speels en uniek onder de andere sites op deze lijst. Ze zien af van een eenvoudige eenvoud om plezier te hebben met kleuren, afbeeldingen en pictogrammen op een manier die nog steeds in staat is om op stijl te leveren. Dit kan moeilijk zijn om te doen in een kleine ruimte, maar de ontwerpers van Sasquatch beheren moeiteloos.
GravitateDesign.com
Het gebruik van vorm in deze site valt meteen op. Door het gebruik van randen en inhoudsvakken te vermijden, zijn ze erin geslaagd om een site te maken die hun werk op zijn best laat zien.
VisualSupply.co
Net als bij Warspace is het de beeldtaal waar het echt voor werkt deze website . Het is perfect gestructureerd en ziet er op elk apparaat mooi uit.
StudioMds.co
Donkere kleuren kunnen soms over het hoofd worden gezien in webdesign, maar Studio Mds hun inhoud verbeteren met hun gewaagde beslissing. De lay-out wordt aangepast aan een kleiner schermformaat en verliest niets dan overbodige koppelingen.
ForefathersGroup.com
Deze site heeft een geweldig, vintage gevoel en maakt gebruik van textuur, beeldspraak en lettertype om dat te creëren. Het wordt prachtig smaller (maar het is zonde om die aap kwijt te raken).
MapBox.com
Het kleurenschema en het gebruik van foto's geven Mapbox een schone ruimte om hun product te presenteren. Wederom wint de eenvoud boven een complex of kieskeurig ontwerp, en dat is precies waarom het op een kleiner scherm goed werkt.
Dingen om in gedachten te houden tijdens het ontwerpen
Dus nu je hebt gekeken naar enkele goed reagerende sites, ben je waarschijnlijk dol op je eigen ontwerpen. Maar voordat je wegrent, zijn hier een paar dingen om te onthouden.
foto's
Een obstakel voor responsief ontwerp is hoe apparaten foto's weergeven. Een MacBook Pro met een retina-display zal een beeld weergeven met een veel hogere resolutie dan een mobiele telefoon, wat vaak tot problemen kan leiden. Een manier om dit probleem te omzeilen is om zowel kopieën met hoge als lage resolutie van uw foto's te uploaden. Met behulp van CSS kunt u vervolgens bepalen welke afbeelding wordt geladen op basis van de schermresolutie van het apparaat. Als u stockfoto's gebruikt zorg er dan voor dat u uitgaat voor de hogere rez-optie.
Breekpunten bepalen
Vaak worden responsieve ontwerpen gebouwd rond zogenaamde "breekpunten" - of de resolutie waarbij de lay-out verandert - voornamelijk gebaseerd op de gebruikelijke schermafmetingen van het apparaat. Het probleem met deze benadering is echter dat er geen rekening wordt gehouden met de verschillen in schermgrootte. Er is geen "universele" maat meer. Dus in plaats van vooraf bepaalde breekpunten op 360px (mobiel), 768px (tablet) en 1024px (desktop) is het beter om uw ontwerp voor zichzelf te laten spreken. Begin met een voltooide lay-out en wijzig het formaat van je venster totdat het ontwerp breekt - maak dit een van je breekpunten en ga dan verder. U zult merken dat uw site veel vloeiender stroomt.
Heb je een fantastische responsieve bestemmingspagina te zien gekregen? Heb je er zelf een ontworpen? Laat het ons weten in de comments.