Bob Ricca

Let's Connect.

Coding Responsively Doesn't Need To Be Scary

The Outside → In method

I find this method easiest to implement because:

  • I'm most likely converting an existing design to a responsive layout.
  • I find it easier to think with a desktop browser mentality and reverse engineer towards mobile.
  • Right from the start I can visually see all the variables at play. This helps me make better decisions based on context.
  • Clients often identify with the "full" desktop version of a site and therefore we feel the need to provide a high fidelity mock ups that later are translated into code.

It's also worth mentioning that I'm approaching this article without leveraging any pre-existing UI libraries (e.g. bootstrap).

But what about this "Mobile First" thing I hear about?

Luke Wroblewski wrote a book called Mobile First. I highly recommend picking it up.

In his book, Luke's main focus comes down to product strategy with the spotlight on driving the user experience via content. As we move forward in this article I'd like to note that there is distinct separation between strategy and implementation. Although you may use the Outside → In method above, it doesn't preclude you from operating in a Mobile First mentality.

A few extra lines of CSS and some fairy dust

Step 1 - Give up on pixel perfect content.

Your goal is no longer to control pixels.

Shift your focus from making everything perfect to making everything look presentable.

As the page width gets smaller your content should get bigger.

It's not about how many things you can keep on the screen, it's about effectively emphasizing each part of the design.

Step 2 - Add this line of code to <head> of your site.

After adding this line of code to your site you'll find that you can no longer pinch and zoom on your mobile device.

At first this seems counterintuitive. However, as this article continues you'll understand why we need this line.

Step 3 - Replace the width on main structural divs.

Try replacing width with max-width for all structural divs that hold your site together.
(e.g. .header, .content, .sidebar, .footer, etc.)

Using max-width will:

  • Allow your containers to be flexible up until the intended widths for the desktop version.
  • Allow your design to be flexible as the browser window gets smaller.

Step 4 - Evaluating your content

This is where things aren't so cut and dry.

For the pieces that have a pixel based width set, I'd suggest replacing it with max-width and letting each element adapt to the screen size as it gets smaller.

For the purpose of this article let's isolate talking about why different elements are on your page. Your goal as part of moving from non-responsive to responsive as a first iteration may be to just have a responsive site.

Not speaking to why things are on the page (which could warrant an entirely different article), your goal is to take all of the elements on the page and make sure they are easily legible on a smaller screen.

If I were to make a sweeping generalized statement... The smaller your screen is, the bigger and more legible your content should be.

It's important to mention that although this is a good practice, depending on the nature of your project it may or may not be the best advice.

Here is a diagram illustrating the desired outcome:

Step 5 - Identifying breakpoints (a.k.a. when your design looks bad)

Identifying breakpoints in your design is pretty simple.

Start with your page in a browser window as wide as you can make it, then slowly make the browser window narrower.

As you narrow the window keep an eye on the details within the design. Once you reach a point where it looks like shit, stop...

Congratulations, you've found your first breakpoint. Make sure to note how many pixels wide the window is.

Breakpoints are fixed by media queries.

Take the pixel number of how wide the window was and use it in your first media query.

Coding Responsively - Outside In method by Bob Ricca

My media query might look something like this:

@media (max-width:700px) {     a few css tweaks will go here     }

When setting media queries I prefer to use max-width over min-width. By using max-width combined with the proper ordering of your CSS code you'll achieve CSS zen. This takes advantage of how CSS hierarchy works and uses it to your advantage.

Step 6 - repeat Step 5... a bunch of times

Personally, I find that the amount of CSS I'm adding for each media query tends to only be a few lines.

Make sure to list media queries in your CSS file in order of largest window size to smallest.

Step 7 - Organize CSS in the following order (from top to bottom):

  1. CSS Resets (I personally don't use them)
  2. The main chunk of your CSS styles that apply to all views
  3. Media queries for each breakpoint — listed largest to smallest using max-width

Did you find this article helpful?

Please pass it along to others.

Better yet, if anything in this write up are wrong or could be better... please shoot me a message on Twitter.

I'd love to here any feedback or general dialog around different problems you may have encountered when diving into the world of responsive design.

I know this article is glossing over a lot of the details, however I do feel like it's a pretty good starting point.

I'm surrounding myself with smart people on Twitter (@TheBobbyTBC)... feel free to connect.

Want to see other projects I've worked on?