Browser support table – for responsive websites

Background

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

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
[code]
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>
[/code]

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

.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* … */
}
[/code]

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

[code]
.embed-container img{
position: absolute;
top: 0;
left: 0;
width:100%;
}
[/code]

Voila.

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

[code]
@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;}
[/code]

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 .


Y U NO CARE ABOUT US?

Continue reading “It’s only 1%”

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