Webelementen met vaste positie
Het gebruik van vaste positie-elementen is in populariteit toegenomen en wordt een veelgebruikt element op het internet.
Deze techniek houdt in dat een bepaald element in de browser wordt vastgezet terwijl de rest van de pagina scrolt. Meestal vinden we dit gedaan op header-elementen, inclusief de hoofdnavigatie voor een site. Dit is ook een populaire benadering op sites met één pagina waar de in-pagina-navigatie altijd aanwezig moet zijn. We vinden ook verschillende elementen van webpagina's op hun plaats vergrendeld met behulp van dergelijke technieken.
Er zijn veel situaties die we kunnen vinden waar het vastzetten van een element op de pagina een goede zaak is, maar het komt allemaal terug op één doel. In bijna al deze situaties houdt het vaste element te allen tijde een kritiek deel van de pagina voor gebruikers.
Het belang van deze elementen varieert, maar tot op zekere hoogte is het fundamentele doel om een deel van de pagina onophoudelijk in de kijkhaven te houden.
Als u overweegt deze techniek te gebruiken, raad ik u ten zeerste aan zorgvuldig te overwegen waarom en hoe u dit doet. Houd er rekening mee dat het deel van uw pagina dat niet wordt verplaatst, automatisch veel aandacht trekt. Zorg er dus voor dat je het aan het werk zet. Laten we erin duiken!
Vaste headers
Vaste headers zijn verreweg het meest voorkomende vaste positie-element, zo erg dat ik in feite moest beginnen met toevoegen aan deze verzameling om te veel samples te vermijden. Meestal wordt de header op zijn plaats gefixeerd om ervoor te zorgen dat de navigatie op de site altijd aanwezig is. Zoals ik eerder al zei, is dit vooral het geval wanneer het om een website met één pagina gaat.
Er zijn veel subtiele variaties in de manier waarop u met vaste headers om kunt gaan, dus we zullen enkele voorbeelden bekijken voor verschillende ideeën over deze aanpak.
Sproeten en knap
Dit is wat ik als een klassiek voorbeeld van deze techniek zou beschouwen. De kop wordt vastgezet terwijl u door de site bladert. Dit omvat het logo en de belangrijkste navigatie-elementen. Bovendien is het een website met één pagina. Als u op de hoofdnavigatie klikt, bladert u naar het betreffende deel van de pagina.
In een dergelijk geval maakt de kleverige kop het bladeren door de pagina met één pagina ongecompliceerd. Het vermijdt ook een van de vervelende aspecten van veel sites met één pagina: wanneer de navigatie zich alleen bovenaan de pagina bevindt, maar er eeuwenlang wordt doorgeschoven. Als zodanig ziet de vaste header er niet alleen mooi uit en blijft de belangrijkste branding van de site voorop en centraal, maar zorgt er ook voor dat de site eenvoudig te gebruiken is.
Mapalong
In dit voorbeeld wordt een vaste header gebruikt, maar dan met een eigen kleine twist. Deze site is ook een lay-out van één pagina, maar mist navigatie in de pagina. In dit geval bevat de vaste koptekst het hoofdlogo en een aanmeldknop, beide zeer belangrijke elementen. Maar, nog beter dan dit, wanneer u naar beneden scrolt op de pagina, verplaatst de hoofdoproep naar actie zich naar de koptekst terwijl deze buiten beeld raakt. Als gevolg hiervan is het primaire conversiepunt voor de site altijd zichtbaar. En toch, nog beter dan dat, roept de handeling van de call-to-action die zichtbaar wordt de aandacht van de gebruiker op, en benadrukt verder het conversiepunt in het ontwerp! Naar mijn mening een briljant gebruik van de aanpak.
Kisko Labs
Een andere slimme benadering van de vaste positiekop is een techniek die ik slide en stick noem. Op de Kisko Labs-site blijft slechts een deel van de header hangen. Terwijl u de pagina doorbladert, scrolt de hoofdnavigatie ook. Dat is totdat het de bovenkant van het scherm raakt, dan plakt het daar. Dus de navigatie schuift (of schuift) normaal door en blijft vervolgens aan de bovenkant hangen.
Een extra detail dat hier echt goed is, is hoe de navigatie het gedeelte van de pagina markeert dat u momenteel bekijkt. Omdat dit een ontwerp met één pagina is, is het handig om het huidige gedeelte van de pagina te identificeren zoals u zou doen met de normale status van de huidige pagina van elke navigatie.
Til het dak op
Een veel voorkomende uitbreiding van deze stijl is om een niveau van transparantie op te nemen in de plaklaag. In veel van de voorbeelden die u hier aantreft, wordt dit gedaan door eenvoudigweg een ongelijke rand aan het kleverige element te geven. Soms gebeurt dit door een element uit de vaste balk te laten steken, andere keren met een gekartelde rand. Op de site van Raise the Roof is dit gedaan met een zeer organische en bijna willekeurige rand.
In dit voorbeeld vinden we een interessant visueel resultaat. Door het gebruik van overlappende elementen creëert de site visuele diepte terwijl de inhoud achter de kop scrolt. Dit wordt verder benadrukt door de maan op de achtergrond die ook is vastgelegd. Het eindresultaat is drie visuele lagen. Een dergelijke diepte voegt een groot visueel belang toe en kan een visueel opvallend ontwerp creëren.
Welkom in het water
De site Welcome to the Water is een vrij ongebruikelijke creatie. Weinig over deze site past bij de normen voor weblay-out en -ontwerp. Van bijzonder belang voor het onderwerp van dit artikel is de vaste header. Op deze site dient dit vaste element als een navigatiehulpmiddel voor de site. Maar in veel opzichten heeft het meer een werkbalkgevoel.
Extra voorbeelden van vaste headers
Hier zijn enkele aanvullende voorbeelden van vaste headers. Je vindt hier een breed scala aan stijlen en subtiele variaties.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Betere apps maken
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb-gitaren
Trussystem
Vaste voetteksten
Misschien is het meest voor de hand liggende tegenovergestelde van de vaste header de vaste voettekst. In dergelijke gevallen blijft de voettekst van de pagina aan de onderkant van het scherm plakken. Terwijl de gebruiker schuift, blijft het element op zijn plaats.
Net als elk ander vast element, is het maken van een centraal punt nog steeds het primaire doel. Interessant is dat bij footers als deze het meestal gaat om een secundaire functie die nog steeds een hoofddoel is.
Ongelode groep
De site van de Ongelode Groep is hier een goed voorbeeld van. Hier bevat de vaste voettekst elementen die actiegericht zijn en het kerndoel van de site raken. Merk allereerst op dat alle items in deze balk dingen zijn die een gebruiker kan doen: promoot ze op sociale media, plaats een telefoontje of email ze. Ten tweede zijn ze de belangrijkste actiepunten die het bureau waarschijnlijk wil dat je doet. Ze willen dat je ze promoot of contact met hen opneemt. Dit zijn de belangrijkste redenen om een site als deze te hebben. Dus het is goed om ze op hun plek te bevestigen, waar ze veel aandacht zullen krijgen.
Envato
De Envato-site heeft ook een vaste voettekst. Hier bevat de bar het primaire logo van de site, dat interessant is verplaatst van de typische linkerbovenhoek. Eerlijk gezegd, voor een merk als Envato is dit geen probleem. Ook vindt u een reeks vervolgkeuzemenu's die u naar hun verschillende webproperty's leiden. Deze eenvoudige functie is hun echte doel. In feite zou je kunnen zeggen dat deze bedrijfsprofielpagina niet echt is waar ze willen dat mensen terechtkomen. Daarom is de focus om u terug te brengen naar hun inhoudssites prominent en onvermijdelijk.
Kiyuco
Voor veel sites zoals deze zijn hun e-mailmarketingprogramma's van cruciaal belang. Als dusdanig kan het hebben van een vast geplaatst voettekst die het aanmeldingsformulier prominent benadrukt, een grote bijdrage leveren aan het uitbreiden van dergelijke mailinglijsten. Kan e-mailmarketing u helpen om uw site gedurende een langere periode te promoten en klanten effectiever te achtervolgen? Als dat zo is, is een vaste voettekst zoals deze misschien een geweldig hulpmiddel.
Zijbalken met vaste positie
Het vergrendelen van elementen van een webpagina op zijn plaats is niet iets dat beperkt is tot kop- en voetteksten, hoewel ze misschien het meest populair zijn. Het lijkt erop dat een zijbalk met vaste positie een goede tweede is.
Vaste sidebars op de plaats bevatten vaak zeer vergelijkbare informatie als wat u in een koptekst zou vinden. Dit omvat dingen zoals logo's, navigatie en sociale media-tools. Hier zijn enkele voorbeelden om te overwegen of u deze aanpak wilt gebruiken.
Jorge Rigabert
Deze prachtige site is een perfect voorbeeld van de stijl op het werk. Hierin bevat de zijbalk de primaire branding- en navigatieopties van de sites. Dit type benadering van het zijpad is geweldig omdat het de navigatie in beeld houdt terwijl de pagina scrolt, maar ook omdat het de inhoud niet snijdt tijdens het verplaatsen. Hoewel dit een subtiel onderscheid kan zijn, zorgt het voor een ongelooflijk soepele interface. Sites zoals deze tonen een elegantie die eenvoudig lijkt, maar ongelooflijk moeilijk samen te stellen is.
Meer gevaren Meer helden
Ik ben echt dol op de manier waarop deze site werkt. De vaste elementen in de zijbalk zijn de kernfuncties die de site-eigenaren van u willen nemen. Meer dan wat dan ook willen ze dat je de muziek hoort! Als zodanig staat de prominente en permanent op het scherm "play" -functie klaar en wacht. Ik kan me geen meer kritisch element van de site voorstellen, en om het zo prominent weergegeven te hebben, is het gewoon logisch. En je moet liefhebben dat het niet op een onaangename manier is gepresenteerd; het speelt zelfs niet automatisch. Een pluim voor de ontwerper die die verleiding beheerste.
Yowza
Soms is het wenselijk om een enkel klevend element te maken dat een bepaalde functie bevordert. We hebben dit gezien met verschillende feedback- en ondersteuningsservices die u op uw site kunt aansluiten. In dit geval is een Facebook-achtige knop aan de zijkant van de site aangebracht. Het blijft op zijn plaats terwijl u door de pagina bladert. Dit trekt de aandacht van de gebruiker natuurlijk naar het element en moedigt hen aan om het te gebruiken. Ik zou zeggen dat dit de kracht en het belang van sociale verwijzingen in een webbedrijf als dit aantoont.
Als een kanttekening, ik hou van de draai van de site op de 10px bovenrand die zo populair is geworden. Hier scrollt het element gewoon door. Geen dramatische animatie, maar iets ervan is leuk en voegt een laagje interesse en leven toe aan de site.
Fat-Man Collective
Deze site volgt alle patronen die we in onze vorige voorbeelden hebben gevonden. Maar het valt enorm op door een eenvoudige animatie. Terwijl u naar beneden bladert, wordt het teken in de zijbalk geanimeerd en gelopen. Dit element tilt in zijn eentje de site op tot een unieke en gedenkwaardige categorie. Hoe komt het dat iets zo triviaal zo'n impact kan hebben. Het neemt deze eenvoudige site en pompt het vol ontzag. Het laat zien dat het bureau erachter dol is op het oppoetsen van hun werk met het soort finishing touch waar een klant voor zal sterven.
Meer vaste zijbalkelementen
Hier zijn enkele extra voorbeelden van vaste zijbalken op het werk.
Domme gedichten
Colin McKinney
zegsman
Dit is Marcela
Janette D. Council
Alleen logo
Een aanpak die we niet zo vaak vinden, is een logo met vaste positie. In dit voorbeeld is het logo op zijn plaats vergrendeld, ook al scrolt de pagina. Deze atypische benadering houdt de naam van de site op de voorgrond en in het midden. Ontwerpen zoals deze kunnen interessant zijn om te overwegen. Het is echt moeilijk te raden waarom ze dit hebben gedaan, maar men kan alleen maar aannemen dat de belangrijkste branding van cruciaal belang is. Misschien hebben ze veel vergelijkbare concurrentie? Misschien willen ze gewoon ervoor zorgen dat u hun naam onthoudt? Hoe dan ook, het is een interessante techniek die het waard is om in gedachten te houden als het van toepassing is op uw project.
"Terug naar boven"
Als het gaat om hele lange pagina's is een leuke functie om toe te voegen een link die je naar de bovenkant van de pagina brengt. En met plakkerige elementen kunt u een dergelijke link maken die op dezelfde plaats blijft als u op de pagina bladert. Dit is precies wat de hier geleverde voorbeelden hebben gedaan.
Meestal wordt een dergelijk element net buiten de lay-out geplaatst. Op deze manier interfereert het niet met iets anders in het ontwerp terwijl het de pagina doorloopt. Je zult ook opmerken dat deze elementen vaak een pijl naar boven hebben - misschien een voor de hand liggend element om op te nemen, maar heel belangrijk om in gedachten te houden, omdat het gebruikers snel informeert over het doel ervan.
Deze benadering contrasteert enigszins met het idee van een plakkerige kop. In dit geval is de navigatie meestal alleen bovenaan de pagina. Dus daarheen terugkeren is belangrijk omdat het mensen toestaat om snel rond de inhoud van websites te stuiteren. In het geval van enkele pagina's kan dit een beetje een vervelende extra stap zijn.
Overlapps
Dit voorbeeld laat een leuke extra toets zien doordat het het element Terug naar boven niet laat zien, tenzij je niet echt bovenaan de pagina staat. Misschien een voor de hand liggend detail om op te nemen, maar zoals u zult zien is dit niet altijd het geval. Een deel van de kracht van deze benadering is dat juist het verschijnen ervan er de aandacht op vestigt om ervoor te zorgen dat een gebruiker zich ervan bewust is.
Nog twee voorbeelden
De volgende twee voorbeelden hebben beide knoppen om terug te keren naar de top, hoewel ze altijd zichtbaar zijn. Het is interessant voor mij dat dit element het vaakst in de rechterbenedenhoek van het scherm wordt geplaatst. Het is niet het meest prominente deel van het ontwerp, dus misschien is het secundaire karakter goed voor zo'n minder belangrijk element. Je zult natuurlijk opmerken dat het element nog steeds wordt benadrukt door de randen te breken en met gedurfde kleuren. Ik veronderstel dat het moraal van het verhaal het belang ervan voor het gebruik van je ontwerp moet zijn. Als het het verschil maakt, zorg dan dat het zichtbaar is.
Wildcard denken
Dusanka & David
Meerdere vaste elementen
In dit laatste voorbeeld zullen we een site bekijken met veel vaste elementen op de pagina. In veel opzichten breekt deze site met de meeste normen van webdesign en -lay-out. Met uitzondering van het logo in de linkerbovenhoek, staat bijna niets op zijn gebruikelijke plaats.
We vinden wel enkele elementen die we kennen op basis van dit artikel, zoals de vaste zijbalk. U zult echter merken dat twee andere verre van typisch zijn. Bijvoorbeeld de vaste voettekst die enkele sitewijde links bevat. Zaken zoals privacybeleid en algemene voorwaarden rechtvaardigen zelden zo'n prominente positie op een pagina. Toch vind je ze hier op de pagina met een paar andere nogal belangrijke navigatielinks.
Ik vind het echt leuk hoe ze de links naar gebruikersaccounts in de rechterbovenhoek hebben geplakt. Dit is waar ze vaak worden geplaatst, hoewel ze daar zelden worden vastgezet, ongeacht het scrollen, zoals in dit geval. Ik vind dit leuk omdat het ervoor zorgt dat je altijd snel toegang kunt krijgen tot de kenmerken van het lid van de site; iets dat misschien sommige andere apps en websites zouden kunnen profiteren.
Al met al is deze site verre van normaal, maar iets ervan werkt ongelooflijk goed en is gemakkelijk om van te houden. De ongebruikelijke lay-out maakt het niet moeilijk om te gebruiken en het eindresultaat is een duidelijke en plezierige ervaring.
Middelen
Eindelijk wil ik met deze round-up wat handige dingen toevoegen jQuery plug-ins die de noodzaak van het repareren van elementen op een specifieke locatie op een pagina behandelen. Ze bieden verschillende functies die passen bij verschillende behoeften die u misschien heeft, dus zorg ervoor dat u ze allemaal doorzoekt om de juiste pasvorm te vinden.
Het mooie is dat ze allemaal jQuery-plug-ins zijn en dat ze supereenvoudig zijn om te implementeren. Als u deze stijl wilt produceren, zullen deze het u in elk geval gemakkelijk maken.
Meerkat
Meerkat is een van mijn favoriete tools voor deze specifieke taak. Het vermogen om verborgen te blijven, maakt het een geweldig hulpmiddel voor het weergeven van promotionele inhoud of belangrijke functies, zoals formulieren voor e-mailregistratie.
Stickyscroll
Stickyscroll is een plug-in waarmee je elementen kunt maken die met de pagina scrollen totdat ze bovenaan komen en dan op hun plaats blijven. Deze plug-in helpt ook ervoor te zorgen dat elementen niet naar een voettekstgebied scrollen door het een ondergrens te geven; een leuke extra functie zeker.
waypoints
waypoints Hiermee kunt u jQuery-gebeurtenissen activeren wanneer een gebruiker naar specifieke punten op een pagina scrolt. Dit is handig als u de navigatie wilt markeren of wijzigen om overeen te komen met de locatie van de gebruiker op de pagina. Maar het plezier eindigt hier niet, want er zijn ontelbare dingen die je zou kunnen doen met een pagina of een ontwerp als een gebruiker scrolt en ermee interageert.
Conclusie
Vaste elementen zijn nu een gemeenschappelijk element dat ontwerpers kunnen gebruiken. Hulpprogramma's om dergelijke functies te bereiken en volledige browserondersteuning zijn niet langer een probleem.
Als zodanig is het een geweldige techniek om in je gereedschapsriem te blijven en uit te tekenen wanneer de tijd rijp is. Zulke benaderingen zijn natuurlijk niet het soort dingen dat je elke dag gebruikt, maar kunnen ongelooflijk krachtig zijn als ze effectief worden gebruikt.