Blog RSS feed

Aan de slag met responsive webdesign

Fri, 03 Feb 2012 01:14:26 GMT

Responsive web design is zonder twijfel momenteel een 'hot subject'. Van mobiele browsers tot netbooks tot tablets, hedendaagse gebruikers bezoeken uw websites via een steeds breder wordend scala aan toestellen. Met responsive webdesign biedt webcontent altijd en op ieder toestel een optimale gebruikservaring. Hoog tijd voor een developer-sprong in het duister!

De meeste mobiele browsers schalen de HTML-pagina's naar een bepaalde breedte zodat de pagina op het mobiele (en kleinere) scherm past. Je kan gebruik maken van de viewport meta tag om dit te resetten. De viewport tag vertelt de browser de breedte te gebruiken van het gebruikte apparaat in plaats van de originele schaal. Dit doe je door de viewport tag in de sectie van je code te plaatsen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In dit concrete voorbeeld vertrekken we van een pagina-structuur die bestaat uit een header, sidebar, content en footer. De sidebar heeft een breedte van 250px en de content container is 650px breed.

Het geheime ingrediënt van de chef wat het design 'responsive' maakt, schuilt hem in de CSS3 media queries. Hierin ga je als het ware de voorwaarden neerpennen hoe de pagina zich dient te gedragen aan de hand van de huidige viewport breedte. Op een normaal 17" scherm is het aangewezen dat de sidebar links van de content area staat, maar vanop je iPhone is het toch misschien net iets overzichtelijker indien die sidebar met navigatie erboven staat.

In het onderstaande voorbeeld bepalen we een aantal regels die in werking treden vanaf wanneer de viewport breedte 950px of minder bedraagt. Je kan hier zoveel regels bepalen als je zelf wil.

Wanneer de viewport breedte 700px of minder bedraagt, treedt een nieuwe set aan regels in werking, en wordt de width van de #content en #sidebar als 'auto' ingesteld, en wordt de float verwijderd. Dit resulteert erin dat de sidebar en content area's op de volledige breedte van het scherm worden getoond, onder mekaar.

Bij een viewport breedte van 460px (smartphone), wordt de hoogte van de header gereset. De font-size van de H1 tags wordt gewijzigd naar 25px en we verbergen de sidebar.

In grote lijnen hebben we nu net onze eerste responsive webpagina gemaak! uiteraard is dit nog maar het topje van de ijsberg en kan er nog véél dieper worden ingegaan op het onderwerp, maar hiermee kom je toch alvast een eind.

Heb jij interesse in responsive webdesign en/of heb je er zelf ervaring mee? Laat het ons weten!

On the job: jQuery mashups.

Fri, 13 Jan 2012 15:41:03 GMT

Voor de uitwerking van een immo-site (http://www.buyens.be) kregen we de vraag om een functionaliteit te voorzien waarin bezoekers de mogelijkheid hebben om te zoeken naar panden op een landkaart. Na een verkenningsronde kwamen we uit bij 2 scripts. Enerzijds vonden we het ImageMapster jQuery script (http://www.outsharked.com/imagemapster) voor de feitelijke visualisatie van het landkaartje. Anders zagen we potentieel in het autocomplete script van James Smith (http://www.loopj.com/jquery-tokeninput) om de zoekopdracht duidelijk te visualiseren.

ImageMapster is een jQuery plugin die HTML-image maps net dat tikkeltje extra geeft. Via dit script kan elke imagemap worden belicht, geselecteerd en gemanipuleerd worden op allerlei manieren. ImageMapster is 100% Javascript en het werkt op elke grote(re) browser, zonder Flash of andere afhankelijkheden (met uitzondering van jQuery), inclusief Internet Explorer 6.

Via het script is het mogelijk om gemeentes met beschikbare panden aanklikbaar te maken (of beter: gemeentes zonder panden niét aanklikbaar). Deze worden in het script ingelezen via een met id's gevulde array. Bezoekers zien in één oogopslag in welke gemeentes panden beschikbaar zijn, en kunnen zo meteen op een visuele manier hun keuze bepalen. Uiteraard verandert het aanbod aan panden dagelijks, en daarom ontwikkelden we een web service die dagelijks een lijst genereert met de beschikbare gemeentes. Deze file wordt dan ingelezen in de jQuery module, om te resulteren in een bijna realtime overzicht.

Aangezien veel bezoekers niet specifiek in 1 gemeente zoeken, zochten we naar een script dat de geselecteerde gemeenten op een duidelijke manier kon weergeven. Hiervoor leek het autocomplete script een goede optie.

Als finale hindernis combineerden we alle scripts en lieten we via jQuery een interactie tot stand komen tussen deze scripts. Aangeklikte gemeentes op het kaartje worden nu ook weergegeven in het zoekformulier.

Bekijk het resultaat op http://www.buyens.be

Wat is uw visie? Laat het zeker weten in de comments. Of heeft u nood aan een gelijkaardige integratie in uw website, neem dan zeker contact met ons op!

Voor de uitwerking van een immo-site (http://www.buyens.be) kregen we de vraag om een functionaliteit te voorzien waarin bezoekers de mogelijkheid hebben om te zoeken naar panden op een landkaart. Na een verkenningsronde kwamen we uit bij 2 scripts. Enerzijds vonden we het ImageMapster jQuery script (http://www.outsharked.com/imagemapster) voor de feitelijke visualisatie van het landkaartje. Anders zagen we potentieel in het autocomplete script van James Smith (http://www.loopj.com/jquery-tokeninput) om de zoekopdracht duidelijk te visualiseren.

Bekijk het resultaat op http://www.buyens.be

Wat is uw visie? Laat het zeker weten in de comments. Of heeft u nood aan een gelijkaardige integratie in uw website, neem dan zeker co

YoxView: jQuery image viewer plugin

Thu, 12 Jan 2012 17:43:26 GMT

Onlangs ontdekte ik een handige jQuery plugin voor oa het bekijken van beeldmateriaal en video's op een website: YoxView!

YoxView biedt de gebruiker content aan via een Lightbox, maar beperkt zich niet enkel tot afbeeldingen, zoals vele andere LightBox scripten. YoxView kletst er nog een hoop aan mogelijkheden bij: denk maar aan tekstmateriaal, video (Youtube, Vimeo, Flash, ...), audio, iframes, pdf documenten, Quicktime of Java applets, enzovoort!

Enkele voordelen van YoxView op een rijtje:

Gratis
Zeer gemakkelijk te integereren
Volledig configureerbaar via verschillende opties
Meertalig: denk hierbij aan tooltips of teksten van knoppen (vb. sluit knop) die je in de popup wilt tonen
Mogelijkheid om afbeeldingen en filmmateriaal (vb. Youtube filmpjes) weer te geven via een slideshow of gallerij.
Gebruik van het toetsenbord wordt ondersteund vb. bladeren doorheen de afbeeldingen via de pijltjes op het toetsenbord.
Zoekmachine vriendelijk: grote afbeeldingen worden geindexeerd.
Cross-browser compatibel
De inhoud van de popup (vb. afbeeldingen, video's) schaalt zich automatisch zodat het perfect past in het browser venster en op optimale grootte wordt weergegeven.
Toevoegen van eigen knoppen aan de YoxView popup vb. Handig als je een download knopje wilt.
Mogelijkheid om een YoxView popup te openen vanaf een tekstuele link.
Voor developers: eventhandlers toevoegen voor specifieke events die zich voordoen in YoxView. vb.) Stel dat je de gallerij wilt sluiten wanneer de gebruiker de laatste afbeelding heeft bereikt in de gallerij, kan je het onClose event gebruiken.
Caching van afbeeldingen: afbeeldingen kunnen reeds geladen worden in de achtergrond, waardoor de gebruiker een betere performantie waarneemt.
Verschillende "skins" mogelijk: wil je de Lightbox in een ander kleedje steken? Geen probleem! Achtergrondkleur, buttons, etc zijn allemaal te stylen.

Hoe te gebruiken?

Als voorbeeldje zal ik tonen hoe je een gallerij opent via YoxView, waarbij de popup zich automatisch sluit, wanneer de gebruiker bij de laatste afbeelding gekomen is:

1) Download de YoxView plugin.

2) Zorg ervoor dat het gedownloade "yoxview" foldertje onder de root van je website terecht komt. Hierin zitten alle images, scripts, css files en dergelijke in die YoxView gebruikt.

3) Voeg volgende script regel toe aan het bestand waarin je YoxView gaat oproepen:

<script type="text/javascript" src="../yoxview/yoxview-init.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
       $(".yoxview").yoxview({ 
            loopPlay: false, 
            onEnd: function(){ $.yoxview.close(); }
        });
    });
</script>

Het "yoxview-init.js" bestand zal ervoor zorgen dat alles geinitialiseerd zodat YoxView weet waar hij zijn script files en css files en dergelijke moet halen. Het tweede stukje script voert de "yoxview" methode uit op een element met css klasse = yoxview (zie: .yoxview). Wanneer de gebruiker het einde van de gallerij bereikt heeft wordt het YoxView venster gesloten via de instructie:

onEnd: function(){ $.yoxview.close();

4) Last but not least: de gallerij met afbeeldingen natuurlijk
Voeg een div toe met css klasse "thumbnails yoxview" aan het bestand (vb. .html, .aspx, ...) waar je YoxView in gaat oproepen en steek hierin de afbeeldingen:

<div class="thumbnails yoxview">
<a href="images/large/01.jpg"><img src="images/thumbnails/01.jpg" alt="First" title="The first image" /></a>
<a href="images/large/02.jpg"><img src="images/thumbnails/02.jpg" alt="First" title="The SECOND image" /></a>
<a href="images/large/03.jpg"><img src="images/thumbnails/03.jpg" alt="First" title="The THIRD image" /></a>
</div>

5) Zo, dat is alles! Bekijk bovenstaand voorbeeldje of bekijk andere demo's om YoxView onder de knie te krijgen!

Heb je iets moois in YoxView gemaakt of weet je nog leuke Lightbox scripts? Laat het ons weten via de comments!

Parallax scrolling

Wed, 07 Dec 2011 11:54:35 GMT

Parallax scrolling: voor video games geen onbekend terrein, en nu ook in web design een nieuwe trend!
Terwijl de gebruiker verticaal of horizontaal doorheen de webpagina scrollt of bij sommige sites met de muis beweegt, wordt een dieptegevoel gecreëerd doordat bepaalde elementen op de pagina zich op een verschillende snelheid meebewegen.

Parallax scrolling kan op de dag van vandaag worden toegepast om verschillende redenen:

Om bepaalde elementen meer pit te geven, zoals de header of achtergrond van je website.
Als navigatiemiddel.
Om een product voor te stellen.
Om een bepaald gevoel te creëeren. Deze website creëert een soort van "vrije val". Heel snél scrollen dus als je een ritje wilt uitsparen op de Dalton Terror attractie in Walibi.
Om een verhaallijn te vertellen of het doel van je website duidelijk te maken.
Als soort "schuifsysteem".

Hoe het niet moet:

Een "zeeziek" gevoel creëeren zoals de mannen van siebenull.com het gedaan hebben. Dikkenull.com had mij een betere domeinnaam geleken...
Ook bij deze site, is het redelijk frustrerend dat de aan-koordjes-gehangen-vakjes die je achtervolgt met de muis "weglopen" én niet klikbaar zijn!

Ben je van plan om parallax scrolling te gebruiken? Houdt dan rekening met onderstaande zaken:

Bevat je site veel grafisch materiaal? Dan is het niet slecht om de afbeeldingen reeds voor te laden, vooraleer de site laadt.
Houdt er rekening mee dat mobiele gebruikers je site anders kunnen ervaren dan bijvoorbeeld een gewone desktop gebruiker.
Heb je iets wreed graaf ontwikkeld met parallax scrolling? Zorg er dan voor dat het effect niet verloren gaat op kleinere resoluties.
Moet een toegevoegde waarde bieden aan je site. De homepagina van Egopop toont bijvoorbeeld een leuke animatie van de figuurtjes, maar de meerwaarde ontgaat mij een beetje...

Hoe werkt het? Het parallax scrolling effect kan bekomen worden met een paar eenvoudige trucs van CSS of de hulp van jQuery plugins zoals spritely.

Tot slot: "Parallax" scrolling komt van het Griekse woord parallaxis, wat verandering betekent.
Wat vinden jullie? Heeft dit een gunstige verandering teweeg gebracht in de wereld van webdesign of vinden jullie het maar "plattekes" en mooi geprobeerd?

Trendwatch: Responsive webdesign

Fri, 25 Nov 2011 16:12:56 GMT

Meer en meer mensen zijn in het bezit van een smartphone, zo een gsm waar je meer mee kan dan bellen en smssen alleen. Dus meer en meer mensen surfen mobiel. Zij bezoeken hun favoriete websites vanop hun mobieltje ipv op hun laptop of desktop pc. Dit "surfen" gaat verder dan het "checken" van hun facebook of twitter account via een applicatie, men gaat via mobiele browsers ook op zoek naar restaurants, café's of bedrijven. Er is een aangepast gedragspatroon op te merken bij smartphone gebruikers, zo gaan ze bv als ze lekker lui in hun zetel zitten, niet meer hun laptop opstarten om snel iets op te zoeken... Smartphones worden niet meer enkel 'on-the-road' gebruikt! U doet er dus zeker goed aan uw website te optimaliseren voor de man of vrouw met het kleine scherm!

Een website optimaliseren voor een mobiel toestel kan op verschillende manieren. Ofwel laat je 2 websites maken, 1 voor "normale/grote" schermen en 1 voor mobiel gebruik. Ofwel kies je voor een responsive website.

In het geval u 2 websites heeft, moet u bij een aanpassing van bv uw openingsuren (of andere content) 2 maal deze aanpassing gaan doorvoeren. Dit is slechts één van de nadelen van deze verouderde manier van werken.

Een responsive website is in mijn ogen de betere keuze! Zo hebt u slechts 1 website die geoptimaliseerd is voor verschillende schermgroottes. Zowel op de laptop als op de iPad als op de iPhone als op een andere smartphones, kleiner of groter scherm, zal de website dan geoptimaliseerd getoond worden.

Geoptimaliseerd wil hier zeggen dat zowel de layout als de inhoud van de website aangepast zal worden weergegeven op het betreffende toestel. Zo moet de gebruiker niet meer oneindig zitten in-en uitzoomen zoals dat vroeger het geval was, en zal hij minder geconfronteerd worden met ellenlange teksten die men toch niet leest op een klein schermpje.

Bij het opzetten van een responsive design voor een website vertrekt men best vanuit het standpunt van de mobiele gebruiker. Een mobiele gebruiker is (nog meer dan een andere gebruiker) op zoek naar de essentie van de zaak. Daarom worden alle "overbodige" of extra zaken niet getoond op uw smartphone naar keuze. Op een groter scherm is er dan weer wel plaats en nood voor aanvullende informatie naast die hoofdzaak en zal ook deze info getoond worden. Belangrijk is dus zeker een grondige studie van de content van uw website!

De layout zal logischerwijs ook verschillen, bij een groter scherm zijn er nu eenmaal meer pixels beschikbaar om de zaak weer te geven. Er zullen meerdere ontwerpen nodig zijn... of eigenlijk is er toch maar sprake van 1 ontwerp/stijl maar dan verschillende optimalisaties/variaties voor de verschillende schermresoluties. Aangepaste afbeeldingen/foto's, aangepaste lettergroottes,...

Door middel van verschillende css files, media queries en andere technische zaken waarop ik nu in deze blogpost niet verder in ga (dit volgt later waarschijnlijk nog wel) zal dan de juiste versie op het juiste scherm terecht komen.

Wij vinden dit alvast een positieve evolutie en zijn volop bezig met de technische kant te optimaliseren. Binnenkort zullen onze eerste responsive websites het scherm zien!

Wat is uw visie? Laat het zeker weten in de comments. Of heeft u nood aan een responsive website, neem dan zeker contact met ons op!