2mb animations - H&R Products - Web&Marketing
16788
portfolio_page-template-default,single,single-portfolio_page,postid-16788,ajax_updown_fade,page_not_loaded,,vertical_menu_enabled,side_area_uncovered_from_content,qode-theme-ver-11.0,qode-theme-bridge,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

2mb animations

Over dit project

Een mobiele of een responsive website maken?

Met de ontwikkelingen op het gebied van SEO en mobile first ranking van Google is het verstandig om Mobile First te denken. Dit houdt in dat je de website bouwt vanuit het oogpunt van een mobiele gebruiker. Tegenwoordig zijn er meer mobiele gebruikers dan desktop gebruikers waardoor dit een must is geworden.

 

Voor HLO Creative Design Agency hebben wij het design van een mobiele en een responsive website van 2mb-animations.comontwikkeld voor tablets en desktop. Het gave wat je dan kan doen is je gebruiker op elk apparaat een geoptimaliseerde ervaring geven.

 

De uitdaging met dit project
2mb-animations.com is een bedrijf die (je raadt het al) gespecialiseerd is in ’t maken van animaties. Nu moet je dit uiteraard ook terug zien op de website, echter kan ’t zijn dat sommige animaties simpelweg te zwaar zijn voor veelal procesmatig zwakkere mobiele apparaten. Ook waren sommige animaties simpelweg te groot voor mobiele apparaten.

 

De oplossing
We hebben mobiele en desktop opties in één CMS systeem verwerkt zodat je de mobiele en desktop website apart kunt aanpassen. Met gebruik van slimme code detecteren we of je met wat voor apparaat je de website bezoekt. Vervolgens laden wij alleen de content in die nodig is om de website op te bouwen. De voordelen hiervan zijn:

• We laden geen content in op mobile die je hier niet gebruikt dit zorgt voor significante perfomance verbetering
• Door de performanceverbetering scoren we goed in de ranking (website wordt binnen 1 seconde geladen)

 

Gave elementen in dit project
Omdat de website snel moet laden kunnen we niet aan komen zetten met GIF bestanden. Die zijn vaak veel te zwaar en dit benadeeld de laadtijd van de pagina. Daarom zijn alle animaties gemaakt in canvas elementen en zodanig geïntegreerd op de website. Hierdoor zijn alle animaties haarscherp en erg licht!

 

Categorie
Website ontwikkeling, Technische hoogstandjes