Responsive design wordt steeds belangrijker. Met alle die verschillende apparaten en schermformaten is het voor webdesigners maar lastig om sites goed te presenteren. In Webdesigner 46 lees je alles over dit onderwerp en leer je in de drie bijbehorende workshops ook nog eens hoe jij het kunt toepassen op je projecten.

Responsive design

Het ervoor zorgen dat je website op verschillende schermformaten goed weergegeven wordt, is een lastig en tijdrovend werkje. Of toch niet? Naast het hoofdartikel over dit boeiende en actuele onderwerp bieden we je ook drie workshops waarmee je het responsive-principe kunt toepassen op je online projecten. Na jouw aanpassingen kunnen ook tabletgebruikers en smartphonebezitters zonder usabilityproblemen op je site navigeren. Dit is het moment om in te stappen en maatregelen te nemen, de technologische ontwikkelingen staan niet stil!

Adobe Creative Suite 6

Het is zover, een nieuwe generatie Adobe Creative Suite. Inmiddels zijn we beland bij versie zes en zijn de programma’s op enorm veel fronten aangepast en verbeterd. Met de belangrijke pijlers in het achterhoofd; Mobiel, van Creatie naar Publicatie en Creativiteit hebben de mensen van Adobe de programma’s van vele nieuwe en verbeterde functionaliteiten voorzien. Wij kregen alvast toegang en bieden je een eerste blik.

{webdeveloper;

In het {webdeveloper;-deel gaan we het hebben over Modernizr, een open source JavaScript-bibliotheek waarmee je browsermogelijkheden kunt achterhalen en die je kan helpen bij het maken van responsive designs. In twee tutorials leer je hoe je Android-apps maakt met PhoneGap en hoe je met behulp van Web Workers meerdere JavaScript-threads kunt inzetten.

Webdesignworkshops

Natuurlijk vergeten we de praktische kant niet en staat Webdesigner weer vol met de nodige workshops. Maak bijvoorbeeld deze maand een responsive imageslider met jQuery, leer hoe je navigatie-effecten maakt met alleen CSS3 en hoe je je WordPress-theme aanpast aan verschillende schermformaten. Dit is nog lang niet alles, lees de rest in het blad!

En verder…

…verzamelen we in Webdesigner 46 natuurlijk ook weer de mooiste sites, lees je het laatste nieuws en praten we met het met prijzen overladen bureau Tribal DDB over hun Facebookcampagne voor Volkswagen.

Op 23 mei vindt in het DeLaMar Theater in Amsterdam een uniek event plaats ter gelegenheid van de release van Creative Suite 6. Adobe organiseert samen met de Adobe User Group een middag voor alle gebruikers van de grafische toolkit, om kennis te maken met de nieuwe functies en verbeteringen.

Adobe-experts nemen je mee in de wereld van CS6 en tonen je wat het bedrijf allemaal aangepast heeft om weer helemaal mee te kunnen in deze complexe digitale wereld. Paul Trani, Jason Levine, Lee Brimelow, Klaasjan Tukker en Ton Frederiks zullen allemaal hun steentje bijdragen. De grote uitsmijter heet Joshua Hirsch, ofwel de Minister of Technology van een van ‘s werelds bekendste creatieve digitale bureaus: Big Spaceship.

Dat is nog niet alles, want voor leden van de Adobe User Group wordt het nog interessanter. Voorafgaande aan het event kunnen leden deelnemen aan een exclusieve VIP-sessie waarin Paul Trani en Lee Brimelow je alles vertellen over Flash-gaming en HTML5. Voor het begin van die sessie krijg je een lunch, waarna je met een volle buik kunt genieten van twee prachtige sprekers. Daarna start het vrij toegankelijke programma.

De toegang voor zowel het VIP-deel als het normale programma is gratis. De verwachting is dat de kaarten in sneltreinvaart de deur uit vliegen, dus wacht niet te lang en registreer je op de site. Nog geen lid van de Adobe User Group? Geen nood, meld je gratis aan op de site van de AUG. Tot de 23e!

Het is nog slechts twee weken tot de start van een van de fijnste conferenties van Nederland: Mobilism 2012. Deze conferentie is gericht op webdesigners en -developers die alles willen weten over de huidige ontwikkelingen rond het ‘mobiele’ web. Op 10 en 11 mei praten sprekers als Scott Jenson, Remy Sharp, Jason Grigsby en Brad Frost je in Amsterdam helemaal bij over onder andere responsive design, het belang van content en hoe je je voor kunt bereiden op de toekomst. Jeremy Keith host twee panels; eentje met vertegenwoordigers van Google, RIM, Opera en Nokia om de status van mobiele browsers te bespreken en de tweede gaat over API’s, waarbij mensen van onder andere W3C en PhoneGap aan zullen sluiten.

Dat klinkt als een onmisbaar programma en ben je overtuigd, dan moet je snel je kaartje halen. De organisatie van Mobilism biedt lezers van Webdesigner 10% korting op de toegangsprijs. Het aantal kaarten met deze gereduceerde prijs is echter beperkt, dus sla je slag. Ga dus snel naar de webshop en reken direct je kaartje af. Wie weet zien wij je over twee weken in Tuchinski!

Je hebt al even met de bèta van Photoshop CS6 kunnen spelen, maar als webdesigner wil je natuurlijk ook een boel andere programma’s uit de Creative Suite gebruiken. Er zijn genoeg zaken verbeterd om de overstap naar CS6 de moeite waard te maken. Dat er nieuwe filters aan Photoshop zijn toegevoegd is leuk, maar belangrijker is de tijdsbesparing dankzij de Background Save en Auto-recovery. Ook Dreamweaver gaat met de tijd mee en maakt het inzetten van CSS3-transities en Fluid Grids erg eenvoudig. Dankzij de integratie van PhoneGap kun je ook aan de slag met native apps.

Naast de bekende programma’s uit de Creative Suite zijn er ook nog enkele handige toevoegingen speciaal voor de gebruikers van de Creative Cloud, zoals Muse en Edge. De komst van de Creative Cloud is goed nieuws voor iedereen die meerdere programma’s uit de Creative Suite gebruikt. Bovendien zorgen de maandelijkse kosten voor een lagere investering. Helaas lijken er wel nog wat curieuze (maar voor Adobe gebruikelijke) verschillen in de kosten te zitten voor Europeanen en Amerikanen. Hopelijk gaan ze daar nog iets aan doen.

Wil je hierna nog meer informatie hebben? Dat komt goed uit! De volgende uitgave van Webdesigner gaan we namelijk uitgebreid in op de nieuwe Creative Suite. We bespreken dan de beste nieuwe features van alle programma’s die onmisbaar zijn voor webdesigners. We hebben ook alvast een paar workshops waarin we die nieuwe functionaliteiten direct inzetten. Houd dus je brievenbus (of onze webshop) in de gaten!

Joomla! is een opensource CMS. Een dergelijk project staat of valt dus bij de community eromheen. Wereldwijd kan er gerekend worden op een actieve en betrokken community en hier in Nederland is dat niet anders. Sterker nog, ons kleine landje kent een enorm actieve Joomlacommunity. Door samen te werken kun je veel bereiken. De organisatie wilde dit jaar nog een stapje verder gaan en benaderde de redactie van Webdesigner voor een interessante samenwerking.

Het eindresultaat mag er wezen: een unieke uitgave van Webdesigner, speciaal voor de Joomla!Dagen. Een uitgave boordevol Joomla. Met nieuws, achtergrondverhalen, tips, workshops en interviews. De Joomlacommunity heeft zich van haar beste kant laten zien en meer dan dertig personen
hebben bijgedragen aan het magazine. Alle bezoekers van de Joomla!Dagen hebben bij binnenkomst een exemplaar ontvangen en het werd meteen al goed gelezen. Tot nu toe hebben we alleen nog maar positieve reacties ontvangen.

Deze uitgave is een unieke samenwerking tussen Stichting Sympathy en Webdesigner. De verspreiding is in handen van de organisatie van de Joomla!Dagen. Was je er het afgelopen weekend niet bij, houd dan hun website (of www.joomlacommunity.eu) in de gaten want misschien kun je er straks nog wel eentje nabestellen.

Tools | tech | trends: HTML5, CSS3, jQuery
Expert: Sam Hampton-Smith
Tutorialbestanden: Downloaden – Demo

In deze workshop gaan we een mooi effect creëren: een setje polaroidfoto’s die je kunt oppakken en verplaatsen. De bedoeling is dat het leuk wordt om de interactie aan te gaan. De afbeeldingen moeten dus op de input reageren via grootte, rotatie en positie. We gebruiken zo veel mogelijk CSS3 voor de animatie en jQuery voor de drag-and-dropinteractie. Zo laten we de kracht van een gecombineerde aanpak zien.
Het eindresultaat is een leuke gallery die in verschillende browsers werkt, met wat visuele aardigheidjes en een speelse gebruikersinteractie.

Flash is niet langer de eerste keus voor interactieve elementen op een website. Natuurlijk is het nog steeds erg handig voor bepaalde complexere zaken, maar designers kiezen tegenwoordig vaker voor JavaScript wanneer ze bijvoorbeeld een interactieve carrousel of slideshow willen toevoegen.
JavaScript is geweldig, maar hoe uitgebreider de effecten worden, hoe groter de kans op haperingen. Browserfabrikanten doen er alles aan om dit te voorkomen en hebben hun JavaScript-engines ook opnieuw ontwikkeld. Met de komst van CSS3 echter, kunnen webdesigners gebruikmaken van lokale rendering van standaardeffecten. Zo worden er minder scripts gebruikt en dat komt de gebruikerservaring zeker ten goede.

01 HTML opzetten

Je kunt het beste je HTML zo simpel mogelijk houden. We gebruiken een eenvoudige ongeordende lijst voor de Polaroids en een span-tag voor het bijschrift. We zullen bij de meeste stappen wat voorbeelden uit onze code laten zien. Voor de volledige code bekijk je de demo of gebruik je de tutorialbestanden.

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS3 Polaroid Slideshow</title>
	</head>
	<body>
        <div id="pinboard">
            <ul>
                <li><img src="http://distilleryimage6.instagram.com/204c103e8a6e11e18bb812313804a181_6.jpg" width="306" height="306" alt="Foto 1" /><span>Mooie lamp</span></li>
                <li><img src="http://distilleryimage8.instagram.com/e43364ea8a4911e1abb01231381b65e3_6.jpg" width="306" height="306" alt="Foto 2" /><span>Bloemetjes!</span></li>
                <li><img src="http://distilleryimage8.instagram.com/f717562e8a3b11e1a39b1231381b7ba1_6.jpg" width="306" height="306" alt="Foto 3" /><span>Smakelijk eten</span></li>
                <li><img src="http://distilleryimage3.instagram.com/21a66d688a3b11e192e91231381b3d7a_6.jpg" width="306" height="306" alt="Foto 4" /><span>Aan de kook</span></li>
                <li><img src="http://distilleryimage4.s3.amazonaws.com/26b90a4883ee11e18cf91231380fd29b_6.jpg" width="306" height="306" alt="Foto 5" /><span>Bah! Regen</span></li>
                <li><img src="http://distilleryimage9.s3.amazonaws.com/15437db087cd11e1be6a12313820455d_6.jpg" width="306" height="306" alt="Foto 6" /><span>Televisiekastje</span></li>
                <li><img src="http://distilleryimage10.s3.amazonaws.com/198e8b387fb411e181bd12313817987b_6.jpg" width="306" height="306" alt="Foto 7" /><span>Chocolaatjes</span></li>
                <li><img src="http://distilleryimage1.s3.amazonaws.com/bb8506a67fd211e1ab011231381052c0_6.jpg" width="306" height="306" alt="Foto 8" /><span>Opperdepop</span></li>
                <li><img src="http://distilleryimage6.instagram.com/0ebf67b4893611e181bd12313817987b_6.jpg" width="306" height="306" alt="Foto 9" /><span>Vroem vroem!</span></li>
                <li><img src="http://distilleryimage5.s3.amazonaws.com/dea6b0ba818711e192e91231381b3d7a_6.jpg" width="306" height="306" alt="Foto 10" /><span>Daar bij die molen</span></li>
            </ul>
            <div id="briefje">
                <h1>Showcase</h1>
                <p>Hier kun je al je mooie foto's laten zien</p>
            </div>
        </div>
    </body>
</html>

02 Afbeeldingen toevoegen

Wij hebben als voorbeeld wat eigen Instagram-foto’s gebruikt. Het is natuurlijk het leukst wanneer je je eigen foto’s gebruikt. Je kunt de foto’s in een map zetten of verwijzen naar een online locatie. Via Webstagram kun je eenvoudig je eigen Instagram-foto’s vinden (of die van iemand anders).

03 Prikbord zoeken

Voor de achtergrond van onze gallery gebruiken we een prikbord. Gebruik Google Afbeeldingen om een geschikte achtergrond te vinden met een Creative Commons-licentie. Je kunt genoeg afbeeldingen vinden die al als herhalende achtergrond zijn opgezet (zoek ook eens op ‘corkboard’). Je kunt natuurlijk ook Photoshop gebruiken om je favoriete afbeelding naar een repeterende achtergrond te transformeren.

04 Basisopmaak

Nu we wat afbeeldingen klaar hebben staan, kunnen we beginnen met de CSS voor de opmaak van onze pagina. Veel van de CSS zul je al kennen van niet-CSS3-sites. We stellen een achtergrondafbeelding in, creëren de Polaroidvorm via een witte achtergrond en wat padding en positioneren onze span-tag op de Polaroid.

	body {
		background:	transparent url(http://i44.tinypic.com/2r3coki.jpg) repeat top left;
		font-family: 	'Nothing You Could Do', cursive;
	}
	#pinboard {
		width:			1000px;
		height:			400px;
		position:		relative;
		margin:			auto;
	}
	#pinboard ul {
		margin:			0;
		padding:		0;
		position:		relative;
		width:			960px;
		height:			400px;
	}
	#pinboard ul li {
		position:		absolute;
		top:			200px;
		left:			460px;
		display:		block;
		margin:			0;
		padding:		0;
		list-style:		none;
		background:		#fefefe;
		width:			300px;
		height:			300px;
		padding:		20px 20px 40px 20px;
	}
	#pinboard ul li img {
		border:			1px solid #ccc;
	}
	#pinboard ul li span {
		position:		absolute;
		bottom:			5px;
		left:			20px;
	}

05 Bijschrift

De bijschriften zien er standaard nogal saai uit en passen niet echt bij de uitstraling van een Polaroid. Surf naar Google Web Fonts en kies een toepasselijker lettertype. Wij gaan voor Nothing You Could Do, een fraai handgeschreven font. Gebruik de code die je van Google krijgt boven aan je pagina en zet je font in de body-CSS.

06 Tijd voor CSS3

We hebben nu onze Polaroids en een leuk lettertype. Tijd voor enkele visuele extraatjes om het geheel wat aantrekkelijker te maken. Als eerste voegen we slagschaduw toe aan elke Polaroid. Voeg hiervoor onderstaande code toe aan je CSS. Je ziet dat we code een aantal keren herhalen met verschillende prefixes.

-webkit-box-shadow:		0px 0px 10px #000;
-moz-box-shadow:		0px 0px 10px #000;
-o-box-shadow:			0px 0px 10px #000;
-ms-box-shadow:			0px 0px 10px #000;
		box-shadow:	0px 0px 10px #000;

07 Interactie

We gaan nu de basisinteractie toevoegen. Het idee is dat de bezoeker de Polaroids kan oppakken en over de pagina verslepen. De makkelijkste manier om dit te bereiken is via jQuery en jQuery UI – de user interface plug-in voor deze invloedrijke JavaScript-bibliotheek. Ga naar http://jqueryui.com en zorg dat je download de ‘draggable’ interactie bevat. Voor het gemak gebruiken we hier de CDN-versie.

08 Je eigen script

Open een nieuw JavaScript-bestand en verwijs hiernaar in je pagina via scripttags. Zorg ervoor dat je script onder de aanroepen voor jQuery- en jQuery UI staat, zodat alles geladen wordt. Vervolgens voeg je de code uit deze stap toe om de drag-and-drop-functionaliteit voor de Polaroids mogelijk te maken. Sla op en test!

$(document).ready(function(){
	$("#pinboard ul li").draggable();
});

09 Slepen

Open de pagina in je browser en probeer de foto’s te verslepen. Als het goed is, kun je de Polaroids herschikken hoe je wilt. Dankzij jQuery werkt dit in alle belangrijke browsers. Het ziet er nog wel een beetje saai uit, dus gaan we wat extra effecten toevoegen.

10 Startpositie

Het eerste probleem dat we gaan aanpakken, is de startpositie van de Polaroids. Nu liggen ze allemaal in een rijtje onder elkaar. Dat was niet de look waar we voor gingen. We willen ze willekeurig over de pagina verspreiden. Dat kan gelukkig met de random-functie die ingebouwd is in het math-object van JavaScript. Voeg onderstaande code toe binnen je JS-document door de bestaande draggable()-code te vervangen.

		$("#pinboard ul li").each(function(){
			xpos = Math.floor(Math.random()*920);
			ypos = Math.floor(Math.random()*420);
			$(this).delay(1000).animate({top:ypos,left:xpos});
		}).draggable();

11 Hoe het werkt

We hebben een set variabelen opgezet voor een x- en een y-positie voor elk lijstitem. Via math.random() hebben we hier een willekeurig getal van gemaakt – tussen 0 en 920 voor x en tussen 0 en 420 voor y. Vervolgens wordt elk lijstitem met een vertraging van 1000 milliseconden (dus één seconde) naar deze positie geanimeerd. Gebruik onderstaande CSS-code om het lijstitem standaard in het midden te plaatsen. Test alles nog eens in je browser.

	#pinboard ul li {
		position:		absolute;
		top:			200px;
		left:			460px;
		...etc
	}

12 Ronddraaien

We hebben nu een leuke animatie die de foto’s over de pagina verspreidt wanneer de site laadt. Het ziet er alleen nog niet ‘natuurlijk’ uit, omdat alles perfect recht ligt. We voegen wat rotatie toe voor een natuurlijkere uitstraling. Dit kan met CSS, maar om een willekeurig aantal rotatiegraden te krijgen, gebruiken we JavaScript om dit te berekenen en jQuery om het toe te passen. Voeg de volgende code toe binnen elke .each()-functie.

		$("#pinboard ul li").each(function(){
			xpos = Math.floor(Math.random()*920);
			ypos = Math.floor(Math.random()*420);
			rotation = Math.floor(Math.random()*15);
			if(Math.floor(Math.random()*11)>5) {
				rotation = rotation * -1;
			}
			$(this).data("rotation",rotation);
			$(this).delay(1000).animate({top:ypos,left:xpos}).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"});
		}).draggable();

13 Welke kant op?

We hebben ons random-trucje nog een keer gebruikt voor het aantal graden dat er gedraaid moet worden, maar als alles dezelfde kant op draait, ziet het er nog niet uit. We hebben daarom nog een random toegepast om te bepalen of we positief of negatief roteren. Tenslotte past onze nieuwe code CSS3-regels toe voor de Transform-selector; met de benodigde prefixes.

14 Overgang

Zet een nieuw JavaScript-document op en neem deze op in je pagina via script-tags. Zorg dat je script onder jQuery en jQuery UI wordt aangeroepen. Voeg vervolgens de onderstaande code toe en sla alles weer op. Test het nog een keertje in je browser.

-webkit-transition:		0.2s -webkit-transform linear;
-moz-transition:		0.2s -moz-transform linear;
-ms-transition:			0.2s -ms-transform linear;
-o-transition:			0.2s -o-transform linear;
		transition:	0.2s transform linear;

15 Wat een toestand

De code die we zojuist hebben toegevoegd, vertelt de browser dat er lokaal gerenderd moet worden bij de overgang tussen de verschillende toestanden van de Polaroid – gedurende 0,2 seconden. Om dit in actie te kunnen zien, moeten we een nieuwe toestand toekennen aan de Polaroid op het moment dat deze versleept wordt. Gelukkig voegt jQuery UI automatisch een klasse toe aan een element wanneer het versleept wordt. We voegen dus een regel toe dit zich hierop richt:

	.ui-draggable-dragging {
-webkit-transform:		rotate(0deg) scale(1.2) !important;
-moz-transform: 		rotate(0deg) scale(1.2) !important;
-ms-transform: 			rotate(0deg) scale(1.2) !important;
-o-transform: 			rotate(0deg) scale(1.2) !important;
		transform:	rotate(0deg) scale(1.2) !important;
	}

16 CSS3

Open de pagina in je browser om te zien hoe indrukwekkend CSS-overgangen kunnen zijn. We hebben een regel gecreëerd die de Polaroids naar 120% van hun normale grootte opschaalt en de rotatie verwijdert. Zodra je begint te slepen, groeit de Polaroid en wordt deze rechtgezet. Als je browser het ondersteunt, zie je ook een soepele animatie tussen de verschillende toestanden – en dat zonder te scripten!

17 Verbeterpuntjes

Om alles er piekfijn uit te laten zien, moet er nog wel wat gedaan worden. Je hebt misschien al gezien dat een foto die je rondsleept onder een andere foto door kan gaan. Dit lossen we op door het JavaScript zo aan te passen dat het element dat je versleept een hogere z-index krijgt. Kijk voor de volledige code in de demo of gebruik de tutorialbestanden.

var zindex = 50;
$(document).ready(function(){
	// Create your interaction code here
	$("#pinboard ul li").each(function(){
			xpos = Math.floor(Math.random()*920);
			ypos = Math.floor(Math.random()*420);
			rotation = Math.floor(Math.random()*15);
			if(Math.floor(Math.random()*11)>5) {
				rotation = rotation * -1;
			}
			$(this).data("rotation",rotation);
			$(this).delay(1000).animate({top:ypos,left:xpos}).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"});
		}).draggable({
			start: function(){
				zindex = zindex + 1;
				$(this).css({zIndex:zindex});
			}
		});
	});

18 Loslaten

Het zou mooi zijn als een Polaroid weer een nieuwe rotatie krijgt zodra deze wordt losgelaten. Je hebt gezien dat we code kunnen uitvoeren op het moment dat het verslepen begint; dat gaan we nu ook doen voor wanneer het eindigt.

		.draggable({
			start: function(){
				zindex = zindex + 1;
				$(this).css({zIndex:zindex});
			},
			stop: function(){
				rotation = Math.floor(Math.random()*15);
				if(Math.floor(Math.random()*11)>5) {
					rotation = rotation * -1;
				}
				$(this).data("rotation",rotation);
				$(this).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"});
			}
		});

19 Testen

Als het goed is, heb je nu een volledig werkende pagina met Polaroids die automatisch naar een startpositie bewegen, versleept kunnen worden, groter worden bij het oppakken en krimpen bij het neerleggen. Controleer die in verschillende browsers. Let vooral op de gedeeltes waar we prefixes gebruikt hebben.

20 Extraatje

Als laatste voegen een soort post-it toe met een leuke tekst. We gebruiken hier alleen een achtergrondkleur, maar je kunt natuurlijk ook een afbeelding gebruiken.

#briefje {
        position:         absolute;
        top:              10px;
        left:            -50px;
        width:            250px;
        padding:          50px 50px;
        background-color: #F4FA58;
-webkit-transform:		rotate(-10deg) !important;
-moz-transform: 		rotate(-10deg) !important;
-ms-transform: 			rotate(-10deg) !important;
-o-transform: 			rotate(-10deg) !important;
	transform:		rotate(-10deg) !important;
	color:			#006;
	font-size:		1.2em;
	}

21 Tekst aanpassen

De tekst wordt niet in alle browsers hetzelfde weergegeven, vanwege verschillen in de standaardwaardes van de margin en padding. Met de code uit deze stap zorg je voor consistentie is je design. Controleer dit in je browsers en aanschouw het resultaat in volle glorie.

	#briefje h1 {
                font-size:        2.0em;
		margin-bottom:	  0;
		padding-bottom:	  0;
	}
	#briefje p {
		margin-top:	  0;
		padding-top:	  0;
		margin-bottom:	  10px;
	}

22 Een stapje verder…

De code die we hier opgezet hebben, kan eenvoudig uitgebreid worden met zo veel afbeeldingen als je wilt. Je kunt nog een stapje verder gaan en elke Polaroid een eigen textuur/achtergrond geven of bijvoorbeeld de slagschaduw aanpassen tijdens het slepen. Je kunt het zo gek maken als je zelf wilt!

Komende maandag wordt een spannende dag voor menig (web)designer, want op die dag wordt de nieuwste Creative Suite van Adobe gepresenteerd. CS6 belooft enorm veel verbeteringen binnen bekende programma’s als Photoshop, Dreamweaver en Flash, plus een heel aantal nieuwe manieren om je workflow te optimaliseren. Wij van Webdesigner hebben al even met Creative Suite 6 mogen spelen en geven in de volgende editie (nummer 46, verkrijgbaar op 8 mei) een uitgebreid inkijkje in de nieuwigheden.

Voor die tijd wordt CS6 natuurlijk al gelanceerd en dat zal gebeuren middels een online event op maandag 23 april. Om 10.00 am Pacific Time (19.00 Nederlandse tijd) kun je deelnemen aan een online stream op de Adobe-site. Tijdens dit event zal niet alleen Creative Suite 6 het levenslicht zien, maar ook de Adobe Creative Cloud.

Om de Nederlanders bij te praten over CS6 is er op dinsdag 24 april om 16.00 een tweede online event. Hierin geven enkele Nederlandse Adobe-experts een overzicht van de vernieuwingen binnen de suite en word je snel op de hoogte gebracht van het hoe en wat. Ga naar de Nederlandse Adobe-pagina om deel te nemen.

Wat verwachten jullie van de nieuwe Creative Suite?

De text-transform-eigenschap van CSS is sinds afgelopen weekend een stukje vriendelijker geworden voor de Nederlandse taal. De digraaf IJ wordt vanaf Firefox 14 fatsoenlijk ondersteund. Dat heeft Mozilla onlangs bekend gemaakt. De digraaf IJ is een onhandig karakter en geeft vooral problemen wanneer het het openingskarakter is, zoals in het woord IJsland. Hierbij moeten zowel de I als de J in hoofdletters geschreven worden. Natuurlijk is dit alleen van toepassing op documenten die zijn opgemaakt in lang=”nl” . Een leuke en handige toevoeging van het Mozilla-team.

In dit nummer staat Google Analytics centraal. Door het gedrag van de bezoekers op je website te analyseren leer je de zwakke onderdelen van je site herkennen en kun je ze verbeteren, met een hogere omzet of meer bezoekers als resultaat. Wie wil dat nou niet? Ontdek hoe jij de tool het beste in kunt zetten en meer…

Google Analytics

Meten is weten, niet alleen als je lekker aan het klussen bent, maar zeker ook bij je sites. Als je Google Analytics eenmaal onder de knie hebt, wordt het een verslaving om te ontdekken wanneer mensen op je site komen, bijvoorbeeld bij interessante campagnes of blogberichten, en via welke weg ze er komen, misschien wel alleen via Twitter of Facebook. Deze kennis kun je inzetten om die mensen nog meer van dienst te zijn en andere wegen te verbeteren om een grotere doelgroep naar je site te trekken.

Top 10 online webdesigntools

Op het web vind je legio handige bronnen en hulpmiddelen die je creativiteit en productiviteit positief beïnvloeden. In dit artikel bespreken we tien handige tools, diensten en hulpmiddelen die je als designer én developer niet mag missen. Pixlr, Wufoo, Cloud IDE komen allemaal aan bod, lees in Webdesigner 45 de rest!

{webdeveloper;

We gaan verder met het {webdeveloper;-onderdeel. Deze sectie wordt geopend door een feature over codeoptimalisatie. Ontdek waarom dit zo belangrijk is en wat dit voor jou kan betekenen. Verder kun je gaan oefenen met JSON en Ruby on Rails, twee interessante codetutorials.

Webdesigntutorials

Natuurlijk vergeten we de praktische kant niet en staat Webdesigner weer vol met de nodige workshops. Maak bijvoorbeeld deze maand een e-commercetheme in WordPress, werk aan je JavaScript-kennis met onze basisworkshop en leer hoe je Adobe Edge in kunt zetten voor interactieve animaties. Dit is nog lang niet alles, lees de rest in het blad!

En verder…

Verder verzamelen we in Webdesigner 45 natuurlijk ook weer de mooiste sites, lees je het laatste nieuws en praten we met het Londense webdesignbureau StinkDigital over hun gigantische groeistuip.

Webdesigner 45 ligt vanaf komende vrijdag bij abonnees in de bus en vanaf volgende week dinsdag in de winkel. Bestellen kan ook in onze webshop.

Om je op weg te helpen hebben we tien gave iconensets verzameld. Deze zijn allemaal gratis te gebruiken en worden geleverd in verschillende formaten, soms inclusief de PNG- en PSD-versies. Upload de fonts naar je server en verwijs naar de juiste iconen via de CSS. Bekijk de verschillende demo’s van de sets om te zien hoe de ontwerpers dat precies doen.

Entypo

Naam: Entypo
Aantal icoontjes: 100+
Formaat: EPS, EOT

Font Awesome

Naam: Font Awesome
Aantal icoontjes: 150+
Formaat: EOT, TTF, WOFF, SVG

Pulsar

Naam: Pulsar
Aantal icoontjes: 70+
Formaat: TTF

JustVector

Naam: JustVector
Aantal icoontjes: 150+
Formaat: AI, EPS, PNG, SVG, EOT, TTF, WOFF

Raphaël

Naam: Raphaël
Aantal icoontjes: 115+
Formaat: SVG, EOT, TTF, WOFF

WebSymbols

Naam: WebSymbols
Aantal icoontjes: 75+
Formaat: SVG, OTF, TTF, EOT, WOFF

Iconic

Naam: Iconic
Aantal icoontjes: 170+
Formaat: PNG, SVG, SWC, OTF, TTF, EOT, Omnigraffle

Modern Iconset

Naam: Modern Iconset
Aantal icoontjes: 95+
Formaat: OTF

Social Media Icons

Naam: Social Media Icons
Aantal icoontjes: 75
Formaat: OTF

IcoMoon

Naam: IcoMoon
Aantal icoontjes: 500+
Formaat:

Bonus: een volledig in HTML en CSS gerenderde iconenset:

Peculiar

Naam: Peculiar
Aantal icoontjes: 45
Formaat: HTML, CSS