Building Responsive Layouts: Redux

tl:dr version

  • new Demo
  • new CodePen
  • GitHub Repo
  • Adjusted codebase to use relative positioning and left floats. No longer using absolute positioning for fixed columns

Thank You for Your Feedback!

I wrote an article about building responsive layouts in December 2013. It has received a lot of traffic and great feedback. But there is a problem with the codebase, and I have a few commenters to thank for noticing the issue. If it wasn’t for the community using the code in their projects and providing feedback, I wouldn’t have noticed the problem. Thank you, readers!

The Problem

A few people responded that they experienced issues with the header and footer not rendering correctly above and below the content area. I looked into it and discovered that that the solution I crafted had a document flow problem; which caused some unforeseen problems in the responsive layout. By using absolute positioning on the fixed column, the element was effectively taken out of the document flow. That means that the HTML document is unaware of the height, width, and any content in that section. Which is why the footer will overlap with the column that is absolute positioned (if that column is taller than the fluid column). See the figure below:

Continue reading

Building a Responsive Two Column Layout

UPDATE #3: A new article has been added that addresses the layout issue with this solution. Please read about the new version of the codebase if you want to avoid the document flow issues found in this tutorial.

UPDATE #2: Added navigation/menu section to the demos. The GitHub repo and CodePen example has been updated.

UPDATE: Based on numerous comments about how to include a footer in the layout, I have added a footer to all examples with accompanying styles. Thank you everyone for your feedback! The GitHub repo and CodePen example have been updated as well.

tl;dr version

  • Demo
  • CodePen
  • Github Repo
  • Use min-width media queries to progressively enhance the layout of the design.
  • Use “box-sizing: border-box” to calculate borders as part of the total width of an element.
  • Use Scott Jehl’s Respond.js polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
  • All wireframes were created using Balsamiq Mockups. I highly recommend this tool for making quick wireframes.

Introduction

This tutorial will explain how to create a two column layout with one fixed column and one fluid column. The example is basic, but it can be expanded to have multiple columns, even fluid nested columns. We will start with a mobile first view that consists of the columns stacked on top of each other. We will later add media queries to make the columns sit side by side as screen size allows.

I created this tutorial because there are many examples on how to use a grid framework for responsive layouts, but not enough examples on how to create a custom layout that doesn’t need a full blown grid framework. Those frameworks are wonderful and very educational, but typically I don’t need an entire grid framework. I just need a simple flexible layout. I don’t need the overhead of styles that I won’t use and I have no use for a 12 column grid system.

Let’s imagine a layout that has a fixed right column of 300 pixels wide (or 18.75ems, if you are using 16 pixels as your baseline) and a left column that will be fluid. The left column will be for main content. The right column will be used for sidebar content. A place for ads, links, or other ancillary content.

Continue reading

Media Query Management

Responsive web design is arguably the de facto standard in web design today. One of the major principles of RWD is implementing media queries into designs to make them more flexible and more adaptive to the media that renders them. There are many wonderful examples on the web that showcase the power of media queries and how they can facilitate more adaptive designs. The examples are often only a few lines of code. This is great for learning, but those examples do not scale well in a real world project. It’s not always obvious how to organize and maintain your style sheet that includes lots of media quries. Especially if you are relatively new to the field.

An issue that I feel is not discussed enough is how quickly a style sheet can spiral out of control in a real world project. Using large blocks of media queries for the design’s breakpoints will rapidly bloat your CSS and make it increasingly difficult to navigate. Especially after you’ve left the project for awhile and come back to it later.

The following is a scenario that developers often fall into when honing their responsive web design best practices. Especially when learning how to manage media query statements. I hope this article provides you with some insight and prevents you from some of the pitfalls I have fallen into previously.

Continue reading

Min-width: A Responsive Web Designer’s Best Friend

Mobile first development is a hard concept to grasp if you’ve been doing web development for a number of years and are used to developing websites for a desktop screen.

If you have started to design websites with more than one device size in mind, then chances are you have dabbled with media queries to some extent. Most likely using the max-width media query.

@media screen and (max-width: 840px) {
  p {
    font-size: 2em;
  }
}

This method is good for taking a desktop optimized site design and making it mobile or tablet friendly. However, this will result in rewriting entire style sets to make the desktop ‘version’ look great on mobile.

Min-width is your new best friend

There is a better way. Start your development and design with mobile first in mind. This probably isn’t the first time you heard this mantra (I also recommend reading Mobile First by Luke Wroblewski). Consider the mobile styles as your base style set, then add to those styles using min-width. This will save you time in the long run, even though it may take you awhile to get used to crafting your CSS with mobile styles as your base styles.

Continue reading