Pagina-Overgangen voor Iedereen

0
54

Als Sarah vermeld in haar vorige post over de pagina-overgang het gebruik van Vue.js er is genoeg motivatie voor ontwerpers en ontwikkelaars te bouwen aan een pagina-overgangen. Laten we eens naar mobiele toepassingen. Terwijl mobiele toepassingen zijn in ontwikkeling, meer en meer aandacht wordt gegeven aan de animatie-ervaring, terwijl de web vrij veel hetzelfde blijft. Waarom is dat?

Misschien is het omdat het native app-ontwikkelaars meer tijd besteden aan het werken aan de animaties. Misschien komt het omdat gebruikers zeggen, dat is wat ze willen. Misschien is het omdat ze meer weten over de omgeving waarin de app gaat uitvoeren. Al die helpt bij het verbeteren van de ervaring van de afgelopen tijd. Over het algemeen lijkt de mobiele app-ontwikkelaars of andere manier lijken om te weten of de zorg meer over user experience.

Als we een kijkje nemen naar hoe mobiele apps ontworpen zijn vandaag de dag is er heel vaak een soort van geanimeerde overgang tussen staten. Zelfs ready-to-use native onderdelen hebben een soort van eenvoudige animatie tussen staten. Ontwikkelaars en ontwerpers besefte dat dit weinig animatie helpt de gebruiker om te begrijpen wat er gebeurt in de app. Het maakt de navigatie door de app makkelijker en vertelt de gebruiker dat zij binnen de app.

Bijvoorbeeld, als u het navigeren naar een subcategorie, is het meestal dia ‘ s vanaf de rechterkant van het scherm, en we hebben allemaal een of andere manier weten wat dat betekent.

Animatie zaken. Het kan worden gebruikt om de gebruikerservaring te verbeteren.

Wanneer je de ontwikkeling van een website, het is gemakkelijk om te besteden uren ervoor zorgen dat de gebruiker ziet het hele verhaal door middel van top-notch overgangen, zoals het verkeer tussen de galerij van foto ‘ s of mooie hover effecten…maar zodra een gebruiker klikt op een link, al die ervaringen uit elkaar valt en je bent vanaf het begin. Dat is omdat de pagina wordt opnieuw geladen en we hebben niet een makkelijk/duidelijk/native manier om animaties/overgangen in die situatie.

Op het web, de meeste van de inspanning gebruikt om de ervaring te verbeteren is in structuur, visueel ontwerp, of zelfs de prestaties van de site. Er zijn een aantal elementen kunt u hier en daar, maar dat is het zowat. Een saai overblijfsel van de tijd toen het web was gewoon gebruikt om te navigeren door een bos van tekst pagina ‘ s later uitgebreid met een aantal schuivende tekst.

Ja, we eigenlijk gebruikt om dit te doen.

Er zijn een aantal zeer mooie websites die gevuld zijn met animatie of ongelooflijke WebGL hiërogliefen op de achtergrond. Helaas zijn ze vaak moeilijk zijn om te navigeren en uw laptop batterij leeg in ongeveer 15 minuten. Maar ze zijn zeker leuk om naar te kijken. Deze sites zijn vol animatie, maar het meeste wordt gebruikt om u te imponeren en niet om u te helpen navigeren, of de ervaring sneller, of dingen meer toegankelijk voor u om de site te bladeren.

De Bron van het Probleem

Dit alles roept een grote vraag. Wij hebben de technologie om deze pagina overgangen dingen op het web. Waarom doen we het niet doen? Is het omdat we niet willen? Is het omdat we denken niet dat dit deel van ons werk? Is het zo moeilijk dat we het dubbele voor projecten en klanten niet kopen?

Laten we een kijkje nemen bij een andere mogelijke reden. Vaak kan een bedrijf ervoor kiest technologieën die gemeenschappelijk zijn voor alle projecten. U, als een front-ender, heb je niet veel controle over wat er op de server geïmplementeerd, dus misschien kunt u niet rekenen op enkele server-side rendering van uw JSX.

Misschien moet je iets kiezen stabiel en over het algemeen bruikbaar voor een soort van oplossing (meestal de minder codebase, de meer flexibele), dus je bent een soort van gedwongen om te voorkomen dat sommige kader in je ontwikkeling stapel. Helaas, is het zinvol. U wilt niet in te voeren, een contact formulier in 10 verschillende kaders, alleen maar omdat je hebt besloten dat sommige kader is een goede uitvalsbasis voor dit specifieke project. En begrijp me niet gestart op de beveiliging, die in het proces worden verbeterd door de jaren heen. Je kunt niet zomaar weg te gooien omdat u wilt dat uw gebruikers een beetje meer plezier met het bekijken van uw site.

Er is een andere reden. Misschien wilt u bouwen op WordPress omdat je wilt profiteren van alle mogelijkheden die open source goodies mensen voor u bereid door de jaren heen. Wilt u wisselen van dat “gratis” functionaliteit voor een betere ervaring? Waarschijnlijk niet…

Het Doel

Afgezien van drastische en onrealistisch veranderingen, zoals het wegwerken van alle foto ‘s en video’ s, onze website te laden tijd van de server is gewoon wat het is. We hebben een server weergegeven pagina, en afgezien van een snellere server of betere caching, er is niet veel te doen om het te verbeteren.

Dus de manier te verbeteren van de laadtijd is om vals te spelen een beetje! Cheat door de gebruiker denkt dat het kost minder tijd omdat ze afgeleid worden door wat er gebeurt op het scherm. Cheat door het laden van de inhoud van tevoren en bezielen van de overgang.

Laten we introduceren een aantal effecten dat kan worden gebruikt voor het doen van de overgang. Zelfs simpele fade-in/fade-out kan je een heel ander gevoel, vooral met een element dat aangeeft laden. Laten we eens kijken naar enkele voorbeelden.

Opmerking: Alle volgende voorbeelden zijn websites bouwen op PHP en vrij veel werken zonder JavaScript als een andere site.

Bron: rsts.cz/25let (openbaar productie site)

Een simpele fade-out/fade-in naadloos verbetert de ervaring van de gebruiker heeft voor de klik op de link en niet gedragen die storend als een normale browser reload zou. De laad-indicatie op een pictogram van het menu zorgt ervoor dat een gebruiker niet in paniek in het geval van de pagina duurt wat langer om te laden.

Een aantal interessante animatie kan worden bereikt door het animeren van de verschillende elementen op verschillende manieren, die ook gecombineerd kunnen worden met het vervagen is.

Bron: mcepharma.com (openbaar productie site)

Of hoe over het afdekken van de pagina met een aantal andere elementen?

Bron: delejcotebavi.decathlon.cz (openbaar productie site)

Die paar uurtjes werk geef de website een geheel nieuwe uitstraling door het draaien van je statische pagina in een animatie. En dat zonder extra voorbereiding.

Echter, in het geval dat u al op de hoogte van uw voornemen om in de ontwerpfase kunt u aanpassen van het ontwerp aan uw wensen. Gemeenschappelijke elementen kunnen worden bereid van tevoren.

Bron: vyrostlijsme.cz/zaciname (interne systeem)

De belangrijkste navigatie-element geïntroduceerd in de vorm van bubbels speelt met de gebruiker, terwijl de inhoud van de volgende pagina is aan het laden. Het effect is dat de gebruiker is niet vervelen en weet dat er iets is gebeurt. Als de animatie begint op het klikken van de link, de gebruiker hoeft niet eens in de gaten dat hij al te wachten op iets.

Oplossing

We hebben uitgezocht wat we eigenlijk willen doen, en waarom doen we dat willen doen… laten we eens kijken hoe kunnen we dit bereiken.

Hoewel er niet veel te doen op de back-end voor dit, is er een hele hoop dingen die je kunt doen op de browser-kant. Een goed voorbeeld is Turbolinks, ontwikkeld door het Basecamp mensen, die neemt uw website en maakt het meer app-gevoel door het inschakelen van inhoud laden met JavaScript. Het is gewoon voorkomt dat lelijke browser pagina-voor-pagina herladen springen. Turbolinks behandelt de geschiedenis van de browser, het laden, en al die andere dingen die normaal zou gebeuren onder de motorkap van de browser. Het belangrijkste ding hier is het nemen van controle over het laden en het vervangen van de inhoud, want zo lang als de browser niet herladen, alles wat er gebeurt op een scherm is in ons beheer.

Laten we een aantal concepten die we kunnen gebruiken voor het verbeteren van onze ervaring. Het laden tijd is onze grootste vijand, dus hoe kunnen we verbeteren in de browser?

Preload

In de meeste gevallen de aanvraag voor het laden van de volgende pagina nog niet te starten wanneer een gebruiker klikt op de link. Is er een ander evenement aan de gang die kunnen aangeven gebruikers bedoeling om naar de pagina te gaan, en dat is een beweeg de muis over de link. Er zijn altijd enkele honderden milliseconden tussen de muisaanwijzer en klik op de link, waarom geen gebruik maken van die tijd in ons voordeel? Heck, als de meerderheid van de gebruikers op de volgende pagina gebruikt waarvan bekend is en je hebt de statistieken om het te bewijzen, waarom zelfs niet laadt het op elk moment na de eerste renderen, terwijl de gebruiker probeert te krijgen rond de huidige pagina?

Het volgende diagram illustreert hoe veel dingen kunnen gebeuren in parallel en bespaar ons sommige van die kostbare tijd, in plaats van één voor één. Een veel voorkomende fout gezien in aangepaste oplossingen voor de pagina-overgang die mensen maken voor zichzelf is de start van de aanvraag, die is meestal geactiveerd nadat de pagina is verwijderd of verborgen.

Mogelijk proces van overgang

Caching

Hoewel dit kan een probleem zijn voor sommige dynamische websites, statische sites zijn perfecte kandidaten voor caching. Waarom zou u een pagina te laden twee keer, wanneer je de controle van plaatsen en vervangen van de inhoud? U kunt het opslaan van de inhoud en te gebruiken in het geval dat de gebruiker dezelfde pagina of terug naar het met de browser back button.

Of, kunt u de cache wilt laden pagina ‘ s op zweven en het legen van de cache regelmatig (misschien na elke pagina bezoek?) om altijd de nieuwste versie van de pagina op dynamische sites, terwijl het toch mogelijk is dat de preload functie.

Interessant is dat Progressieve Web Apps ook “investeren” in dit gebied, hoewel de aanpak is een beetje anders.

Animatie

Al deze concepten zijn geweldig, maar we moeten nog steeds om animaties aan de partij.

De controle van het laden van de pagina en vervanging kunnen worden overgenomen door ons, dus we kunnen spelen met de inhoud van de pagina op een gegeven moment. Bijvoorbeeld, het is eenvoudig genoeg om een klasse toe te voegen aan de pagina ‘ s laden. Dit geeft ons de mogelijkheid om te bepalen van een andere staat voor de pagina, of in andere woorden, verbergen/verwijderen. Wanneer de animatie is klaar en de pagina wordt geladen, zijn we vrij om het vervangen van de inhoud en het verwijderen van de staat van de klasse te laten de pagina animeren weer in.

Een andere optie is om te animeren uw pagina “out” met JavaScript, vervang de inhoud, en animeren terug ‘in’.

Er zijn vele mogelijkheden van hoe om dit te benaderen, maar in de manier waarop de belangrijkste functie hier niet laten de browser opnieuw laden.

Klaar om te Gaan

Dat zijn de drie belangrijkste concepten die maken veel verschil. Het punt is, met een beetje extra inspanning, het is niet moeilijk om dit zelf doen, en ik moedig u aan om dit te doen.

Het gaat om een hobbelige weg met veel mogelijk hoofdpijn, want het is niet altijd makkelijk, niet te breken van de browser native functionaliteit.

Echter, als je meer van een lading en ga aard van de persoon, ik heb samen met een klein pakket genaamd swup dat sorteert al die dingen die Turbolinks doet, plus alle drie de concepten die we hebben besproken hier. Hier een kleine demo.

Wat zijn de voordelen van swup?

  • Het werkt uitsluitend op de front-end, dus geen server installatie is vereist. Hoewel u eenvoudig kunt implementeren van een overdracht van alleen de vereiste gegevens zijn gebaseerd op de X-Gevraagd-Met de in de aanvraag header (kleine wijziging van swup is vereist op basis van uw specifieke oplossing).
  • Maakt gebruik van de browser-API te zorgen voor een juiste functionaliteit van uw site, als het zou werken zonder swup (vooruit/terug-toetsen en de juiste route in de URL-balk).
  • Het hoeft niet te worden een deel van de initiële laden batch en kan worden geladen en geactiveerd na de eerste renderen.
  • Zorgt voor de timing, wat betekent dat het detecteert automatisch het einde van uw overgangen gedefinieerd in CSS, en in de tussentijd zorgt voor het laden van de volgende pagina. Het hele proces is gebaseerd op de beloften, dus niet in één milliseconde wordt verspild.
  • Als ingeschakeld in de opties, swup kan het laden van een pagina wanneer u op een link zweefde of als het eenmaal is opgetreden in de inhoud die is geladen (met de data-swup-preload attribuut).
  • Als ingeschakeld in de opties, swup slaat ook de inhoud van de pagina ‘ s en laadt niet op dezelfde pagina twee keer.
  • Swup straalt een hele hoop van de gebeurtenissen die u kunt gebruiken in uw code voor het inschakelen van JavaScript, analytics, etc.
  • Je kunt het definiëren als vele elementen te vervangen als je wilt, zolang ze gemeenschappelijk zijn voor alle pagina ‘ s. Dit geeft de mogelijkheid om animeren voorkomende elementen op de pagina, terwijl nog steeds het vervangen van de onderdelen. Het bubble-menu in ons eerdere voorbeeld hierboven gebruikt deze functie, waar de check-borden op de bellen worden genomen van de geladen pagina, maar de rest van de ballon blijft op de pagina, zodat het kan worden geanimeerd.
  • Geeft u de mogelijkheid om gebruik te maken van verschillende animatie voor de overgangen tussen de verschillende pagina ‘ s.

Voor degenen onder u die graag de animatie wordt gedaan met JavaScript, er is ook een versie voor die zogenaamde swupjs. Hoewel het misschien moeilijker te implementeren animaties in JavaScript, zeker geeft je meer controle.

Conclusie

De animatie en naadloze ervaring hoeft niet te worden strikt beperkt tot de systeemeigen toepassingen of de nieuwste technologieën. Met weinig inspanning, tijd en een beetje van de code, zelfs met uw WordPress-site kan voelen native-like. En terwijl we al love the web de manier waarop het is, ik denk dat we kunnen altijd proberen om het een beetje beter.