<div id="error"><p class="wpdberror"><strong>WordPress databasefout:</strong> [Can&#039;t create/write to file &#039;/tmp/#sql_4174_0.MYI&#039; (Errcode: 13)]<br /><code>SHOW FULL COLUMNS FROM `wp_options`</code></p></div><?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Heeftstijl.nl</title>
	<atom:link href="http://www.heeftstijl.nl/feed/?cat=-45" rel="self" type="application/rss+xml" />
	<link>http://www.heeftstijl.nl</link>
	<description>Nederlands webdesign magazine</description>
	<lastBuildDate>Wed, 15 Oct 2014 09:28:42 +0000</lastBuildDate>
	<language>nl-NL</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.4.20</generator>
	<item>
		<title>Heeftstijl is history</title>
		<link>http://www.heeftstijl.nl/heeftstijl-history/</link>
		<comments>http://www.heeftstijl.nl/heeftstijl-history/#respond</comments>
		<pubDate>Sat, 13 Sep 2014 18:22:54 +0000</pubDate>
		<dc:creator><![CDATA[Ivo Bosma]]></dc:creator>
				<category><![CDATA[Algemeen]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5920</guid>
		<description><![CDATA[<p>&#8220;A journey of a thousand miles begins with a single step&#8221;. Het was een hele mooie reis, maar na dik 5 jaar houdt onze reis met Heeftstijl op. Door gezinsuitbreiding en (freelance) werk zijn andere zaken nu belangrijker en steken we (in elk geval voorlopig) geen energie meer in Heeftstijl. En om eerlijk te zijn [&#8230;]</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/heeftstijl-history/">Heeftstijl is history</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2014/09/14559370158_0f5ab06f12_k.jpg"><img class="alignnone size-medium wp-image-5928" alt="14559370158_0f5ab06f12_k" src="http://www.heeftstijl.nl/wp-content/uploads/2014/09/14559370158_0f5ab06f12_k-300x225.jpg" width="300" height="225" srcset="http://www.heeftstijl.nl/wp-content/uploads/2014/09/14559370158_0f5ab06f12_k-300x225.jpg 300w, http://www.heeftstijl.nl/wp-content/uploads/2014/09/14559370158_0f5ab06f12_k-1024x768.jpg 1024w, http://www.heeftstijl.nl/wp-content/uploads/2014/09/14559370158_0f5ab06f12_k-266x200.jpg 266w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&#8220;A journey of a thousand miles begins with a single step&#8221;. Het was een hele mooie reis, maar na dik 5 jaar houdt onze reis met Heeftstijl op.</p>
<p>Door gezinsuitbreiding en (freelance) werk zijn andere zaken nu belangrijker en steken we (in elk geval voorlopig) geen energie meer in Heeftstijl. En om eerlijk te zijn was dat ook al even zo&#8230;</p>
<p>Als terugblik hieronder de top 10 bestgelezen artikelen: veel leesplezier, en een bedankje aan al onze (gast)schrijvers, lezers en reageerders!</p>
<p>De site blijft on-line, zodat je artikelen nog eens terug kan lezen.</p>
<p>So long, and thanks for all the fish!</p>
<p>Ivo Bosma,<br />
Milan van Bruggen,<br />
Edgar Leijs</p>
<h2> Top 10 meestgelezen artikelen</h2>
<p title="7 Tips om efficiënt te werken">1. <a title="Interactie ontwerp: wat is het en wat is de meerwaarde?" href="http://www.heeftstijl.nl/interactie-ontwerp-wat-is-het-en-wat-is-de-meerwaarde/">Interactie ontwerp: wat is het en wat is de meerwaarde?</a><br />
2. <a title="Klassieke lettertypes: Gill Sans" href="http://www.heeftstijl.nl/klassieke-lettertype-gill-sans/">Klassieke lettertypes: Gill Sans<br />
</a>3. <a title="12 redenen waarom je ontwerp niet optimaal is (en wat er aan te doen) " href="http://www.heeftstijl.nl/12-redenen-waarom-je-ontwerp-niet-optimaal-is-en-wat-er-aan-te-doen/">12 redenen waarom je ontwerp niet optimaal is (en wat er aan te doen)<br />
</a>4. <a title="Klompen, tulpen, kaas en webdesign?" href="http://www.heeftstijl.nl/klompen-tulpen-kaas-en-webdesign/">Klompen, tulpen, kaas en webdesign?<br />
</a>5. <a title="Webdesign zonder keurslijf" href="http://www.heeftstijl.nl/webdesign-zonder-keurslijf/">Webdesign zonder keurslijf<br />
</a>6. <a title="Review wireframe pakketten (deel 1)" href="http://www.heeftstijl.nl/review-wireframe-pakketten-deel-1/">Review wireframe pakketten (deel 1)<br />
</a>7. <a title="Photoshop vs Fireworks" href="http://www.heeftstijl.nl/photoshop-vs-fireworks/">Photoshop vs Fireworks<br />
</a>8. <a title="Boeken, boeken en nog eens boeken" href="http://www.heeftstijl.nl/boeken-boeken-en-nog-eens-boeken/">Boeken, boeken en nog eens boeken<br />
</a>9. <a title="7 Tips om efficiënt te werken" href="http://www.heeftstijl.nl/7-tips-om-efficient-te-werken/">7 Tips om efficiënt te werken<br />
</a>10. <a title="Tips en trucs om beter te ontwerpen en te wireframen" href="http://www.heeftstijl.nl/tips-en-trucks-om-beter-te-ontwerpen-en-te-wireframen/">Tips en trucs om beter te ontwerpen en te wireframen </a></p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/heeftstijl-history/">Heeftstijl is history</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/heeftstijl-history/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Waarom klanten liever adaptive design willen dan responsive design</title>
		<link>http://www.heeftstijl.nl/waarom-klanten-liever-adaptive-design-willen-dan-responsive-design/</link>
		<comments>http://www.heeftstijl.nl/waarom-klanten-liever-adaptive-design-willen-dan-responsive-design/#respond</comments>
		<pubDate>Fri, 12 Sep 2014 09:17:32 +0000</pubDate>
		<dc:creator><![CDATA[WebIQ]]></dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Front-end]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5944</guid>
		<description><![CDATA[<p>Het idee dat je website alleen op een laptop of desktop computer bekeken wordt, is achterhaald. Dat weet iedereen. En het is ook zo. Zo komt het internetverkeer op Funda op dit moment voor maar liefst 36% van mobiele platforms. En nu denk je al snel aan responsive design om ervoor te zorgen dat je site ook op een mobieltje of iPad goed te bekijken is. In werkelijkheid kan dit veel gemakkelijker met een adaptive design. En niet alleen dat: de kans dat je klant tevreden is met het eindresultaat is ook vele malen hoger. </p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/waarom-klanten-liever-adaptive-design-willen-dan-responsive-design/">Waarom klanten liever adaptive design willen dan responsive design</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-5958 aligncenter" alt="image009" src="http://www.heeftstijl.nl/wp-content/uploads/2014/09/image009.jpg" width="720" height="376" /></p>
<p>Het idee dat je website alleen op een laptop of desktop computer bekeken wordt, is achterhaald. Dat weet iedereen. En het is ook zo. Zo komt het internetverkeer op Funda op dit moment voor maar liefst 36% van mobiele platforms. En nu denk je al snel aan <a href="http://www.webiq.nl/producten/responsive-design">responsive design</a> om ervoor te zorgen dat je site ook op een mobieltje of iPad goed te bekijken is. In werkelijkheid kan dit veel gemakkelijker met een adaptive design. En niet alleen dat: de kans dat je klant tevreden is met het eindresultaat is ook vele malen hoger.</p>
<h2>Responsive design</h2>
<p>Maak je het design responsive, dan zorg je ervoor dat het beeld als het ware meebeweegt met het formaat van het scherm. Dat wil zeggen dat het design in percentages met de resolutie meeschaalt. Heel mooi zou je denken, maar het betekent ook dat je design ontelbaar veel vormen heeft. Als het formaat ook maar iets verandert, ziet de vormgeving er anders uit. Niet alleen kijkt dit onrustig, maar je kunt je ook voorstellen dat de gemiddelde opdrachtgever hier niet blij van wordt. Hij moet immers al zo veel uit handen geven en nu gaat het design alle kanten op!  Een van de grootste voordelen van responsive design is dat de ontwikkeling goedkoper is. Je levert 1 design op en deze laat je oneindig schalen. Een bekende techniek voor responsive is <a href="http://getbootstrap.com">Bootstrap</a> van Twitter.</p>
<h2>Adaptive design<b></b></h2>
<p>Het grote voordeel van adaptive design is dat er verschillende varianten ontwikkeld worden. Er zijn vaak vijf varianten, waarbij er twee voor een staande en liggende iPhone (of smartphone algemeen) en twee voor een staande of liggende iPad (of tablet algemeen) zijn. De laatste variant is alles wat groter is dan een liggende iPad (en dus ook desktop) Optioneel kunnen er meer frames worden toegevoegd. Dit betekent dus dat het design niet constant meeschaalt, maar dat het maar een paar keer verspringt.</p>
<p>Elke variant past binnen een bepaalde schermresolutie. Wanneer de volgende variant binnen de resolutie past, zal de stap gemaakt worden en verspringt het beeld. Dit gebeurt net zo lang tot het niet meer past of tot de laatste variant (hoogst ondersteunde resolutie) gemaakt is. Zo voorkom je lelijke tussenvormen in je design en nog minstens zo belangrijk: voor je opdrachtgever betekent dit dat van tevoren duidelijk is welke verschillende designs er worden gemaakt.</p>
<h2>Meer controle op het eindresultaat</h2>
<p>De klant heeft bij adaptive dus meer controle op het eindresultaat: zowel op de vormgeving als op de inhoud. En als een klant van te voren kan bepalen wat hij wel of niet wil laten zien op het formaat van mobiel en hoe het er precies uit moet zien. Dit betekent minder onrust achteraf. Hoe meer je van te voren met elkaar kunt afstemmen, hoe minder kans op ruis in het proces of onvrede van je klant.</p>
<p>Naast dat je klant beter inzichtelijk heeft hoe zijn website eruit komt te zien, is het ook mogelijk om de website per stap (dus voor de iPhone, iPad of desktop computer) te optimaliseren op accessibility, interaction design en usability. Voor bijvoorbeeld een webshop zou op deze manier per stap de conversie geoptimaliseerd kunnen worden.</p>
<h2>Grip op de huisstijl</h2>
<p>Vooral in grote bedrijven heerst vaak een angst dat men zich niet aan de huisstijl houdt of dat er dingen gebeuren die niet passen binnen de huisstijlregels. In zo’n geval is een brandmanager of communicatieadviseur vaak je contactpersoon. En hoe fijn is het voor mensen die in deze rol de huisstijl moeten bewaken om precies te kunnen bepalen hoe een website op een mobieltje er straks uitziet. Ze weten precies waar de plaatjes staan en hoe het menu uitklapt.</p>
<p>Omdat responsive eigenlijk geen maximale of minimale resolutie heeft, is het onmogelijk om grip te hebben op de presentatie van de huisstijl. Door met de brandmanager 5 (misschien meer) stappen af te spreken en per stap te bespreken hoe de huisstijl wordt weergegeven, heeft de brandmanager veel meer grip op de look en feel van zijn merk.</p>
<p>Kortom, maak je het design adaptive in plaats van responsive, dan heeft je klant meer controle op het proces en zal tevreden zijn over het eindresultaat.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/waarom-klanten-liever-adaptive-design-willen-dan-responsive-design/">Waarom klanten liever adaptive design willen dan responsive design</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/waarom-klanten-liever-adaptive-design-willen-dan-responsive-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Het probleem van de rangeslider</title>
		<link>http://www.heeftstijl.nl/het-probleem-van-de-rangeslider/</link>
		<comments>http://www.heeftstijl.nl/het-probleem-van-de-rangeslider/#comments</comments>
		<pubDate>Fri, 30 May 2014 08:27:30 +0000</pubDate>
		<dc:creator><![CDATA[Edgar Leijs]]></dc:creator>
				<category><![CDATA[Columns]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[range slider]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5832</guid>
		<description><![CDATA[<p>De user interface van de HTML range slider is geleend uit het echte leven: een rechte goot waarin je een schuif met weinig weerstand op en neer kunt bewegen. Denk aan een mengpaneel. Maar werkt de range slider op het web wel even goed als in real life?</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/het-probleem-van-de-rangeslider/">Het probleem van de rangeslider</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p>De HTML range input is het vage broertje van de number input. Waar number bedoeld is om een specifieke waarde toe te kennen, is de range om een ‘niet zo’ specifieke waarde binnen een reeks of gebied aan te duiden.</p>
<p><span style="font-family: monospace;">&lt;input type=range&gt;</span></p>
<p><input type="range"/></p>
<p>De user interface van de HTML range slider is geleend uit het echte leven: een rechte goot waarin je een schuif met enige weerstand op en neer kunt bewegen. Denk aan een mengpaneel in een geluidsstudio.</p>
<h2>Maar wat is het probleem dan?</h2>
<p>Tijdens het ontwikkelen van websites en webapplicaties heb ik wel eens op het punt gestaan om een range slider toe te passen. Omdat het kon EN omdat het vanzelfsprekend geschikt leek. Maar in elk scenario bleek na onderzoek een andere oplossing beter.</p>
<p>De range slider is volgens mij maar heel beperkt geschikt als user interface. Zelf heb ik het maar 1 keer toegepast. Dat was om een emotie aan te geven met directe feedback in de vorm van een heel boos gezicht tot een heel blij gezicht.</p>
<p>Okay, waarin faalt de range input mijns inziens?</p>
<h3>Issue 1. range input in plaats van number input</h3>
<p>Ik zie meer dan eens dat de range input wordt gebruikt om specifieke waardes aan te geven. Daar is die eigenlijk niet voor bedoeld. De W3C zegt <a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#range-state-(type=range)">hierover</a>:</p>
<p><i>“The input range element represents a control for setting the element&#8217;s value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the number state.”</i></p>
<p>Klinkt misschien wat vaag, maar kies je een exacte waarde tussen 1 en 10, dan gebruik je een number input. Maar een range tussen ‘langzaam’ en ‘snel’ is minder exact. Dan zou een range input de beste keus zijn.</p>
<h3>Issue 2. Geen directe output</h3>
<p>Een range input levert geen real-time output van de waarde. Er is geen standaard feedback optie ingebouwd. Chris Coyer van CSS Tricks heeft daar overigens wel iets op bedacht: <a href="http://css-tricks.com/value-bubbles-for-range-inputs/">Value bubbles</a>, maar daar heb je wel extra HTML, CSS en JavaScript voor nodig.</p>
<h3>Issue 3. Browser weergave en CSS misbruik</h3>
<p>Elke moderne browser heeft zijn <a href="http://caniuse.com/#feat=input-range">eigen versie</a> van een range slider weergave waardoor er verwarring kan ontstaan bij gebruikers. De slider handle kan rond, rechthoekig of andersvormig zijn, de goot een enkele lijn, stippellijn of dubbele lijn en de stijl zwaait van het skeuomorfe naar het superplatte toe.</p>
<p>Je kunt CSS toepassen om een consistente weergave te krijgen in alle browsers, maar voor elke gebruiker die je daarmee helpt, breng je een andere ermee in verwarring.<br />
<i>Stijl een range slider niet te plat. Zo bekend &#8211; en daarmee herkenbaar &#8211; is deze input type niet bij het grote publiek.</i></p>
<h3>Issue 4. De slider handle touch area is te klein</h3>
<p>Op apparaten met aanraakschermen zoals smartphones en tablets zie je dat een gebruiker soms moeite heeft om de range handle goed op en neer te schuiven. Je verliest soms de ‘grip’ van de handle. Dat komt omdat de touch area te klein is voor je dikke duim (en wijsvinger). Je kunt de touch area vergroten met CSS, maar als een native control van zichzelf niet lekker werkt, faalt het naar mijn mening.</p>
<h3>Issue 5. Duim of wijsvinger zit in de weg</h3>
<p>Vooral bij kleinere touch screens zie je niet precies waar de handle zich bevindt als je die met je vinger bestuurt. Hier zijn 2 dingen aan de hand:</p>
<p><strong>1.</strong> Soms staat er aan weerzijde van een range slider een min en een max waarde, al dan niet real time gestuurd. Jouw bijna altijd diagonaal op het scherm gepositioneerde vinger kan de min. of max. waarde bedekken, waardoor je niet precies ziet wat je positie is.</p>
<p><strong>2.</strong> De handle is visueel verdwenen op het moment dat je vinger het scherm aanraakt. Het scherm geeft geen prikkels of feedback aan je vinger, het zijn jouw ogen die je vertellen waar je heen moet schuiven met je vinger. Het is daarom best ingewikkeld om een range slider subtiel te besturen op aanraakschermen.</p>
<h3>Issue 6. Multi range sliders</h3>
<p>Een multi range slider is geen standaard HTML5 input type, maar meestal een jQuery plugin. Of een plugin van een andere relatief zware JavaScript library.<br />
</p>
<h4>Toepassing</h4>
<p>Bijvoorbeeld, ik wil een filter toepassen op de aanschafwaarde van een auto. De range is van 0 tot 50.000 en ik schuif handle 1 naar 10.000 en handle 2 naar 15.000.</p>
<p>Mooi gefilterd toch? Maar je voert 2 handelingen uit met een niet optimale gebruikerservaring &#8211; zie mijn eerdere issues.</p>
<p>Waarom niet heel simpel 2 number inputs gebruiken voor je min en max waarde? Dan krijg je er op aanraakschermen ook nog een mooie gebruikersinterface bij!</p>
<p>Wat mij betreft is de multi range een onding.</p>
<h2>Kortom</h2>
<p>De HTML5 range input is maar zeer beperkt effectief inzetbaar. Je lost het vaak eenvoudiger op met andere input types. Wie kan mij voorbeelden geven van effectieve range sliders?</p>
<p>Ieder zijn mening. Laat hieronder jouw mening achter!</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/het-probleem-van-de-rangeslider/">Het probleem van de rangeslider</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/het-probleem-van-de-rangeslider/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Ontwikkelaars: browsertest je JavaScript plugins!</title>
		<link>http://www.heeftstijl.nl/ontwikkelaars-browsertest-je-javascript-plugins/</link>
		<comments>http://www.heeftstijl.nl/ontwikkelaars-browsertest-je-javascript-plugins/#comments</comments>
		<pubDate>Fri, 02 May 2014 06:26:19 +0000</pubDate>
		<dc:creator><![CDATA[Koen Vendrik]]></dc:creator>
				<category><![CDATA[Columns]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[browserstack]]></category>
		<category><![CDATA[browsertesten]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[testen]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5847</guid>
		<description><![CDATA[<p>Waarom moet ik als gebruiker erachter komen dat jouw JavaScript plugin niet goed is ge-browsertest? Zijn ontwikkelaars lui of zit het anders?</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/ontwikkelaars-browsertest-je-javascript-plugins/">Ontwikkelaars: browsertest je JavaScript plugins!</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p><em><img class="alignnone" alt="Jackie Chan - What!" src="http://teenmomtalk.com/wp-content/uploads/2013/02/jackie-chan-wtf-face-i16.jpg" width="552" height="360" /></em></p>
<p><span style="font-size: small;">Bron: teenmomtalk.com</span></p>
<p>De laatste tijd heb ik verschillende JavaScript plugins gebruikt die niet bleken te doen wat de ontwikkelaar beloofd had in oudere browsers zoals die van Android 2.2 en 2.3.</p>
<p><strong>Waarom moet ik als gebruiker erachter komen dat jouw JavaScript plugin niet goed is ge-browsertest?</strong></p>
<p>Zodra ik merk dat een plugin niet werkt in oudere browsers, plaats ik direct een issue op de Github pagina van de plugin.</p>
<p>In alle gevallen had de ontwikkelaar geen idee dat er problemen waren met oudere browsers. Soms is er wel een fallback, maar dan blijkt de plugin niet getest te zijn tot op het punt waar deze nodig was.</p>
<blockquote><p><strong>We don’t support browsers, we support users &#8211; Edd Sowden</strong></p></blockquote>
<p>Wij, als gebruikers zouden niet degene moeten zijn die jou moet vertellen dat je plugin niet goed werkt in oudere browsers. Jij, als ontwikkelaar, zou degene moeten zijn die dat ons vertelt.</p>
<p>Wanneer dit niet gebeurt en er een vraag over wordt gesteld, zou ik een antwoord verwachten waaruit blijkt dat je het <strong>1.</strong> weet, maar er niks aan wil/kan doen, of <strong>2.</strong> dat het een bug is, waar je naar gaat kijken.</p>
<p>Als er een paar apparaten zijn waarvan je er later achter komt dat je plugin daar niet in werkt, dan is dat geen probleem natuurlijk. Maar weet tenminste in welke populaire browsers je plugin wel of niet werkt in plaats van te roepen dat je plugin GE-WEL-DIG is, maar dat wij er vervolgens zelf achter moeten komen dat deze slechte browserondersteuning heeft.</p>
<p>Als je weet in welke browsers je plugin werkt, kun je ook bepalen of het prioriteit heeft om browser-issues, die je op het moment hebt, later nog zou willen oplossen of niet.</p>
<p>Hiernaast is het zo dat je gebruikers willen weten welke browsers je plugin ondersteunt. En als jouw gebruikers op mij lijken, dan zijn ze vrij snel overtuigd van de kwaliteit van je werk als je aan oudere browsers als IE8 en Android 2.3 hebt gedacht. En helemaal als de plugin regelmatig wordt bijgewerkt.</p>
<h2>Waarom worden plugins vaak niet goed ge-browsertest?</h2>
<p>Om eerlijk te zijn denk ik dat veel ontwikkelaars gewoon lui zijn. Tijdens een project kan het op het moment geen prioriteit hebben om de plugin in bepaalde browsers te testen. Geen probleem, maar vermeldt, op het moment dat je de plugin open source gaat aanbieden, dan wel goed welke browsers er zijn getest.</p>
<p>Dit zijn niet de leukste delen van het maken van een plugin, maar dat betekent niet dat het niet belangrijk is. De gebruikers van een plugin zouden niet hoeven boeten voor onze luiheid.</p>
<h2>”Maar ik heb geen 50 verschillende browsers op mijn computer&#8230;.”</h2>
<p>Heb jij toevallig nog een oude PC met Windows XP en Internet Explorer 8 erop? Waarschijnlijk niet, daarom maak ik zelf gebruik van <a title="Browserstack Homepage" href="http://browserstack.com">Browserstack</a>.</p>
<p>Met Browserstack kun je op afstand verschillende besturingssystemen en browsers testen. Binnen een paar minuten test je een veelheid aan apparaten, browsers en OS-en, allemaal ready-to-go. In die tijd heb je een gemiddelde XP nog niet eens opgestart.</p>
<h2>Mijn punt</h2>
<p>Het punt dat ik probeer te maken is dat het belangrijk is dat je weet welke browsers je plugin ondersteunt en welke niet, zodat je jouw gebruikers hierover kunt informeren.</p>
<p>In de ideale situatie zou je zelfs een overzicht kunnen maken om dit te verduidelijken zoals die van <a title="Symbolset Browser Support" href="http://blog.symbolset.com/browser-support">Symbolset</a> of <a title="Responsive-img.js Browser Support - Github" href="https://github.com/kvendrik/responsive-images.js#browser-support">deze</a> van mijn eigen <a title="Responsive-img.js - Github" href="https://github.com/kvendrik/responsive-images.js">Responsive-img.js</a> plugin.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/ontwikkelaars-browsertest-je-javascript-plugins/">Ontwikkelaars: browsertest je JavaScript plugins!</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/ontwikkelaars-browsertest-je-javascript-plugins/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>De grote gevolgen van het kleine werk</title>
		<link>http://www.heeftstijl.nl/de-grote-gevolgen-van-het-kleine-werk/</link>
		<comments>http://www.heeftstijl.nl/de-grote-gevolgen-van-het-kleine-werk/#comments</comments>
		<pubDate>Mon, 18 Feb 2013 13:21:16 +0000</pubDate>
		<dc:creator><![CDATA[Bas Kierkels]]></dc:creator>
				<category><![CDATA[Productiviteit]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5600</guid>
		<description><![CDATA[<p>Je kent het wel: een klant belt. Of je ‘even’ iets voor hem wil doen. Meteen graag trouwens want de klant was vergeten jou eerder te bellen. Dankzij jouw diepgewortelde servicegerichtheid floepte het antwoord “Tuurlijk” er sneller uit dan je achteraf had gewild. Maar ja, het is maar iets kleins: dat kan er toch makkelijk [&#8230;]</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/de-grote-gevolgen-van-het-kleine-werk/">De grote gevolgen van het kleine werk</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-5604" src="http://www.heeftstijl.nl/wp-content/uploads/2013/02/gek-van-klein-werk1.jpg" alt="" width="630" height="169" srcset="http://www.heeftstijl.nl/wp-content/uploads/2013/02/gek-van-klein-werk1-300x80.jpg 300w, http://www.heeftstijl.nl/wp-content/uploads/2013/02/gek-van-klein-werk1.jpg 630w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><strong>Je kent het wel: een klant belt. Of je ‘even’ iets voor hem wil doen. Meteen graag trouwens want de klant was vergeten jou eerder te bellen. Dankzij jouw diepgewortelde servicegerichtheid floepte het antwoord “Tuurlijk” er sneller uit dan je achteraf had gewild. Maar ja, het is maar iets kleins: dat kan er toch makkelijk tussendoor?</strong></p>
<p>Dit artikel gaat precies over het ‘kleine werkje’. Op het laatste moment binnengekomen, moet gelijk maar is ook zo gedaan. Wat is dat kleine werk nou eigenlijk in praktijk? Is het wel zo klein en makkelijk erbij te nemen? En wat is het gevolg voor je andere werk en je eigen functioneren?</p>
<p><span style="font-size: 16px;">Terug naar het voorbeeld. Je hangt de telefoon op en besluit gelijk aan de slag te gaan. Je pakt je spullen erbij en start de benodigde programma’s op. De wijziging is inderdaad in 2 minuten gedaan, geen werk. Je stuurt de spullen door naar de klant, sluit je bestanden weer. Waar was je ook weer mee bezig? Oh ja, dat project. Een minuutje later ben je weer aan het werk.</span></p>
<h2>&#8220;Perfect, ik was alleen 1 dingetje vergeten&#8221;</h2>
<p>En dan: de klant belt terug. Hij (of zij natuurlijk, ik maak geen onderscheid ;-)) heeft je spullen gehad en realiseerde zich dat hij nog iets was vergeten. Of je dat ook nog even wil doen. Tja, ok, nu weigeren heeft helemaal geen zin meer. Dus: spullen erbij, wijziging maken en alles doorsturen.</p>
<p>Ik heb voor mezelf een periode dit soort werk bijgehouden. Zo minutieus heb ik nog nooit iets bijgehouden moet ik bekennen maar het was het waard. Dit was mijn uitkomst van wat ik noem: de anatomie van het ‘kleine werkje’:</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="318">Opdracht ontvangen</td>
<td valign="top" width="120">2 min (5 min)</td>
</tr>
<tr>
<td valign="top" width="318">Andere werk stil leggen</td>
<td valign="top" width="120">2 min (4 min)</td>
</tr>
<tr>
<td valign="top" width="318">Spullen erbij nemen</td>
<td valign="top" width="120">2 min (2 min)</td>
</tr>
<tr>
<td valign="top" width="318"><strong>Feitelijke uitvoering</strong></td>
<td valign="top" width="120"><strong>2 min</strong> (5 min)</td>
</tr>
<tr>
<td valign="top" width="318">Communicatie naar de klant</td>
<td valign="top" width="120">3 min (10 min)</td>
</tr>
<tr>
<td valign="top" width="318">Spullen opbergen</td>
<td valign="top" width="120">3 min (3 min)</td>
</tr>
<tr>
<td valign="top" width="318">Mentaal schakelen naar je vorige werk</td>
<td valign="top" width="120">1 min (3 min)</td>
</tr>
<tr>
<td valign="top" width="318"><strong>Totaal</strong></td>
<td valign="top" width="120"><strong>15 min</strong> (32 min)</td>
</tr>
</tbody>
</table>
<p><span style="font-size: 16px;">De tijden tussen de haakjes zijn de tijden die je snel nodig hebt wanneer dat specifieke item tegenvalt.</span></p>
<p>Let op: deze uitkomst gaat over mijn specifieke situatie. Ik kan me voorstellen dat jij met andere werkzaamheden en/of tijden zit. De tabel staat er om duidelijk te maken wat je gemiddeld moet doen tijdens de uitvoering van een klein werk.</p>
<p>Zoals je ziet telt het snel op. Het feitelijke werk is inderdaad maar 2 minuten. Mijn gevoel had dus gelijk toen ik het werk inschatte. Waar m&#8217;n gevoel echter geen rekening mee hield was al het andere werk wat er nog bij komt kijken. In praktijk had ik voor ‘klein werk’ gemiddeld tussen de 15 en 32(!) minuten nodig.</p>
<p>In bovenstaand voorbeeld heb ik geen rekening gehouden met correcties die je ook nog kunt ontvangen. Zeker wanneer je dit kleine werk meerdere keren ‘even’ op moet pakken loopt de tijd snel op!</p>
<h2>Is klein werk slecht voor je bedrijf?</h2>
<p>Of klein werk erg is, hangt af van twee factoren: wat doe je met de in beslag genomen tijd en wat zijn de gevolgen voor je andere werkzaamheden.</p>
<p>Wanneer je een methode hebt waarbij je dit soort kleine werkzaamheden alsnog volledig in rekening kunt brengen hoeft het niet erg te zijn. Dan genereer je er in elk geval nog omzet mee. Voorwaarde is wel dat je een urenregistratie systeem gebruikt die jou in staat stelt dat – zeer waarschijnlijk – kleine bedrag makkelijk in rekening te kunnen brengen.</p>
<p>Zo lang je niet teveel onderbrekingen hebt door klein werk hoeft het ook niet erg te zijn. Sterker nog: je kunt een klant hiermee juist overtuigen dat ze bij jou goed zitten. Jij beweegt immers maximaal mee met de klant.</p>
<h2>Klein werk: factureren ja of nee?</h2>
<p>Hier bestaat geen vast antwoord op. Jouw antwoord hangt grotendeels af van je klantenkring en je eigen houding. Ik heb na een paar jaar besloten om klein werk steeds vaker in rekening te brengen. Zo konden mijn klanten en ik daar aan wennen.</p>
<p>Ga eens na: hoe vaak heb jij de afgelopen dagen telefoontjes of mailtjes gehad voor klein werk? Dit type werk verdwijnt doorgaans snel uit je geheugen, juist omdat het relatief snel gaat. De kans is echter groot dat je snel 2 of meer verzoeken per dag ontvangt. Voor het voorbeeld rekening ik met 1 klein werk per dag. In mijn situatie rond ik het werk af op 15 minuten.</p>
<p>Waarom rond ik het af op een kwartier? Zie bovenstaand voorbeeld: voor elk werk geldt dat je meer te doen hebt dan alleen de feitelijke uitvoering. Omdat ook die tijd specifiek voor de klant wordt gedraaid is het heel legitiem om die ook in rekening te brengen.</p>
<h2>Wat kan klein werk je opbrengen?</h2>
<p>Ik reken gemiddeld 15 minuten per werkdag aan klein werk oftewel 75 minuten per week. Ik ben uitgegaan van 40 werkweken per jaar. In totaal levert me dat dus 50 werkuren op. De feitelijke omzet hangt af van je uurtarief.</p>
<p>Als ik verder reken met een uurtarief van € 75,- per werkuur dan kom ik uit op:<br />
75 minuten per week x 40 werkweken = 50 werkuren x € 75,- per uur = € 3.750,-</p>
<p>Ik weet niet hoe jij op vakantie gaat maar zet dit bedrag apart en doe er iets leuks mee. Ze zijn van jou: jij hebt ervoor gewerkt en de klant is tevreden dus waarom zou je het niet doen.</p>
<p>Dat je klein werk in rekening brengt wil niet zeggen dat je ook echt alles in rekening moet brengen. In mijn geval maak ik dan ook maandelijks een selectie van het kleine werk dat ik doorbelast aan onze klanten. Het urenregistratie systeem waar we mee werken stelt ons in staat om werkzaamheden aan en uit te vinken waarna de facturen worden gemaakt.</p>
<p>In het geval dat ik klein werk niet in rekening breng stuur ik vaak een mailtje om dat aan te geven bij de klant. Ik hoor je denken: “Dat kost toch weer tijd?”. Klopt maar de meeste klanten waarderen dat soort mailtjes enorm. In dat geval versterk ik mijn relatie met de klant. Die realiseert zich dat ik bereid ben soms een klusje &#8216;van de zaak&#8217; te doen.</p>
<h2>Conclusie</h2>
<p>Mijn doel van dit artikel is om je bewust te maken van het feit dat klein werk een stuk omvangrijker kan zijn dan je vooraf vaak realiseert. Bovendien is het een mooie kans om meer omzet en een hogere klanttevredenheid te bereiken.</p>
<p>Mocht je door dit artikel veranderingen in je dagelijkse werk gaan doorvoeren:  veel succes en plezier daarbij. Heb je iets te melden over dit artikel? Laat dan een berichtje achter.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/de-grote-gevolgen-van-het-kleine-werk/">De grote gevolgen van het kleine werk</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/de-grote-gevolgen-van-het-kleine-werk/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Webdesign opnieuw leren?</title>
		<link>http://www.heeftstijl.nl/webdesign-opnieuw-leren/</link>
		<comments>http://www.heeftstijl.nl/webdesign-opnieuw-leren/#comments</comments>
		<pubDate>Tue, 30 Oct 2012 09:20:53 +0000</pubDate>
		<dc:creator><![CDATA[Edgar Leijs]]></dc:creator>
				<category><![CDATA[Columns]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[column]]></category>
		<category><![CDATA[front end development]]></category>
		<category><![CDATA[front-end]]></category>
		<category><![CDATA[interactie design]]></category>
		<category><![CDATA[interactie ontwerp]]></category>
		<category><![CDATA[interface design]]></category>
		<category><![CDATA[ontwerpen in de browser]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5510</guid>
		<description><![CDATA[<p>Een website ontwerp je meer dan ooit op de plek waar een website thuishoort: op het web in de browser met html en css. En daar zijn zeer goede redenen voor...</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/webdesign-opnieuw-leren/">Webdesign opnieuw leren?</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p>Een nieuwe website ontwerpen gaat vaak zo:</p>
<p>1. Start een bijna willekeurig Adobeprogramma.<br />
2. Open een nieuw document.<br />
3. Selecteer een breedte van exact 960 pixels.</p>
<p>Maar een website ontwerp je toch in een webbrowser? Precies! En daar zijn zeer goede redenen voor.</p>
<p><img class="alignleft size-medium wp-image-5513" title="One Laptop per Child on Flickr" src="http://www.heeftstijl.nl/wp-content/uploads/2012/10/One-Laptop-per-Child-on-Flickr-300x225.jpg" alt="One Laptop per Child on Flickr | http://www.flickr.com/photos/olpc/2606362543/" width="300" height="225" srcset="http://www.heeftstijl.nl/wp-content/uploads/2012/10/One-Laptop-per-Child-on-Flickr-300x225.jpg 300w, http://www.heeftstijl.nl/wp-content/uploads/2012/10/One-Laptop-per-Child-on-Flickr-266x200.jpg 266w, http://www.heeftstijl.nl/wp-content/uploads/2012/10/One-Laptop-per-Child-on-Flickr.jpg 800w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>In mijn vorige artikel, <a title="Mobile First" href="http://www.heeftstijl.nl/mobile-first/">Mobile First</a> schreef ik over de perceptie die we hebben van websites als een typisch <em>fullscreen-browser-on-desktop</em> ding. Maar dat is natuurlijk niet zo.</p>
<p>Het web was ook altijd al een screen reader, een braille browser of de eerste generatie pda’s. Nu is het assortiment uitgebreid met iPods, grote tablets, kleine tablets, slimme telefoons, touch laptops, game consoles, auto’s, koelkasten, en alles wat er nog komen gaat.</p>
<p><em> ~ Bedankt Photoshop voor die mooie jaren. Het was fijn samen</em></p>
<p><a title="Column Vasilis van Gemert: Het is oplichterij om oude browsers te ondersteunen" href="http://www.webdesignermagazine.nl/column/column-vasilis-van-gemert-het-oplichterij-om-oude-browsers-te-ondersteunen/" target="_blank">“Het is oplichterij om oude browsers te ondersteunen”</a>, kopt de column van Vasilis van Gemert op de website van Webdesigner Magazine.</p>
<p><strong>Oplichterij</strong>, omdat websites er op verschillende, laat staan oude, webbrowsers en platforms hetzelfde uit laten zien aanzienlijk meer kosten voor de klant met zich meebrengt, die commercieel eigenlijk niet te verantwoorden zijn. De front-end ontwikkeltijd met ondersteuning van alleen al IE6 zou volgens Vasilis zelfs 2x langer duren. Ik wil dat zeker geloven.</p>
<p><strong>Oplichterij</strong>, want we houden onszelf voor de gek om uniforme oplossingen te vinden voor pluriforme vraagstukken &#8211; lees: een veelvoud aan devices, viewports en contexten.</p>
<p><a title="Daily Nerd" href="http://dailynerd.nl/" target="_blank">Vasilis</a> stelt in zijn column voor om websites in antieke browsers een minimale basisstyling mee te geven, in een enkele kolom, en meer te investeren in progressieve verbeteringen. Ik geef hem gelijk.</p>
<p><em> ~ Fireworks, vaarwel. Ik zal je nooit vergeten</em></p>
<p>Zodra je een website opent, is er een wisselwerking tussen jou en de aangeboden content. Je scant, leest, scrollt, klikt, swipet <span style="color: #f48a00;">¹</span>, vergroot, pincht <span style="color: #f48a00;">¹</span> en ga zo maar door. Al deze interacties kunnen toch niet statisch ontworpen worden? Als visual webdesigner kon je er een tijdje mee weg komen, maar het canvas waarmee zij sites ontwerpen voldoet niet meer. Sterker nog: het canvas waarmee zij ontwerpen heeft nooit voldaan. Het juiste canvas is het web, met html en css als penseel en verf. ← Voorgaande beeldspraak klinkt overigens best Photoshopperig, maar goed.</p>
<p><span style="color: #f48a00;">¹</span> <strong>Pinchen</strong> en <strong>swipen</strong>: nieuwe werkwoorden voor Van Dale</p>
<p>Als webdesigner behoor je verstand te hebben van de materialen waar je producten &#8211; in dit geval websites &#8211; van zijn gemaakt, net zoals in de analoge wereld een grafisch designer verstand heeft van print- en druktechnieken en een typograaf kunde heeft van soorten papier vanwege het uitlopen van de inkt.</p>
<p>Een reclame-, communicatie- of webdesignbureau zou naar mijn mening door de mand vallen als zij hun nieuwe klanten volledig uitgewerkte, van het scherm spattende, visuele designs presenteren. Tenzij het browser-screenshots zijn!</p>
<p>Neem bijvoorbeeld de jongens van het Groningse <a title="Studio Wolf" href="http://www.studiowolf.nl/" target="_blank">Studio Wolf</a>; zij presenteren hun klanten geen pixelperfecte designs, maar een moodboard met kleuren, typografie en beelden.</p>
<p>Kris (interface designer bij de studio) pleit ervoor dat ook interface designers met de klant gaan praten. Dat klink logisch, want interface designers, interactieontwerpers of front-enders &#8211; hoe je ze ook noemt &#8211; weten heel veel van functie, interactie en responsive/adaptive design. Maar toch zijn het vaak de projectmanagers die de klant nog een kopje koffie aanbieden.</p>
<p>“De belangrijkste taak is dus de vertaling van de wensen van een klant naar een resultaat dat ook aansluit bij het doel van de gebruiker. De interface designer heeft hiervoor de kennis en kan deze vertaalslag het beste uitwerken&#8221;, aldus Kris in een artikel over <a title="Iedereen kan toch wireframen?" href="http://www.studiowolf.nl/notes/iedereen-kan-toch-wireframen/" target="_blank">Iedereen kan toch wireframen?</a></p>
<p>Start jij elk project trouw in Photoshop/Fireworks? Het is niet te laat! Ga eens aanmodderen met code. En denk je dat code moeilijk is? Die honderden knopjes en duizenden functies in Photoshop zijn pas moeilijk! ~ vrij naar <a title="The Haystack" href="http://www.the-haystack.com/" target="_blank">Stephen Hay</a>.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/webdesign-opnieuw-leren/">Webdesign opnieuw leren?</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/webdesign-opnieuw-leren/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Mobile First</title>
		<link>http://www.heeftstijl.nl/mobile-first/</link>
		<comments>http://www.heeftstijl.nl/mobile-first/#comments</comments>
		<pubDate>Wed, 10 Oct 2012 09:11:20 +0000</pubDate>
		<dc:creator><![CDATA[Edgar Leijs]]></dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[mobile first]]></category>
		<category><![CDATA[responsive webdesign]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5418</guid>
		<description><![CDATA[<p>Mobile First is een begrip dat een aantal jaar geleden is geïntroduceerd door Luke Wroblewski. De filosofie van Mobile First is zo complex als dat het eenvoudig is...</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/mobile-first/">Mobile First</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-5434" title="Mobile First" src="http://www.heeftstijl.nl/wp-content/uploads/2012/10/mobilefirst-300x221.png" alt="" width="300" height="221" srcset="http://www.heeftstijl.nl/wp-content/uploads/2012/10/mobilefirst-300x221.png 300w, http://www.heeftstijl.nl/wp-content/uploads/2012/10/mobilefirst-271x200.png 271w, http://www.heeftstijl.nl/wp-content/uploads/2012/10/mobilefirst.png 400w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>Mobile First is een begrip dat een aantal jaar geleden is geïntroduceerd door design grootheid <a title="Luke Wroblewski" href="http://www.lukew.com/" target="_blank">Luke Wroblewski</a>.</p>
<p>De filosofie van Mobile First is zo complex als dat het eenvoudig is.</p>
<h3>“Het ontwerpen van een mobiele webervaring is belangrijker dan primair ontwerpen voor desktopcomputers.”</h3>
<p>Met een zeer klein schermformaat, zoals bij smartphones, wordt je gedwongen om de belangrijkste content op een zo goed mogelijke manier aan te bieden aan de gebruiker.</p>
<h2>Waarom?</h2>
<p>‘Vroeger’ lag de focus van webdesign op desktop computers. Een geoptimaliseerde mobile webervaring was ‘a nice to have’, of iets ‘voor later’. Maar meer mensen dan ooit surfen het internet op met een smartphone, tablet of game console. Er worden meer mobiele apparaten verkocht dan pc‘s. Het zwaartepunt van webdesign zou dus moeten liggen op het ontwerpen van een zo vriendelijk mogelijke mobiele webervaring.</p>
<p>Mobile First verlangt een herziene benadering van planning, strategie, design en ontwikkeling. ‘One size does not fit all’. En daarom <strong>kunnen</strong> en <strong>hoeven</strong> webpagina‘s er niet hetzelfde uit te zien in iedere browser en voor elk schermformaat.</p>
<p><img class="alignright" title="Mobile First Desktop by Jeremy Mansfield on Dribbble" src="http://dribbble.s3.amazonaws.com/users/8934/screenshots/653711/mobile-first-desktop-color.jpg" alt="" width="300" height="221" /></p>
<p>Mensen begrijpen dat verschillende apparaten verschillende ervaringen bieden. Burgermensen zijn slimmer dan je denkt! </p>
<p>Veel grote bedrijven passen het Mobile First principe grootschalig toe, zoals Google. Zij hebben hun webstrategie al sinds 2010 hierop aangepast.</p>
<h2>User First</h2>
<p>Websites die we op de traditionele manier ontwerpen, kunnen onvriendelijk zijn tegenover content. Of de inhoud is ondergeschikt aan SEO, CMS-keurslijven, of er wordt geen rekening gehouden met onvoorziene content. Wij designers hebben altijd de illusie gehad dat we controle konden uitoefenen over welke browser en welk schermformaat gebruikt zou worden. </p>
<p>Niet dus. Gebruikers bepalen in toenemende mate zelf hoe zij het web willen ervaren met typografische instellingen in browsers en ‘lees later’ tools zoals Instapaper.</p>
<p>“The user is in control of what, how and when.” Het is onze taak om dat zo goed mogelijk te bedienen. Dat is toch het web?</p>
<p>Volgens <a title="Jeremy Keith" href="http://adactio.com/journal/" target="_blank">Jeremy Keith</a> denken veel mensen dat een website een typisch desktop ding is. Maar een website is een website, ongeacht of het geconsumeerd wordt op een pc, tablet, screenreader, tekstbrowser of slimme telefoon. “We hebben met z’n allen deelgenomen aan een collectieve hallucinatie van wat het web is: 640 x 480 pixels, 800 x 600 pixels, of toch 1024 x 768 pixels?”. </p>
<p>Controle is niet naar de geest van het web. Lees het briljante <a title="A Dao of Web Design" href="http://www.alistapart.com/articles/dao/" target="_blank">A Dao of Web Design</a> van John Allsop uit 2000.</p>
<div style="display:block;background:WhiteSmoke;border:1px solid #eee;padding:0 .75em .75em;margin-top:1em;border-radius:2px;">
<h3>
“Device diversity is not a bug, it’s a feature of the web”</h3>
<p><small style="font-size: .8em;">&#8211; Jeremy Keith &#8211;</small></p>
</div>
<h2>Hoe? Weg met Photoshop!</h2>
<p>Het eerste wat je doet als je Photoshop of Fireworks opent, is een breedte en hoogte instellen. Daar moeten we van af volgens Stephen Hay. Visuele ontwerpers kunnen beter HTML en CSS leren!</p>
<p><script async class="speakerdeck-embed" data-id="506dafa27e8497000206d3f1" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script></p>
<p>Het web is van nature responsive. Kijk maar eens naar de <a title="Eerste webpagina ooit" href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html" target="_blank">allereerste webpagina</a> op je mobieltje. &#8211; Of speel met de viewport van je desktop browser.</p>
<p>Dat we websites vaste afmetingen hebben gegeven is een kapitale fout geweest. De drang naar controle en betweterigheid ten opzichte van de gebruiker is ons duur komen te staan. Maar controle opgeven is niet eng.</p>
<h2>Content First</h2>
<p>Ontwerpen zonder inhoud is puur decoratief, functieloos. Iedereen mee eens, maar dat is wel wat we doen! Traditioneel werk je aan een design, vaak voordat je überhaupt had nagedacht over de inhoud. Klinkt het niet logischer dat het de taak van de ontwerper is om content zo goed en prettig mogelijk beschikbaar te maken? Typografie speelt hierin een belangrijke rol.</p>
<ul>
<li>Design is dienend aan inhoud</li>
<li>Design is dienend aan context</li>
<li>Design is dienend aan de gebruiker</li>
</ul>
<p>Iedereen die wil investeren in Mobile First zal ook moeten investeren in <a title="Content Strategy" href="http://www.alistapart.com/articles/thedisciplineofcontentstrategy/" target="_blank">Content Strategy</a>, want daar ligt de basis van elke website. Niet een Basecamp vol specs en wensen waar een website aan moet voldoen.</p>
<div style="display:block;background:WhiteSmoke;border:1px solid #eee;padding:0 .75em .75em;margin-top:1em;border-radius:2px;">
<h3>
“Design that does not serve people does not serve business”</h3>
<p><small style="font-size: .8em;">&#8211; Jeffrey Zeldman &#8211;</small></p>
</div>
<h2>Start hier</h2>
<p>Een klein scherm dwingt ons allen te focussen op de meest belangrijke en relevante content. En beperkte 3G databundels (straks met 4G zullen de spelregels echt niet anders zijn) geven niets anders aan dan ons te blijven richten op zeer strakke webprestaties. The need for speed blijft actueel.</p>
<p>Heb je een wat groter scherm, zeg een tablet of laptop, dan kun je meer ‘nice to have’ content plaatsen. En zo bouw je een Mobile First responsive website verder uit: met CSS mediaqueries en <a title="Conditional Loading" href="http://24ways.org/2011/conditional-loading-for-responsive-designs" target="_blank">conditional loading</a>.</p>
<p>Mobile First&#8230; Content First&#8230; User Happy&#8230; Client Happy&#8230; You Happy!</p>
<h2>Tenslotte</h2>
<p>Hieronder een paar prachtige <a title="Mark Boulton Design" href="http://www.markboultondesign.com/" target="_blank">Mark Boulton</a> quotes die hij tijdens Smashing Conference uitsprak. Hij maakt duidelijk dat design contextueel is en niet een op zichzelf staand kunstzinnig werkstukje. Naar mijn mening een goede leidraad voor Mobile First webdesign. Daag <a title="Skeuomorphism: The Opiate of the People" href="http://andymangold.com/skeuomorphism-the-opiate-of-the-people/" target="_blank">Skeuomorfisme</a>.</p>
<p><em style="font-weight: 500; font-style: italic;">“Designers are assholes sometimes. They try to reinvent the wheel.”</em></p>
<p><em style="font-weight: 500; font-style: italic;">“Design is honesty. Truth. Not bullshitting users.”</em></p>
<p><em style="font-weight: 500; font-style: italic;">“Trends are bullshit. If you want to be in a trendy industry, go work in fashion, not Web Design.”</em></p>
<h2>Resources</h2>
<ul>
<li><a title="This Is Responsive" href="http://bradfrost.github.com/this-is-responsive/patterns.html" target="_blank">This Is Responsive</a></li>
<li><a title="Mobile First Responsive Web Design" href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/" target="_blank">Mobile First Responsive Web Design</a></li>
<li><a title="Van Mobile First naar Content First" href="http://www.jungleminds.nl/blog-en-boeken/blog/artikel/van-mobile-first-naar-content-first/" target="_blank">Van Mobile First naar Content First</a></li>
<li><a title="HTML5 Rocks" href="http://www.html5rocks.com/en/mobile/responsivedesign/" target="_blank">HTML5 Rocks</a></li>
<li><a title="Responsive Measures" href="http://jbrewer.github.com/Responsive-Measure/" target="_blank">Responsive Measures</a></li>
<li><a title="The Web Is All About Typography. Period" href="http://informationarchitects.net/blog/the-web-is-all-about-typography-period/" target="_blank">The Web Is All About Typography. Period</a></li>
<li><a title="Conditional Loading For Responsive Designs" href="http://24ways.org/2011/conditional-loading-for-responsive-designs" target="_blank">Conditional Loading For Responsive Designs</a></li>
</ul>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/mobile-first/">Mobile First</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/mobile-first/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Wat betekent de cookiewet voor jouw website?</title>
		<link>http://www.heeftstijl.nl/wat-betekent-de-cookiewet-voor-jouw-website/</link>
		<comments>http://www.heeftstijl.nl/wat-betekent-de-cookiewet-voor-jouw-website/#comments</comments>
		<pubDate>Tue, 24 Jul 2012 06:15:46 +0000</pubDate>
		<dc:creator><![CDATA[Edgar Leijs]]></dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[cookiewet]]></category>
		<category><![CDATA[ict recht]]></category>
		<category><![CDATA[privacy]]></category>
		<category><![CDATA[telecommunicatiewet]]></category>
		<category><![CDATA[telecomwet]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=5031</guid>
		<description><![CDATA[<p>Het is in Nederland verboden om zonder ondubbelzinnige toestemming NIET-functionele cookies te plaatsen. Hoe zit dat met jouw website? Heeftstijl probeert antwoord te geven.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/wat-betekent-de-cookiewet-voor-jouw-website/">Wat betekent de cookiewet voor jouw website?</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-5037" title="Cookie-Monster-01" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/Cookie-Monster-01-300x187.jpg" alt="" width="300" height="187" /></p>
<p>De Nederlandse cookiewet is strikter dan de Europese regelgeving over dit onderwerp. Waar Europa een Opt-out voorschrijft, dwingt Nederland een Opt-in af om niet-functionele cookies te gebruiken op je website. Hoe moet het wel en hoe niet?</p>
<p>Of je het er mee eens bent of niet, de wet is er. De cookiebepaling, in de volksmond cookiewet, is een onderdeel van de nieuwe <a href="https://zoek.officielebekendmakingen.nl/stb-2012-235.html" target="_blank">Telecomwet</a> die sinds 5 juni 2012 in Nederland van kracht is.</p>
<h3>Je weet wel: Cookies</h3>
<p>Een cookie is een databestandje dat een website opslaat in je browser. In deze <strong>magic cookie</strong> wordt bijvoorbeeld het internetverkeer, je winkelmandje of bepaalde voorkeuren bijgehouden.</p>
<p>Vooral marketeers zijn echte cookiemonsters, want met deze cookie-data kunnen ze profielen maken en advertenties targeten.</p>
<h2>Europese Cookie Law</h2>
<p>Je hebt de Europese Cookie Law en de Nederlandse cookiewet. Let op want de Nationale wetgeving is strikter dan elders in Europa. In andere EU landen is het voldoende om de “opt-out” methode toe te passen. Bij een opt-out worden er wel cookies geplaatst, totdat de bezoeker kiest voor een opt-out.</p>
<p>Cookies om wachtwoorden te onthouden of cookies die nodig zijn voor het functioneren van een website zijn nog wel toegestaan.</p>
<h2>De Nederlandse cookiewet</h2>
<p>Het is in Nederland verboden om zonder ondubbelzinnige toestemming niet-functionele cookies te plaatsen. Er zijn Nederlandse sites die de Europese opt-out methode gebruiken in plaats van een opt-in, maar dit is niet volgens de letter van de wet.</p>
<h3>Zo hoort het niet</h3>
<p>Tracking-cookies lijken al geplaatst voordat de opt-in verschijnt. In Europa okay, maar niet in Holland.</p>
<hr />
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/07/pvda.png"><img class="alignleft size-thumbnail wp-image-5046" style="margin-right: 23px;" title="pvda" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/pvda-125x125.png" alt="" width="125" height="125" /></a></p>
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/07/onetomarket.png"><img class="alignleft size-thumbnail wp-image-5045" style="margin-right: 23px;" title="onetomarket" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/onetomarket-125x125.png" alt="" width="125" height="125" /></a></p>
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/07/ict-recht.png"><img class="alignleft size-thumbnail wp-image-5044" style="margin-right: 23px;" title="ict-recht" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/ict-recht-125x125.png" alt="" width="125" height="125" /></a></p>
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/07/staatsloterij.png"><img class="alignleft size-thumbnail wp-image-5054" title="staatsloterij" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/staatsloterij-125x125.png" alt="" width="125" height="125" /></a></p>
<hr />
<h2>Opt-in versus opt-out</h2>
<p>Zonder toestemming van de gebruiker mag je dus geen <strong>niet-functionele</strong> cookies plaatsen. Vaak zijn dit tracking-cookies zoals Google Analytics. Volgens de Nederlandse cookiewet vraag je eerst toestemming (opt-in) aan de bezoeker voordat de websites een cookie mag plaatsen. Eerst de website met bijbehorende cookies laden en daarna pas een opt-in melding weergeven is dus onwettelijk.</p>
<p>Ook moet er bij de opt-in een link geplaatst worden naar een privacyverklaring elders op de website. Daar hoort een volledig overzicht thuis van alle cookies die je website plaatst en wat de functie van de desbetreffende cookies zijn.</p>
<p>Je mag overigens zonder opt-in wel een functionele cookie plaatsen waarin staat of een gebruiker cookies wel of niet accepteert.</p>
<h2>Is Google Analytics functioneel of niet?</h2>
<p><img class="alignright size-medium wp-image-5036" title="Cookie-Monster-02" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/Cookie-Monster-02-275x220.jpg" alt="" width="275" height="220" /></p>
<p>Er is een interessante discussie aan de gang of Google Analytics wel of niet hoort in de opt-in. Ter info: ruim 80 % van de websites gebruikt Google Analytics. De OPTA heeft zich trouwens nog niet via officiële weg uitgelaten over deze vraag.</p>
<p>Er is wat voor te zeggen dat goede interpretatie van Analytics zorgt voor betere websites. Dus functioneel, maar onmisbaar nut heeft het ook weer niet.</p>
<p>Arnoud Engelfriet, ICT-jurist gespecialiseerd in internetrecht, reageert op zijn eigen <a href="http://blog.iusmentis.com/2012/05/25/mag-google-analytics-nog-onder-de-cookiewet/" target="_blank">blog</a> waar hij duidelijk maakt dat Google Analytics wel degelijk behoort tot de opt-in.</p>
<blockquote><p>“Analytics plaatst een cookie en voor het plaatsen moet je dus toestemming hebben. De ENIGE uitzondering is als het cookie een direct en onmisbaar nut heeft voor de dienst die geleverd wordt &#8211; voor de huidige sessie waar de gebruiker in zit.</p>
<p>Je kunt dat “direct nut” niet oprekken naar “statistieken zijn nodig voor een fatsoenlijke website” want dat argument geldt ook voor advertenties en is daarmee dús ongeldig. Je mag geen argument aanvoeren dat ook advertentiecookies toestemmingsloos maakt. Want advertentiecookies MOETEN toestemming krijgen, dat is namelijk het doel van de wet. Een redenering waarom een bepaald soort cookie uitgezonderd is, moet dus altijd een onderscheid maken zodat advertentiecookies niet ook van die uitzondering kunnen profiteren. Je mag niet op een conclusie uitgaan die tegen het doel van de wet ingaat.”</p></blockquote>
<p>Het is duidelijk dat de wet een volledig transparante en ondubbelzinnige opt-in vereist, die niet verpakt mogen worden in voorwaarden en verklaringen.</p>
<h3>Is Google Analytics anonimiseren de oplossing?</h3>
<p>Het anonimiseren van IP-Adressen voldoet niet aan de cookiewet. De privacy zou in het geding komen zodra een onderscheid te maken is.</p>
<blockquote><p>192.168.5.74 naar 192.168.XXX mag niet.<br />
192.168.5.74 naar user01 mag ook niet.</p></blockquote>
<p>In Duitsland wordt de methode van anonimiseren wel veel gebruikt, maar in Nederland zou het meer in de geest van, dan volgens de letter van de wet zijn.</p>
<h3>Serverside Google Analytics?</h3>
<p>Met PHP is het mogelijk om Analytics server-side in te richten. Voordeel: geen cookie, geen opt-in nodig en alle bezoekers worden gemeten. Nadeel: onvolledige rapporten en terugkerend bezoek wordt niet meer herkend. Maar om het ingewikkelder te maken: je mag volgens de Telecomwet geen computer of randapparatuur uitlezen zonder opt-in.</p>
<h2>En mijn Social Share buttons dan?</h2>
<p><img class="alignleft size-medium wp-image-5035" title="Cookie-Monster-03" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/Cookie-Monster-03-300x213.jpg" alt="" width="300" height="213" /></p>
<p>Ook bij het gebruik van like en share buttons komt de cookiewet streng om de hoek kijken. Bijvoorbeeld Facebook trackt jouw surfgedrag op andere sites via like en share knoppen. Zo bouwen sociale netwerken profielen op die interessant zijn voor adverteerders.</p>
<p>Voor cookies van derden, via scripts of iframes geplaatst op je website, is dus ook ondubbelzinnig toestemming nodig van de gebruiker. Als website eigenaar ben je zelf verantwoordelijk voor de opt-in.</p>
<p>Als een bezoeker de opt-in negeert of weigert, dan zouden de share buttons onbruikbaar moeten zijn tot het moment dat wel toestemming voor wordt gegeven.</p>
<h2>Bulletproof opt-in teksten</h2>
<p>De eerder genoemde Arnoud Engelfriet heeft op ictrecht.nl een aantal voorgebakken <a href="http://ictrecht.nl/tracking-en-profiling/standaardtekst-voor-uw-privacyverklaring-als-u-tracking-cookies-inzet/" target="_blank">standaardteksten</a> gepubliceerd voor het gebruik van tracking-cookies. Maak er gebruik van en je zit juridisch goed.</p>
<h2>De OPTA en handhaving van de wet</h2>
<p>De wet is nu officieel van kracht, maar de daadwerkelijke handhaving gaat per 1 januari 2013 in volgens een <a href="http://www.rijksoverheid.nl/documenten-en-publicaties/persberichten/2012/06/01/nieuwe-telecommunicatiewet-treedt-5-juni-2012-in-werking.html" target="_blank">persbericht</a> op de website van de Rijksoverheid. Daar staat: “Het rechtsvermoeden met betrekking tot tracking cookies, dat ook onderdeel uitmaakt van de cookieregels, treedt pas per 1 januari 2013 in werking.” Je hebt dus tot het einde van het jaar om je website op orde te krijgen.</p>
<p>De OPTA is het orgaan dat de boel gaat controleren, maar daar zijn ze nog niet helemaal klaar voor. Ze gaan een systeem bouwen dat websites automatisch controleert op het plaatsen van tracking cookies. Dit systeem moet helpen bij de handhaving van de wet.</p>
<p>&#8220;Sites die ongevraagd cookies plaatsen die de gebruiker lastig kan verwijderen, krijgen gelijk een boete. Daar richten we ons als eerste op&#8221;, zegt een OPTA woordvoerder. &#8220;Sites die minder zware overtredingen begaan, krijgen waarschijnlijk eerst een waarschuwing.&#8221;</p>
<h3>Werk aan de winkel</h3>
<p>Er is genoeg om op orde te krijgen voor 1 januari 2013, want de boetes zullen niet mals zijn. Een zware overtreder mag rekenen op een maximale boete van € 450.000! Of je het leuk vindt of niet, we zitten er aan vast totdat deze wet wordt versoepeld of ongedaan wordt gemaakt.</p>
<h2>Opmerkingen over de Telecomwet</h2>
<p><img class="alignright size-medium wp-image-5034" title="Cookie-Monster-04" src="http://www.heeftstijl.nl/wp-content/uploads/2012/07/Cookie-Monster-04-300x187.jpg" alt="" width="300" height="187" /></p>
<p>De nieuwe Telecommunicatiewet is veel breder dan alleen de cookiebepaling. Ook een browser uitlezen voor statistiek mag niet, alleen als het functioneel is.</p>
<p>CSS inladen voor specifieke browsers &#8211; zoals een IE only stylesheet &#8211; is functioneel, maar een “Je zou eens Chrome moeten proberen voor een betere ervaring” banner tonen in Firefox of Internet Explorer is weer niet functioneel.</p>
<p>De sessie in de URL versleutelen, de bekende PHPSESSID’s mag niet en de hostinglocatie maakt ook niet uit. Of je server nu in de VS staat of in Nederland. De wet geldt voor Nederlandse bezoekers. Formeel moet een site in de VS dus ook opt-in vragen voor Nederlandse bezoekers. Maar de juridische haalbaarheid hiervan is zeer discutabel.</p>
<p>De opt-in muur werkt hoogstwaarschijnlijk conversieverlagend. Marketeers, Usability Experts en User Experience designers en webeigenaren van advertentie-afhankelijke sites hebben er een mooi project bij met de nieuwe regels.</p>
<p>Succes!</p>
<h3>Bronnen</h3>
<ul>
<li><a href="http://ictrecht.nl/tracking-en-profiling/standaardtekst-voor-uw-privacyverklaring-als-u-tracking-cookies-inzet/" target="_blank">Opt-in standaardteksten | ICT Recht</a></li>
<li><a href="http://www.rijksoverheid.nl/documenten-en-publicaties/persberichten/2012/06/01/nieuwe-telecommunicatiewet-treedt-5-juni-2012-in-werking.html" target="_blank">Persbericht Telecommunicatiewet</a></li>
<li><a href="http://blog.iusmentis.com/2012/05/25/mag-google-analytics-nog-onder-de-cookiewet/" target="_blank">Mag Google Analytics nog onder de cookiewet</a></li>
</ul>
<h4>Notitie</h4>
<blockquote><p>En ja, deze site voldoet ook nog niet aan de cookiewet <img src="http://www.heeftstijl.nl/wp-includes/images/smilies/simple-smile.png" alt=":)" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
We werken aan een nieuwe site en daar wordt het in meegenomen.</p></blockquote>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/wat-betekent-de-cookiewet-voor-jouw-website/">Wat betekent de cookiewet voor jouw website?</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/wat-betekent-de-cookiewet-voor-jouw-website/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>7 tips om efficiënt te werken</title>
		<link>http://www.heeftstijl.nl/7-tips-om-efficient-te-werken/</link>
		<comments>http://www.heeftstijl.nl/7-tips-om-efficient-te-werken/#comments</comments>
		<pubDate>Tue, 12 Jun 2012 07:24:34 +0000</pubDate>
		<dc:creator><![CDATA[Ivo Bosma]]></dc:creator>
				<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=4989</guid>
		<description><![CDATA[<p>Als ontwerper heb je het vaak druk, en is je tijd beperkt. Wij geven je 7 praktische tips om efficiënt te werken en zo méér werk af te krijgen.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/7-tips-om-efficient-te-werken/">7 tips om efficiënt te werken</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-5004" title="To do" src="http://www.heeftstijl.nl/wp-content/uploads/2012/06/To-do.jpg" alt="" width="300" height="220" />Als ontwerper heb je het vaak druk, en is je tijd beperkt. Wij geven je 7 praktische tips om efficiënt te werken en zo méér werk af te krijgen.</p>
<h2>Tip 1: plan</h2>
<p>“If you don’t know where you are going, any road will get you there”. Deze quote van Lewis Carroll (van Alice in Wonderland) slaat de spijker op zijn kop: zonder planning weet je niet waar je naar toewerkt.</p>
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Signpost.jpg"><img class="alignnone size-medium wp-image-4992" title="Wegwijzer" src="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Signpost-293x220.jpg" alt="" width="293" height="220" /></a></p>
<p>Je hoeft geen hele uitgebreide planning te maken, maar als je aan het begin van de dag 5 minuten de tijd neemt om te bedenken welke taken je af wilt hebben dan weet je waar je naar toe werkt.</p>
<p>Persoonlijk vind ik het prettig om mijn taken “ouderwets” op papier te zetten, maar je kan dit uiteraard ook digitaal doen: van een simpel tekstbestandje tot aan taakmanagers als Wunderlist.</p>
<h2>Tip 2: prioriteer</h2>
<p>Bij het plannen van tip 1 is het belangrijk dat je kijkt welke zaken prioriteit hebben. Kijk hierbij naar urgentie en belangrijkheid. Zaken die urgent zijn én belangrijk doe je het eerst, zaken die niet urgent zijn en niet belangrijk kunnen later. Deze prioritering helpt je om de hoofd- van de bijzaken te scheiden.</p>
<h2>Tip 3: plan realistisch</h2>
<p>Bij plannen is het heel menselijk om uit te gaan van het meest optimistische scnario. Daardoor plan je snel taken te krap en ben je te optimistisch ten opzichte van eventuele problemen.</p>
<p>Probeer werkzaamheden zo eerlijk en objectief mogelijk in te schatten, en plan buffertijd tussen taken voor uitloop en onvoorziene zaken.</p>
<h2>Tip 4: maak je taken concreet</h2>
<p>Als je je taken vaag houdt dan heb je ze al snel “klaar”. Deze taak is bijvoorbeeld niet concreet genoeg: “Ik moet vandaag bezig met het ontwerp voor klant X”.</p>
<p>Bij deze formulering weet je niet wanneer je je doel bereikt hebt: als je 5 minuten met het ontwerp bezig bent geweest heb je deze taak al “af”.</p>
<p>Een betere formulering: “Ik wil vandaag de homepage en de detailpagina af hebben en opleveren aan klant X voor review”. Door deze taak concreet te maken weet je waar je aan werkt en heb je een helder doel voor jezelf.</p>
<div id="attachment_4996" style="width: 303px" class="wp-caption alignnone"><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Wunderlist.jpg"><img class="size-medium wp-image-4996  " title="Wunderlist" src="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Wunderlist-293x220.jpg" alt="" width="293" height="220" /></a><p class="wp-caption-text">Concrete taken in <a href="http://www.wunderlist.com">Wunderlist</a>.</p></div>
<h2>Tip 5: denk in wat je wilt bereiken</h2>
<p>Je kunt jezelf motiveren door je werkzaamheden anders te benaderen: het helpt om te denken “wat wil ik bereiken?” in plaats van te “moeten”.</p>
<p>Door je werkzaamheden te beredeneren vanuit wat je wilt bereiken ben je automatisch meer vanuit jezelf gemotiveerd, en laat je je ook minder afleiden.</p>
<p>Denk dus niet “ik moet aan het ontwerp voor klant X werken”, maar: “Ik wil vanmiddag het ontwerp voor de homepage voor de nieuwe website voor klant X afhebben”.</p>
<p>Door voor jezelf het doel te stellen wat je wilt bereiken, en concreet te maken (zie tip 4) stimuleer je jezelf en weet je waar je naar toe werkt. Denk dus in resultaten in plaats van activiteiten.</p>
<h2>Tip 6: laat je niet afleiden</h2>
<p>E-mail, twitter en Facebook zijn erg leuk, maar ze leiden ook erg af en zijn tijdverslindend. Je kunt de verleiding kleiner maken door deze programma’s (en pushnotificaties) uit te zetten. Na elke onderbreking kost het weer tijd om je te concentreren op de taak waar je mee bezig was, en dit kost vaak meer tijd dan je denkt.</p>
<p>Je kunt jezelf ‘belonen’ door bijvoorbeeld elke 2 uur even de tijd te nemen om e-mail en social media te checken. Vaak bestaat je mail en social media uit <a title="Onderzoek onthult obsessief check gedrag bij smarthpone gebruikers" href="http://www.concept7.nl/onderzoek-onthult-obsessief-check-gedrag-bij-smarthpone-gebruikers/">checkgedrag</a>: een automatisme dat er in geslopen is. Als je je hier bewust van bent scheelt dat al de helft. Bovendien geeft het checken ook meer voldoening als je al flink bent opgeschoten.</p>
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Social-media.jpg"><img class="size-medium wp-image-4994 alignnone" title="Social media" src="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Social-media-293x220.jpg" alt="" width="293" height="220" /></a></p>
<p>&nbsp;</p>
<h2>Tip 7: breek grote taken op in kleinere taken</h2>
<p>Soms kun je tegen grote klussen opzien: waar moet je beginnen? Het helpt om een grote klus in meerdere stukken op te knippen. Het ontwerpen van een e-commerce website kun je bijvoorbeeld onderverdelen naar het ontwerpen van:</p>
<ul>
<li>homepage</li>
<li>overzichtspagina</li>
<li>detailpagina</li>
<li>winkelmandje (deze zou je ook weer kunnen onderverdelen)</li>
<li>mijn-omgeving</li>
<li>etc.</li>
</ul>
<p>Dit helpt niet alleen de taak overzichtelijker te maken, maar hiermee kun je het ook concreet maken (zie tip 4) én het heeft nog een bijkomend voordeel: je hersenen zijn gek op beloning.</p>
<p>Het afvinken van een taak geldt als een beloning voor je hersenen, en motiveert!</p>
<p><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Afgevinkt.jpg"><img class="alignnone size-medium wp-image-5009" title="Afgevinkt" src="http://www.heeftstijl.nl/wp-content/uploads/2012/06/Afgevinkt-293x220.jpg" alt="" width="293" height="220" /></a></p>
<h3>Conclusie</h3>
<p>De 7 tips zijn niet moeilijk en vrij eenvoudig toe te passen: als je ze bewust en consequent toepast zul je merken dat je ontspannen veel werk kunt doen.</p>
<p>Heb je nog aanvullende tips? Laat het weten in de comments hieronder, en help andere lezers met jouw ervaring! Ook als je deze tips gaat gebruiken ben ik benieuwd naar je ervaringen.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/7-tips-om-efficient-te-werken/">7 tips om efficiënt te werken</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/7-tips-om-efficient-te-werken/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Hoe ontwerp je een onderscheidende website?</title>
		<link>http://www.heeftstijl.nl/hoe-ontwerp-je-een-onderscheidende-website/</link>
		<comments>http://www.heeftstijl.nl/hoe-ontwerp-je-een-onderscheidende-website/#comments</comments>
		<pubDate>Tue, 21 Feb 2012 08:31:33 +0000</pubDate>
		<dc:creator><![CDATA[Ivo Bosma]]></dc:creator>
				<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.heeftstijl.nl/?p=4915</guid>
		<description><![CDATA[<p>Veel sites lijken tegenwoordig op elkaar, dus hoe zorg je voor een onderscheidend design? En hoe zorg je ervoor dat je ontwerp bij de identiteit van je klant past, of liever nog: versterkt? Kernwaarden, design principles en signature elements kunnen je daarbij helpen.</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/hoe-ontwerp-je-een-onderscheidende-website/">Hoe ontwerp je een onderscheidende website?</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p>Veel sites lijken tegenwoordig op elkaar, dus hoe zorg je voor een onderscheidend design? En hoe zorg je ervoor dat je ontwerp bij de identiteit van je klant past, of liever nog: versterkt? Kernwaarden, design principles en signature elements kunnen je daarbij helpen.</p>
<div id="attachment_4924" style="width: 557px" class="wp-caption alignnone"><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/02/Wehkamp-Bijenkorf-VD.jpg"><img class="size-large wp-image-4924" title="Wehkamp - Bijenkorf - VD" src="http://www.heeftstijl.nl/wp-content/uploads/2012/02/Wehkamp-Bijenkorf-VD-547x1024.jpg" alt="Wehkamp - Bijenkorf - VD" width="547" height="1024" /></a><p class="wp-caption-text">De websites van Wehkamp, Bijenkorf en V&amp;D hebben veel gelijkenis</p></div>
<h2>Kernwaarden, design principles en signature elements</h2>
<p>Kernwaarden van een bedrijf kun je gebruiken om design principles op te stellen voor je ontwerp. Een design principle maakt duidelijk waar (de ervaring met) de website aan moet voldoen: het is een geconcretiseerde kernwaarde, en het kan een eigen identiteit aan een website geven. Je kunt design principles weer doorvertalen naar signature elements: grafische elementen in de user interface, die de kernwaarden visueel ondersteunen.</p>
<p>Klinkt dit nog wat abstract? Dat is het ook, dus lees snel verder.</p>
<h2>Kernwaarden</h2>
<p>Kernwaarden &#8211; in het Engels beter bekend als core values &#8211; zijn de waarden die een bedrijf omschrijven. Wie wil het bedrijf zijn? Waar staat het voor? Welke identiteit streeft ze na?</p>
<p>Wehkamp.nl heeft bijvoorbeeld als waarden:</p>
<ul>
<li>verrassend</li>
<li>eigenzinnig</li>
<li>betrokken</li>
<li>actueel.</li>
</ul>
<p>De Bijenkorf heeft als waarden:</p>
<ul>
<li>passie voor klanten</li>
<li>continue vernieuwend</li>
<li>verantwoordelijkheid nemen</li>
<li>samenwerken</li>
<li>openstaan voor verandering</li>
<li>elk individu respecteren.</li>
</ul>
<p>Als kernwaarden in de communicatie naar buiten goed geïmplementeerd worden, dan geven kernwaarden een eigen gezicht en identiteit aan een bedrijf.</p>
<h2>Design principles</h2>
<p>De hierboven genoemde kernwaarden kunnen meerwaarde hebben voor je ontwerp, door ze te gebruiken als basis voor design principles.</p>
<p>Design principles vertalen de kernwaarden van een bedrijf naar de essentie van de ervaring met de website of applicatie: “It’s a statement of what you want the essence of the experience to be”.</p>
<p>Heeft een bedrijf (nog) geen duidelijk geformuleerde kernwaarden? Dan kun je eenvoudig een lijst opstellen met kernwaarden, en het bedrijf daar 5 of 6 uit laten kiezen die bij hen passen.</p>
<h3>Voorbeeld</h3>
<p>Een voorbeeld: stel dat je ontwerpt voor een bedrijf dat als één van haar kernwaarden “toegankelijk” heeft. Dan kan een design principle zijn dat de gebruiker het gevoel moet krijgen dat het bedrijf eenvoudig benaderbaar is.</p>
<p>Dit zou je in je ontwerp kunnen vormgeven door verschillende contactmogelijkheden een prominente plek in het ontwerp te geven. Daarnaast kun je dit verder ondersteunen met signature elements, waarover later meer.</p>
<p>Overigens kun je er ook voor kiezen om de design principles niet (alleen) te baseren op de kernwaarden van het bedrijf. Een andere mogelijkheid is om de design principles te baseren op gebruikersonderzoek. In dat geval maak je niet zozeer de identiteit van het bedrijf, maar de wensen van de gebruikers leidend.</p>
<p>Tot slot is het ook nog mogelijk om design principles op te stellen die de experience met de website beschrijven, zónder dat ze gebaseerd zijn op kernwaarden of gebruikersonderzoek. Ook dit kan al helpen om onderscheidend te zijn en de user experience te verhogen. Dan Saffer geeft <a href="http://www.slideshare.net/cpetzny/ux-london-redux-dan-saffer">tips waar design principles aan moeten voldoen</a> (slide 39).</p>
<p><em>Overigens gebruikt Dan Saffer design principles op een wat andere manier: je kunt design principles op meerdere manieren inzetten. Als je hier meer over wilt weten kun je de links onderaan dit artikel lezen.</em></p>
<h3>Zijn design principles nieuw?</h3>
<p>Design principles bestaan al een tijd, en worden door veel grote bedrijven gebruikt. Bijvoorbeeld door Google en Microsoft:</p>
<p><strong>Design principles van Google</strong></p>
<ul>
<li>Focus on people – their lives, their work, their dreams.</li>
<li>Every millisecond counts.</li>
<li>Simplicity is powerful.</li>
<li>Engage beginners and attract experts.</li>
<li>Dare to innovate.</li>
<li>Design for the world.</li>
<li>Plan for today’s and tomorrow’s business.</li>
<li>Delight the eye without distracting the mind.</li>
<li>Be worthy of people’s trust.</li>
<li>Add a human touch.</li>
</ul>
<p>Hier zie je dat design principles bij het omschrijven vrij abstract zijn. Pas bij het ontwerpen maak je ze concreet.</p>
<p>Zoals gezegd hoef je niet per se de kernwaarden van het bedrijf als uitgangspunt te nemen, je kunt ook specifiek kernwaarden voor een toepassing definiëren. Zoals Google bijvoorbeeld doet voor Google agenda:</p>
<ul>
<li>Fast, visually appealing and joyous to use</li>
<li>Drop dead simple to get information into the calendar</li>
<li>More than boxes on a screen (reminder, invitations, etc.</li>
<li>Easy to share so you can see your whole life in one place.</li>
</ul>
<p><strong>Design principles voor Microsoft Windows 7</strong></p>
<ul>
<li>Reduce concepts to increase confidence</li>
<li>Small things matter, good and bad</li>
<li>Solve distractions, not discoverability</li>
<li>Time matters, build for people on the go</li>
<li>Value the full lifecycle of the experience</li>
<li>Be great at “look” and “do”</li>
</ul>
<h2>Signature elements</h2>
<p>Signature elements zijn vaak het meest zichtbaar: dit zijn de concrete uitingen van design principles in de user interface. Een signature element kan van alles zijn:</p>
<ul>
<li>lettertype</li>
<li>afbeeldingen</li>
<li>fotografie</li>
<li>tone of voice</li>
<li>transities</li>
<li>kleurgebruik</li>
<li>witruimte</li>
<li>afgeronde hoeken</li>
<li>etc.</li>
</ul>
<div id="attachment_4944" style="width: 810px" class="wp-caption alignnone"><a href="http://www.heeftstijl.nl/wp-content/uploads/2012/02/Fourseasons.jpg"><img class=" wp-image-4944 " title="Fourseasons" src="http://www.heeftstijl.nl/wp-content/uploads/2012/02/Fourseasons.jpg" alt="Fourseasons" width="800" height="384" /></a><p class="wp-caption-text">Fotografie is een duidelijk signature element van de (18 miljoen dollar kostende!) site van <a href="http://www.fourseasons.com">Fourseasons</a></p></div>
<p><em></em><br />
Een voorbeeld om een signature element te illustreren: het bedrijf waar je voor ontwerpt heeft als kernwaarde nog steeds “toegankelijk”. Het bijbehorende design principle: “de gebruiker moet het gevoel krijgen dat het bedrijf eenvoudig benaderbaar is”. Signature elements om dit gevoel te versterken zou dan het gebruik van veel witruimte kunnen zijn, een royale regelhoogte, zachte kleuren, prominente contactmogelijkheden, vriendelijk lachende mensen in fotografie, 16 punts fontgrootte etc.</p>
<h3>Samenvattend</h3>
<p>Het gebruik van kernwaarden, design principles en signature elements kan in eerste instantie wat abstract overkomen. Een korte samenvatting van deze begrippen:</p>
<p><strong>kernwaarden:</strong> beantwoorden de vraag wie het bedrijf wil zijn, en waar ze voor staan;<br />
<strong>design principles:</strong> een design principle maakt duidelijk waar (de ervaring met) de website aan moet voldoen: het is een geconcretiseerde kernwaarde;<br />
<strong>signature element:</strong> een concrete uiting van een design principle in de user interface.</p>
<p>Het voorbeeld uit dit artikel nog even samengevat:</p>
<ul>
<li>Kernwaarde:<strong> toegankelijk</strong></li>
<li>Afgeleid design principle: <strong>de gebruiker moet het gevoel krijgen dat het bedrijf eenvoudig benaderbaar is</strong></li>
<li>Mogelijke signature elements: <strong>veel witruimte, royale regelhoogte, zachte kleuren, prominente contactmogelijkheden, </strong><strong>vriendelijk lachende mensen in fotografie, 16 punts fontgrootte etc.</strong></li>
</ul>
<h3>Voordelen</h3>
<p>Deze werkwijze kost je bij het ontwerpen wel wat extra tijd in de beginfase, maar de voordelen wegen hier absoluut tegen op:</p>
<ul>
<li>je ontwerp is onderscheidend;</li>
<li>je ontwerp past bij de identiteit van het bedrijf;</li>
<li>het verhoogt de user experience;</li>
<li>het geeft je inspiratie en richting bij het ontwerpen.</li>
</ul>
<p>Volgens mij zijn dit genoeg redenen om bij een volgend project je klant te vragen: wat zijn jullie kernwaarden?</p>
<h3>Links</h3>
<p><a href="http://www.designophy.com/article/design-article-1000000064-design-principles-at-microsoft.htm">http://www.designophy.com/article/design-article-1000000064-design-principles-at-microsoft.htm</a> &#8211; Luke Wroblewski over design principles gebruikt bij Microsoft</p>
<p><a href="http://www.slideshare.net/ugleah/ux-team-of-one-sxsw-2009-1161299">http://www.slideshare.net/ugleah/ux-team-of-one-sxsw-2009-1161299</a> &#8211; Being a UX team of one, een deel gaat over design principles</p>
<p><a href="http://wik.ed.uiuc.edu/index.php/Web_2.0_Group_2_SU_09">http://wik.ed.uiuc.edu/index.php/Web_2.0_Group_2_SU_09</a> &#8211; Voorbeeld van Wiki design principles (table 4 “Wiki design principles”)</p>
<p><a href="http://www.uie.com/brainsparks/2011/05/05/jared-spool-the-essential-principles-behind-great-design-principles-live/">http://www.uie.com/brainsparks/2011/05/05/jared-spool-the-essential-principles-behind-great-design-principles-live/</a> &#8211; Jared Spool, The essential principles behind great design principles</p>
<p><a href="http://www.slideshare.net/cpetzny/ux-london-redux-dan-saffer">http://www.slideshare.net/cpetzny/ux-london-redux-dan-saffer</a> &#8211; Dan Saffer over design principles (vanaf slide 36)</p>
<p>(Met dank aan een artikel van <a href="http://www.henkwijnholds.com/design-principles-choose-ideas/">Henk Wijnholds</a> voor de inspiratie).</p>
<p>The post <a rel="nofollow" href="http://www.heeftstijl.nl/hoe-ontwerp-je-een-onderscheidende-website/">Hoe ontwerp je een onderscheidende website?</a> appeared first on <a rel="nofollow" href="http://www.heeftstijl.nl">Heeftstijl.nl</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.heeftstijl.nl/hoe-ontwerp-je-een-onderscheidende-website/feed/</wfw:commentRss>
		<slash:comments>4014</slash:comments>
		</item>
	</channel>
</rss>
