Webbplatser med fast position
Användningen av fasta positionselement har vuxit i popularitet och blivit ett vanligt element på webben.
Den här tekniken innebär att man fixar ett element i webbläsaren medan resten av sidan rullar. Oftast hittar vi det här på huvudelement, inklusive huvudnavigering för en webbplats. Detta är också ett populärt tillvägagångssätt på sidor på en sida där sidnavigering alltid måste vara närvarande. Vi hittar också olika delar av webbsidor som är låsta på plats med hjälp av sådana tekniker.
Det finns många situationer vi kan hitta var det är bra att fixa ett element på sidan, men det är allting till ett enda syfte. I nästan alla dessa situationer håller det fasta elementet en kritisk del av sidan framför användarna hela tiden.
Betydelsen av dessa element varierar, men i viss mån är det grundläggande målet att hålla en del av sidan ständigt i visningsporten.
När du överväger att använda denna teknik rekommenderar jag starkt att du noggrant överväger varför och hur du gör det. Tänk på att vilken del av din sida som inte rör sig kommer automatiskt att dra stor uppmärksamhet. Så var säker på att du sätter den på jobbet. Låt oss dyka in!
Fasta rubriker
Fasta rubriker är överlägset det vanligaste fasta ställningselementet, så mycket så i själva verket måste jag börja lägga till denna samling för att undvika för många prover. Oftast är huvudet fixerat på plats för att säkerställa att sidnavigeringen alltid finns. Som jag nämnde tidigare är detta särskilt sant när man arbetar med en enda webbsida.
Det finns många subtila variationer i hur du kan hantera fasta rubriker så vi kommer att granska några prover för olika idéer om detta tillvägagångssätt.
Fregnar & stilig
Detta är vad jag skulle överväga ett klassiskt exempel på denna teknik. Rubriken är fixerad på plats när du bläddrar genom webbplatsen. Detta inkluderar logotypen och de viktigaste navigeringselementen. Dessutom är det en enda webbsida. Genom att klicka på huvudnavigering rullar du till den lämpliga delen av sidan.
I ett sådant fall gör den klibbiga rubriken bläddra i den enkla sidan webbplats rakt framåt. Det undviker också en av de mer irriterande aspekterna på många enkelsidiga sidor: när navigationen bara finns högst upp på sidan, men det rullar in i åldrarna. Som sådan ser det fasta huvudet inte bara trevligt ut och håller webbplatsens främsta brandingfront och -center, men garanterar också att webbplatsen är lätt att använda.
Mapalong
I det här exemplet används en fast rubrik, men med sin egen mindre vridning. Den här sidan är också en enda sidlayout, men saknar någon sidnavigering. I det här fallet innehåller den fasta rubriken huvudlogotypen och en inloggningsknapp, båda mycket viktiga elementen. Men, ännu bättre än det här, när du rullar ner på sidan flyttar huvudanropet till huvudet eftersom det rullar ur sikte. Som ett resultat är den primära konverteringspunkten för webbplatsen alltid synlig. Och ändå, ännu bättre än det, uppmanar handlingen i uppmaningen till handling att synas, användarens uppmärksamhet på det, ytterligare betonar omvandlingspunkten i designen! Enligt min åsikt en strålande användning av tillvägagångssättet.
Kisko Labs
Ett annat smart tillvägagångssätt till den fasta positionsrubriken är en teknik som jag kallar glid och pinne. På Kisko Labs-sidan sitter bara en del av rubriken. När du rullar ner sidan rullar huvudnavigering också. Det är tills det träffar toppen av skärmen, så sticks den där. Sålunda glider navigeringen (eller rullar) som vanligt och sitter sedan på toppen.
En extra detalj som är väldigt snygg här är hur navigeringen lyfter fram den del av sidan du tittar på. Eftersom det här är en enda siddesign är det till hjälp att den nuvarande delen av sidan identifieras som du skulle med den normala "aktuella sidan" -statusen för någon navigering.
Lyft upp taket
En vanlig förlängning av denna stil är att införliva en viss grad av insyn i det klibbiga lagret. I många av de exempel du hittar här gör du det genom att helt enkelt ha en ojämn kant på det klibbiga elementet. Ibland görs detta genom att ett element sticker ut från den fasta fältet, andra gånger med en kantad kant. På sidan Raise the Roof har det uppnåtts med en mycket organisk och nästan slumpmässig gräns.
I det här provet hittar vi ett intressant visuellt resultat. Genom att använda överlappande element skapar webbplatsen visuellt djup när innehållet rullar bakom rubriken. Detta understrykas ytterligare av månen i bakgrunden som också är fixerad. Slutresultatet är tre visuella lager. Ett sådant djup ger en stor grad av visuellt intresse och kan skapa en visuellt slående design.
Välkommen till vattnet
Välkommen till Vattensidan är en ganska ovanlig skapelse. Mycket lite om denna webbplats passar normerna för webbdesign och design. Av särskilt intresse för ämnet för denna artikel är den fasta rubriken. På denna sida fungerar det fasta elementet som ett navigationsverktyg till webbplatsen. Men på många sätt har det mer av en verktygsfält att känna till det.
Ytterligare prover av fasta rubriker
Här är några ytterligare exempel på fasta rubriker. Du hittar ett brett utbud av stilar och subtila variationer här.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Gör bättre Apps
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb gitarrer
Trussystem
Fasta fotbollar
Kanske är det mest uppenbara motsatsen till den fasta rubriken den fasta sidfoten. I sådana fall sitter sidfotens sidor fast på skärmens botten. När användaren rullar, håller elementet på plats.
Liksom alla andra fasta element är det fortfarande det primära målet att skapa en kontaktpunkt. Intressant men med sidfot som dessa är det oftast en sekundär funktion som fortfarande är ett primärt mål.
Blyfri grupp
Unleaded Group-webbplatsen är ett utmärkt exempel på detta. Här innehåller den fasta sidfoten element som är handlingsorienterade och slår till grunden för webbplatsen. Först noterar att alla objekt i den här fältet är saker som en användare kan göra: marknadsföra dem på sociala medier, ringa ett telefonsamtal eller maila dem. För det andra är de de viktigaste åtgärderna som byrån sannolikt vill att du ska ta. De vill antingen att du marknadsför dem eller kontakta dem. Det här är de främsta anledningarna till att ha en webbplats som denna. Så det är vettigt att fixa dem på plats jag en sidfot där de kommer att få mycket uppmärksamhet.
Envato
Envato-webbplatsen har också en fast sidfot. Här innehåller baren webbplatsens primära logotyp, som intressant har flyttats hit från den typiska vänstra högst. Uppriktigt sagt, för ett märke som Envato är det inte ett problem. Du hittar också en serie drop down menyer som startar dig på sina olika webbegenskaper. Denna enkla funktion är deras verkliga mål. Faktum är att du kanske säger att denna företags profilsida inte är riktigt där de vill att folk ska hamna. Som sådan är fokuset på att driva dig tillbaka till deras innehållswebbplatser framträdande och oundviklig.
Kiyuco
För många webbplatser som denna är deras e-postmarknadsföring program av avgörande betydelse. Som sådan har en fast placerad sidfot som tydligt lyfter fram registreringsformuläret en lång väg att växa i sådana adresslistor. Kan e-postmarknadsföring hjälpa dig att marknadsföra din webbplats under en längre tid och effektivare driva kunder? Om så är fallet kanske en fast sidfot som den här skulle vara ett bra verktyg.
Sidor med fast position
Låsningselementen på en webbsida på plats är inte något begränsat till rubriker och sidfot, även om de kanske är mest populära. Det verkar som om en fast position sidobar är en nära sekund.
Sidor med fast plats innehåller ofta mycket liknande information till vad du skulle hitta i en rubrik. Det här inkluderar saker som logotyper, navigering och sociala medier. Här är några prover att överväga om du vill använda den här metoden.
Jorge Rigabert
Denna underbara webbplats är ett perfekt exempel på stilen på jobbet. Här innehåller sidofältet de primära varumärkes- och navigeringsalternativen för webbplatser. Den här sidobarstypen är bra eftersom den håller navigeringen i sikte när sidan rullar, men också för att den inte skär med innehållet när den rör sig. Även om detta kan vara en subtil distinktion, gör det för ett otroligt smidigt gränssnitt. Webbplatser som detta visar en elegans som verkar enkelt, men är oerhört svår att sätta ihop.
Mer riskerar fler hjältar
Jag älskar verkligen hur den här webbplatsen fungerar. De fasta elementen i sidofältet är kärnfunktionerna som webbplatsägare vill att du ska ta. Mer än någonting vill de att du ska höra musiken! Som sådan är den framträdande och permanent på skärmen "play" -funktionen klar och väntar. Jag kan inte föreställa mig ett mer kritiskt element till webbplatsen, och för att få den så framträdande att visas bara gör det bra. Och du måste älska att den inte har presenterats på ett motbjudande sätt. det spelar inte ens automatiskt uppspelning. Kudos till designern som styrde den frestelsen.
Yowza
Ibland är det önskvärt att skapa ett enda klibbigt element som främjar en viss funktion. Vi har sett detta med olika feedback- och supporttjänster som du kan ansluta till din webbplats. I detta fall har en Facebook-liknande knapp anbringats på sidan av sidan. Den förblir på plats när du bläddrar på sidan. Detta drar självklart användarens uppmärksamhet på elementet och uppmuntrar dem att använda det. Jag skulle säga att detta visar makt och betydelse av sociala hänvisningar i en webbaserad verksamhet som denna.
Som en sidotal älskar jag webbplatsens twist på den 10px övre gränsen som blivit så populär. Här rullar elementet helt enkelt av. Inte en dramatisk animering, men något om det är roligt och lägger till ett lager av intresse och liv till webbplatsen.
Fat-Man Collective
Den här webbplatsen följer alla de mönster som vi hittat i våra tidigare prover. Men det sticker ut på ett stort sätt på grund av en enkel animering. När du rullar ner på sidan animerar och körs tecknet i sidofältet. Detta element höjer webbplatsen i en unik och minnesvärd kategori. Hur är det att något så triviellt kan ha en sådan inverkan. Det tar den här enkla platsen och pumpar den full av awesomeness. Det visar att byrået bakom det älskar att polera sitt arbete med de typer av finish som någon klient kommer att dö för.
Fler fasta sidobalkelement
Här är några ytterligare exempel på fasta sidor på jobbet.
Dumma dikter
Colin McKinney
Informant
Detta är Marcela
Janette D. Council
Endast logotyp
Ett tillvägagångssätt som vi inte hittar allt som ofta är en fastpositionslogo. I det här exemplet har logotypen låsats på plats även när sidan rullar. Denna atypiska tillvägagångssätt håller webbplatsens namn främre och centrala. Design som detta kan vara intressant att överväga. Det är verkligen svårt att gissa varför de kanske har gjort det, men man kan bara anta att huvudbrandningen är av avgörande betydelse. Kanske har de mycket liknande konkurrens? Kanske vill de bara se till att du kommer ihåg deras namn? Oavsett det är en intressant teknik som är värt att tänka på om det gäller ditt projekt.
"Tillbaka till toppen"
När det gäller riktigt långa sidor är en bra funktion att lägga till en länk som tar dig till toppen av sidan. Och med klibbiga element kan du skapa en sådan länk som stannar på samma plats som du bläddrar på sidan. Detta är precis vad de här proverna har gjorts.
Ett sådant element är oftast placerat strax utanför layouten. På så sätt stör det inte någonting annat i designen när det går igenom sidan. Du kommer också att märka hur dessa element ofta har en pil som pekar upp - kanske ett uppenbart element att inkludera, men mycket viktigt att tänka på eftersom det informerar användarna snabbt om dess syfte.
Detta tillvägagångssätt står i kontrast till tanken på en klibbig header. I det här fallet är navigationen oftast bara högst upp på sidan. Så återvända är det viktigt eftersom det gör det möjligt för människor att snabbt studsa om innehållet på webbplatsen. När det gäller sidor med en enda sida kan det här vara lite irriterande extra steg.
Overlapps
Detta prov visar en fin extra touch eftersom den inte visar återgå till toppelement om du inte är faktiskt högst upp på sidan. Kanske en uppenbar detalj att inkludera, men som du finner är det inte alltid fallet. En del av kraften i detta tillvägagångssätt är att själva verkan av det verkar uppmärksammar det för att se till att en användare är medveten om det.
Två ytterligare prov
De två följande exemplen har båda återgått till toppknappar, även om de är synliga hela tiden. Det är intressant för mig att det här elementet oftast placeras i skärmens nedre högra hörn. Det är inte den mest framträdande delen av designen, så kanske den sekundära naturen är bra för ett mindre viktigt element. Du kommer naturligtvis att märka att elementet fortfarande är markerat genom att bryta gränserna och med djärva färger. Jag antar att historien är att betrakta dess betydelse för användningen av din design. Om det gör skillnaden, se till att den är synlig.
Wildcard Thinking
Dusanka & David
Flera fasta element
I det här sista exemplet kommer vi att titta på en webbplats som har många fasta element på sidan. På många sätt bryter denna webbplats med de flesta normerna för webbdesign och layout. Med undantag för logotypen i övre vänstra hörnet är nästan ingenting på sin vanliga plats.
Vi hittar några element vi är bekanta med baserat på den här artikeln, till exempel den fasta sidofältet. Men du kommer märka att två andra är långt ifrån typiska. Till exempel, den fasta sidfoten som innehåller några webbplatsbrett. Saker som sekretesspolicy och villkor och villkor garanterar sällan en sådan framträdande position på en sida. Men här hittar du dem fästade på sidan med några andra ganska viktiga navigationslänkar.
Jag gillar verkligen hur de har tackat länken till användarkontot till det övre högra hörnet. Det är här de ofta placeras, men är sällan fasta där oavsett rullning som i det här fallet. Jag gillar det här eftersom det garanterar att du alltid snabbt kan få tillgång till medlemmens funktioner på webbplatsen. något som kanske skulle kunna gynna vissa andra appar och webbplatser.
Sammantaget är denna webbplats långt ifrån normal, men något om det fungerar otroligt bra och är lätt att älska. Dess ovanliga layout gör det inte svårt att använda och slutresultatet är en distinkt och behaglig upplevelse.
Medel
Slutligen vill jag med denna runda uppge några praktiska jQuery plugins som adresserar behovet av fixeringselement till en viss plats på en sida. De erbjuder olika funktioner som passar olika behov du kan ha, så var noga med att utforska dem alla för att hitta rätt passform.
Det stora är att de är alla jQuery plugins och de är super enkla att implementera. Om du vill producera denna stil, kommer dessa åtminstone att göra det ett enkelt jobb.
Meerkat
Meerkat är ett av mina favoritverktyg för det här jobbet. Det är möjligheten att vara dold vilket gör det till ett utmärkt verktyg för att visa kampanjinnehåll eller viktiga funktioner som till exempel e-postformulär.
Stickyscroll
Stickyscroll är ett plugin som låter dig skapa element som rullar med sidan tills de träffar toppen, och sedan stannar de på plats. Denna plugin hjälper också till att säkerställa att element inte rullar in i en footer-region genom att ge den en bottengräns; en trevlig extra funktion säkert.
waypoints
waypoints låter dig utlösa jQuery-händelser när en användare rullar till specifika punkter på en sida. Det här är praktiskt om du vill markera eller ändra navigeringen så att den matchar användarens plats på sidan. Men det roliga slutar inte där eftersom det finns otaliga saker du kan göra för en sida eller design som en användare rullar och interagerar med det.
Slutsats
Fasta element är nu ett vanligt element designers kan sätta på jobbet. Verktyg för att utföra sådana funktioner och fullständigt webbläsarsupport är inte längre ett problem.
Som sådan är det en utmärkt teknik att hålla i ditt verktygsband och rita ut när tiden är rätt. Sådana tillvägagångssätt är naturligtvis inte den typ av sak du använder varje dag, men kan vara oerhört kraftfull när du används effektivt.