Retrospective exercise: Wheel of Five

There are a lot of retrospective exercises out there and most of them will achieve the same goal. But when it comes to find things to improve I have found this particular exercise a very good help. The result is often a good list of improvements, but I also like that it forces the team to suggest things that they should stop doing.

Wheel of Five

Continue reading Retrospective exercise: Wheel of Five

Digital Project Manager Tools

Here are 5 of the tools that I use on a regular basis as a Digital Project Manager. You get a long way with the three E’s, the three fundamental tools: Evernote, Email and Excel, but I need more tools to help me and the team keep a high pace. Here are some of the tools that I can really recommend and that really bring some extra value.

Continue reading Digital Project Manager Tools

Digital Project Manager Reflections

Post it—pHYRFh-oEA5j3

It’s that time of the year! It’s 2014 retrospective time and as a Digital Project Manager I always strive to get better at what I do.

Here is my list of reflections about the job I do.

Continue reading Digital Project Manager Reflections

Browser support table – for responsive websites


The following document is a modification of a browser support standards document created by BBC. The document was outdated and did not cover mobile browsers so I did some modifications and simplifications. The document is meant as a guide for Responsive Web Design projects and will give developers and clients a hint of what browser support they can expect and will give the development team guidance on how they need to focus their testing. It is not meant as a contract between the development team and the client. It is important that the development team use web standards, and browsers that are not mentioned on this list (such as TV browsers, game consoles, fridge browsers and smart watches) will probably work well, but they will not be actively tested by the development team.

Continue reading Browser support table – for responsive websites

How to set inner shadow on text in CSS (in webkit…)

Unlike the box-shadow property, inner-shadow does not support the inset attribute. The following code is NOT valid:

Which is a bummer, I really wanted to style the logo of my site in CSS and not use an image, font or SVG for it. But I came over a clever hack that solves the issue for us.

Continue reading How to set inner shadow on text in CSS (in webkit…)

Responsive images – how to lazy load and multiserve images

I recently wrote about how we can prevent browser reflow when serving up flexible images by reserving space for the image so that the page will not reflow when the image is downloaded by the browser. This is done by using a padding-bottom trick that enables us to specify the height as factor of the width. This is a technique that works especially good for slow connections and slow CPU’s.

Continue reading Responsive images – how to lazy load and multiserve images

Responsive images – how to prevent reflow

This is what we have been taught in the past: “To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.” (Source).

And in responsive web design we are taught to not specify width and height of images, but to make them flexible with: img{max-width:100%;}. So in order to get the flexibility that responsive images offers we need to sacrifice some rendering speed. Right?

I am sure you have experienced reflow on mobile sites on a bad connection: you load a page, start to read the page, scroll down and then the content seemingly “jumps up and down” because of the reflow. This is because the browser does not know the dimensions of the image so it cannot reserve space for it. So when the image is loaded, it will have to insert it into the page, and move away everything that is below and right of it and do a reflow.

UPDATE: The following technique is based on an article I wrote about responsive embeds that again is based on an article by Thierry Koblentz called Creating Intrinsic Ratios for Video.

I have put up a test page that simulates a slow connection so that we all can experience the pain together. To feel maximum pain, scroll down right after you load up the page. Experience reflow.

Still there? Great, hope there were minimal casualties.

A solution

There is one prerequisite to this solution: you need to know the aspect ratio of the image. Let me explain the technique.

No more img{max-width:100%}

Yes, that is correct. We are not using one of the most fundamental things in responsive web design. Instead we use the responsive embeds technique. This means that we set a wrapper div around the image and use the “padding-bottom” trick to make a div that keeps a certain aspect ratio:

The markup
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>

The CSS, we add a few aspect ratios that we can use in our code:
.embed-container {
position: relative;
height: 0;
overflow: hidden;

padding-bottom:56.25%; /* 9/16*100 */

padding-bottom:75%; /* 3/4*100 */

padding-bottom:100%; /* … */

Then, it’s just a matter of setting the image to position:absolute and top left aligned:

.embed-container img{
position: absolute;
top: 0;
left: 0;


Sidenote: You can also use preprocessors like LESS to calculate the padding for you:

@ratio-16-9: (9%/16%*100%);
@ratio-4-3: (3%/4%*100%);
@ratio-1-1: (100%);

.ratio-16-9{padding-bottom: @ratio-16-9;}
.ratio-4-3{padding-bottom: @ratio-4-3;}
.ratio-1-1{padding-bottom: @ratio-1-1;}

How about max-width?

Since height of the div is calculated based on width on the parent div, we need to set max-width on the parent div if we want to limit the size of the image. This can be a drawback, but since the whole technique is based on that you know something about your images, it should be possible.

The result – demo

And if we use the same technique as before to simulate a slow connection you can see that we now have a reserved space for the image (I use black background for clarity. And again, scroll down to experience the lack of reflow): The demo without reflow!

In this technique we reserve space for responsive content without specifying widht or height in pixels and we are not using JavaScript to calculate dimensions. Comments? Does anyone have alternative solutions?

UPDATE: A follow up article on how to also lazy load and multiserve images using this technique is here.

“It’s only 1%”

I hear this again and again. Decision makers look at their statistics and say: “We do not care about this device or browser, it’s only 1% of the current traffic”.

There are many things that are wrong and naive about such a statement. I am going to point at four things that I think you need to consider before you make a decision about supporting a browser or device based on statistics from a current site .


Continue reading “It’s only 1%”

Mobile parallax

It has annoyed me for some time that parallax sites does not work on mobile devices (or rather, people that make parallax websites does make them work on mobile). But at a workshop at @ValtechSweden we came over stellar.js which is a script that together with iScroll4 will make this work on mobile devices as well. Of course, it is not just a matter of using the script, you will need to apply some responsive magic to make it work, but it is actually quite promising. I set up a very simple demo here:

WARNING: Kids, please try this at home, but think twice before applying it at work. Parallax effects may cause enthusiastic clients, but very sad and dizzy end users. And kittens may die.

“Native applications are catching up to Web applications”

This quote and excellent observation, comes from Aral Balkan and is from the new Smashing Book #3 (Which I also had the pleasure of reviewing).

I’m not going to go into a lengthy blog post about web vs. native, Aral does a good enough job at that, but this is an interesting way of seeing the current situation from another perspective: Native applications are now getting features like deeplinking, automatic app updates and can in many ways be built to behave more like the web. While on the other side, the web strives to behave more like native by getting more access to the device.

If we disregard Angry Birds, the most used app in the world is Facebook. And it’s a hybrid app. Clear evidence that picking the best of both worlds is the way to go? In many ways, it’s a compromise, but hey, isn’t everything we do a compromise?

What do people use Modernizr for?

A question popped to my head when doing some work on a site that is using Modernizr: “What do people mainly use Modernizr for?”. I asked Paul Irish on Twitter and he generously shared the last 30 days of Modernizr build data. It does not say anything of how much people actually use the features, but it says something about what they intend to use. I took the stats and did a simple sort and count (without weighing in how much each build is used…).

Continue reading What do people use Modernizr for?

Hosting your own git repo with Gitolite

After using CVS (A.K.A. “Crappy Versions System”) for way to long we decided to enter the twentieth century and move our code to Git. We had used private Github repos for some smaller projects, but were reluctant to move the whole organizations code to Github, so we started to look for alternatives. We have a lot of consultants, partners and short term employees working with our code so we needed a good way of controlling access to the repos and preferrably without giving each of them a unix user on the server where the repo is hosted. And guess what, Gitolite gives us all that.

Continue reading Hosting your own git repo with Gitolite

RESS in peace

I just finished another talk about “RESS – Responsive Web Design + Serverside Components” at #DDayConf in Helsinki.

If you are on a flash enabled device, you can check it out at the Prezi site.

If not, you can look at the slides at Slideshare:

Responsive images + server side components

People, I’m sorry. I know we do not need another post about responsive images, but I got inspired to try another responsive images approach after reading the article “Responsive Images: How they Almost Worked and What We Need” by Mat Marquis on A List Apart. My approach is to use the proposed <picture> tag and implement it using server side components.

Continue reading Responsive images + server side components

Responsive embeds – device testing

I recently wrote about responsive embeds and how you can scale video and iframes to fit on a responsive website. I have now done tests on some mobile devices, and the results are pretty good for the responsive embed technique; but not so good for the content inside of the embed…

Continue reading Responsive embeds – device testing

Device detection vs. Feature detection

Comparing Server side device detection and Feature detection is like comparing a hammer to a screwdriver. You can probably get a nail in a wall with a screwdriver and you can probably get a screw in a wall with a hammer. In this post I will try and explain by example how you should use device detection together with feature detection and that they are not to sides of the same coin.
Continue reading Device detection vs. Feature detection