At WebTheme Studio we use responsive web design that will automatically adjust for different screen sizes and viewports.

Responsive Web Design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.
RWD is one approach to the problem of designing for the multitude of devices available to customers, ranging from tiny phones to desktop monitors.

RWD uses breakpoints to determine how the layout of a site will appear, one design is used above a breakpoint and another design is applied below that breakpoint.

The breakpoints are based on the width of the browser but the same HTML code is served to all devices using CSS.

In responsive web design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone.

Responsive design relies on proportion-based grids to rearrange content and design elements.

Essentially grids are of four types, namely:

• Manuscript grids
  Are the simplest and they work well when presenting large continuous blocks of text or images.
• Column grids
  Work well when the information being presented is discontinuous and different types of information can be placed in different columns.
• Modular grids
  Are best for more complex problems where columns alone don’t offer enough flexibility. The introduce horizontal spaces between blocks of content.
• Hierarchical grids
  Can be used when none of the above grids will work to solve the problem. They tend to be created organically by first placing design elements on the page and then finding a rational structure for presenting those elements.

In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page. Additionally, it provides a guide for designers to create multiple layouts that support responsive themes for different screen sizes.

All layout grids can be designed in two ways: symmetric or asymmetric. Symmetric grids follow a center line. The vertical margins are equal to each other, as are the horizontal ones. Columns in a symmetric layout are also the same width. In an asymmetric layout, both margins and columns can be different from one another. It is important to always look for balance when using an asymmetric layout.