Sidan Övergångar för Alla

0
74

Sarah tog upp i sitt tidigare inlägg om övergången med hjälp av sidan Vue.js det finns gott om motivation för designers och utvecklare att bygga sidan övergångar. Låt oss tänka mobila applikationer. Medan mobila applikationer håller på att utvecklas mer och mer uppmärksamhet ges till animation erfarenhet, medan web ganska mycket förblir den samma. Varför är det så?

Kanske är det på grund native app-utvecklare spendera mer tid på att arbeta på dessa animationer. Kanske är det på grund av att användare säga att det är vad de vill ha. Kanske beror det på att de vet mer om den miljö i vilken programmet kommer att köras. Alla som hjälper till att förbättra upplevelsen över tid. Generellt verkar det som mobil app utvecklare på något sätt verkar veta eller bry sig mer om användarens upplevelse.

Om vi tar en titt på hur mobila apps är utformad idag är det väldigt ofta någon form av animerad övergång mellan stater. Även redo-att-använda inhemska komponenter har någon form av enkel animation mellan stater. Utvecklare och designers insåg att denna lilla animation som hjälper användaren att förstå vad det är som händer i appen. Det gör navigeringen genom appen lättare och berättar för användaren om de kommer i appen.

Till exempel, när du navigerar till en underkategori det oftast glider in från höger sida av skärmen, och vi alla på något sätt vet vad det innebär.

Animation frågor. Det kan användas för att förbättra användarupplevelsen.

När du utvecklar en webbplats, är det lätt att spendera timmar med att se till att användaren ser hela historien genom top-notch övergångar, som rörelsen mellan galleri bilder eller snygga sväva effekter…men när en användare klickar på en länk, alla som upplever faller sönder och du börjar från början. Det beror på att sidan laddar och vi inte har en lätt/uppenbar/native sätt att hantera animationer/övergångar i den situationen.

På webben, de flesta av de insatser som används för att förbättra upplevelsen av struktur, visuell design eller ens resultat på webbplatsen. Det är några faktorer du kan svepa runt här och där, men det är ungefär det. En tråkig kvarleva från den tid då webben var helt enkelt används för att navigera genom en massa text sidor senare uppgraderas med viss glidning sms: a.

Ja, vi som faktiskt används för att göra detta.

Det finns några mycket snygga webbplatser som är fyllda med animation eller otroliga WebGL hieroglyfer i bakgrunden. Tyvärr, de är ofta svårt att navigera och din bärbara dator batteri är slut i ca 15 minuter. Men de är verkligen trevliga att titta på. Dessa platser är full animation, men det mesta används för att imponera på dig, och inte för att hjälpa dig att navigera runt, eller göra den snabbare eller göra saker lättare för dig att surfa på webbplatsen.

Källan till Problemet

Allt detta väcker en stor fråga. Vi har all teknik för att göra denna sida övergångar saker på webben. Varför gör vi inte det? Är det för att vi inte vill? Är det för att vi inte tror att det är en del av vårt jobb? Är det så svårt att vi skulle ta ut dubbel för projekt och kunder inte köper det?

Låt oss ta en titt på en annan möjlig orsak. Ofta, ett företag väljer tekniker som är gemensamma för alla sina projekt. Du, som en front-ender, har inte mycket kontroll över vad som genomförs på servern, så kanske du inte kan räkna med att vissa server-side-rendering av din JSX.

Kanske har du att välja något stabilt och allmänt användbar för någon form av lösning (vilket vanligtvis innebär att de mindre kodbasen, mer flexibla), så är man tvungen att undvika vissa ramar i din utveckling stack. Tyvärr, är det vettigt. Du vill inte att genomföra ett kontaktformulär i 10 olika ramar bara för att du har bestämt att vissa ramar är en bra bas för projektet. Och inte får jag började på säkerhet, som har varit i processen att förbättras under åren. Du kan inte bara kasta bort det eftersom du vill att dina användare ska ha lite mer kul du surfar på din webbplats.

Det finns en annan möjlig orsak. Kanske du vill bygga på WordPress för att du vill dra nytta av alla de som öppen källkod godsaker människor som är beredda för dig under åren. Skulle du byta alla som “gratis” – funktionalitet för en bättre upplevelse? Förmodligen inte…

Målet

Bortsett från drastiska och orealistiska förändringar som att bli av med alla bilder och videoklipp på vår webbplats laddningstid från servern bara är vad det är. Vi har en server som renderade sidan, och bortsett från en snabbare server eller bättre caching, det är inte mycket att göra för att förbättra det.

Så sätt att förbättra laddningstiden är att fuska lite! Fuska genom att användaren tror att det tar kortare tid eftersom de är distraherade av vad som händer på skärmen. Fuska genom att fylla på innehållet i förväg och informationsinsatser övergången.

Låt oss presentera några effekter som kan användas för att göra övergången. Även enkla tona in/tona ut kan ge dig en helt annan känsla, speciellt med vissa element indikerar laddning. Låt oss titta på några exempel.

Obs: Alla följande exempel är webbplatser som bygger på PHP och ganska mycket arbete utan JavaScript som någon annan sajt.

Källa: rsts.cz/25let (offentlig produktion webbplats)

En enkel fade-in/fade in sömlöst förbättrar erfarenhet innan användaren klickar på länken och inte agera för att störa en normal webbläsare ladda skulle. Lastning indikation på en ikon på menyn garanterar en användare inte får panik vid sidan tar lite längre tid att ladda.

Några intressanta animation kan uppnås genom att animera olika delar på olika sätt, som också kan kombineras med blekning.

Källa: mcepharma.com allmänna produktion webbplats)

Eller vad sägs om att täcka upp sidan med vissa andra element?

Källa: delejcotebavi.decathlon.cz (offentlig produktion webbplats)

De få timmar av arbete för att ge hemsidan helt ny känsla genom att göra din statisk sida till en animerad en. Och det utan att någon ytterligare beredning.

Dock, i fall du redan är medveten om din avsikt i konstruktionsfasen, kan du justera design till dina behov. Gemensamma element kan förberedas i förväg.

Källa: vyrostlijsme.cz/zaciname (företagets interna system)

Huvudnavigeringen inslag i form av bubblor spelar med användaren samtidigt som innehållet av nästa sida laddar. Effekten är att användaren inte uttråkad och vet att något händer. Som animation börjar på klicka på länken, användaren behöver inte ens inse att han har varit den som väntar på något.

Lösning

Vi har rett ut vad vi faktiskt vill göra, och varför vill vi göra det… låt oss se hur vi kan uppnå detta.

Medan det finns inte mycket att göra på back-end för detta, det är en hel massa saker du kan göra i webbläsaren för sidan. Ett bra exempel är Turbolinks, som utvecklats av Basecamp folk som tar din webbplats och gör den mer app-känsla genom att aktivera innehåll laddar med JavaScript. Det är helt enkelt undviker att fula webbläsare sida-till-sida ladda hoppa. Turbolinks erbjudanden med webbläsaren historia, lastning, och allt det andra saker som normalt skulle hända under huven i webbläsaren. Det viktiga här är att ta kontroll över lastning och ersätter innehåll, eftersom så länge som webbläsaren inte uppdaterar allt som händer på en skärm som är under vår kontroll.

Låt oss tänka på några begrepp som vi kan använda för att förbättra vår erfarenhet. Laddningstiden är vår största fiende, så hur kan vi förbättra den i webbläsaren?

Förspänning

I de flesta fall, begäran för att fylla på nästa sida behöver inte starta endast när en användare klickar på länken. Det är en annan händelse inträffar som kan ange användare för avsikt att besöka sidan, och det är en för musen över länken. Det finns alltid några hundra millisekunder mellan muspekaren och klickar på länken, varför inte använda den tiden till vår fördel? Heck, om majoriteten av användarna hamnar på nästa sida som är känd för dig och du har statistik för att bevisa det, varför inte även förspänning det någon gång efter den inledande göra, samtidigt som användaren försöker komma runt den aktuella sidan?

Följande diagram illustrerar hur många saker kan ske parallellt och spara oss lite av det dyrbara tid, istället för att vara gjorda en och en. Ett mycket vanligt misstag ses i anpassade lösningar för sidan övergång som människor göra för sig själv är början på begäran, som vanligtvis utlöses efter sidan är oladdat/dolda.

Det är möjligt att övergå

Caching

Medan detta kan vara ett problem för vissa dynamiska webbplatser, statiska webbplatser är perfekta kandidater för cachning. Varför skulle du ladda en sida två gånger, när du är i kontroll av lastning och byta innehåll? Du kan spara innehållet och använda det i de fall användaren besöker samma sida eller återgår till det med webbläsarens tillbaka-knapp.

Eller, kan du använda cache och förspänning sidor på hover och töm cacheminnet regelbundet (kanske efter varje sida besöka?) att alltid ha den senaste versionen av sidan på dynamiska webbplatser medan det fortfarande möjligt att förspänningen har.

Intressant, Progressiva Web Apps också att “investera” i detta område, även om tillvägagångssättet är lite olika.

Animation

Alla dessa begrepp är bra, men vi måste fortfarande få animationer till fest.

Kontrollen över sida last och ersättning kan tas över av oss, vi kan alltså spela med innehållet i sidan vid varje given tidpunkt. Till exempel, det är enkelt att lägga till en klass till sida när den laddar. Detta ger oss möjlighet att definiera en annan stat för sidan, eller med andra ord, dölja/ta bort det. När animeringen är gjort och sidan är laddad, vi är fria att ersätta innehållet och ta bort den statliga klass för att låta sidan animera tillbaka igen.

Ett annat alternativ är att animera din sida “ut” med JavaScript, ersätta innehållet, och animera det tillbaka “.”

Det finns många möjligheter för hur man kan närma sig detta, men på något sätt, den viktiga funktionen är att inte låta webbläsaren att ladda om.

Redo att Åka

De finns tre huvudsakliga begrepp som kommer att göra stor skillnad. Poängen är, med lite extra ansträngning, det är inte så svårt att göra detta själv, och jag uppmuntrar dig att göra så.

Det kommer att bli en krokig väg med massor av möjliga huvudvärk, det är inte alltid lätt att inte bryta webbläsarens inbyggda funktioner.

Men om du är mer av en belastning och gå typ av person, jag har satt ihop lite paket som kallas swup som sorterar ut alla de saker som Turbolinks har, plus alla tre av de begrepp som vi har beskrivit här. Här är en liten demo.

Vad är de största fördelarna med att swup?

  • Det fungerar uteslutande på front-end, så att ingen server installation krävs. Även om du kan enkelt genomföra en överföring av endast uppgifter som krävs baserat på X-på begäran-Med i begäran header (lite ändring av swup krävs baserat på just din lösning).
  • Använder webbläsaren historia API för att säkerställa korrekt funktionalitet på din webbplats, eftersom det skulle fungera utan swup (tillbaka/framåt-knapparna och rätt väg i URL-fältet).
  • Det behöver inte vara en del av den första lasten parti och kan laddas och aktiverat efter den inledande göra.
  • Tar hand om timing, vilket innebär att det upptäcker automatiskt slutet av din övergångar definieras i CSS, och under tiden, tar hand om lastning nästa sida. Hela processen bygger på löften, så att inte en enda millisekund är bortkastade.
  • Om den är aktiverad i val, swup kan preload en sida när en länk är svävade eller när det är som uppstått i lastas innehåll (med data-swup-förspänning attribut).
  • Om den är aktiverad i val, swup även cachar innehåll på sidorna och inte laddas ner på samma sida två gånger.
  • Swup sänder ut en hel massa av händelser som du kan använda i din kod för att aktivera din JavaScript, analytics, etc.
  • Du kan ange så många delar att ersättas som du vill, så länge de är gemensamma för alla sidor. Detta gör att möjligheten att animera gemensamma element på sidan, medan det fortfarande byta ut sina delar. Bubblan-menyn i det tidigare exemplet ovan använder den här funktionen, där kontrollen tecken på bubblorna är hämtade från den inlästa sidan, men resten av bubblan stannar på sidan, så det kan vara animerade.
  • Ger dig möjligheten att använda olika animationer för övergångar mellan olika sidor.

För dem av er som gillar din animation görs med JavaScript, det finns också en version som kallas swupjs. Medan det kan vara svårare att implementera animeringar i JavaScript, som det definitivt ger dig mer kontroll.

Slutsats

Animation och sömlös upplevelse behöver inte vara strikt begränsat till native applikationer eller nyaste teknik. Med lite ansträngning, tid, och en bit av kod, även din WordPress webbplats kan känna native-liknande. Och samtidigt som vi redan älskar webben på samma sätt som det är, jag tror vi kan alltid försöka göra det lite bättre.