Als één ding zeker is, is het wel dat je in de wereld van webdevelopment nooit bent uitgeleerd. Occhio volgt de ontwikkelingen op de voet en deelt graag de nieuwe mogelijkheden die ze met zich meebrengen. In dit artikel een update over de nieuwste front-end snufjes, kleinigheidjes die de voorkant van je website een stuk interessanter maken.

Retina afbeeldingen

Misschien heb je het al eens gezien: je bezoekt een website op je nieuwe smartphone of tablet en de afbeeldingen zijn allesbehalve scherp. Dit kan voorkomen worden wanneer je device beschikt over een zogeheten Retina-scherm. Niet alleen tablets en smartphones, maar ook moderne laptops en beeldschermen, zijn steeds vaker uitgerust met deze nieuwe techniek. Retina-schermen hebben een hoog DPI (dots per inch), wat simpelweg betekent dat er meer, maar kleinere, pixels zijn die je scherm vullen. Hierdoor worden tekst en afbeeldingen een stuk scherper weergeven. Mits de afbeeldingen hiervoor zijn geoptimaliseerd. Wanneer je beschikt over hoogwaardige afbeeldingen is dit absoluut aan te raden. Neem contact op voor de mogelijkheden.

Responsive webdesign

Over responsive webdesign heb je al het een en ander kunnen lezen op deze blog: bijvoorbeeld hier en hier. We kunnen echt niet meer ontkennen dat responsive design de toekomst is van het web. Of eigenlijk: we zitten er middenin!

Deze revolutionaire aanpak is nog relatief nieuw en nog volop in ontwikkeling. Daarom vinden wij het belangrijk om te blijven kijken naar de best practices op dit gebied. Naarmate de technische mogelijkheden groeien, kunnen wij responsive sites steeds weer verbeteren en optimaliseren. Een hot topic op dit moment is ‘content adaptation’, waarbij je bijvoorbeeld afbeeldingen van een lage resolutie kunt tonen op een smartphone en afbeeldingen van een hogere kwaliteit laat zien op een desktop computer. Dit betekent een geheel nieuwe denkwijze: niet alleen de layout, maar ook de inhoud van je website wordt dus speciaal op maat gesneden voor het apparaat dat de sitebezoeker gebruikt.

Sneller werken met Sass

Zo’n nieuwe ontwikkeling waar Occhio tegenwoordig graag gebruik van maakt, is Sass. Waar je normaal CSS gebruikt om je website mooi te maken en voorzien van allerlei kleuren en andere mooie stijlen, gebruiken we nu Sass. Deze nieuwe CSS-notatie is kortgezegd een snellere manier van werken, die veel meer mogelijkheden biedt dan gewone (ouderwetse?) CSS. Je ziet het niet direct aan de buitenkant, maar zo werken wij sneller én efficiënter aan jouw website.

@font-face: snel en makkelijk

Verdana, Arial, Times New Roman. Ja, zelfs Comic Sans. Dit waren de lettertypen waar je in het verleden wel voor móest kiezen. Het web was nog lang niet klaar voor speciale, unieke fonts. Hier is de laatste jaren behoorlijk wat verandering ingekomen. Met behulp van font replacement met PHP, of zelfs Flash, kreeg je met enige moeite toch de mooiste fontjes wel op het scherm getoverd. Gelukkig kan dat vandaag de dag een heel stuk eenvoudiger (en sneller!) door gebruik te maken van @font-face. Dit is niet veel meer dan een lettertype naar keuze op de server te plaatsen en deze vervolgens via CSS (of Sass dus) aan te roepen. Een fijn font in een handomdraai!

Parallax websites

Super Mario Bros, wie heeft het vroeger niet gespeeld? Het legendarische videospel van Nintendo maakte eind jaren 80 al gretig gebruik van het parallax-effect. Op de voorgrond zag je hoofdrolspeler Mario, en de grond waarop hij bewoog achter hem de wolken en weer daarachter de horizon. De voorgrond bewoog sneller dan de laag daarachter, en de achterste laag bewoog vervolgens nóg langzamer. Dat is parallax: het creëren van diepte door met de snelheid van lagen te spelen. Hoe dit er ook alweer precies uitzag? Deze video zal je geheugen opfrissen:

Nu, ruim twintig jaar later, is het parallax-effect met een heuse comeback bezig, maar dan op het web. Vooral op websites die uit slechts één hele lange pagina bestaan, wordt regelmatig parallax ingezet om de pagina wat spannender te maken. Wanneer je naar beneden scrollt, zie je de verschillende lagen als het ware over elkaar heen schuiven. Dit effect is al eerder genoemd in ‘2012: de webdesigntrends’, en zien we, nu nog meer dan vorig jaar, een plekje veroveren tussen de webdesigntrends. Eigenlijk moet je het gewoon met eigen ogen zien, en dat kan! Occhio lanceerde afgelopen december een leuke Sinterklaasactie die hier gebruik van maakt. Zie hier.