After so many month of hard work I’m happy to announce my book »Responsive Webdesign – Reaktionsfähige Websites gestalten und umsetzen«. It’s a German book about designing and implementing responsive web design and it covers the important things that came up in the last 2 years.

For me it was a great experience not only writing this book, but also designing the cover and page layout. I learned a lot about all the processes involved creating a book and how time consuming it is.

A big thanks to my wife Sarah who gave me the time and support through many all-nighters and all the hassle around creating a book. Also many thanks to all the people that helped me, foremost, my technical editor, Christian Schäfer (@derschepp)!

If you happen to speak German, grab a copy here.

I don’t write much on this blog, but this conference needs a few lines of praise. I’m sitting in the train back home from the great beyond tellerrand conference that took place in Düsseldorf on Monday and Tuesday and some accompanying workshops on Sunday before.

The organisator Marc Thiele, who you may know (I didn’t) from previous FFK events, did an amazing job bringing together many great speakers from all over the world, talking two full days about web design, web development, typography, content strategy, usability, accessibility and so on, covering many fields of the web. It was a great mixture of topics and everyone could find worthwhile infos in any talk. I for example am a Javascript noob, but the two speakers covering that topic, Seb Lee-Delisle and Jake Archibald, made it very funny and easy-going even for those non-programmers like me. This was exactly the “beyond tellerrand” idea, meaning to think outside the box and learn things beyond your field of expertise.

Same was true with the presentations of Steph Troeth and Stephanie Hay, talking about UX and content strategy, topics that are often not considered that much in smaller projects. They both also had some worthwhile and enlightening information for me as a designer.

The most interesting presentations for me were those of Yves Peters, Simon Collison and Jon Tan. Especially Ives Peters rocked it in the evening session on Monday with an easy going and funny talk about typography in movie posters and how Trajan is involved in it. He did the insane work of viewing through 16,000 movie posters over the past 20 years to see how often Trajan was used in it and to prove that there was no connection between Oscar-winning films and the use of Trajan in their movie posters. He also showed a little video with designer Gavin Berliner talking about floating heads on movie posters, containing the quote of the day:

You know you’ve made it, when your head’s got a little bit bigger«

I don’t want to list every talk here as it’d be too long, but all in all it was a great event with many top-class people on stage.

Many big thanks to Marc for taking the risk for organising this event. It was the first conference of this kind in Germany, bringing together well-known speakers from all over the world without having those boring Microsoft or Adobe sponsored speakers on stage and still keeping the price on a really low level. The venue was really cosy with all the little round tables with table lamps. I didn’t take any photos but you can find some on flickr.

Everyone that stayed at home for no valid reason should be worried about not have taken part! Well, as far as I know, there will be a second chance next year to attend.

Already looking forward to it!

I’m just wondering how to use the header and footer element the right way.
Although those elements are not meant to be presentational I most often find people using a likewise presentational structure for marking up their articles (header always on top, footer at the end):

<article>
	<header>
		<h1>This is my headline</h1>
		<!--Some additional info like pubdate and author-->
	</header>
	<div class=“entry“>
		<p>…</p> 
		<p>…</p> 
		<p>…</p> 
	</div>
	<footer>
		<!--Some additional info like where it is archived and some tags-->
	</footer>
</article>

Based on research, mood, our design or whatsoever we decide which content to put into the header and which to put in the footer. So we decide rather presentational like “Should this be on top? Ok, let’s put in the header” or “Should it appear at the end? Let’s put it in the footer.”

Wouldn’t it be better to think the other way around: “We have this piece of content. What’s the appropriate element to mark it up, header or footer?” Let’s say we put the author info into footer because the spec says so. If we then decide to put the author info on top, I think it should look something like this:

<article>
	<h1>This is my headline</h1>
	<footer>
		<!--author info and copyright info goes here -->
		<!--Some additional info like where it is archived and some tags-->
	</footer>
	<div class=“entry“>
		<p>…</p> 
		<p>…</p> 
		<p>…</p> 
	</div>
</article>

The spec also says that the footer element doesn’t need to appear at the end of a section, so this should be ok.

But what if we want to show some additional info at the end of the section, can we use another footer element within that same section?

Could likewise the header element appear at the bottom with some info like table of contents, as the spec suggests?

What do you think?

I read Elliot’s first post of the ’new’ year a few minutes ago about joining Chris Shiflett’s idea of revitalising blogging again. This idea is great as I feel similar when it comes to blogs.

For me, blogs lost a bit of its relevance lately and when I look into my feed reader I see that I’m not alone with that. Many web personalities I enjoy reading didn’t post more than one or two posts throughout the year 2011. And many blogs posting on a regular and nearly daily basis are not worth reading as they deliver only those “XX things you should know about …” list post. I know that I’m much too convenient (and sometimes too busy) when it comes to write a post, but it seemes that I’m not alone with this these days.

So let’s revitalise blogging!

What I like most about blogs I subscribed to is

• the reasoning behind an opinion/statement that Twitter can’t provide
• solutions for day-to-day problems
• short and thoughtful posts
• the personality/style of the writer

Well, I think „short and thoughtful« covers it best. And as always, quality beats quantity.

Currently I’m developing a website where I wanted to take advantage of the CSS property background-position-y to save some time and code while positioning a CSS sprite:

li:nth-of-type(1) a {
	background-position:0 0;}
li:nth-of-type(2) a {
	background-position:-35px 0;}
li:nth-of-type(3) a {
	background-position:-70px 0;}
/* One hover declaration fo all li-elements */
li a:hover {
	background-position-y: -30px;}

Update: Look at comment 13 in Jonathan’s post for a better example.

It works great in Safari/Chrome, IE, but I was surprised that it’s not working in Firefox and Opera.

Some research later I found out that this useful CSS property isn’t even part of any specification. Jonathan Snook wrote about that a year ago, complaining about the same thing. There where made some good points in the comments as well.

As far as I know there is no way of declaring a single background position without writing the other one. I can’t find any argument why it isn’t in the specs. Also, there’s no work around. Maybe you’ve a solution?

And lastly, the question of immersion. 3D films remind the audience that they are in a certain “perspective” relationship to the image. It is almost a Brechtian trick. Whereas if the film story has really gripped an audience they are “in” the picture in a kind of dreamlike “spaceless” space. So a good story will give you more dimensionality than you can ever cope with.«

Film editor and sound designer Walter Murch makes some good points about constrains in 3D films. I’m one of those having problems watching 3D and I also think that 3D is absolutely overused today. Happy not to be alone.

I could write a whole lot about what was good and bad last year and what to improve in 2011. But as my goals will change over the year anyway, it’d be best to write about what’s important to me right now.

My business website

Oh my! This one is scheduled for a long time. It’s just a little unfinished single-page that need some care. There are no excuses for not having a decent site here. I promise improvement.

My blog

When I launched it back in May it got quite some positive reactions throughout the community and some mentions in various blog posts and CSS galleries. I was really happy and thrilled lately when I saw my site popping up on Nick La’s Webdesigner Wall as one of the best designs in 2010. Feels great to be on one list with those big names. I take this as a motivation to work on further improvements.

A bigger problem, however, is blogging itself. I failed to write any blog post over the last couple of month which is really annoying. I thought that breaking up content into easy to publish parts like images, quotes, links would help me to publish things more often. I was wrong. The main reason is my dislike to post when I’m working on busy client projects. Need to find a way to get rid of this and to give blogging a higher priority.
Another reason is the way I configured Textpattern, but this is something for another post.

(Web) Typography

There’s much going on since Apple supported OTF and TTF fonts via @font-face in Safari 3.1. Now, three years later we have many web services that deliver web fonts and more and more typefaces can be used on a website.
I played a lot with Typekit and the likes lately and while everything is great on a Mac, most fonts don’t look well on Windows, especially XP. That means we need to be very careful regarding the fonts we chose. Also, with the upcoming browser support for WOFF (Web Open Font Format) we’ll get increasing typography features.
There are many chances (accompanied by responsibilities) but also some pitfalls.
So my plan is to focus on and learn more about web typography in 2011.

Work

So, these are my main topcis for the next weeks, besides lots of client work, of course. I have to say that I’m currently working on some interesting projects with really great clients. So, all in all, the year is starting very well. Cheers!

While styling unordered text lists for my blog I was searching for a way to change the color of the bullets. There is no way to achieve this with the standard list style types if you don’t want to use additional markup. But there’s a solution by only using CSS – and it’s all CSS 2.1, so even IE 8 understands that.

Here is the code we use

The HTML: A normal unordered list

<ul>
<li>This is a nice list</li>
<li>This is a nice list</li>
<li>This is a nice list</li>
<li>This is a nice list</li>
</ul>

The CSS

li {
  list-style:none;
  margin-right:40px;}
li:before {
  color:#b4461f;
  content:"•"; 
  font-weight:bold;
  margin-left:-16px;
  padding-right:7px;}

The most important thing is the pseudo class :before which you can use to add visual elements without additional markup. Herein we put a bullet with content:“•”;. You can find the bullet on your Mac by pressing option-8 (option-ü on a German keyboard) or by pressing alt+0149 on your PC.

I also made the bullet bold because it might look too unobtrusive otherwise. Add some margin and padding to put the bullet in the right position and you’re done.

A positive side effect is that the new bullets are a little bit smaller, making them look nicer and less obtrusive than the defaults ones.

Here is a sample page comparing the standard and the enhanced lists. There are also some little differences regarding the Typeface you’re using.

During the weekend I thoroughly enjoyed reading the »8 Faces« magazine edited by Elliot Jay Stocks. I have to say it’s a long time since I had so much pleasure browsing and reading a magazine from cover to cover. So I felt to write a couple of lines about it.

A different approach

Compared to other magazines in this price range »8 Faces« is quite different. First of all, it only serves one single topic: typography. The qualitiy is very high, it features some nice print finishing on the cover and it has (for magazines) an untypical square format of 21 × 21 cm. Also, it’s not full of advertising, just about 15 tastefully and well presented ads, which are not annoying, but rather interesting to look at.

The content

The ambiguous title says it all: The 8 faces you see on the cover should name 8 typefaces based on the question: »If you could use only 8 typefaces for the rest of your life, which would you choose?« Well, that’s enough to fill 75 pages of great interviews and articles about typography. Elliot got some well-known faces for the first issue and it’s really interesting what say have to say.

The idea of choosing the interview style instead of just writing articles is great, because it adds much more personality, feels more casual and makes the reading easier. To make it even more enjoyable, the pages are mixed up with great illustrations, screenshots and photos of the interviewees and their work.

My two cents

Elliot did an amazing job creating this wonderful piece of good content and art.
All in all the magazine left me with a bunch of inspiration and immediately made me do something creative and play around with typography. It’s definitely something you can leave on your shelf and pick it up every now and then, just to read a few lines or look at some great typefaces or type-related artwork.

There’s nothing negative about this magazine and as it’s the first issue it also wouldn’t be fair to grump about anything, but I’d like to mention a few things that could be improved:

• The magazine is separated into two parts, the interviews and the additional section with articles, ads, artwork and the likes. Maybe it would be better to mix the interview section up with the other content to make it more diversified.
• The 8 typefaces are presented in 8 pt, which for some is a bit too small to view their details and differences and makes them look a bit fuzzy.

I’m already looking forward to issue no. 2 in November and I’m sure it will be even better than no. 1! Hats off to Elliot for taking the time and having the courage to release a print product in the digital age. Get the PDF here for only £3.