Hoe de perfecte website met één pagina te ontwerpen
Enkele pagina-ontwerpen kunnen een uitstekende techniek zijn voor het aanpakken van kleinere websites, zelfs die waarvan u denkt dat ze nooit zouden kunnen worden gedaan zonder meerdere pagina's. Er zijn vele goede redenen om een pagina met één pagina te gebruiken, van onderhoudsgemak tot beperkte bandbreedtebehoeften.
Als u een kortere site aanpakt, een site die normaliter een handvol pagina's heeft, overweeg dan om een enkele pagina te gebruiken en kijk of dit het project eenvoudiger en gebruikersvriendelijker maakt. Lees verder voor meer informatie over de voordelen, wanneer (en wanneer niet) om ze te gebruiken en enkele best practices die u moet volgen.
De voordelen van één pagina-ontwerp
Het is duidelijk dat ontwerpen met één pagina niet ideaal zijn voor elk project. Maar er zijn een hele reeks redenen om ze te gebruiken als ze passen.
Ze zijn intuïtief in gebruik
Alles wat een gebruiker moet weten om door een enkele pagina te navigeren, is standaard hoe te scrollen. U kunt pijlen of andere navigatie-aanwijzingen toevoegen, maar met een zeldzame uitzondering, zal het scrollen uw bezoekers van het ene naar het andere gedeelte brengen.
U hoeft zich nooit zorgen te maken dat uw bezoekers vast komen te zitten in meerdere navigatielagen, eindeloos op zoek naar wat ze nodig hebben. Het gebruik van een koptekst of andere navigatielinks is vaak handig als er meerdere secties op de pagina zijn, maar zelfs zonder deze is de site bruikbaar.
Het kan sneller en gemakkelijker te onderhouden zijn
Hoewel deze geen gegeven is, zal een goed gecodeerde pagina met één pagina waarschijnlijk sneller te coderen zijn dan een site met meerdere pagina's. Het ontwerpproces kan soms minder tijd kosten, hoewel dat afhangt van hoe complex de afzonderlijke pagina zal zijn.
Een site met één pagina kan ook bepaalde ontwerpbeperkingen opleggen die het proces versnellen als u een basislay-out in gedachten heeft. Méér dan een site met meerdere pagina's, moet een pagina met één pagina secties hebben die naadloos op elkaar aansluiten. Dat soort beperkingen kan de pagina-ontwikkeling echt versnellen als je duidelijk hebt gedefinieerd wat je wel en niet kunt doen.
Onderhoud kan ook eenvoudiger zijn. Als u maar één pagina hebt om mee af te handelen, is het onderhoud beter gestroomlijnd, zolang uw code maar goed is geschreven om mee te beginnen.
Je wordt gedwongen om te vereenvoudigen
Deze bouwt af van het vorige punt. Als u maar één pagina hebt om mee te werken, moet u de dingen vereenvoudigen tot de meest essentiële componenten. Geen pagina's en pagina's meer met nutteloze marketingpropaganda. Je moet meteen ter zake komen.
Beter SEO-potentieel
Kwaliteitsinkomende links zijn een belangrijk onderdeel van hoe goed een website presteert in zoekmachines. Hoewel zoekmachines niet noodzakelijk de grootste verkeersbron voor veel sites zijn, zijn ze nog steeds over het algemeen belangrijk.
Door slechts één pagina te hebben, hoeft u slechts één pagina aan te linken. Dat kan het belang van de site vergroten voor zover zoekmachines dat doen.
Storytelling kan de actie vergroten
Sites met een enkele pagina gebruiken vaak een verhalende hoek waarin sites met meerdere pagina's minder goed zijn. Dit kan het aantal conversies verhogen en bezoekers inspireren om actie te ondernemen.
Mensen zijn gewend om verhalen te volgen, zowel online als offline, dus dit heeft duidelijke voordelen voor de gebruikerservaring. We hebben verhalen gelezen en gehoord sinds we kinderen waren, dus het is iets dat voor ons vanzelfsprekend is.
Gemakkelijker te organiseren
Er zijn geen eindeloze lijsten van pagina's en sub-pagina's om te organiseren. Nooit meer afvragen of deze pagina of die pagina een ouder of een kind zou moeten zijn. Geen enorme navigatiemenu's en submenu's meer. Het staat allemaal op één pagina. En of u besluit navigatielinks op te nemen of gebruikers eenvoudig te laten scrollen, is aan u en of u denkt dat het bijdraagt aan de gebruikerservaring of niet. Dat is gewoon geen optie als een site meerdere pagina's heeft.
Verminderde bandbreedte
Hoewel dit niet zozeer een probleem is aan de kant van de hosting, kunt u overwegen hoeveel gebruikers uw site tegenwoordig gebruiken via mobiele apparaten. Het verminderen van de hoeveelheid bandbreedte die uw site nodig heeft, wordt gewaardeerd door gebruikers met beperkte dataplannen.
Elimineer mobiele sites
Responsive design is natuurlijk niet beperkt tot sites met één pagina. Maar hoe complexer een site is, des te moeilijker het is om het goed te laten werken op een kleiner scherm, zelfs met een responsief ontwerp. Een site met één pagina is, per definitie, niet ingewikkeld. Het ontwerp reageert over het algemeen gemakkelijker. Vereenvoudigde navigatie en vergelijkbare wijzigingen maken een ontwerp dat ook goed werkt op kleine schermen eenvoudiger.
Parallax of niet parallax?
Afhankelijk van je standpunt is parallax scrollen ofwel het beste wat ooit op het internet gebeurt, of een overmatig gebruikte, gimmickachtige plaag voor onze browsers. Maar waar je ook staat, het ziet er niet naar uit dat het snel zal verdwijnen.
Persoonlijk heb ik het gevoel dat er tijd en ruimte is voor parallax-scrollen. Sommige sites met één pagina kunnen echt profiteren van het effect, terwijl anderen er als gimmicky of erger uitzien: moeilijk te gebruiken. De sleutel is om te beslissen of het parallax scroll-effect dat u wilt gebruiken, iets is dat de bruikbaarheid van de site verbetert, of dat u het alleen wilt gebruiken omdat het er cool uit zal zien.
Een ander ding om te overwegen als je beslist dat je parallax scrollen wilt gebruiken, is of je JavaScript gebruikt of een eenvoudige CSS-techniek om dit te doen. Zie het bronnengedeelte voor meer informatie over beide opties.
Wanneer een site met één pagina gebruiken en wanneer niet
Hoewel er veel voordelen zijn voor sites met één pagina, zijn ze geen perfecte oplossing voor iedereen. Er zijn veel momenten waarop je een ontwerp met één pagina niet zou moeten gebruiken, terwijl er nog genoeg andere momenten zijn waarop een pagina met één pagina veel logischer is dan een pagina met meerdere pagina's.
Als u een site instelt die toch maar een handvol pagina's heeft, dan is een site met één pagina misschien perfect. Alles op één pagina samenvoegen, kan de algehele site een modernere uitstraling geven, en als het toch licht van inhoud is, kan een site met één pagina ervoor zorgen dat het er inhoudelijk beter uitziet.
Een ander bekend voorbeeld van de site met één pagina is de pre-lanceringswebsite. Dit zijn meestal een enkele pagina, vaak met een formulier voor het aanmelden van een nieuwsbrief. In de meeste gevallen kan de informatie die tijdens de pre-lancering aan het publiek wordt verstrekt, gemakkelijk op één pagina worden georganiseerd, dus het is verstandig om deze stijl als eerste te beschouwen bij het ontwerpen van deze pagina's.
E-commercesites voor één product zijn een andere plaats waar sites met één pagina geweldig kunnen zijn. Als u slechts één product verkoopt, of dat nu een fysiek product is of een digitaal product, waarom zou u dan moeite doen met meerdere pagina's? Een eenvoudige pagina met één pagina kan een veel betere verkooptool zijn.
U denkt misschien dat een meer complexe e-commercesite niet geschikt is voor een website met één pagina, maar dat kan nog steeds zo zijn. Toegegeven, ik zou het willen vermijden voor sites met meer dan een dozijn producten, maar een eenvoudige online winkel kan eenvoudig op één pagina worden gehouden, met modale vensters voor het laden van productdetails en het afrekenproces.
Wanneer het niet gebruiken van een website met één pagina vrij eenvoudig is: sites die groot, complex of standaard zijn, moeten grote hoeveelheden informatie bevatten die niet geschikt zijn voor een site met één pagina. In die gevallen ben je veel beter af met een meer traditionele sitestructuur.
Hybride sites
Hoewel er een hoop geweldige sites met één pagina zijn, zijn er ook veel sites van het hybride type. Ze geven de indruk van één pagina, maar door ajax, modale vensters en dergelijke te gebruiken, bevatten ze eigenlijk meerdere pagina's met inhoud.
De Dang & Blast-site is daar een goed voorbeeld van.
Deze kunnen een geweldige oplossing zijn als je gewoon niet alles kunt krijgen om in één pagina te passen.
Sommige sites hebben een soort 'cheat' als het gaat om de enkele pagina. Ze hebben een enkele pagina voor hun hoofdwebsite, maar hebben dan een blog op een ander domein (soms een door Tumblr of WordPress.com gehoste site). Er is niets mis mee, en het kan een manier zijn om je boodschap op je hoofdsite gericht te houden, zonder de voordelen van een blog op te geven.
Beste werkwijzen voor sites met één pagina
De meeste principes van goed ontwerp zijn nog steeds van toepassing op pagina's met één pagina, net als bij elk goed website-ontwerp. Maar er zijn enkele extra dingen die u in gedachten moet houden, waarvan sommige hierboven al zijn aangeroerd.
Hou het simpel
Een ontwerp proberen te maken dat te complex is voor de inhoud die u probeert te presenteren, doet u of uw gebruikers geen goed. Vereenvoudig in plaats daarvan zowel uw ontwerp als uw inhoud zo veel mogelijk, terwijl u toch presenteert wat u nodig heeft.
Navigatielinks zijn nog steeds nuttig
Alleen omdat gebruikers kunnen scrollen om door uw website te navigeren, betekent nog niet dat dit de meest gebruikersvriendelijke manier is om dit te doen. Dit geldt vooral als u een lange pagina met veel secties heeft. Tenzij er een goede reden is om ze niet op te nemen, maakt het toevoegen van navigatielinks aan bepaalde secties uw site gebruiksvriendelijker.
Verdeel uw inhoud
Een enkele pagina betekent niet dat alles één lange sectie hoeft te zijn. In feite zou het dat niet moeten zijn. Verdeel uw inhoud in logische chunks en secties zodat gebruikers beter kunnen vinden waarnaar ze op zoek zijn.
Doe iets met al die achtergrond
Pagina's met één pagina hebben meestal een grote achtergrond. Toegegeven, soms zijn die achtergronden gewoon of met een herhalend patroon; maar andere pagina-sites maken gebruik van al die ruimte om iets creatiefs te doen. Dit kan ook helpen om je inhoud te verdelen, zoals al eerder genoemd. Je achtergrond hoeft geen enkele afbeelding te zijn. Het kan een serie afbeeldingen zijn, als dat beter bij uw inhoud past.
Bronnen voor uw sites met één pagina
Er zijn honderden bronnen, inclusief sjablonen, voor pagina's met één pagina die er zijn; maar hier zullen we ons concentreren op degene die eruit springen.
Pure CSS Parallax-scrollen : Dit artikel van Keith Clark legt uit hoe je een parallax-scrolltechniek maakt met alleen CSS. Dit is een goede optie als u geen JavaScript wilt gebruiken (of niet echt weet hoe).
Skrollr : "Parallax scrollen voor de rest van ons". Het is een stand-alone bibliotheek die werkt met mobiel en desktop. Er is geen jQuery vereist, gewoon oude JavaScript.
Stellar.js : Stellar.js is een andere gemakkelijk te gebruiken parallax-scrollbibliotheek. Het biedt veel configuratie-opties en iOS-ondersteuning.
Eén pagina Website Wireframes : Deze set wireframes voor ontwerpen met één pagina kan een goed beginpunt zijn als u niet zeker weet hoe u uw site moet structureren. Ze zijn gratis te downloaden. Er is een tweede set die je kunt downloaden hier .
Eén pagina liefde : One Page Love is de belangrijkste galerij met één paginawebsite, met meer dan 5000 voorbeeldsites, en voegt steeds meer toe. Ze bevatten ook veel sjablonen en andere bronnen.
Start Bootstrap : Start Bootstrap heeft een grote selectie gratis Bootstrap-thema's van één pagina. Er zijn thema's voor bureaus, freelancers, portfolios, bestemmingspagina's en meer.
Liefde-sjablonen voor één pagina : Naast hun uitgebreide galerij biedt One Page Love ook gratis premiumsjablonen.
One Page Mania : One Page Mania biedt een galerij met zowel unieke sites als sjablonen die u kunt downloaden of kopen.
Conclusie
Enkele pagina-ontwerpen kunnen een uitstekende optie zijn voor veel verschillende soorten websites. Hoewel ze niet het enige en het allerlaatste zijn van het ontwerpen van kleine sites, zijn ze het overwegen waard bij veel projecten. Overweeg de redenen voor het gebruik van een enkele pagina en overweeg vervolgens de redenen om niet te beslissen en beslis vanaf dat punt.