<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.0.3" -->
<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/"
	>

<channel>
	<title>Arjan Eising</title>
	<link>http://arjaneising.nl</link>
	<description>Arjan's blog about making web sites</description>
	<pubDate>Tue, 13 Jan 2009 21:47:30 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.0.3</generator>
	<language>en</language>
			<item>
		<title>Seven things…</title>
		<link>http://arjaneising.nl/me/seven-things</link>
		<comments>http://arjaneising.nl/me/seven-things#comments</comments>
		<pubDate>Tue, 13 Jan 2009 14:11:31 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
	<category>Current work</category>
		<guid isPermaLink="false">http://arjaneising.nl/me/seven-things%e2%80%a6</guid>
		<description><![CDATA[A while ago a was asked by Kilian to share seven things about me. The hype of seven things is cooling down a bit, so I will not link to seven other people to share their things. I hope it if you don&#8217;t mind me showing off some personal details.

I&#8217;ve been a lifeguard for about [...]]]></description>
			<content:encoded><![CDATA[<p>A while ago a was asked by <a title="Kilian's Seven Things" href="http://kilianvalkhof.com/2009/life/seven-things/">Kilian</a> to share seven things about me. The hype of seven things is cooling down a bit, so I will not link to seven other people to share their things. I hope it if you don&#8217;t mind me showing off some personal details.</p>
<ul class="longitems">
<li>I&#8217;ve been a <a title="Lifeguard on Wikipedia" href="http://en.wikipedia.org/wiki/Lifeguard">lifeguard</a> for about eight years. But unlike the images along the article at Wikipedia show, we train in a covered swimming pool since it is not that sunny in the Netherlands. Currently, I train a bunch of children to become a lifeguard. A few years ago I launched a <a title="Zwemmend Redden" href="http://zwemmendredden.nl/">Dutch website to promote the sport</a>, but I haven&#8217;t updated it in a long while.</li>
<li>Last year I finished my high school. I now study <a href="http://www.rug.nl/ai/index">Artificial Intelligence</a> at <a title="RuG" href="http://www.rug.nl/">Groningen University</a>, and I really like it so far. Since <abbr title="Artificial Intelligence">AI</abbr> is a broad subject, I don&#8217;t really know what I&#8217;m going to do later. It can be robotics, but also something more close to the subject of &#8216;Internet&#8217;.</li>
<li>I like watching movies, and don&#8217;t really follow series. Since it became more of a habit to watch several movies a week, I recently started collecting and rating them on <a title="Movies" href="http://movies.arjaneising.nl/">this webpage</a>. An actor I really like is <a title="Edward Norton on IMDb" href="http://www.imdb.com/name/nm0001570/">Edward Norton</a>. He has portrayed several characters extremely well, so it is a pity he hasn&#8217;t won an Oscar yet.</li>
<li>I have a weird habit to say a word or sentence for a few weeks after I heard it or made it up. Sometimes it comes from a movie, sometimes from someone else. It is really annoying for people in my surroundings (sorry!). Problem is that it keeps going on and on with a lot of different sentences over the years.</li>
<li>The Rubik&#8217;s cube is my slave. I can solve it, but not extremely fast: in about 40-45 seconds on average. Unlike most people think, it is <a title="Beginner Solution to the Rubik's Cube" href="http://peter.stillhq.com/jasmine/rubikscubesolution.html">quite easy to solve</a>. The hardest part is solving it <em>fast</em>. I <a title="Twitter message" href="http://twitter.com/arjaneising/status/1109622508">very recently</a> started this <a title="Rubik's cube appearances in feature movies" href="http://movies.arjaneising.nl/rubiks-cube/">list of Rubik&#8217;s cube appearances in feature movies</a> to combine cubing and watching movies.</li>
<li>Liquids I drink often are—in no particular order—coffee, beer, water, milk and <a title="Taksi tropisch fruit" href="http://www.holland-at-home.nl/taksi-tropisch-fruit-p-119.html">Taksi Tropical Fruit</a>. The latter is only available in the Netherlands. It is a not really a fruit juice, but it comes close.</li>
<li>From time to time I like to imagine the faith of people I meet on the street or in the train (a bit like in the movie <a title="Lola Rennt at IMDb" href="http://www.imdb.com/title/tt0130827/">Lola Rennt</a>). Most of the times it is a nice way to make jokes of people anonymously.</li>
</ul>
<p>So that&#8217;s seven things. If you have questions or comments, I hope the form below does not shy you away.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/seven-things/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>My birthday and lightbulbs</title>
		<link>http://arjaneising.nl/me/my-birthday-and-lightbulbs</link>
		<comments>http://arjaneising.nl/me/my-birthday-and-lightbulbs#comments</comments>
		<pubDate>Mon, 24 Nov 2008 15:37:06 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
	<category>Browsers</category>
		<guid isPermaLink="false">http://arjaneising.nl/uncategorized/my-birthday-and-lightbulbs</guid>
		<description><![CDATA[So it is my birthday today, I am 20 years old now. And because Kilian wanted me and other people to smile, I decided to give away a present that makes you smile, hopefully. Here it is.
How many browser users does it take to change a lightbulb?

How many Microsoft Internet Explorer users does it take [...]]]></description>
			<content:encoded><![CDATA[<p>So it is my birthday today, I am 20 years old now. And because Kilian wanted me and other people <a title="Smile!" href="http://kilianvalkhof.com/2008/life/smile/">to smile</a>, I decided to give away a present that makes you smile, hopefully. Here it is.</p>
<h3>How many browser users does it take to change a lightbulb?</h3>
<ul>
<li><strong>How many Microsoft Internet Explorer users does it take to change a lightbulb?</strong><br />
None. The IE user just has to call someone who &#8220;does something with computers&#8221;, and shout &#8220;help, it does not work anymore&#8221;. That person has to come over to his or her house in order to solve this problem.</li>
<li><strong>How many Mozilla Firefox users does it take to change a lightbulb?</strong><br />
There only has to be one smart guy who writes an add-on to change lightbulbs, to solve the problems thousands of other Firefox people have changing lightbulbs.</li>
<li><strong>How many Opera users does it take to change a lightbulb?</strong><br />
One. Since Opera has a built in option to change a lightbulb as of version 2.1, he or she only has to navigate to Options->Change lightbulb or use <kbd>CMD+SHIFT+ALT+L</kbd>.</li>
<li><strong>How many Safari users does it take to change a lightbulb?</strong><br />
Safari users are smart enough to change the lightbulb all by themselves, they don&#8217;t need their browser for that.</li>
<li><strong>How many Google Chrome users does it take to change a lightbulb?</strong><br />
Google Chrome users can easily close the tab where the lightbulb was opened on, and restore it. They can also use light <dfn>incognito</dfn>.</li>
<li><strong>How many Netscape Navigator users does it take to change a lightbulb?</strong><br />
Two, one to change the lightbulb, and another to control the switch to make the lightbulb <code>blink</code>.</li>
<li><strong>How many Flock users does it take to change a lightbulb?</strong><br />
One plus a few friends, since he or she can easily ask other people how to change a lightbulb with the various community options built in the browser.</li>
<li><strong>How many Maxthon users does it take to change a lightbulb?</strong><br />
Every Maxthon user has a custom mouse gesture for changing a lightbulb, it looks pretty much like an lightbulb itself. So the answer is: one.</li>
<li><strong>How many Konqueror users does it take to change a lightbulb?</strong><br />
One, to look up a new lightbulb on their hard drive, or download an new one from the Internet.</li>
<li><strong>How many WorldWideWeb users does it take to change a lightbulb?</strong><br />
A couple of thousands. They improve the concept of lightbulb by building a tunnel 100 meter underground in Geneva and throw a few elementary particles in there to make one massive source of light, heat and radiation.</li>
<li><strong>How many Lynx users does it take to change a lightbulb?</strong><br />
None. They can&#8217;t see if the lightbulb is broken, so they don&#8217;t know it has to be fixed.</li>
</ul>
<p>If you have any additions to this list, please comment here and maybe I&#8217;ll add them. (I would really like to add one for Mosaic.)
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/my-birthday-and-lightbulbs/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Fronteers 2008, things I liked</title>
		<link>http://arjaneising.nl/html/fronteers-2008-things-i-liked</link>
		<comments>http://arjaneising.nl/html/fronteers-2008-things-i-liked#comments</comments>
		<pubDate>Sun, 14 Sep 2008 12:50:32 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>HTML</category>
	<category>CSS</category>
	<category>SEO</category>
	<category>Accessibility</category>
	<category>JavaScript</category>
	<category>Usability</category>
	<category>Meetings</category>
		<guid isPermaLink="false">http://arjaneising.nl/html/fronteers-2008-things-i-liked</guid>
		<description><![CDATA[After having a non-blogpost-worthy summer, I attended Fronteers 2008 Thursday and Friday last. Some people might have known about that, but I didn&#8217;t announce that on this weblog. In this blogpost, I&#8217;ll mention the things I liked about Fronteers 2008.
Fronteers 2008 was held in Pakhuis de Zwijger, Amsterdam (actually a few hundred meters away from [...]]]></description>
			<content:encoded><![CDATA[<p>After having a non-blogpost-worthy summer, I attended <a title="Fronteers 2008 conference" href="http://fronteers.nl/congres/2008/english">Fronteers 2008</a> Thursday and Friday last. Some people might have <a title="Fronteers reveals info about the Fronteers 2008 conference" href="http://twitter.com/arjaneising/statuses/877019319">known</a> about that, but I didn&#8217;t announce that on this weblog. In this blogpost, I&#8217;ll mention the things I liked about Fronteers 2008.</p>
<p>Fronteers 2008 was held in Pakhuis de Zwijger, Amsterdam (actually a few hundred meters away from the place where the whole Fronteers idea was <a title="Meeting in Amsterdam" href="http://arjaneising.nl/current-work/meeting-in-amsterdam">initiated</a> last year). As I did some volunteering during the conference, I did not see every session.</p>
<h3>Friendly <abbr title="Uniform Resource Locator">URL</abbr>s</h3>
<p>During a session about <a title="Web Guidelines Quality Model" href="http://webrichtlijnen.nl/english/">The Dutch Web Guidelines</a>, Koen Willems told us about friendly <abbr title="Uniform Resource Locator">URL</abbr>s. Now I think everyone knows the general benefits of friendly <abbr title="Uniform Resource Locator">URL</abbr>s. Luckily, Koen came up with something new: a technique to handle search requests with friendly <abbr title="Uniform Resource Locator">URL</abbr>s. So instead of <code>example.com/search.php?q=awesomekeyword</code> you&#8217;d have <code>example.com/search/awesomekeyword</code>.</p>
<p>The key is to redirect the first one to the second one on the server, that is just a few lines of code. With some unobtrusive JavaScript you could add a feature to do the redirection on the client side. In my opinion, it is a bit overdone to rewrite this kind of <abbr title="Uniform Resource Locator">URL</abbr>s, mainly because a search result page for a perticular keyword is not part of the hierarchy of the website.</p>
<h3>Maintainable <abbr title="Cascading Style Sheets">CSS</abbr></h3>
<p><a title="The Haystack" href="http://www.the-haystack.com/">Stephen Hay</a> talked about maintainable <abbr title="Cascading Style Sheets">CSS</abbr>. He bundled the oh-i-know-that-but-i-don&#8217;t-do-that parts of writing <abbr title="Cascading Style Sheets">CSS</abbr> in a nice presentation. Main point is setting up a good structure in your document: layout, color and type, eventually in seperate <abbr title="Cascading Style Sheets">CSS</abbr> files. Also setting up a good structure in you <abbr title="Hypertext Markup Language">HTML</abbr> will make maintaining your code a lot easier.</p>
<p>Actually I don&#8217;t really like the idea of separating the layout, color and type parts of your design. I think I will need to click more through tabs in my editor. &#8220;How do you write <abbr title="Cascading Style Sheets">CSS</abbr>?&#8221;, you might ask. After setting up a good structure in my HTML, I build the <abbr title="Cascading Style Sheets">CSS</abbr> in the same order. So header parts at the top, footer parts at the bottom. I indent the selectors for elements inside the parts of my layout. Your file becomes quite large if you do it this way, but combined with a good text editor it works like a charm for me.</p>
<h3><abbr title="Cascading Style Sheets">CSS</abbr> selectors madness</h3>
<p>After partying on the boat Lizboa, I walked towards the train station with <a title="Home Page of Bert Bos" href="http://www.w3.org/People/Bos/">Bert Bos</a> and some other people. Bert told us how <abbr title="Cascading Style Sheets">CSS</abbr> was initiated, and what the difficulties were in the beginning. He mentioned the idea of selectors, before the <a title="The Cascade" href="http://www.w3.org/TR/CSS2/cascade.html#cascade">cascade</a> was developed. It would be like this mad: If you have an element, and two selectors actually select that element, you will get an average of the properties that apply to those selectors. For example, if you have <code>p {color:red}</code> and <code>body p {color:blue}</code>, your paragraphs would be&#8230; purple.</p>
<h3>Maintainable JavaScript</h3>
<p><a title="Wait till I come!" href="http://www.wait-till-i.com/">Christian Heilmann</a> picked maintaining JavaScript as topic for his presentation. Luckily he didn&#8217;t introduce much new things to me. He told about separating parts in your application in functions, and then make some of the general functions available outside the application, and some specific parts not. So if you have a small function to convert seconds to minutes and seconds, you can write it in your application as one function. Then call it every time you need it. You then <a title=" Again with the Module Pattern - reveal something to the world" href="http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/">reveal the re-usable parts</a> out of the script&#8217;s scope, because some other script on your website might use it as well.</p>
<p>Another good thing to use, is a <a title=" Providing script configuration in-line and programatically" href="http://www.wait-till-i.com/2008/05/23/script-configuration/">configuration object</a> at the top of your application, instead of using class names and ID values inside the functional part of your JavaScript. What I missed a bit over there, is that some configuration might be depending on the page your JavaScript is loaded. You could simply use attributes of elements inside your webpage, and read them out via JavaScript. An example is using a <code>meta</code> tags in your <code>head</code>, with some strings for messages you display. You can translate an <abbr title="Hypertext Markup Language">HTML</abbr> page (eventually in your <abbr title="Content Management System">CMS</abbr>), and use the same JavaScript file over and over again. You can also use the <a title="HTML5: custom data" href="http://annevankesteren.nl/2008/04/custom-data"><abbr title="Hypertext Markup Language version 5">HTML5</abbr> data attributes</a>. (However, you&#8217;ll get an &#8220;invalid&#8221; <abbr title="Hypertext Markup Language">HTML</abbr> webpage. The validator at W3.org cannot handle custom <abbr title="Document Type Definition">DTD</abbr>s). I will write an in-detail instruction on how to do all this in the near future.</p>
<h3>Absolute positioning to the rescue</h3>
<p>Several front-end people sometimes ask me: why do you use absolute positioning for this&#8230;? My answer always is: I do not want to change the logical order of the content in my <abbr title="Hypertext Markup Language">HTML</abbr>. This is exactly what <a title="Stuff and Nonsense" href="http://www.stuffandnonsense.co.uk/">Andy Clarke</a> presented about. First, he defined all kinds of positioning in <abbr title="Cascading Style Sheets">CSS</abbr>. Then he gave some (beautiful looking) examples of general occurring cases where absolute positioning is better than floating elements all around.</p>
<h3>Conclusion</h3>
<p>Fronteers 2008 was a really amazing experience, if I may say so as someone who helped organizing it a bit. If you&#8217;re interested in the other sessions, you might want to take a look at the page where <a title="Slides Fronteers 2008 conference" href="http://fronteers.nl/congres/2008/slides">all slides</a> are collected. If you have any questions about the conference or the topics I mentioned above, feel free to drop a comment below.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/html/fronteers-2008-things-i-liked/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>@media 2008, things I liked</title>
		<link>http://arjaneising.nl/accessibility/media-2008-things-i-liked</link>
		<comments>http://arjaneising.nl/accessibility/media-2008-things-i-liked#comments</comments>
		<pubDate>Sat, 31 May 2008 11:26:22 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Accessibility</category>
	<category>Design</category>
	<category>Meetings</category>
	<category>Reviews</category>
		<guid isPermaLink="false">http://arjaneising.nl/accessibility/media-2008-things-i-liked</guid>
		<description><![CDATA[So, for those who missed it, I attended @media this year. I really enjoyed the great speakers, learned some more things about design and usability and met quite a lot people for the first time. But what did I like the most? Here some things I actually learned and liked.
The first presentation was by Jeffrey [...]]]></description>
			<content:encoded><![CDATA[<p>So, for those who missed it, I attended <a title="@media 2008 London" href="http://www.vivabit.com/atmedia2008/london/">@media this year</a>. I really enjoyed the great speakers, learned some more things about design and usability and met quite a lot people for the first time. But what did I like the most? Here some things I actually learned and liked.</p>
<p>The first presentation was by <a href="http://www.veen.com/jeff/">Jeffrey Veen</a>, about how to design with and organize data in a clear way. It is a bit impossible to reproduce the key things in one sentence. In my opinion it is a good thing to give the user a bit control of the way the data is resented. That could be done by a table with the data, and also displaying a graphic representation. (To make it accessible, you could use a table, and turn that with JavaScript and <code>canvas</code> into a graph. Something I discussed a bit with <a title="Naar Voren" href="http://www.naarvoren.nl/">Robert Jan</a> later.)</p>
<p>Another presentation I liked very much, was about Mental Models. <a href="http://www.adaptivepath.com/team/indi.php">Indi Young</a> did a really great job giving us an introduction into that. Basically it is about asking people what they feel about something (a website, a hotel, anything), and the things they expect of it. By grouping all those things, and combining that with parts of the subject that support those feelings, you can quite easily see what kinds of things need to be changed to achieve a better experience for the clients or users. She has also written a book about it, and I put that one on my wishlist.</p>
<p><a title="Stuff and Nonsense" href="http://www.stuffandnonsense.co.uk/">Andy Clark</a> did a design presentation, wherein he explained in a very good way how he got inspiration from comic books for his designs. I think it was a good topic and it can be applied to other creative things, too. The essence is to understand really good what the original creator wanted you to feel or do. If you want to achieve the same with your website, it is a matter of applying the method used.</p>
<p>For me the presentation by <a title="Superfluous Banter" href="http://superfluousbanter.org/">Dan Rubin</a> was very educative. As a developer, primarily, I don&#8217;t really have much experience in adding details to the designs I create. He pointed at a lot of things I really wouldn&#8217;t come with by myself.</p>
<p>Although I didn&#8217;t really learn much from the presentation <a href="http://www.paciellogroup.com/about/people.htm">Steve Faulkner</a> gave on <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr>, it was good to be part of the audience. He introduced <abbr title="Accessible Rich Internet Applications">ARIA</abbr>, the way to make applications accessible by applying some attributes to input elements. He clearly demonstrated what the benefits are, by using <a title="JAWS for Windows" href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a> to demonstrate some simple applications that use <abbr title="Accessible Rich Internet Applications">ARIA</abbr>. (A good point to start with <abbr title="Accessible Rich Internet Applications">ARIA</abbr>, is the <a title="AJAX:WAI ARIA Live Regions" href="http://developer.mozilla.org/en/docs/AJAX:WAI_ARIA_Live_Regions">documentation at Mozilla</a>.)</p>
<p>A great speaker was <a href="http://rishida.net/">Richard Ishida</a>, who demonstrated Unicode as a tool for creating an international website. He didn&#8217;t tell anything new to me, made very clear for everyone in the audience <em>why</em> and <em>how</em> to think good about <abbr title="Internationalisation">i18n</abbr> before you start to build the website. It was really a pity he couldn&#8217;t present a part of his presentation (not enough time).</p>
<p>So, that were the most interesting parts for me. I hope to attend @media next year again, I&#8217;d really love to see more presentations like these.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/accessibility/media-2008-things-i-liked/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>:focus on your links</title>
		<link>http://arjaneising.nl/css/focus-on-your-links</link>
		<comments>http://arjaneising.nl/css/focus-on-your-links#comments</comments>
		<pubDate>Wed, 30 Apr 2008 21:16:12 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>CSS</category>
	<category>Accessibility</category>
	<category>Design</category>
		<guid isPermaLink="false">http://arjaneising.nl/css/focus-on-your-links</guid>
		<description><![CDATA[Something that has annoyed me lately, is how in-accessible some web sites are for people who browse using their keyboard. Number one issue is, in my opinion, that some people simply remove outlines from links. Outlines are those gray borders around links when you click on them. But is is very okay if you remove [...]]]></description>
			<content:encoded><![CDATA[<p>Something that has annoyed me lately, is how in-accessible some web sites are for people who browse using their keyboard. Number one issue is, in my opinion, that some people simply remove outlines from links. <a title="CSS User Interface - Dynamic outlines" href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">Outlines</a> are those gray borders around links when you click on them. But is is very okay if you remove outlines for some links, but only if you add a proper focus state to that link.</p>
<p>Let me give <a title=":focus on your links - code example #1" href="http://codex.arjaneising.nl/code-examples/focus-links-1.html">an example</a> first. The first menu has a nice hover state. The second menu also has an hover state applied to it, but also hides the outline. Some designers dislike the outline, and try to hide it. Also some <abbr title="Cascading Style Sheets">CSS</abbr> reset methods (like the popular <a title="Reset reloaded" href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">reset method by Eric Meyer</a>) &#8216;reset&#8217; the outline.</p>
<p>To be better accessible it is good to declare a <a title="CSS Selectors - Dynamic pseudo-classes" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">focus state</a> for your links. Focus states are, like hover states, a pseudo-class for <abbr title="Cascading Style Sheets">CSS</abbr>, which you can apply easily. If an element can receive actions with a keyboard, the state&#8217;s properties are applied. Think of typing into a text box, or hitting <kbd>space</kbd> when you use <kbd>tab</kbd> to navigate.</p>
<p>You could, for example, declare both focus and hover in one selector, using a comma to separate them. See <a title=":focus on your links - code example #2" href="http://codex.arjaneising.nl/code-examples/focus-links-2.html">this example</a>. It should be noted, that I change both the color and shape of the element. This is done for people with a color deficiency, because if you use (slight) color changes the link would be much more difficult to recognize by colorblind people.</p>
<p>If all was that simple.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/css/focus-on-your-links/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Meetings and conferences</title>
		<link>http://arjaneising.nl/meetings/meetings-and-conferences</link>
		<comments>http://arjaneising.nl/meetings/meetings-and-conferences#comments</comments>
		<pubDate>Tue, 26 Feb 2008 21:30:25 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Meetings</category>
		<guid isPermaLink="false">http://arjaneising.nl/meetings/meetings-and-conferences</guid>
		<description><![CDATA[There are a lot cool meetings and conferences I&#8217;ll attend the next few months. I hope to meet people I only know via the internet, and I&#8217;m sure I&#8217;ll learn new, exciting things.
But I&#8217;d like to start with a meeting in the past. Thanks to Kilian, I could enjoy Nokia Trends Lab in Amsterdam last [...]]]></description>
			<content:encoded><![CDATA[<p>There are a lot cool meetings and conferences I&#8217;ll attend the next few months. I hope to meet people I only know via the internet, and I&#8217;m sure I&#8217;ll learn new, exciting things.</p>
<p>But I&#8217;d like to start with a meeting in the past. Thanks to <a title="Kilian Valkhof" href="http://kilianvalkhof.com/">Kilian</a>, I could enjoy <a href="http://www.nokiatrendslab.nl/">Nokia Trends Lab</a> in Amsterdam last Thursday. The trends lab itself was not very amazing, but it was fun though. Nokia didn&#8217;t show many things, only two models that are just updates of existing ones. The event was planned until 2pm, so I had to leave much earlier because I had to catch a train. The band Moke was very entertaining.</p>
<p>Next Friday I hope to learn some things on the design side of creating web sites. In Delft the <a href="http://internetcreatieven.nl/kennisdag/">Internetcreatieven Kennisdag</a> takes place. I&#8217;m not a real designer, but I really like to expand my knowledge on this subject.</p>
<p>Early in April, Adobe will held a cool <a title="On AIR Tour - Amsterdam" href="http://onair.adobe.com/schedule/cities/amsterdam.php">one-day conference</a> on their new product: <abbr title="Adobe Integrated Runtime">AIR</abbr>. <a href="http://www.adobe.com/products/air/">Adobe <abbr title="Adobe Integrated Runtime">AIR</abbr></a> is a way to use web applications on your desktop. With JavaScript, Flash or Flex (you guess what technique I use) it is possible to create so called <abbr title="Adobe Integrated Runtime">AIR</abbr>-applications, which can easily communicate with <abbr title="Application Programming Interface">API</abbr>s from web services. At the conference several Adobe employees will talk about it, and there is time for discussion and other things.</p>
<p>A week later, <a title="pfcongrez - Het Web Development Congres" href="http://pfcongrez.nl/">pfcongrez</a> is held. I&#8217;m looking forward to learn about PHP frameworks, and it is very cool <a title="Marktplaats" href="http://www.marktplaats.nl">Marktplaats.nl</a> will share some bits about how their web site works.</p>
<p>Last, but absolutely not least: I will attend <a title="@media 2008 - Web Design and Development Conference" href="http://vivabit.com/atmedia2008/london/">@media this year</a>! Two days of meeting amazing people, listening to well-known speakers and exploring London. The full schedule is not known at the moment of writing, but I&#8217;m sure there will be many intersting presentations. Last year I couldn&#8217;t make it, but at this moment all lights are green. I&#8217;m looking forward to take my plane just a few hours after making my mathematics exam (oh, you didn&#8217;t know I haven&#8217;t finished <a title="Voorbereidend wetenschappelijk onderwijs" href="http://en.wikipedia.org/wiki/Voorbereidend_Wetenschappelijk_Onderwijs">secondary education</a> yet?).</p>
<p>So, are you planning to go to any of the mentioned meetings or conferences? I&#8217;d love to hear, we possibly can get to know each other. Just leave a comment over here :)
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/meetings/meetings-and-conferences/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>IE6 is unsafe, how to let ordinary people know about that?</title>
		<link>http://arjaneising.nl/browsers/ie6-is-unsafe-how-to-let-ordinary-people-know-about-that</link>
		<comments>http://arjaneising.nl/browsers/ie6-is-unsafe-how-to-let-ordinary-people-know-about-that#comments</comments>
		<pubDate>Mon, 11 Feb 2008 13:48:45 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Browsers</category>
	<category>E-commerce</category>
	<category>Security</category>
		<guid isPermaLink="false">http://arjaneising.nl/browsers/ie6-is-unsafe-how-to-let-ordinary-people-know-about-that</guid>
		<description><![CDATA[Last week I had to use IE6 for a web shop to work. The total session included the payment via PayPal, and I had a very unsafe feeling about all this.
I know it. Many front-end developers like me don&#8217;t really like the browser because of the numerous bugs in its rendering engine. But my feelings [...]]]></description>
			<content:encoded><![CDATA[<p>Last week I <em>had to</em> use <abbr title="Internet Explorer 6">IE6</abbr> for a web shop to work. The total session included the payment via PayPal, and I had a very unsafe feeling about all this.</p>
<p>I know it. Many front-end developers like me don&#8217;t really like the browser because of the numerous bugs in its rendering engine. But my feelings were because of the security bugs. Since the release of <abbr title="Internet Explorer 7">IE7</abbr> over a year ago, Microsoft only fixes the most threatening exploits. The total usage of <abbr title="Internet Explorer 7">IE7</abbr> is fifty percent, so the other fifty percent is <abbr title="Internet Explorer 6">IE6</abbr> (and sometimes <abbr title="Internet Explorer 5.5">IE5.5</abbr>).</p>
<p>However, I think I have a solution to make users aware of browsers. Unlike us as developers, they simply use &#8216;the Internet&#8217;, and not &#8216;a browser&#8217;. And because they&#8217;re not aware enough, they simply do not update them.</p>
<p>My solution is as following. I may assume all banks and web services like PayPal care about security. And since they do, it is very important their costumers safely use their online banking. I mean a safe and up to date browser and <abbr title="Operating System">OS</abbr>. The &#8216;client side&#8217; is the only thing they cannot control.</p>
<p>So, what if your bank&#8217;s website simply detects if you use a safe browser and <abbr title="Operating System">OS</abbr>? The first one can easily be done with a conditional comment. Detecting the last one is impossible (you cannot fetch what updates are installed). If the web service detects an unsafe browser, it can simply display a text including a link with more information. This would work much like the <a title="Is It A Fucking Irritating Browser?" href="http://isitafuckingirritatingbrowser.com/">IsItAFuckingIrritatingBrowser</a> web page, made by my Fronteers friend <a title="Krijn Hoetmer" href="http://krijnhoetmer.nl/">Krijn</a>.</p>
<p>By the way, in The Netherlands we had an <a title="3xKloppen - Veilig blijven internetbankieren" href="http://www.3xkloppen.nl/">awareness campaign</a> a while ago. Some commercials explained that users had to &#8216;check&#8217; the security, website and payment. However, it was not explained how to do that, and the conversion rate is quite low. It is much more effective if you want to pay 300 Dollar or Euro with your online banking and you see a message that it might be unsafe to do with your current browser (of course not called &#8216;browser&#8217;).</p>
<p>I&#8217;m interested if any bank or service does something like this. Links? Screenshots? Anyone?
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/browsers/ie6-is-unsafe-how-to-let-ordinary-people-know-about-that/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Animated PNG</title>
		<link>http://arjaneising.nl/flash/animated-png</link>
		<comments>http://arjaneising.nl/flash/animated-png#comments</comments>
		<pubDate>Sun, 27 Jan 2008 19:24:47 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Flash</category>
	<category>Design</category>
		<guid isPermaLink="false">http://arjaneising.nl/flash/animated-png</guid>
		<description><![CDATA[Years ago the GIF format was famous, with the ability to bring animation in browsers. Flash didn&#8217;t exist, so GIF was the only way to do that. It became a true nightmare when people began to make annoying images. Very fast it became a not done for web designers to use animated GIFs.
Times have changed [...]]]></description>
			<content:encoded><![CDATA[<p>Years ago the <abbr title="Graphics Interchange Format">GIF</abbr> format was famous, with the ability to bring animation in browsers. Flash didn&#8217;t exist, so <abbr title="Graphics Interchange Format">GIF</abbr> was the only way to do that. It became a true nightmare when people began to make annoying images. Very fast it became a <em>not done</em> for web designers to use animated <abbr title="Graphics Interchange Format">GIF</abbr>s.</p>
<p>Times have changed since then. Web designers now would like to use advanced graphical possibilities, like true colors and alpha transparency. <abbr title="Portable Network Graphics">PNG</abbr> offers them those things. However, if we want to do animated stuff, <abbr title="Graphics Interchange Format">GIF</abbr> and Flash are still the only things we have. Both of them have their downsides.</p>
<p><abbr title="Graphics Interchange Format">GIF</abbr> has bad support for color and transparency. For really cool things it is impossible to use it. Flash can do those things, but the downside of Flash is the impossibility to use it as background with your <abbr title="Cascading Style Sheets">CSS</abbr>, or to use it as list item.</p>
<p>The inability for <abbr title="Portable Network Graphics">PNG</abbr> to support animation, and the downsides of <abbr title="Graphics Interchange Format">GIF</abbr> led to the development of MNG: Multiple-image Network Graphics. It was developed by the team that developed <abbr title="Portable Network Graphics">PNG</abbr> itself. The real downside was the complexity, the code to read and write <abbr title="Multiple-image Network Graphics">MNG</abbr>s is quite heavy. Mozilla implemented it, but dropped it later to make the browser faster, and also because nobody used it.</p>
<p>Mozilla stated to work on an own implementation of animation in <abbr title="Portable Network Graphics">PNG</abbr>, named Animated <abbr title="Portable Network Graphics">PNG</abbr> (APNG). Really usefull about this is that it is completely backwards compatible. A non-<abbr title="Animated Portable Network Graphics">APNG</abbr> user agent will only show the first frame of the animation. For them no information will be lost, and it is even possible for <abbr title="Animated Portable Network Graphics">APNG</abbr> user agents to ignore the first frame.</p>
<p>Great news lately was the default implementation of <abbr title="Animated Portable Network Graphics">APNG</abbr> in the newest versions of Firefox (version 3) and Opera (version 9.5). Both are not public yet, but will become that in the next few months.</p>
<p>There are a few applications that can make an <abbr title="Animated Portable Network Graphics">APNG</abbr> image. There is, for example, a <a title="APNG Edit" href="https://addons.mozilla.org/en-US/firefox/addon/5519">Firefox extension</a> to make them (will only work in the Firefox 3 betas). Another one is <a href="http://www.treebuilder.de/default.asp?file=660000.xml">svg2png</a>, a program that can transform <abbr title="Scalable Vector Graphics">SVG</abbr> images to <abbr title="Portable Network Graphics">PNG</abbr>s. Last but not least, there is an online generator called <a href="http://animatedpng.com/index.php/assembler/">APNG Assembler</a>.</p>
<p>More information on <abbr title="Animated Portable Network Graphics">APNG</abbr> can be found in <a title="APNG Specification" href="http://wiki.mozilla.org/APNG_Specification">the specification</a>, or in the <a title="Better animations in Firefox 3" href="http://labs.mozilla.com/2007/08/better-animations-in-firefox-3/">introduction at Mozilla Labs</a>.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/flash/animated-png/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Review: Webdesign Rules!</title>
		<link>http://arjaneising.nl/e-commerce/review-webdesign-rules</link>
		<comments>http://arjaneising.nl/e-commerce/review-webdesign-rules#comments</comments>
		<pubDate>Thu, 10 Jan 2008 20:17:06 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>E-commerce</category>
	<category>Reviews</category>
		<guid isPermaLink="false">http://arjaneising.nl/e-commerce/review-webdesign-rules</guid>
		<description><![CDATA[For my non-Dutch readers this post will not be very interesting. I&#8217;ll review the Dutch book Webdesign Rules!, written by Ruben Bos. This book helps people to find the good directions in the web development world.
The whole book is aimed to make clear for everyone who doesn&#8217;t make web sites, how a good web site [...]]]></description>
			<content:encoded><![CDATA[<p>For my non-Dutch readers this post will not be very interesting. I&#8217;ll review the Dutch book <em>Webdesign Rules!</em>, written by Ruben Bos. This book helps people to find the good directions in the web development world.</p>
<p>The whole book is aimed to make clear for everyone who doesn&#8217;t make web sites, how a good web site works. Moreover, how to find a good company to build such a site. This also includes ways to check your current web site.</p>
<p>A good web site, according to the book, is a good combination of content, marketing, usability and technique. But how good is this book for people who make web sites? We know how to do that, or how to get to know how to do that, don&#8217;t we know?</p>
<p>I&#8217;d say yes. For me, nothing is really new in this book. But the best part of this book is to describe in a few words what a web site needs, to make the client happy. Everything is very clearly written, and the illustrations are sometimes exactly right. We, as developers, can better assist clients through the whole process.</p>
<p>There are no real downsides of this book. Maybe you could be disappointed about how fast you&#8217;ll have read it. But in my opinion that a very good point about his book.</p>
<p>The book can be ordered via <a title="Webdesign Rules! De onbetwiste regels van het web" href="http://www.webdesignrules.nl/">the website</a>, and I&#8217;ve heard also in book stores soon.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/e-commerce/review-webdesign-rules/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>2007 as an HTML element</title>
		<link>http://arjaneising.nl/me/2007-as-an-html-element</link>
		<comments>http://arjaneising.nl/me/2007-as-an-html-element#comments</comments>
		<pubDate>Mon, 31 Dec 2007 18:50:37 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
	<category>HTML</category>
	<category>Semantics</category>
	<category>CSS</category>
		<guid isPermaLink="false">http://arjaneising.nl/me/2007-as-an-html-element</guid>
		<description><![CDATA[I could give a list of nice blog post I wrote this year. I could post a cool movie related to web development. However, I would like to do an mind experiment on how to markup the year 2007. Oh yeah, with HTML.
2007 is in my opinion just an chain reaction of both interesting and [...]]]></description>
			<content:encoded><![CDATA[<p>I could give a list of nice blog post I wrote this year. I could post a cool movie related to web development. However, I would like to do an mind experiment on how to markup the year 2007. Oh yeah, with <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
<p>2007 is in my opinion just an chain reaction of both interesting and boring things. Like always we have the option to choose, so I pick the first one. &#8216;Things&#8217; is multiple, so a good start is using a list. <a title="Example #1" href="http://codex.arjaneising.nl/code-examples/2007-element-1.html">Here we go</a>.</p>
<p>The element name is, as you can see, <code>year2007</code>. I couldn&#8217;t find if this is an allowed name in the <a title="On SGML and HTML" href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.3"><abbr title="Document Type Definition">DTD</abbr> specification</a>, but I could just see <samp><2007></samp> in my browser if I used that one.</p>
<p>Another thing I ran into was the fact that some events are really general, but some are personal. So I also use the <code>type</code> attribute to indicate which one it is. The attribute can be used on the <code>year2007</code> element itself, or one of the list items. So now we are <a title="Example #2" href="http://codex.arjaneising.nl/code-examples/2007-element-2.html">talking about semantics</a>!</p>
<p>Only missing is when the events happened. Okey, in the year 2007, but that is not precise enough. So the <code>datetime</code> attribute could be used on the list items. User agents may want to export the dates to a history e-book, for example. So have a look at the <a title="Example #3" href="http://codex.arjaneising.nl/code-examples/2007-element-3.html">example with usage of the <code>datetime</code> attribute</a>.</p>
<p>I am lazy, and since this is a bad joke I will not write a full <abbr title="Document Type Definition">DTD</abbr> for all this. However, if I had written one, I could use a good validator that can read custom <abbr title="Document Type Definition">DTD</abbr>s and Doctypes to validate the cool document I will markup later. Writing one would not be that difficult, though.</p>
<p>Now we have some kind of structure the list can be <a title="Example #4" href="http://codex.arjaneising.nl/code-examples/2007-element-4.html">filled with some real events</a>. You could expect it, I added some general and personal events that happened in 2007.</p>
<p>To add some style, I made a style sheet to indicate the differences between general and personal events. Since personal events are very important for me, they are a bit heavier. Just a simple <abbr title="Cascading Style Sheets version 2">CSS2</abbr> selector, nothing new invented. <a title="Example #5" href="http://codex.arjaneising.nl/code-examples/2007-element-5.html">Check that out</a>.</p>
<p>By the way, happy new year!
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/2007-as-an-html-element/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Tips for better pagination</title>
		<link>http://arjaneising.nl/html/tips-for-better-pagination</link>
		<comments>http://arjaneising.nl/html/tips-for-better-pagination#comments</comments>
		<pubDate>Wed, 12 Dec 2007 19:32:12 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>HTML</category>
	<category>CSS</category>
	<category>Accessibility</category>
	<category>Usability</category>
		<guid isPermaLink="false">http://arjaneising.nl/html/tips-for-better-pagination</guid>
		<description><![CDATA[Often a web site displays only a part of the shop items, search results or blog posts. This so called pagination uses buttons or links to navigate through the pages. However, not all pagination methods are very usable or accessible. In this article some ways to optimize this part of a web site.
Design
Size and place. [...]]]></description>
			<content:encoded><![CDATA[<p>Often a web site displays only a part of the shop items, search results or blog posts. This so called pagination uses buttons or links to navigate through the pages. However, not all pagination methods are very usable or accessible. In this article some ways to optimize this part of a web site.</p>
<h3>Design</h3>
<p><em>Size and place.</em> The pagination is a main part of the web site. Since it is critical for users to use this, the worst thing to do with your pagination is to make it small. The links do not have to be huge, but absolutely do not make them smaller than the normal texts on your page. For more attention on the links, you could also use some white space around the pagination. If the links are directly underneath the search results, the don&#8217;t catch the attention of the visitor.</p>
<p><em>Space.</em> The controls need to be easily click-able, so use a quite large area for the links (using  some <code>padding</code>). People browsing with a notebook, or people with a motoric skill impairment, can much easier click on these links. Be aware that this space needs to be visible, you could use a background color or a border for this. Some space between the controls themselves is also a good idea (you have plenty of room).</p>
<p><em>Identification.</em> People know it is a pagination, so underlines are quite useless. It is, however, a good idea to use a <code>hover</code> and a <code>focus</code> state to make things even more clear if you actually use the pagination. It is also not needed to make a link of the current page indicator. You could better emphasize it by a different look and feel. Buttons for the next and previous page help the visitor to recognize a pagination.</p>
<h3>Markup</h3>
<p><em>Next en previous links.</em> <abbr title="Hypertext Markup Language">HTML</abbr> allows you to specify if a link to another page is the next or previous one in a series of pages. This can be done by using the <code>rel</code>-attribute. The values of the <code>rel</code>-attribute may (for example) be &#8216;next&#8217; or &#8216;prev&#8217;. It is also possible to use a <code>link</code>-element in the <code>head</code> of your document. That <code>link</code>-element can have a <code>href</code> and a <code>rel</code> attribute. User agent (such as browsers) can use this information to assign short keys to browse to the next page.</p>
<p><em>Some don&#8217;ts.</em> For links it is possible to declare an <code>accesskey</code> and a <code>tabindex</code> attribute. However, these attributes can screw up the normal &#8216;flow&#8217; of the browser. For example, the <code>tabindex</code> messes up the order of all links on a page. Even so, the <code>accesskey</code> attribute sounds great in theory, but in practice nobody uses them and simply doesn&#8217;t expect them. And what if the visitor already uses that key for a program or function within his operating system?</p>
<h3>More to read</h3>
<ul>
<li>All <a title="Basic HTML data types" href="http://www.w3.org/TR/html401/types.html#type-links">link types</a> for the <code>rel</code> and <code>rev</code> attributes.</li>
<li><a href="http://kurafire.net/log/archive/2007/06/22/pagination-101">Pagination 101</a> by Faruk Ateş.</li>
<li><a href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=itempagination">Item pagination patern</a> at <abbr title="Yahoo! Developer Network">YDN</abbr>.</li>
</ul>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/html/tips-for-better-pagination/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>See and hear me speak this week</title>
		<link>http://arjaneising.nl/me/see-and-hear-me-speak-this-week</link>
		<comments>http://arjaneising.nl/me/see-and-hear-me-speak-this-week#comments</comments>
		<pubDate>Sun, 25 Nov 2007 16:40:42 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
	<category>HTML</category>
	<category>Usability</category>
	<category>Meetings</category>
		<guid isPermaLink="false">http://arjaneising.nl/me/see-and-hear-me-speak-this-week</guid>
		<description><![CDATA[29 November next I&#8217;ll speak in Groningen at a Fronteers meeting. I&#8217;ll talk a bit about Fronteers itself: what is it, why, who et cetera. Also, I will tell something interesting about classes and ids: how to optimize the usage of these attributes.
The meeting will take place in ABN AMRO Business Corner of the Euroborg, [...]]]></description>
			<content:encoded><![CDATA[<p>29 November next I&#8217;ll speak in Groningen at a Fronteers meeting. I&#8217;ll talk a bit about Fronteers itself: what is it, why, who et cetera. Also, I will tell something interesting about classes and ids: how to optimize the usage of these attributes.</p>
<p>The meeting will take place in ABN AMRO Business Corner of the Euroborg, and is organized by <a title="Wisdom" href="http://wisdom.nl/">Wisdom/Ordina</a>. Two other people will tell something interesting. <a title="Usabilityweb" href="http://usabilityweb.nl/">Stefan Wobben</a> is going to talk about usability. The way Wisdom/Ordina handles front-end web developing, will be presented by Alexander Kroon.</p>
<p>The meeting will kick off at 18 o&#8217;clock, and it is (of course) possible to meet colleague front-end developers. Hope to do that, and see you next Thursday!</p>
<p><strong>Update:</strong> <a title="Fronteers Groningen: Arjan Eising" href="http://www.slideshare.net/guestb92eeb/fronteers-groningen-arjan-eising/">the slides</a> can be viewed at SlideShare.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/see-and-hear-me-speak-this-week/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Nineteen :)</title>
		<link>http://arjaneising.nl/me/nineteen</link>
		<comments>http://arjaneising.nl/me/nineteen#comments</comments>
		<pubDate>Sat, 24 Nov 2007 09:50:25 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
		<guid isPermaLink="false">http://arjaneising.nl/uncategorized/nineteen</guid>
		<description><![CDATA[Today is my nineteenth birthday.

Drawing by El Bosque

]]></description>
			<content:encoded><![CDATA[<p>Today is my nineteenth birthday.</p>
<p><img alt="Boy with balloons" title="Boy with balloons" src="http://farm3.static.flickr.com/2400/2059085072_fc21ae3ac4_d.jpg" /></p>
<p><a title="Boy with balloons" href="http://www.flickr.com/photos/el_bosque/2059085072/">Drawing by El Bosque</a>
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/nineteen/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Don&#8217;t remove the outline from links</title>
		<link>http://arjaneising.nl/css/dont-remove-the-outline-from-links</link>
		<comments>http://arjaneising.nl/css/dont-remove-the-outline-from-links#comments</comments>
		<pubDate>Mon, 12 Nov 2007 21:23:35 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>CSS</category>
	<category>Accessibility</category>
	<category>Browsers</category>
	<category>Usability</category>
	<category>Design</category>
		<guid isPermaLink="false">http://arjaneising.nl/css/dont-remove-the-outline-from-links</guid>
		<description><![CDATA[I came across an web page (I don&#8217;t link) that had removed the outline from all links. Why? I don&#8217;t know. Maybe because it looks nicer. By removing the outline, however, an accessibility problem occurs.
But first, what are the outlines? And how to remove them? Outlines are the gray dotted borders around links, buttons and [...]]]></description>
			<content:encoded><![CDATA[<p>I came across an web page (I don&#8217;t link) that had removed the outline from all links. Why? I don&#8217;t know. Maybe because it looks nicer. By removing the outline, however, an accessibility problem occurs.</p>
<p>But first, what are the outlines? And how to remove them? Outlines are the gray dotted borders around links, buttons and input elements that indicate where the focus is. To remove them, the <abbr title="Cascading Style Sheets">CSS</abbr> property <code>outline</code> needs to set to <code>none</code>. Example: <code>a:focus {outline:none;}</code>. Some <abbr title="Cascading Style Sheets">CSS</abbr> reset methods also remove the outline. Not all browsers support this property, but quite a few do.</p>
<p>The problem you get when you <em>do</em> remove the outline, is quite simple. If you don&#8217;t use a mouse to navigate, but instead use the keyboard, you cannot navigate easily. Because you use the <kbd>tab</kbd>-key, you don&#8217;t know which link you are when you hit <kbd>tab</kbd>. As alternative you only can see the <abbr title="Uniform Resource Locator">URL</abbr> in the status bar (not ideal, is it?).</p>
<p>It can become even worser when the page uses the <code>tabindex</code> attribute to mess up the default order. I have never believed in the usage of that attribute, since you simply need to place the elements in the order you want in the source. With <abbr title="Cascading Style Sheets">CSS</abbr> you can visually place them almost anywhere you want.</p>
<p>Conclusion: just not remove the outline. Your page looks the same, and everybody is happy.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/css/dont-remove-the-outline-from-links/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Skip links to improve your accessibility</title>
		<link>http://arjaneising.nl/html/skip-links-to-improve-your-accessibility</link>
		<comments>http://arjaneising.nl/html/skip-links-to-improve-your-accessibility#comments</comments>
		<pubDate>Mon, 29 Oct 2007 14:17:05 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>HTML</category>
	<category>Accessibility</category>
	<category>Meetings</category>
		<guid isPermaLink="false">http://arjaneising.nl/html/skip-links-to-improve-your-accessibility</guid>
		<description><![CDATA[At the last Fronteers meeting we (about 35 front-end developers) e-discussed with Eric Velleman (Accessibility.nl) about the Government Web Accessibility Guidelines. Are the guidelines realistic? I said e-discussed, since by a communication error Eric was on a holiday in France (we don&#8217;t exactly know what went wrong). However, using a web cam and an internet [...]]]></description>
			<content:encoded><![CDATA[<p>At the last Fronteers meeting we (about 35 front-end developers) e-discussed with Eric Velleman (<a title="Webrichtlijnen en drempelvrij - Stichting Bartiméus Accessibility - Toegankelijkheid van Internet, Software en Electronische Apparatuur" href="http://www.accessibility.nl/">Accessibility.nl</a>) about the Government Web Accessibility Guidelines. Are the guidelines realistic? I said e-discussed, since by a communication error Eric was on a holiday in France (we don&#8217;t exactly know what went wrong). However, using a web cam and an internet connection we were able to discuss the guidelines.</p>
<p>One thing we discussed were (large) menu structures. Should the menu in the markup be placed before of after the content? Screen reader users seem to expect the menu be before the content. If the content is placed before the menu, they are distracted and don&#8217;t understand what is going on. It is an habituation you can&#8217;t control, so putting a menu at the bottom of your mark-up looks like an unreasonable option (to me).</p>
<p>It also seems to be a myth that frames are bad for accessibility for screen readers. With a keyboard shortcut they can switch between frames, so a menu and the content are separated quite well. Some blind people prefer framed web sites over &#8216;normal&#8217; web sites. This may sound like an recommendation of frames by me, but it isn&#8217;t. By the way, the <code>iframe</code> element will probably be back in <abbr title="Hypertext Markup Language version 5">HTML5</abbr>.</p>
<p>The guidelines state that large menus <em>must</em> have an option to skip the menu and go straight to the content. These skip links are put on top (and sometimes also at the bottom) of an web page, and hidden via CSS for visual browsers. Some more about skip links can be found at <a title="Skip links" href="http://juicystudio.com/article/skip-links.php">Juicy Studio</a>.</p>
<p>I thought it would be better to <em>always</em> use skip links. If more and more people use them, screen reader users may get used to them. Also, if you want the menu at the bottom then, it will be no problem to do that. Since the user gets the skip link first, they can decide to go to the content or the navigation. If you use more than one skip link, it is important to always put the skip links in the order the content and menu appear in the markup.</p>
<p>From now on I&#8217;ll provide skip links in the web sites I build, how about you?
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/html/skip-links-to-improve-your-accessibility/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>One year blogging!</title>
		<link>http://arjaneising.nl/me/one-year-blogging</link>
		<comments>http://arjaneising.nl/me/one-year-blogging#comments</comments>
		<pubDate>Sat, 27 Oct 2007 15:40:45 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
		<guid isPermaLink="false">http://arjaneising.nl/me/one-year-blogging</guid>
		<description><![CDATA[One year and a day ago I posted for the first time over here. The first months I updated frequently, but very short and most of the times links to other posts around The shortest post did contain only a few words so the content was not very fantastic back then. Now I take much [...]]]></description>
			<content:encoded><![CDATA[<p>One year and a day ago I <a title="The beginning of a blog" href="http://arjaneising.nl/me/the-beginning-of-a-blog">posted</a> for the first time over here. The first months I updated frequently, but very short and most of the times links to other posts around The shortest post did contain only a few words so the content was not very fantastic back then. Now I take much more time to write an interesting post.</p>
<p>The lat year was quite fun and interesting things happened. Back in February I <a title="My own company" href="http://arjaneising.nl/me/my-own-company">set up</a> my own business. Together with many others <a title="Cheers to Fronteers" href="http://arjaneising.nl/current-work/cheers-to-fronteers">we started Fronteers</a>, an association for front-enders. I also went to some <a title="Meetings" href="http://arjaneising.nl/category/meetings/">cool meetings</a> the past few months where I met many great web designers and developers. Also notable is that I&#8217;m a <a title="Being judged by me" href="http://arjaneising.nl/me/being-judged-by-me">judge at CSS Off</a>.</p>
<p>The next twelve months there are some things that will happen. First, I will turn nineteen next month. Also in November I might do several presentations related to front-end developing (all still pending). In may 2008 I hope to pass high school (I&#8217;m looking forward to University yet). Of course I&#8217;ll update my blog if there is something interesting.</p>
<p>By the way, I signed up for Twitter earlier today, so if you&#8217;d like to read personal stuff you might want to <a title="Twitter / arjaneising" href="http://twitter.com/arjaneising">follow me</a>.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/one-year-blogging/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Green</title>
		<link>http://arjaneising.nl/html/green</link>
		<comments>http://arjaneising.nl/html/green#comments</comments>
		<pubDate>Mon, 15 Oct 2007 19:07:04 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>HTML</category>
	<category>Microformats</category>
	<category>PHP</category>
	<category>Design</category>
	<category>Socialization</category>
		<guid isPermaLink="false">http://arjaneising.nl/html/green</guid>
		<description><![CDATA[Today it is Blog Action Day. One day to think about the environment. To think about what you can do for a better environment, even if it is a bit, since a better environment starts with yourself. The color green plays an important role in this, since almost everybody associates it with a better environment.
In [...]]]></description>
			<content:encoded><![CDATA[<p>Today it is <a href="http://blogactionday.org/">Blog Action Day</a>. One day to think about the environment. To think about what <em>you</em> can do for a better environment, even if it is a bit, since a better environment starts with yourself. The color green plays an important role in this, since almost everybody associates it with a better environment.</p>
<p>In the development of a web site green also plays a quite important role. Some people live for the green bar the <a title="The W3C Markup Validation Service" href="http://validator.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr> markup validator</a> shows when a web page validates. The green color indicates everything is good, and that is also what a better environment is. Unfortunately nothing can be validated on how good they are for the environment, even web sites not.</p>
<p>Another green aspect of web development are <a href="http://microformats.org/">Microformats</a>. Microformats help people and computers interact with each other much easier, they are more balanced. Thinking about the environment also about getting a better balance between you and everything around you.</p>
<p>For the server-side programmers, I have this one: <a title="PEAR: the PHP Extension and Application Repository" href="http://pear.php.net/"><abbr title="PHP Extension and Application Repository">PEAR</abbr></a>. Their web site is green, but that&#8217;s not the only equality between <abbr title="PHP Extension and Application Repository">PEAR</abbr> and a better environment. <abbr title="PHP Extension and Application Repository">PEAR</abbr> allows every developer to share and grab code others developed. Developers can learn and safe time by looking at code by others, or be nice for colleague developers by sharing their code. A greener world also is good for others, and people can learn from nature in many ways.</p>
<p>I almost forgot graphic designers. It&#8217;s a fact a higher percentage of the designers uses an Apple Mac. So it is good to know Apple was tackled down by Greenpeace to build greener Apples. It is a result of the <a title="Greenpeace" href="http://www.greenmyapple.org/">Green My Apple website</a>.</p>
<p>Concluding I can say web designers and developers can help the world to be much greener. If you have more ideas, I would love to hear: just drop a comment.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/html/green/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Cheers to Fronteers</title>
		<link>http://arjaneising.nl/current-work/cheers-to-fronteers</link>
		<comments>http://arjaneising.nl/current-work/cheers-to-fronteers#comments</comments>
		<pubDate>Tue, 09 Oct 2007 21:59:01 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Current work</category>
	<category>Meetings</category>
		<guid isPermaLink="false">http://arjaneising.nl/current-work/cheers-to-fronteers</guid>
		<description><![CDATA[I just came back from Amsterdam, where Peter-Paul, Tom and I went to a notary to formally set up the association Fronteers. Fronteers, formerly known as the Guild of Front-Enders, is the Dutch association for front-end web developers (the guys and girls that know HTML, CSS and JavaScript).
After the (quite quick) visit to the notary, [...]]]></description>
			<content:encoded><![CDATA[<p>I just came back from Amsterdam, where <a title="Quirksmode" href="http://www.quirksmode.org/">Peter-Paul</a>, <a title="Primaire Berichten" href="http://greut.nl/">Tom</a> and I went to a notary to formally set up the association <em>Fronteers</em>. Fronteers, formerly known as the <a title="It’s all happening in Amsterdam" href="http://arjaneising.nl/current-work/its-all-happening-in-amsterdam">Guild of Front-Enders</a>, is the Dutch association for front-end web developers (the guys and girls that know <abbr title="Hypertext Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> and JavaScript).</p>
<p>After the (quite quick) visit to the notary, we went to a nearby café to celebrate the set up and also have our first meeting. We discussed some topics, nothing really new but more to have a clear view on what&#8217;s going on. We also hope to have the website ready soon, <a title="Krijn Hoetmer" href="http://krijnhoetmer.nl/">Krijn</a> is working on that.</p>
<p>For all Dutch front-end developers that have been in a winters&#8217; sleep for the past half year, as well as for the foreign visitors, a short introduction into Fronteers. It started April this year when Peter-Paul had the idea to bring the job as front-end developer to a higher level. The job itself isn&#8217;t respected within may web development companies, programmers and designers often do &#8216;the <abbr title="Hypertext Markup Language">HTML</abbr>&#8216;. Also, the <a title="Guidelines for the accessibility and sustainability of government websites" href="http://webrichtlijnen.overheid.nl/english/">Dutch web accessibility guidelines</a> are there for a time now, but the government and large companies don&#8217;t know which company can help them to build a web site compliant to those guidelines.</p>
<p>After the first two meeting we had over fifty interested front-enders, and that number grew once we made the idea public. Pretty quick there were plans for a conference (which <a title="I’m the future, and more about yesterday" href="http://arjaneising.nl/me/im-the-future-and-more-about-yesterday">took place</a> exactly three weeks ago), and also life was put into some committees for education, certification and Flash (and some more).</p>
<p>So that was a brief introduction into Fronteers. Next is the announcement of the web site, where new members can sign up. We guess the number of members now is about 70 people, pretty much for an idea that started just a half a year ago. If you&#8217;re interested, stay updated via our <a title="Frontendgilde" href="http://tech.groups.yahoo.com/group/frontendgilde/">mailinglist</a>. I see Tom wrote a <a title="Fronteers - de nieuwe belangenvereniging van front-end ontwikkelaars" href="http://open.info.nl/archief/2007/10/09/fronteers-de-nieuwe-belangenvereniging-van-front-end-ontwikkelaars/">nice article</a> as well about today, at the info.nl blog.</p>
<p>Cheers to Fronteers :)
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/current-work/cheers-to-fronteers/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>Review: DOM Scripting</title>
		<link>http://arjaneising.nl/javascript/review-dom-scripting</link>
		<comments>http://arjaneising.nl/javascript/review-dom-scripting#comments</comments>
		<pubDate>Sun, 07 Oct 2007 10:40:24 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>JavaScript</category>
	<category>Reviews</category>
		<guid isPermaLink="false">http://arjaneising.nl/javascript/review-dom-scripting</guid>
		<description><![CDATA[A while ago I bought the book DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith. The title says it quite well, this book is about using JavaScript and the DOM to extend the user experience of web sites.
The first chapter gives some background information about the history of JavaScript. [...]]]></description>
			<content:encoded><![CDATA[<p>A while ago I bought the book <a title="DOM Scripting: The Book" href="http://domscripting.com/book/"><cite><abbr title="Document Object Model">DOM</abbr> Scripting: Web Design with JavaScript and the Document Object Model</cite></a> by Jeremy Keith. The title says it quite well, this book is about using JavaScript and the <abbr title="Document Object Model">DOM</abbr> to extend the user experience of web sites.</p>
<p>The first chapter gives some background information about the history of JavaScript. Not as extensive as <a title="Review: ppk on JavaScript" href="http://arjaneising.nl/javascript/review-ppk-on-javascript"><cite><abbr title="Peter-Paul Koch">ppk</abbr> on JavaScript</cite></a>, but good for beginners. Turning the page to chapter two will let us learn the basics of JavaScript.</p>
<p>Other chapters will learn you how to use the <abbr title="Document Object Model">DOM</abbr> to manipulate the document and style of the web page. Also, a chapter about animation is included and that is not widely covered in JavaScript books I&#8217;ve read. In the last chapter you&#8217;ll use the discussed techniques to build <a title="Jay Skript and the Domsters" href="http://domscripting.com/domsters/">a web site</a> extended with JavaScript and of course the <abbr title="Document Object Model">DOM</abbr>.</p>
<p>I didn&#8217;t buy the book because I wanted to learn about the <abbr title="Document Object Model">DOM</abbr>, but more as a reverence and a source of inspiration to learn new techniques. The reverence part was satisfied by a nice chapter at the end of the book, including all <abbr title="Document Object Model">DOM</abbr> methods with details on how to use them. However, this book is not a great source of inspiration for a bit experienced front-enders.</p>
<p>The book explains very well on how and why to use graceful degradation, separated behavior and markup and backwards compatibility. For beginners that is really cool, I haven&#8217;t seen many newbie JavaScript programmers use those techniques and it is really good they are given good information on this subject. But as said, anyone who knows those techniques already will not be satisfied by this book.</p>
<p>You&#8217;re new to JavaScript and <abbr title="Document Object Model">DOM</abbr>, and are interested in this book? I can really recommend it for you. I think you might be want to read <a title="DOM Scripting: Web Design with JavaScript and the Document Object Model" href="http://books.google.com/books?id=LBTQ83bAz6QC&#038;printsec=frontcover">the preview at Google Books</a>, or the <a title="DOM Scripting: The book - Sample chapter: Best Practices" href="http://domscripting.com/book/sample/">sample chapter at the official website</a>.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/javascript/review-dom-scripting/feed/</wfw:commentRSS>
		</item>
		<item>
		<title>I&#8217;m the future, and more about yesterday</title>
		<link>http://arjaneising.nl/me/im-the-future-and-more-about-yesterday</link>
		<comments>http://arjaneising.nl/me/im-the-future-and-more-about-yesterday#comments</comments>
		<pubDate>Wed, 19 Sep 2007 21:19:29 +0000</pubDate>
		<dc:creator>Arjan Eising</dc:creator>
		
	<category>Me</category>
	<category>Current work</category>
	<category>Meetings</category>
		<guid isPermaLink="false">http://arjaneising.nl/me/im-the-future-and-more-about-yesterday</guid>
		<description><![CDATA[Yesterday the founding congress of the Guild of Front-Enders was held in Amsterdam. I was in the audience to listen to a few great speakers. After the congress the general members&#8217; meeting was held to vote for the ideas and the board of the Guild.
The congress
Stephen Hay (Cinnamon Interactive) was the first speaker, and held [...]]]></description>
			<content:encoded><![CDATA[<p>Yesterday the founding congress of the <a title="Gilde van Front-Enders" href="http://www.quirksmode.org/branche/">Guild of Front-Enders</a> was held in Amsterdam. I was in the audience to listen to a few great speakers. After the congress the general members&#8217; meeting was held to vote for the ideas and the board of the Guild.</p>
<h3>The congress</h3>
<p>Stephen Hay (<a href="http://cinnamon.nl/">Cinnamon Interactive</a>) was the first speaker, and held a great presentation about the Web Guidelines. He noted the importance, and gave a five tips to easily follow 80 percent of the guidelines.</p>
<p>Also, there were some code reviews. I saw two (there were three in total), the ones of Arjen Geerse (<a title="Lost Boys Nederland" href="http://lostboys.nl/">Lost Boys</a>) and Tom Greuter (<a title="Info" href="http://www.info.nl/">info.nl</a>). Both they presented how they organize the front-end within the companies they work for. In my opinion they have clear and good ways to develop internally, and for me as freelancer it was great to see a bit of how it works in larger companies.</p>
<p><img title="Arjen Geerse presents the way front-end is organized within Lost Boys" alt="Arjen Geerse presents the way front-end is organized within Lost Boys" src="http://farm2.static.flickr.com/1192/1408226074_6e8d3cdc51.jpg" /></p>
<p>The two panels of non-front-enders (managers and clients) were quite interesting. Unfortunately I haven&#8217;t a summary of the thoughts (if someone has: it is really good content to publish, so don&#8217;t wait!). Bobby van der Sluis (<a href="http://www.refunk.com/">Refunk</a>) presented his ideas on how the <abbr title="Gilde van Front-Enders">GvFE</abbr> could be there for Flash designers and developers.</p>
<p><img title="The panel of managers, lead by Peter-Paul Koch" alt="The panel of managers, lead by Peter-Paul Koch" src="http://farm2.static.flickr.com/1097/1407345039_f1d52f8d50.jpg" /></p>
<h3>The general members&#8217; meeting</h3>
<p>The general members&#8217; meeting gave some new ideas and points on how the Guild will take its next steps. The name (Guild of Front-Enders) will be compared with other, new names. Members can vote for the name they want. There will be a working group for certification that will have a clear proposal before April 1st 2008 (no joke). And that was only the policy of the Guild.</p>
<p>The board was also a point. As there were rumors about the chairmanship, all members were allowed to also vote for the chairman they wanted. Peter-Paul Koch eventually made it to chairman.</p>
<h3>So, what about me being the future?</h3>
<p>The chairman is not the only board member, there were three candidate board members as well, and I was one of them. The three of us were all allowed to introduce ourselves to everybody. My introduction began with: <em>&#8216;I am young, I am the future.&#8217;</em><!--sorry, no fancy q-element over here at this very moment-->. I wanted to make clear that I do not only want to care about the future of the Guild itself, but also about front-end developers in general. There are many professionals, but there will always be a need for new talent. With <a title="Meeting with pizzatime" href="http://arjaneising.nl/current-work/meeting-with-pizzatime">my participation</a> in the Education Commission, besides being part of the board, I think I can care about that. By the way, I was voted right into the board.</p>
<p>More photos can be found in <a title=" Gilde van Front-Enders oprichtingscongres" href="http://flickr.com/photos/arjaneising/sets/72157602084195585/">my Flickr set</a>.
</p>
]]></content:encoded>
			<wfw:commentRSS>http://arjaneising.nl/me/im-the-future-and-more-about-yesterday/feed/</wfw:commentRSS>
		</item>
	</channel>
</rss>
