Responsive Layout

A responsive web layout is one that adjusts itself automatically to suit the browser viewport size. The growing number of different devices that web pages can now be viewed using means that the possible range of viewport sizes is now far greater than ever before. Long gone are the days where you would expect pages to be viewed full screen on a desktop computer. Your page may be viewed fullscreen on a handheld device where the viewport size is very small, it might possibly be viewed fullscreen on a desktop computer, or with the now rapidly increasing sizes of screens used with computers the browser may only use a part of the screen.

With such a large range of viewport sizes to cater for, designing a single way for our page to be laid out makes no sense. What we need is a way for our page to adapt itself to the viewport size and not just simply display itself at a fixed size requiring people to scroll the page in both the vertical and horizontal directions when their viewport is too small for your chosen layout. Having the page adapt itself to the viewport is what we mean when we say that the page is responsive.

There are at least three things that you can make use of in making your page responsive.

The simplest way of making your page content responsive is to define all of the widths using % so that the width of all of the content uses the same fraction of the width of the viewport regardless of the viewport width. So if you have two columns using 25% and 75% respectively for their widths then the narrower column will always use exactly one quarter of the available width. This approach worked fine by itself when only computers were being used to display the page and the expected viewport widths did not vary a huge amount but once you get to very small and very large devices this approach has problems. When a given column gets too narrow its content will no longer fit and can cause the container to take up more space that the space you defined. That gives us a minimum viewport width where the layout will work. Make the column too wide and people will lose track of which line they were reading when they reach the end of one line and try to move on to the next. This effect is dependent on the size of the text and somewhere around 30 to 35 em is recognised to be the maximum width you should use for text columns.

If you use percentages for all of the measurements in the page then your page effectively zooms in and out to suit the viewport size. This can overcome the too wide problem but can make the too narrow problem worse as the text may become too small to read even before the column gets too narrow to fit the content.

A second way to make your page responsive is to float the columns of content. Using this approach, columns will automatically reposition themselves under the other columns when the width becomes to narrow for all to fit across the viewport at the same time. Depending on whether you float:left or float:right the rightmost or leftmost (respectively) column will move under the others when there is insufficient space for them to fit side by side. I like using this approach with photo galleries where it means that as many images as will fit appear on each row of images in the gallery and how many to display n each row is determined by the width of the viewport.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow