Nieuwe design mogelijkheden met html5 en css3

Html5 en css3 bieden krachtige nieuwe mogelijkheden die al volop toegepast worden.
Grote trends zijn nieuw font-gebruik en responsive webdesign. Hoogste tijd om er mee aan de slag te gaan.

Voor je het weet ziet je site er belegen uit of is onbruikbaar op mobile. En oudere Internet Explorer versies zijn eigenlijk geen hindernis meer voor html5/css3. IE7 wordt al minder dan 1% gebruikt en IE8 (2-8%) valt met scripts als html5shiv.js of Modernizr.js heel goed “op te voeden”. In een andere strategie wordt er voor gekozen in oude browsers vooral de inhoud toegankelijk te houden (”progressive enhancement”).

Fonts

Na vele jaren beperkt te zijn geweest tot het gebruik van slechts enkele fonts voor web design zijn nu in principe alle denkbare fonts beschikbaar. Services als Google Webfonts en Fontsquirrel maken het ook eenvoudiger om de browserverschillen hierin te overbruggen, want natuurlijk is het weer eens zo dat niet elke browser hetzelfde soort fonts gebruikt.
Punten van aandacht zijn de leesbaarheid van de gebruikte fonts op het scherm en licenties bij het gebruik van traditionele huisstijlfonts. Gelukkig is er keuze genoeg in kwalitatief hoogwaardige gratis fonts.

Responsive design met css3 media queries en schalende images

De verschuiving in het internet-gebruik naar mobiele devices gaat in zeer snel tempo. Wereldwijd wordt verwacht dat in 2014 mobiel internet desktop internet inhaalt; in India was dit punt al bereikt in 2013. Dat betekent nadenken over verschillende sites voor verschillende devices of een enkel site die zich automatisch aanpast aan de grootte van het (browser-)scherm waarop het getoond wordt, met behulp van responsive design. Dit is gebaseerd op css3 mediaqueries en schalende plaatjes.

“Nieuwe” css pseudo-elementen

:before en :after zijn voorbeelden van css2 pseudo-elementen, die al heel lang bestaan, maar die vaak nog niet gebruikt worden. De reden? Ze werden niet ondersteund door de nu uitstervede Internet Explorer 7.

Ronde hoeken, gradienten en meer

Voor een aantal zaken is Photoshop niet meer nodig. Ronden hoeken, gradiënten en schaduwen worden nu al veelvuldig met css3 gemaakt.

Animatie

Animaties werden altijd in Flash gemaakt. Nu is de basis de css3 eigenschap “animation”. Als deze “aan” staat gaan alle veranderingen opeens vloeiend, zowel voor mouseovers als bij het draaien van een tablet of smartphone.

Willen we een stapje verder gaan dan wordt javascript gebruikt; vaak ondersteund door de jQuery-bibliotheek. Het nieuwe programma van Adobe, Edge Animate maakt het opnieuw mogelijk om vanuit een wysiwyg-omgeving animatie en interactie toe te voegen aan webpagina’s. Ditmaal op basis van css3 en jQuery. Ook voor mobile.

Conclusie

Het is de hoogste tijd om html5 en css3 in te gaan zetten.
Sites worden er niet alleen mooier en lichter van maar het is voor de stormachtig opkomende smartphones en tablets echt een must!

– Mark Soekarjo
mark@soekarjo..nl