Latest Blog Posts

Quick UX tip: fill the multi-line link gaps

When styling links (or any text which could eventually become a link) that could break into multiple lines, double-check your line-height. Not only for the sake of legibility, but to make sure a gap between two lines does not occur. Take a look at the following example I found on the web:

Bad line height example
An example of a gap between two lines. I added the border and background color in the inspector.

If your mouse hits the white gap between those two lines and you click, nothing happens. The user expectation is of course different: the user expects to land on a new page. This can be very frustrating and confusing for your users, but thankfully, a fix is very easy: adjust your line height (or even padding) and the problem is gone.

On football kit contrasts

Here in Croatia, the domestic game people follow most is the one between Dinamo and Hajduk — the blues and the whites. But when the two teams clash, the kits they use aren’t all blue or all white. Instead, one team has blue shirts and white shorts, while the other one has white shirts and blue shorts. What is someone’s idea of good contrast turns into a problem. Here’s how that looks, roughly:

Dinamo vs. Hajduk
My illustration of a typical Dinamo vs. Hajduk game. Having a hard time distinguishing the teams?

To make things even worse, each side’s kit has details (numbers, sponsor logos, etc) in both blue and white, which naturally makes it even harder to distinguish. Your big screen TV won’t help you much — you’ll have a hard time picking out who is who and it all becomes a bit of a blur.

I’d propose a very simple solution. Why not use kits like these:

Dinamo vs. Hajduk
An illustration of kits with much better contrast. One team wears blue, the other wears white.

Hopefully, someone picks up on this. Naturally, this problem is not limited only to domestic game here in Croatia. I sometimes detect similar problems in other leagues and international games. Fingers crossed we won’t have too much trouble figuring out which team is which in this years World Cup.

Planning your work day

Only plan for 4-5 hours of real work per day.

― David Heinemeier Hansson, 37signals

This quote has a lot of truth in it, at least as far as my own work day goes. I once read (not sure where) another good piece of advice I tend to stick to: plan only what you can fit onto a post-it. This is also very useful to keep realistic goals.

Whether working on small scale or large scale projects, keeping things in perspective is very important for me. I can sometimes lose the perspective, especially during projects that I work on for extensive periods of time, if I don’t keep proper track of my work. In that case, it often feels like I’m standing still. It’s not a particularly nice feeling, busting your ass for weeks and weeks, and not have the satisfaction of feeling good progress.

My day usually consists of 4-5 hours of actual work I plan in the tickets. The rest gets filled with meetings, research, correspondence, and so on. I try to avoid longer work days because I don’t think they are particularly healthy. Your relationships might suffer, your body might, but your future work might, as well. Leaving enough room for reading and learning is imperative in the web industry.

Planning my tasks first thing in my work day is a good strategy. Besides using a ticketing system (my frontend team usually uses the feature-packed Assembla, while I sometimes use Trello), I like to keep a private, simple file, where I keep track of my own stuff (idea via Carl Sednaoui). Here’s what might be inside:

# 05. 04. 2014. - Project Name

[x] - first todo item
[ ] - second todo item

Simple, but effective. A list like this helps me review my work (and remind me what to write in git commits!). I simply add an “x” when I complete a task. At the end of the day, I have a clear idea of the stuff I did. Whatever I did not manage to complete, I switch to the next day. A system like this teaches you what you can fit into your work day and not go overboard.

Read more in the blog →