pdf icons

What Is A Responsive Webpage

Any web page, whose content can be read equally comfortably across different (display) screen sizes and pixel densities, is called a responsive web page. A responsive website is one which delivers all its pages such that each page can be viewed comfortably across different (display) screen sizes and pixel densities.

Translated, this means that site visitors can access and view the website’s pages using various devices, such as iPhones, iPads, Android phones, Android pads, net books, note books, laptops, and desk tops, all of which have different display screen sizes and pixel densities, and they will be able to read webpage content quite comfortably.

Responsive web pages always have the content they display held in place using a grid, (i.e. rows and columns). It’s this grid that shapes / determines the layout of the content of the web page. When creating a responsive web page, there are normally four different (grid based) web page layouts used.

They are:

  • Fixed-width layouts
  • Liquid (or fluid) layouts
  • Elastic layouts
  • Hybrid layouts

Fixed-Width Layouts

In fixed-width layouts, the width of the web page is bound to a fixed number of pixels. Generally 960 pixels.
This is because over time website developers have found 960 pixels is the best size for grid layouts, because 960 is easily divisible by 2,3, 4, 5, 6, 8, 10, 12 and 15 (i.e. the math required to craft the columns for the grid uniformly is relatively easy to do with 960px as the base width size).

Even today, fixed-width, 960px web page layouts, are among the most commonly found in websites. Very likely the sheer rigidity of such a fixed layout size offers the website developer a sense of stability and control. If the width of the web page is known across all Browsers and devices, graphics and text the essential components of all web pages can be created with precise control across all the Browsers and devices used to access the web page.

With the fixed width approach, designers must keep careful track of every aspect of the web page to make the website content clearly visible across a large number of screen sizes, pixel densities and Browsers.

The wide variety of devices available today that can display web pages, as well as the great variance of screen sizes and their pixel densities, makes creating a single webpage that displays all its content properly to the site visitor irrespective of the device used to access the website, quite a challenge. This challenge completely outweighs the use of a fixed-width design for the website’s web pages.

Attempting to display a fixed width web page on screen sizes smaller than 960 pixels, without the irritation of horizontal scrolling, is a common problem. Today, screen sizes smaller than 960 pixels are very common:
i.e. iPads, Smart phones, Pablets (eg: Samsung Galaxy Tab I and II) and so on .

When the web page cannot be displayed fully within the screen size available, a horizontal scrollbar will be displayed in the device’s Browser for viewing content across the width of the web page. The fact that these small screens are usually operated using fingertips instead of a keyboard or mouse makes horizontal scrolling quite irritating.

When the screen size is greater than 960 pixels (pretty commonly found on net books, note books, laptops, desktops and so on, the web page would be surrounded by two white columns of unused space to its left and right. The width of each white column being half of the difference of the actual screen size n PX minus 960px.

Displaying a webpage bordered by two white bars of empty space is perhaps something that a good web designer does not want site visitors to see. This is largely because both designers and web site visitors will much rather make the greatest use of the width of the larger screen size and its higher pixel density.

Liquid Layouts

The first basic difference between the fixed-width type of web page layout and liquid web page layout is the unit of measurement used to define the web page’s, horizontal width.

  • The unit of measurement for fixed-width layouts is pixels (i.e. 960px)
  • The unit of measurement for liquid (or fluid) layouts is percentage (i.e. 100%)

By specifying the horizontal width of a web page in percentage great fluidity in introduced to the web page width because the Browser will automatically expand or contract the web pages depending on the display screen size of the device.

Hence, simply by defining the horizontal width of a web page as a percentage (eg: 100%), the web page designer does not have to think about device screen size. Subsequently, as the device screen size changes (reduces or increases) the web page, horizontal size, will automatically adapt to the screen size of the device in use because it’s the Browser that determines exactly what 100% translates to in pixels.

Regretfully, percentage based web page widths alone are just not be enough to ensure that the web page is displayed correctly on a large variety of screen sizes. Largely because as the size of the page shrinks on smaller display devices, the font size used would also shrink to become unreadable.

Liquid layouts must therefore be linked to media queries, which in turn have CSS rules that are bound to different font-size declarations and so on, for near perfect web page textual content display across multiple screen sizes.

Elastic Layouts

Elastic layouts are similar to liquid layouts.

The main difference once again is the unit of measurement for the width of the web page. The metric used for elastic layouts is neither in pixels nor percentages. It is em.

An em is the equivalent of the size (in pixels) defined in the font-size CSS rule. For example, if the web page text is styled with a font-size of 20 pixels, 1 em would be equal to 20 pixels, 2 ems would correspond to 40 pixels, and so on.

The elastic layout gives the website developer strong typographic control, since websites are predominantly populated with text. The precision of specifying the horizontal width of a web page, using em, makes this approach a strong contender for many responsive website projects.

However, even with this type of solution, there is the risk of an unaesthetic horizontal scroll bar becoming visible in some cases.

Hybrid Layouts

Finally, there are hybrid layouts. Hybrid layouts combine the characteristics of two or more of the layouts discussed above.

For example, the designer might decide to assign a fixed size (in pixels) to certain elements of the page (eg: a sidebar or a footer) while for the remaining (eg: the section that contains the main web page content) choose a variable horizontal width (i.e. declared in percentages or ems).

Obviously, this approach has its own set of limitations and disadvantages. If a sidebar is assigned a fixed width of 200 pixels and the rest of the page content assigned a value of 80%, one will find a horizontal scrollbar on screens smaller than 1000 pixels. This is simply because the main column does not have the screen space necessary to expand fully.

Using the Hybrid approach, in display screens whose size is less than 1000px some page elements would be unusually large or unusually small for their intended purposes.

Regretfully, there is no one best solution for web development projects. Especially when trying to decide which one of the four layouts types is best suited to create a responsive web page that looks decent on varying screen sizes, tiny à small à medium àlarge.

Each web page layout type has its advantages and disadvantages. Choosing one or a hybrid depends on the needs that the web page must fulfill.

None of these layout options is universally superior to another. They should not be considered mutually exclusive options or competitive options.

Multiple layout techniques must be used together to produce the ideal responsive web page. Some of these techniques are not possible if they are not mated with others.

For example, using em is meaningless without a fixed declaration of font-size in pixels. Similarly, media queries will be ineffective without inferring precise widths and making accommodation for popular screen sizes.

April 5, 2016
Design by Ivan Bayross and Meher Bala © 2016 All Rights Reserved