Faste posisjoner Webelementer
Bruken av faste posisjonelementer har vokst i popularitet og blitt et vanlig element på nettet.
Denne teknikken innebærer å fikse noe element i nettleseren mens resten av siden ruller. Ofte finner vi dette gjort på headerelementer, inkludert hovednavigering for et nettsted. Dette er også en populær tilnærming på enkeltsidensider hvor navigasjonen på siden må være til stede. Vi finner også ulike elementer av nettsider som er låst på plass ved hjelp av slike teknikker.
Det er mange situasjoner vi kan finne hvor å fikse et element på siden, er en god ting, men alt kommer tilbake til et enkelt formål. I nesten alle disse situasjonene holder det faste elementet alltid en kritisk del av siden foran brukerne.
Betydningen av disse elementene varierer, men til en viss grad er det grunnleggende målet å holde en del av siden vedvarende i visningsporten.
Som du vurderer å bruke denne teknikken anbefaler jeg deg å vurdere nøye hvorfor og hvordan du gjør det. Husk at den delen av siden din ikke beveger seg, vil automatisk trekke mye oppmerksomhet. Så vær sikker på at du setter den på jobb. La oss dykke inn!
Faste overskrifter
Faste overskrifter er langt det vanligste faste stillingselementet, så mye så faktisk måtte jeg begynne å legge til denne samlingen for å unngå for mange prøver. Ofte er toppteksten festet på plass for å sikre at nettstednavigasjonen er til stede. Som jeg nevnte før, er dette spesielt sant når man arbeider med en enkelt nettside.
Det er mange subtile variasjoner i hvordan du kan håndtere faste overskrifter, så vi vil gjennomgå noen eksempler på ulike ideer om denne tilnærmingen.
Freckles & Handsome
Dette er hva jeg ville vurdere et klassisk eksempel på denne teknikken. Overskriften er festet på plass mens du ruller gjennom nettstedet. Dette inkluderer logoen og hovednavigasjonselementene. I tillegg er det en enkelt side nettsted. Hvis du klikker på hovednavigasjonen, ruller du til den aktuelle delen av siden.
I et slikt tilfelle gjør dette den klissete overskriften bla enkelt side siden rett fram. Det unngår også en av de mer irriterende aspektene på mange enkeltsidene: når navigasjonen er bare øverst på siden, men det ruller på for mange år. Som sådan ser det faste hodet ikke bare fint ut og holder nettstedets viktigste merkevarefront og senter, men sørger også for at nettstedet er enkelt å bruke.
Mapalong
Dette eksemplet bruker en fast overskrift, men med sin egen mindre vri. Dette nettstedet er også et enkelt sidelayout, men mangler noen sidebeskrivelse. I dette tilfellet inneholder den faste overskriften hovedlogoen og en innloggingsknapp, begge meget viktige elementer. Men enda bedre enn dette, når du ruller nedover siden, flytter hovedoppkallingen til toppteksten etter hvert som den ruller ut av visningen. Som et resultat er det primære konverteringspunktet for nettstedet alltid synlig. Og enda, enda bedre enn det, kalles handlingen til handlingen som falmer i visningen, brukerens oppmerksomhet på det, og legger vekt på konverteringspunktet i designet! Etter min mening en strålende bruk av tilnærmingen.
Kisko Labs
En annen smart tilnærming til den faste posisjonen header er en teknikk jeg kaller lysbilde og pinne. På Kisko Labs-nettstedet stikker bare en del av toppteksten. Når du ruller nedover siden, ruller hovednavigasjonen også. Det er før det treffer toppen av skjermen, så stikker den der. Dermed går navigasjonen (eller ruller) som vanlig, og stikker deretter til toppen.
En ekstra detalj som er veldig hyggelig her er hvordan navigasjonen fremhever den delen av siden du ser på. Siden dette er et enkelt sidedesign, er det nyttig å ha den nåværende delen av siden som er identifisert som du ville med den normale "nåværende side" -statusen for en hvilken som helst navigasjon.
Løft taket
En vanlig utvidelse av denne stilen er å innlemme noe gjennomsiktighet i det klissete laget. I mange av eksemplene finner du her dette gjøres ved ganske enkelt å ha en ujevn kant til det klissete elementet. Noen ganger gjøres dette ved å ha et element som stikker ut fra den faste stangen, andre ganger med en skrå kant. På Raise the Roof-siden har det blitt oppnådd med en meget organisk og nesten tilfeldig grense.
I denne prøven finner vi et interessant visuelt resultat. Gjennom bruk av overlappende elementer skaper nettstedet visuell dybde ettersom innholdet ruller bak hodet. Dette er ytterligere vektlagt av månen i bakgrunnen som også er løst. Sluttresultatet er tre visuelle lag. Et slikt dybde legger til en stor grad av visuell interesse og kan skape en visuelt slående design.
Velkommen til vannet
Velkommen til vannet er en ganske uvanlig opprettelse. Meget lite om dette nettstedet passer til normer for weboppsett og design. Av spesiell interesse for emnet i denne artikkelen er den faste overskriften. På dette nettstedet fungerer det faste elementet som navigasjonsverktøy til nettstedet. Men på mange måter har det mer av en verktøylinje å føle det.
Ytterligere prøver av faste overskrifter
Her er noen ekstra eksempler på faste overskrifter. Du finner et bredt utvalg av stiler og subtile variasjoner her.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Lag bedre apper
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb gitarer
Trussystem
Fixed Footers
Kanskje det mest åpenbare motsatt til den faste toppteksten ville være den faste bunnteksten. I slike tilfeller sitter sidene på siden på bunnen av skjermen. Når brukeren ruller, forblir elementet på plass.
I likhet med alle andre faste elementer er det fortsatt det primære målet å skape et fokuspunkt. Interessant men med footers som disse er det oftest om en sekundær funksjon som fortsatt er et primært mål.
Unled Group
The Unleaded Group-nettstedet er et godt eksempel på dette. Her inneholder den faste bunnteksten elementer som er handlingsorienterte og streiker til kjerneformålet med nettstedet. Først merk at alle elementene i denne linjen er ting en bruker kan gjøre: markedsføre dem på sosiale medier, ring en telefon eller send dem via e-post. For det andre er de de viktigste handlingsobjektene som byrået sannsynligvis vil ha deg til å ta. De vil at du skal markedsføre dem, eller kontakte dem. Dette er de viktigste grunnene til å ha et nettsted som dette. Så det gir god mening å fikse dem på plass, jeg en bunntekst der de får mye oppmerksomhet.
Envato
Envato-siden har også en fast bunntekst. Her inneholder baren nettstedets primære logo, som har blitt interessant flyttet her fra den typiske øverst til venstre. Oppriktig, for et merke som Envato er dette ikke et problem. Du finner også en rekke drop down-menyer som starter deg på deres ulike web-egenskaper. Denne enkle funksjonen er deres virkelige mål. Faktisk kan du si at denne bedriftsprofil siden ikke egentlig er hvor de vil at folk skal ende opp. Som sådan er fokuset på å kjøre deg tilbake til innholdswebområdene deres fremtredende og uunngåelig.
Kiyuco
For mange nettsteder som denne er deres e-postmarkedsføringsprogrammer av kritisk betydning. Som sådan kan det være en lang vei å vokse slike adresselister med en fast plassert fotfeste som fremhever påmeldingsskjemaet. Kan e-postmarkedsføring hjelpe deg med å markedsføre nettstedet ditt over en lengre periode og forfølge kundene mer effektivt? Hvis det er tilfelle, kan det hende at et fast fotfelt som dette er et flott verktøy.
Fast posisjon sidebjelker
Låseelementer på en webside på plass er ikke noe begrenset til overskrifter og bunntekster, selv om de kan være de mest populære. Det ser ut til at en fast posisjon sidebar er et nært sekund.
Faste plass sidebjelker inneholder ofte svært lik informasjon til det du vil finne i en header. Dette inkluderer ting som logoer, navigasjon og sosiale medier verktøy. Her er noen eksempler å vurdere om du vil bruke denne tilnærmingen.
Jorge Rigabert
Dette nydelige nettstedet er et perfekt eksempel på stilen på jobben. Her finner sidelinjen primære merkevarebygging og navigasjonsalternativer. Denne sidebar-typen tilnærming er stor fordi den holder navigasjonen i betraktning som siden ruller, men også fordi den ikke krysser med innholdet mens det beveger seg. Selv om dette kan være en subtil distinksjon, gir det et utrolig jevnt grensesnitt. Nettsteder som dette viser en eleganse som virker enkel, men er utrolig vanskelig å sette sammen.
Flere farer flere helter
Jeg elsker virkelig måten dette nettstedet fungerer på. De faste elementene i sidefeltet er de kjernefunksjonene som eiere vil at du skal ta. Mer enn noe de vil at du skal høre musikken! Som sådan er den fremtredende og permanent på skjermen "play" -funksjonen klar og venter. Jeg kan ikke forestille meg et mer kritisk element til nettstedet, og for å få det så fremtredende vist, gir det bare god mening. Og du må elske at den ikke har blitt presentert på en motbydelig måte; det spiller ikke engang automatisk spill. Kudos til designeren som styrte den fristelsen.
Yowza
Noen ganger er det ønskelig å lage et enkelt klebrig element som fremmer en bestemt funksjon. Vi har sett dette med ulike tilbakemeldinger og støttetjenester som du kan plugge inn på nettstedet ditt. I dette tilfellet har en Facebook-knapp blitt festet til siden av siden. Den forblir på plass mens du ruller på siden. Dette trekker selvsagt brukerens oppmerksomhet mot elementet og oppfordrer dem til å bruke det. Jeg vil si at dette viser kraften og betydningen av sosiale henvisninger i en nettbasert virksomhet som dette.
Som en side notat, jeg elsker nettstedets vri på 10px øverste grensen som har blitt så populær. Her ruller elementet rett og slett av. Ikke en dramatisk animasjon, men noe om det er morsomt og legger til et lag av interesse og livet til nettstedet.
Fat-Man Collective
Dette nettstedet følger alle mønstrene vi har funnet i våre tidligere prøver. Men det skiller seg ut på en stor måte på grunn av en enkel animasjon. Når du ruller nedover siden, animerer og strekker du tegnet i sidelinjen. Dette elementet håndhever enkelt nettstedet til en unik og minneverdig kategori. Hvordan er det at noe så trivielt kan ha en slik innvirkning. Det tar denne enkle siden og pumper den full av awesomeness. Det viser at byrået bak det elsker å polere arbeidet med typene etterbehandling, hvilken som helst klient kommer til å dø for.
Flere faste sidebarelementer
Her er noen ekstra eksempler på faste sidebjelker på jobben.
Dumme dikt
Colin McKinney
informant
Dette er Marcela
Janette D. Council
Kun logo
En tilnærming som vi ikke finner alt som ofte er en fast posisjonlogo. I dette eksemplet er logoen låst på plass, selv når siden ruller. Denne atypiske tilnærmingen holder nettstedets navn foran og sentrum. Design som dette kan være interessant å vurdere. Det er veldig vanskelig å gjette hvorfor de kanskje har gjort dette, men man kan bare anta at den viktigste branding er av kritisk betydning. Kanskje de har mye lignende konkurranse? Kanskje de bare vil sørge for at du husker navnet deres? Uansett er det en interessant teknikk verdt å huske på om det gjelder prosjektet ditt.
"Tilbake til toppen"
Når det gjelder veldig lange sider, er en fin funksjon å legge til en lenke som tar deg til toppen av siden. Og med klissete elementer kan du opprette en slik lenke som forblir på samme sted som du ruller på siden. Dette er nøyaktig hva prøvene gitt her har gjort.
Ofte er et slikt element plassert like utenfor utformingen. På denne måten forstyrrer det ikke noe annet i designen som det krysser siden. Du vil også legge merke til hvordan disse elementene ofte har en pil pekende opp - kanskje et åpenbart element å inkludere, men veldig viktig å huske på som det informerer brukerne raskt om det er formålet.
Denne tilnærmingen kontraster litt av begrepet en klissete header. I dette tilfellet er navigasjonen oftest bare øverst på siden. Så tilbake er det viktig som det tillater folk å sprette raskt rundt innholdet på nettstedet. I tilfelle av enkeltsider, selv om dette kan være litt av et irriterende ekstra skritt.
Overlapps
Denne prøven demonstrerer en fin ekstra berøring ved at den ikke viser retur til toppelement, med mindre du egentlig ikke er øverst på siden. Kanskje en åpenbar detalj å inkludere, men som du vil finne er det ikke alltid tilfelle. En del av kraften i denne tilnærmingen er at selve handlingen av den vises viser oppmerksomheten til det for å sikre at en bruker er klar over det.
To flere prøver
De to følgende eksemplene har begge tilbake til toppknapper, selv om de er synlige hele tiden. Det er interessant for meg at dette elementet er oftest plassert nederst til høyre på skjermen. Det er ikke den mest fremtredende delen av designet, så kanskje det er sekundær natur er bra for et mindre viktig element. Du vil merke selvfølgelig om at elementet fremdeles er fremhevet ved å bryte grensene og med dristige farger. Jeg antar at moralen i historien er å vurdere dens betydning for bruken av designet. Hvis det gjør hele forskjellen, sørg for at den er synlig.
Wildcard Thinking
Dusanka & David
Flere faste elementer
I dette siste eksempelet vil vi se på et nettsted som har mange faste elementer på siden. På mange måter bryter dette nettstedet med de fleste normer for webdesign og layout. Bortsett fra logoen i øverste venstre hjørne er nesten ingenting på sitt vanlige sted.
Vi finner noen elementer vi er kjent med basert på denne artikkelen, for eksempel den faste sidefeltet. Du vil imidlertid merke at to andre er langt fra typiske. For eksempel, den faste bunnteksten som inneholder noen nettstedbrede linker. Ting som personvernpolicyer og vilkår og betingelser garanterer sjelden slike fremtredende posisjoner på en side. Likevel finner du dem festet til siden med noen andre ganske viktige navigasjonskoblinger.
Jeg liker virkelig hvordan de har takket koblingen til brukerkontoen til øverste høyre hjørne. Dette er hvor de ofte plasseres, men er sjelden fastsatt der, uansett rulling som i dette tilfellet. Jeg liker dette fordi det sikrer at du alltid raskt kan få tilgang til medlemmets funksjoner på nettstedet; noe som kanskje noen andre apps og nettsteder kan ha nytte av.
Alt i alt er dette nettstedet langt fra normalt, men noe om det fungerer utrolig bra og er lett å elske. Uvanlig layout gjør det ikke vanskelig å bruke og sluttresultatet er en tydelig og behagelig opplevelse.
ressurser
Til slutt, med denne runden vil jeg gjerne inkludere noe nyttig jQuery plugins som adresserer behovet for fikseringselementer til et bestemt sted på en side. De tilbyr forskjellige funksjoner som passer til ulike behov du måtte ha, så sørg for å utforske dem alle for å finne riktig passform.
Den gode tingen er at de er alle jQuery plugins, og de er super enkle å implementere. Hvis du ønsker å produsere denne stilen, vil disse i det minste gjøre det til en enkel jobb.
Meerkat
Meerkat er et av mine favorittverktøy for denne jobben. Evnen til å være skjult gjør det til et godt verktøy for visning av salgsfremmende innhold eller viktige funksjoner som e-postoppmeldingsskjemaer.
Stickyscroll
Stickyscroll er et plugin som lar deg lage elementer som ruller med siden til de treffer toppen, og deretter holder de seg på plass. Dette pluginet bidrar også til at elementene ikke ruller inn i en bunntekstregion ved å gi den en bunngrense; en fin ekstra funksjon for sikker.
veipunkter
veipunkter lar deg utløse jQuery-hendelser når en bruker ruller til bestemte punkter på en side. Dette er nyttig hvis du vil markere eller endre navigasjonen for å matche brukerens plassering på siden. Men moroa slutter ikke der, da det er utallige ting du kan gjøre på en side eller et design som en bruker rulle og samhandler med den.
Konklusjon
Faste elementer er nå et vanlig element designere kan sette på jobb. Verktøy for å oppnå slike funksjoner og full nettleserstøtte er ikke lenger et problem.
Som sådan er det en flott teknikk for å holde i verktøybeltet og tegne ut når klokken er riktig. Slike tilnærminger er selvfølgelig ikke typen ting du bruker hver dag, men kan være utrolig kraftig når du bruker den effektivt.