a&m impact internetdiensten

Enkele dagen na het online gaan van de website www.mijncobb.nl voor onze klant Bills Barn, zijn wij door CSS Winner uitgeroepen tot de ‘Site of the day’ van 27 november 2011. Dit is een internationale prijs voor websites ontwikkeld met CSS.

Innovatie, creativiteit en talent erkennen van ontwerpers is het doel van CSS Winner. Het benoemen van een ‘Site of the day’ wordt gedaan door een jury van topontwerpers, bloggers en bezoekers. Zij selecteren websites voor de ‘Site of the day’. Een leuke erkenning voor een website waar we erg trots op zijn.  Niets is mooier voor een webdesigner dan de nominatie voor een ‘Site of the day’.

Bekijk onze nominatie op http://www.csswinner.com/details/mijncobb.nl/1381/

Naast het ontwerp van de website, speelt de technische kant ook een grote rol bij de user experience van de website. Het unieke design van de website bestaat voor het grootste gedeelte uit één pagina. Door naar beneden te scrollen ziet de bezoeker alle informatie over de Cobb. Ondanks dit design is de website volledig geoptimaliseerd voor een zoekmachine zoals Google. Onder de motorkap van de website hangt het Expression Engine Content Management Systeem (cms) welke door onze programmeurs zorgvuldig en met veel aandacht is geïmplementeerd.

Ook op de bekendste showcase van dit CcmsMS, Show-EE, hebben wij een plekje weten te bemachtigen.

Onlangs hebben Rob Lohman en ik een interne presentatie gegeven over de nieuwe mogelijkheden van HTML 5 en CSS3. Dit is een nieuwe versie van de bestaande HTML en CSS, die een aantal leuke nieuwe features bied. We hebben onder andere de onderstaande punten behandeld:

Video en Audio

Het wordt mogelijk video en audio af te spelen met HTML, zonder de tussenkomst van plugins als Media Player, Quicktime of Flash. Voordeel is dat iedereen deze dan af kan spelen, en het daarmee dus heel toegankelijk wordt.  Een groot nadeel is dat de browsers onderling in de clinch liggen over welke codec ze nu moeten gaan ondersteunen. Daardoor moet er voor Mozilla een ander bestand dan voor Webkit aangeleverd worden. Meer informatie en een voorbeeld.

LocalStorage en SessionStorage

Deze twee functies zijn eigenlijk de nieuwe cookies. Hiermee kan meer data dan een cookie opgeslagen worden, en wordt het makkelijker om deze te gebruiken in je javascripts. Een klein nadeel is dat gebruikers deze aan moeten zetten, en niet zoals cookies dat ze standaard aan staan.

Semantische tags en attributen

Er worden een aantal nieuwe tags en attributen toegevoegd waarmee de code semantisch opgebouwd kan worden, en er meer meta data aan elementen gegeven kan worden. Dit is handig om data in de pagina te stoppen voor de javascripts, maar ook erg goed voor zoekmachines als Google. Deze kan zo nog meer uit de pagina halen, en duidelijker zien wat een navigatiebalk is, en welke data bij elkaar hoort.

Canvas

Het tekendoek van HTML. Met een uitgebreide programmeer API kan hier in 2D en 3D (nog in ontwikkeling) op getekend worden. Dit kan van kleine tekeningen (handtekening bijvoorbeeld), tot complete spellen. Meer informatie en een aantal voorbeelden.

Formulieren

Er zijn een flink aantal nieuwe formulier elementen ontwikkeld die het voor de gebruiker en ontwikkelaar een stuk makkelijker maken. Zo zit er standaard een datum veld in, waardoor niet meer de datum ingetypt hoeft te worden, maar dit gekozen kan worden in een kalender. Doordat deze door de browsers geïmplementeerd worden werkt dit overal op dezelfde manier, en kan de gebruiker overal op dezelfde manier hiermee werken.

GeoLocation

Hiermee kan de locatie van de gebruiker opgevraagd worden, mits deze daar toestemming voor geeft. Dit kan handig zijn voor bijvoorbeeld een mobiele webapplicatie met een navigtatie systeem erin. Met GeoLocation is dan de exacte positie, hoogte en kijkrichting van de gebruiker op te vragen.

…vervanger voor Flash?

De laatste tijd is er veel rumoer op het internet over dat HTML 5 de vervanger gaat worden van Flash. Apple is hier mee begonnen door op zijn iPhone geen ondersteuning te willen bieden voor Flash, omdat zij beweren dat hetzelfde bereikt kan worden met HTML 5. Andere browser bouwers zijn het hier mee eens, en het lijkt erop dat Adobe Flash een beetje in een hoek gedreven is.

Voorlopig zitten we nog wel met Flash, aangezien veel browsers nog niet veel van HTML 5 geïmplementeerd hebben (mede omdat het nog niet af is!), en een groot deel van de internetters nog met oude versies van browsers surfen, waardoor er sowieso een Flash applicatie gemaakt moet worden om ondersteuning te bieden voor alle bezoekers.

Websites verschijnen in alle soorten en maten en in allerlei kleuren en stijlen. En toch mag het af en toe naar mijn mening  wel wat spannender en iets minder zakelijk dan vaak wordt verwacht wordt door de klant. Één van de oplossingen daarvoor  zijn websites met handgetekende elementen of volledig handgetekende websites. Deze kunnen bestaan uit letterlijk getekende elementen maar het kan ook gaan om 3d tekeningen of cartoon-achtige figuren of een collage. Het concept is niet nieuw,  het wordt zelfs al een tijdje gebruikt. Maar als je graag wil dat je website een originele look en feel  moet hebben en iets minder formeel mag zijn, dan is het toevoegen van handgetekende elementen of illustraties misschien een leuke oplossing.

Ik zelf ben een groot fan van dit soort websites. Natuurlijk is deze stijl  niet voor elke branche even geschikt maar toch vaker dan je zou denken, een goed voorbeeld is de site van twitter, denk maar aan het vogeltje en de wolken op de achtergrond bij bijvoorbeeld het gedeelte van de site om je aan te melden.

Wat ik zelf een mooi voorbeeld vind van een website waar illustraties goed tot zijn recht komen is de site van de Roemeense band “Suie Paparude”

Het content gedeelte is toch overzichtelijk en strak en dit doorbreken ze door op de achtergrond wat illustratieve elementen toe te voegen, waardoor je een overzichtelijke site krijgt met een creatieve uitstraling. Niet voor niets dat deze site diverse prijzen heeft gewonnen en regelmatig naar voren komt op sites voor en over webdesign.

De site van biobak is een voorbeeld van een site die volledig bestaat uit dit soort elementen. Gebruiksvriendelijkheid is de site echter niet maar het straalt wel creativiteit uit.

Hieronder nog wat voorbeelden van sites met handgetekende of illustratieve elementen.

Hand getekende elementen zijn een geweldige manier om een website een unieke look te geven. En het kent vele toepassingen zowel voor de creatieve branche maar ook voor  de zakelijke websites kunnen subtiele illustratieve oplossingen worden geïntegreerd om de site toch een eigen smoel te geven.

Met CSS (Cascading Style Sheets) maken wij de gestructureerde informatie (HTML) van de pagina op. Hiermee kunnen wij zeggen dat een logo bijvoorbeeld links boven moet staan, met een blauw kleurtje, en wanneer je er overheen gaat dat deze groen moet worden.

De huidige versie van CSS is 2.1, en er wordt druk gewerkt door het W3C en browser bouwers aan de volgende versie; 3. Deze is nog lang niet af, maar een aantal punten zijn al wel geïmplementeerd door browsers.

In de nieuwe versie komen een aantal mooie dingen die een hoop werk schelen, en de HTML code nog gestructureerder kan maken, wat weer leidt tot betere zoekmachine optimalisatie, en kortere ontwikkeltijd.

Multiple backgrounds
Hiermee kun je op een element meerdere achtergronden zetten, zodat er met minder code meer gedaan kan worden, en er minder aparte afbeeldingen gemaakt hoeven te worden. Dit kan de site sneller maken, want het binnen halen van bestanden kost nou eenmaal tijd (en bandbreedte).

Animaties en transformaties
Met de huidige versie van CSS kun je niks aan een element animeren of veranderen, maar met CSS3 wordt het mogelijk om elementen te kunnen draaien, bewegen en van vorm te veranderen. Nu moet hier Javascript of Flash voor worden gebruikt.

Webfonts
Vanuit de browser kunnen hiermee niet-standaard lettertypes gebruikt worden op de pagina. Nu zijn hier ook weer technieken voor nodig als Javascript en Flash. Wanneer deze functie erin komt kunnen websites nog grafischer worden en meer hun eigen gezicht krijgen door het gebruik van aparte lettertypes.

Rounded corners
Hiermee kan er zonder extra plaatjes mooie ronde hoekjes aan elementen gegeven worden. Nu kost dit vaak veel tijd en moeite door dat die plaatjes allemaal gemaakt moeten worden, en dan in de achtergrond moeten worden gezet.

Dit is nog maar een kleine greep uit de nog veel extra features die erin komen, maar wel diegene die erg veel tijdswinst opleveren! Helaas ziet het er naar uit dat Internet Explorer deze de komende versies nog niet gaat ondersteunen… Gelukkig zijn browsers als Firefox, Safari en Opera flink in opmars, die hebben al wel een flinke implementatie van deze functies!