doodles, drawings, design and web-development

Here's what I've been learning

References to articles, press-releases, news, tutorials and more.

System fonts – choose wisely

I've always known Arial makes me uncomfortable, but could never quite put my finger on "why". Spend some time on Matthew Butterick's "Practical Typography" and instantly learn something you didn't know before about Typography.

But to ty­pog­ra­phers, Ar­i­al con­tains none of the con­sis­ten­cy and bal­ance that makes Hel­veti­ca suc­cess­ful. For in­stance, the ends of the low­er­case a, c, e, g, s, and t in Hel­veti­ca are ex­act­ly hor­i­zon­tal. In Ar­i­al, those ends are sloped ar­bi­trar­i­ly. Read­ing Ar­i­al is like try­ing to have din­ner on a tip­py restau­rant table.

View original post


HTML slideshows that can be hosted on GitHub. Very nifty presentation tool

A framework for easily creating beautiful presentations using HTML. reveal.js comes with a broad range of features including nested slides, markdown contents, PDF export, speaker notes and a JavaScript API. It's best viewed in a browser with support for CSS 3D transforms but fallbacks are available to make sure your presentation can still be viewed elsewhere.

View original post

To target blank or not to blank

Opinions online about forcing links on a website in a new tab seem to agree with what I've always resonated with; Leave the choice up to the user for internal links and force a new tab for external links (to reduce the amount of recorded bounces in analytics). This article has an interesting exception to this rule.

Of course, there are exceptions: in some situations it is right to open links in new windows and wrong to open links in the same windows. Jakob Nielsen (http://www.nngroup.com/articles/open-new-windows-for-pdfs/) suggests to use new windows in case the linked document is not a .html-document. In this case he recommends to use a pop-up-windows without browser control toolbar. In such case it is reasonable to let the user know upfront how the links will be opened.

View original post

Author information in (Google) search results

Screenshot of Google search results displaying a picture of the author's face

Originally, I learnt about adding your picture into search results from Carl Spies, but only managed to get this working today. It seems quite simple to implement and in most cases it is. Here's what I learned today, that was less than obvious in most of the online tutorials:

  • Special characters in the author name counts as a different spelling to Google (the author name must match the name of the Google+ profile exactly)
  • You can test if this works from here: http://www.google.com/webmasters/tools/richsnippets
  • Some tutorials suggest that you can link your author byline to your profile on the same site and additionally link your profile page to Google+ profile. This doesn't appear to work when using the tester.
Google is piloting the display of author information in search results to help users discover great content.

View original post

Using CSS transitions

Transitions, like the drop-shadow, can easily make the amateur obvious, unless used with extreme subtlety to add a touch of realism in an otherwise two dimensional environment.

CSS transitions, which are part of the CSS3 set of specifications, provide a way to control animation speed when changing CSS properties.

View original post