4 sätt att skapa rikare webbupplevelser
Nätet har utvecklats mycket från att vara ett enkelt dokumentförråd, och vi har nu webbläsare som kan ge rika visuella interaktioner både på skrivbordet och på mobilen.
Eftersom jag skulle vilja prata om var webben är på väg i den här artikeln, kan många av de funktioner jag täcker ha begränsat stöd, så det är viktigt att använda resurser som caniuse.com som har en robust lista över funktioner och diagram som anger var de stöds.
Låt oss ta ett dyk på de fyra sätten du kan förbättra din webbplats UX:
1. CSS
CSS är stilningsspråket för våra dokument, vi tenderar att tänka på detta i enkla termer som att ändra teckensnitt eller färg, men det blir allt starkare med funktioner som transformer och animeringar. Vi får också nya funktioner för att göra det ännu kraftfullare.
Om du har använt Vector Masks i verktyg som Photoshop, borde du vara bekant med tanken bakom CSS Clip Paths. Med den här funktionen kan du definiera en form i CSS som definierar de genomskinliga och ogenomskinliga delarna av ditt HTML-innehåll. Dessa fungerar bra med CSS-övergångar för att dölja och avslöja användargränssnitt. På samma sätt gör CSS Masks vägen till webben, vilket gör att du kan definiera de genomskinliga delarna av ditt innehåll med hjälp av en bild. Detta gör att du kan använda insynen mer effektivt i dina mönster för visuellt intresse eller texturer.
2. SVG
De flesta av de bilder vi hittar på webben idag är rasterbilder, bestående av pixlar. Det betyder att när vi skala dem eller se dem på enheter med högre upplösning blir de pixelerade.
Vektorgrafik är fantastisk eftersom de består av geometriska primitiver som behåller sina skarpa kanter i vilken storlek som helst.
SVG är vektorformatet för webben. Vi kan använda den för att visa grafik och till och med manipulera och animera dess egenskaper med CSS. Där SVG blir riktigt kraftfull är när vi kombinerar det med scripting. Knäppa är ett JavaScript-bibliotek som gör det enkelt att manipulera och animera SVG-innehåll. Det är inriktat på moderna webbläsare, så det stöder de senaste SVG-funktionerna som grupper och klippvägar. Snap är öppet på GitHub och vi använde det även för att skapa en rik animerad bannerannons, du kan läsa mer om det imin blogg.
Och här är ett urval av en annons gjorde vi använder SVG.
3. 2D Canvas
2D Canvas är en annan kraftfull funktion på webben som är optimerad för att dra former och bilder. Det ger ett JavaScript API som ger dig granulär kontroll över ditt dukelement. Det ger dig också friheten att integrera andra former av media, till exempel video, vilket skapar potentialen för rika interaktiva knappar som spelar, pausar eller skurar videofilmer. 2D Canvas stöder nu blandningslägen, som låter dig blanda färgerna på lager på visuellt intressanta sätt som du kan läsa mer om här.
Vi börjar också få stöd för alfabetisk video som gör det möjligt för oss att integrera video i vårt innehåll mer sömlöst. Ett roligt exempel på alfa-video finns i OK Go musikvideo "WTF" .
OK Go är känt för utarbetade musikvideor, och i den här videon de skår koreografi framför en grön skärm. Sedan användes efterbehandlingen fortsatte att göra bildmaterialet ovanpå sig och skapade en sval ekoeffekt där transparensen var. Vi kan reproducera denna effekt med 2D Canvas, men vi kan ta det ett steg längre och göra det interaktivt med funktioner som kanvasblandningslägen för att skapa nya visuella effekter i realtid.
4. WebGL
WebGL tillhandahåller ett API med låg nivå för att teckna maskinvaruaccelerat 2D- och 3D-grafik. Potentialen här är konsolstilspel, som Grand Theft Auto 5 körs direkt i din webbläsare. Som du kan föreställa dig, blir WebGL något komplicerat, lyckligtvis med öppen källkatalog Three.js ge en bra startpunkt med bra exempel för att komma igång.
GitHub har blivit en stor resurs för open source-samhället. Du kan hitta Three.js och Snap on GitHub, liksom andra stora bibliotek som gör det lättare att göra fantastiskt arbete på webben. Jag lägger ofta experiment och verktyg som jag gör på GitHub, liksom a kamera spline verktyg Jag brukade skapa kamerabaner för Three.js att flyga genom 3D-världar.
Som vi kan se är webben alltmer varierande och kraftfull, är det en spännande tid att vara webbutvecklare. De olika tekniker och resurser vi har tillgång till växer ständigt, och det är kul att se de rika erfarenheterna som människor skapar med dem.