Vertically Responsive Design : Keeping Things Above The Fold

Responsive Design

In last couple of years you must have seen countless examples of responsive designs. Most of the websites are either already responsive or are planing for a responsive re-design. As we see more and more devies, this trend is likely to continue in near future as well. Pete Cashmore from Mashable has already declared 2013 as the year of Responsive Designs.

Developers mostly uses Fluid Grid, or Media queries to make the website adaptive. The basic technique is to viewport width and render content according to that. You can refer these excellent articles, for more information on Responsive Design.

Vertically Responsive Design

Recently I came across a very simple yet brilliant technique to adjust the content based on available height as well. The website which implement this is of San Francisco advertising agency, Venables Bell and Partners. Just go and have a look at the website, also try changing the height of the browser.

You must have noticed that the content width also changes as per available height. The information blocks are resized while maintaining aspect ratio. I found this technique very useful, as it can also be used to show important messages above the fold. This could surely increase the visibility of important links, buttons.

Pure CSS Approach

Everything with the Vanables website was perfect expect for the fact that it was using Javascript to figure out viewport size. Viewport is then used to calculate container width/height. As today’s browsers are getting more and more advanced and with these new CSS capabilities I thought similar functionality could also be replicated using CSS only. I quickly mocked up a demo which was purely built using CSS3 without using any javascript.

You can have a look at the demo here:

Vertically Responsive Design Demo

Try playing with the browser height, and watch how “Sign up” block keeps at the bottom of the page. The container auto scales based on the viewport size while maintaining aspect ratio.

Now some code

The CSS technique which came for the rescue are Viewport Percentage Length and CSS Calc. The main css properties for the upper block are

.container{
	min-width: 600px;
	max-width: 1080px;
	min-height: calc(690px * (90/150));
	height: 90vh;
	width: 150vh;
}

Setting height as 90vh, means 90% of the viewport height. Later we simply can relatively place signup container inside that. Utilizing Viewport Percentage Length make it easier to keep the aspect ratio maintained at any given viewport size.

Browser Support

Viewport Percentage Length is supported across Chrome 21+, Firefox 19+, IE 10+, Safari 6+. For detailed and updated browser refer CanIuse : Viewport Units and CanIuse : CSS Calc.

In my opinion its pretty interesting way to position important content. What your say on this?

One Response

  1. Lanti #

    Definitely interesting! Can it be a solution for vertically resizing images in a horizontal div, for example, photographer portfolio websites? In the past I used javascript to this, which was fine, but pure CSS solution will be much better. But I don’t think it can be work for next/prev JS script, because in this case maybe JS doesn’t know the calculated aspect ratio of the image, but maybe I’m wrong.

    Reply

Leave a Reply