Introduction to Responsive Design

Responsive design, when done correctly, allows for the content and layout of a Web page to change in shape, size, position, and visibility based on the viewport size and orientation as well as the available interactive attributes of the device the page is being viewed on. Responsive Web design was first heralded by Ethan Marcotte in an article he wrote for the A List Apart Web site posted on May 25, 2010.

Essentially responsive design incorporates three Web design elements:

1. Fluid grids which allow the layout of the page to automatically adjust to different screen widths.

2. Flexible images that resize based on the size of the viewing device.

3. Media queries which allows for different CSS rules to be applied based on device attributes.

Viewports and Device Width

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the Internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen; which was a quick fix and not a perfect solution.

Web pages are viewed within a window called the viewport. For desktop computers, the viewport is the same as the browser window; this is not the case with mobile devices. Mobile devices have two types of viewports: a visual viewport displaying the web page content that fits within a mobile screen and a layout viewport containing the entire content of the page, some of which may be hidden from the user.

Widths in media queries are based on the width of the layout viewport, not the visual viewport. In order to correctly base a media query on the physical width of the device, you have to tell the browser that you want the width of the layout viewport matched to the device width by adding the following meta element to the HTML file:

<meta name="viewport" content="properties">

where properties is a comma-separated list of viewport properties and their values, as seen in the example that follows:

<meta name="viewport" content="width=device-width, initial-scale=1">

In this meta element, the device-width keyword is used to set the width of the layout viewport to the physical width of the device’s screen. For a mobile device, this command sets the width of the layout viewport to the width of the device. The line initial-scale=1 is added so that the browser doesn’t automatically zoom out of the web page to fit the page content within the width of the screen. We want the viewport to match the device width, which is what the above meta element tells the browser to do.

Flexbox

To define an element as a flexbox, apply either of the following display styles

        display: flex;
    or
        display: inline-flex;

where a value of flex starts the flexbox on a new line (much as a block element starts on a new line) and a value of inline-flex keeps the flexbox in-line with its surrounding content.

property: flex-direction

values(s):

row (default) = lays out rows left to right

column = creates a vertical layout starting from the top and moving downward

row-reverse, column-reverse = lay out the items bottom-to-top and right-to-left respectively

property: flex-wrap

values(s): nowrap (default), wrap, wrap-reverse

property: flex-flow

Both the flex-direction and flex-wrap properties can be combined into the following flex-flow style

    flex-flow: direction wrap

Flex Items

Flex items behave a lot like floated objects though with several advantages, including that you can float them in either the horizontal or vertical direction and that you can change the order in which they are displayed. While the size of a flex item can be fixed using the CSS width and height properties, they don’t have to be. They can also be “flexed” — automatically adapting their size to fill the flexbox. A flex layout is fundamentally different from a grid layout and requires you to think about sizes and layout in a new way.

Setting the Flex Basis

When items are allowed to “flex” their rendered size is determined by three properties:

1. the basis size

2. the growth value

3. the shrink value

The basis size defines the initial size of the item before the browser attempts to fit it to the flexbox and is set using the following

property: flex-basis

    flex-basis: size;

property: flex-grow

    flex-grow: value;

property: flex-shrink

    flex-shrink: value;

property: flex

    flex: grow shrink basis;

    flex: 0 1 auto;

Reordering Flex Items

The default ordering value for a flex item is 0. The lower the value the higher the priority.

property: order

    order: value;