An Attempted Solution To A Real Responsive Layout Problem

Posted: 01 Sep 2011 05:30 AM PDT

A couple of weeks ago I talked about some of the new layout issues we’ll need to solve when working with responsive designs. In that post I was mainly focused on the choices we need to make in structuring html to be more flexible.

The post showed some simple examples to get you thinking and today I want to present a real problem I’m working on with a responsive layout as well as my attempt at a solution.
Since the layout in question is also part of the redesign of this site, this post is in part my attempt at designing in the open.
I’ve created a simple demo page showing each of the examples below. There’s not much to see in the demo examples, but I’m providing them in case you want to grab my source code as a starting point to play.

Container boxes as seen in the single column layout

The Problem

The basic problem arises as the layout transitions from a single column to a 2 column layout. The image above shows a simplified picture of the content boxes in the layout.
Each of these boxes is a block level element. Outside of using some complex or convoluted positioning to reorder the display this means the html needs to be structured from top to bottom the way you see the boxes displayed.
One other point to note is that I’m using html5 semantics and have the post title, post meta, and post content wrapped in a single article tag.
If you remember in my previous post I mentioned that sliding boxes in and out of containers is one of the issues we’ll be facing as we move toward adaptable layouts.
As a single column this layout is quite easy to code. In fact all that’s really necessary is presenting everything in the html in the same order I want it displayed. No css is required for the layout.
The image below this section shows how I want to the boxes to be arranged in the 2 column layout. The main thing to note is the specific boxes I want showing in the sidebar.
I need to pull the post meta box out of its container and slide it to the left and I need to have the rss box and the box containing a list of links slide to the left and up just below the post meta.
I also want to leave the area to the left of the post title empty as I want to leave that space available for the post title itself.
This 2 column layout is also relatively simple to code. It’s mostly a matter of setting widths and floating elements left and right, with the occasional clear added.
The key to the problem is that this layout would typically use a different html structure than is needed for the single column layout.

Container boxes as seen in the 2 column layout

The Solution

The challenge is creating this 2 column layout with the constraint of the html structure of the single column layout.
The header, footer, post container, and post comments are easy to deal with. The header requires no change, the footer just needs to clear floated elements above, and the container and comments need a new width, a float to the right and appropriate clears.
The 3 problems that need solving are

how to move sidebar items from below the article into sidebar?
how to move post meta outside it’s container into sidebar?
how to display the sidebar boxes below post meta box?

Here’s the html I’m using. For the sake of simplicity I’ve stripped out the ids and classes and I have everything here as a div. In the real layout these are sections and articles and asides.

   "header">Header
   "article">     "title">Post Title
     "meta">Post Meta
     "content">Post Content
   
   "rss">RSS
   "series">Series Links
   "comments">Comments
   "footer">Footer

For display purposes I’ve added colored outlines to the boxes and given each a fixed height. Just remember none of these things are necessary. The html structure along with the normal document flow is all we need.

Step 1

The first step (seen above) is adjusting the width of the boxes to accommodate a sidebar. For now I’m leaving the post meta box inside the post container.
I floated the post container and the post comments to the right and floated the rss and series boxes to the left.
The footer needs to clear the floated elements above it. Normally you’d just clear it, but I ended up floating it to the left, which has the same effect due to its width.

#article {   width:65%;   float: right; } #rss {   width: 31%;   float:left } #series {   width: 31%;   float:left } #comments {   width: 65%;   float:right; }

So far so good. We’ve created 2 columns and have moved the rss and series boxes successfully into the sidebar.

Step 2

The second step (seen below) is to slide the post meta box into the sidebar. To do this I adjusted it’s width, floated it to the left and gave it a negative margin.

#meta {float:left; width: 48%; margin:0 0 0 -51%;}

That pulls the post meta box into place, but as you can see it’s occupying the same space as the rss and series boxes.

Step 3

The natural thought (for me anyway) with this 3rd step (last image in this post) was to clear the rss box, but that doesn’t work.
Clearing left has no effect as the post meta box sits inside the post container, which is being floated to the right. Any clear set on the rss box will be in relation to the post container and not its contents.
We could clear the rss box to the right, but that only drops the rss and series boxes below the post container instead of allowing them to sit next to it.
What I did instead was give the rss box a top margin so it displays further down in the sidebar. Note that this margin is relative to the bottom of the header and not the bottom of the post meta box.

#rss {width: 31%; float:left; margin-top: 30%;}

This works, but I don’t like the solution for the reasons mentioned in the next section and I’m looking for a more responsive solution.

Container boxes in the 2 column layout after step 2

New Problem and Potential Solutions

The problem is that the top margin of the rss box is relative to the header. Since both the post title and post meta boxes can expand vertically ideally the rss box could be related to them in some way.
The post meta box likely won’t expand more than a line of text, but I’m setting up the post title in a way to allow me to experiment with it and I expect that it’s height will change significantly at times.
Also while I’m using a % margin on the rss box here I have ‘em’ units set in the actual page. The font-size can change with browser resizes and people can naturally increase of decrease the font size as they choose.
Both can cause the boxes to move around in a way that could break the design.

Possible Solutions

One potential solution is to keep the post meta under the post title instead of pushing it into the sidebar. I prefer it in the sidebar, but it certainly works well under the title and above the content.
That would still leave an issue with the post title being able to grow vertically, but it removes the issue of the post meta growing.
Another possibility is moving the rss information above the post title, and below the header. That would also work, but my goal is to leave a lot of space around the post title so it’s the dominant element on the page.
A 3rd possibility would be to restructure the html so the rss appears below the post meta box and above the post content. Then I could slide both post meta and rss into the sidebar without having to deal with the additional margin.
The series information won’t appear on every page and it could easily be given a large enough top margin to clear the other boxes nearly all the time.
One last potential solution is to include the rss and series boxes inside the article container. That should allow them to be located in relation to the post title and post meta boxes as all would be siblings inside the article
I’ll let you know what I decide when I finish the redesign.

Container boxes in the 2 column layout after step 3

Summary

That’s a quick look at a real problem I’m working on along with the solution I’ve currently implemented.
The solution works, but not in the most flexible way and given the overall goal of of the responsive design is flexibility it’s likely a solution that will need improvement.
I’d rather not alter the design or the existing html structure, but it’s possible one or the other will need to change. Maybe the lack of a good solution is an indication one or the other should change. We’ll see.
Hopefully a peak at how I’m attempting to solve a real problem has helped you with a problem you’re working on. If you have a solution to my problem feel free to let me know.