Responsive themes let us build one design that looks and behaves correctly on all devices. We can reorganize content, hide or show things, and change how things work based on the size of the screen. In order to design a responsive theme you'll need to visualize how the pieces of the website move and behave on different sized screens.
Responsive Wireframeing
with the Omega Base Theme
Omega is a responsive base theme for Drupal 7. It's based on a 12 column variable width grid. The theme uses CSS media queries to apply a different layout at intervals. The smallest width is a one column layout that's optimized for phones and other small devices. As the screen gets larger it applies style sheets for narrow, normal, and wide views. No matter what size screen or window a webpage is in it will have an optimized size and layout. Omega has a suite of important tools listed in its handbook that you should download and enable as well. Using the combination of Delta and Context you can change your theme to supply different regions and layouts based on where or what type of node the user is viewing.
Laying out the regions of your theme
You may find it most beneficial to do two sets [or more] of wireframes for each page. In the very least you'll want to wireframe the site as it is in a full screen context as well as in a mobile context. Omega has a handful of regions set up by default that you can use to begin planning your website. The ones we're going to focus on are:
- #region-branding - A div with the logo, site name, and slogan.
- #region-menu - A div with main menu.
- #region-content - The main content area.
- #region-sidebar-first/second - The sidebars
Here is our initial wireframe showing all of the above regions, with our sidebars 3 columns wide each. This is what the site will look like on a desktop browser
Using the Omega Subtheme's appearance settings we can add, remove, resize, and reorganize the regions in our layouts. Let's remove the first sidebar, then set the the width of content to 9 columns.
Or we can remove both and set the width of the content region to 12 columns.
All of the regions can be resized, removed, or re-positioned. Here's an example where branding is 3 columns and the menu is 9 columns so that they sit side by side.
How the wireframe reacts when the screen gets smaller
Before you can design around the wireframe above you need to have an understanding of what your theme will look on a mobile browser or small window. Not only does this mean changing your navigation elements to be tap friendly, but knowing where and how the contents of the page will flow in a one column design. This is actually pretty easy to visualize once you know what Omega wants to do.
In Your Omega subtheme the following are some of the things that will occur when the screen gets smaller:
- All regions will become 100% width across the screen.
- The The site name and slogan will clear under the logo.
- The menu will most likely no longer fit in one line.
- The first sidebar will go above the content.
- The second sidebar will go below the content.
- Style sheets are applied as the screen gets larger, and removed as it gets smaller.
The easiest way to understand what's going on is to just remember that the first sidebar goes above the content, and the second sidebar goes below the content, like so:
Giving us this:
Adding content to the responsive wireframe,
Understanding how the regions move and react isn't enough. We also need to understand how the individual pieces of content will move on the page. Our example layout will consist of the following:
- node content - An image and a blurb of text from a node.
- gallery - A view of images in a block in the content region.
- comments and recent tweets - The node's comments and list of recent tweets.
- more - Links to more related content.
- blog - A few recent updates from the blog.
Here's how it looks in a desktop browser:
When the screen shrinks we have the blocks of different content clear each other in a similar way regions do. As long as all of our block widths are percentages our content will fit nicely in the one column layout. In this example we reorganized the node content area to show the image above. We let the gallery rows break into two columns. We can reduce the size or even hide the comments and twitter sections. After that we have our second sidebar pushed below the content.
At this point you should have a wireframe with enough understanding of the content that you can begin to design around it. The regions and blocks in a theme can be configured to break apart and realign in all types of ways, but the behavior described above is the default, easy enough to understood, and will apply its self to many common layout needs.
Did I get something wrong? Is there something more you'd like to add? Leave a comment for free!