Page Layout Settings

Setting up the page layout in Adaptivetheme is intuitive and strait forward - simply using the theme settings is a guide in itself and hardly anyone ever goes wrong with this. What this documentation page provides is an overall view of what you can achieve, and some detail about each setting and what it does.

The first thing to understand is that Adaptivetheme is responsive - this means it can change the layout (and styles) depending on the size (width) of the device being used to view your site. Typical devices will include desktop and laptop computers, tablet devices such as iPad and Android tablets and of course handheld mobile devices such as smartphones, Kindle and others.

In essence the problem Adaptivetheme solves is one of optimizing the layout for each screen size, and providing tools that any site builder or owner can use, rather than forcing you to write complicated code to achieve the same thing. Instead Adaptivetheme writes this code for you.

The second main point is that here we are just setting the main page layout - in practical terms this means the position of the two sidebars and the main content column. The layout of your content is also very important - here we are typically talking about the layout of your content types, or nodes. Adaptivetheme can control this as well with the help of Display Suite and Panels and includes many powerful responsive layouts that work with these modules.

Responsive or Adaptive?

Adaptivetheme, despite its name, can do both. In short this comes down to what width unit you select for the page width - percentage, pixels or ems. Percentages will generate a fluid responsive layout and this is the default. Pixels and Ems will produce an adaptive layout (one that is not fluid and switches abruptly between set widths).

Sidebar Units and Widths

You can use any combination of units - meaning you can set a percentage width on the page and pixel widths on the sidebars. In some layouts you can only set the width on one sidebar because the second sidebar wraps below the main content and becomes a full width horizontal region - useful in smaller screen displays.

Max Width

In the Standard screen size layout if you select percentages as the page unit (enabling a fluid layout) you can set a maximum width for the page - this the maximum width the page can extend to regardless of screen size. This is very useful when you consider some screens are very large and you do not want your content spilling across a 33" cinema display and potentially being unreadable due to line length. A typical max-width might be 1260px, which fits comfortably on most modern laptops, so gives you something to aim for in terms of design for the standard screen display.

Media Queries

Media queries are the secret sauce of responsive design. Adaptivetheme allows you to define five separate media queries, otherwise known as "breakpoints". Why five you might ask? Because both tablet and handheld devices nearly all support orientation change - meaning they can rotate the display from landscape to portrait, and these are often significantly different widths.

Adaptivetheme ships with default media queries well suited to today's crop of devices, and tomorrows - because you can change the media queries in the settings the theme can evolve as required, simply by updating the breakpoints. If you would like to learn more about media queries this article is highly recommended: Essential considerations for crafting quality media queries.

Panels and Panels Everywhere

If you are using the AT Panels Everywhere variant subtheme with Panels Everywhere the main page layout settings will fire for the Default Site Template.

If you use the included AT Panels layouts for page layouts in Panels, or with Panelizer or Display Suite you will want to review the Responsive Panels and Gpanels documentation.

Last updated 4th July, 2012 - 10:19pm