9 min read

(For more resources related to this topic, see here.)

The Goldilocks approach

In 2011, and in response to the dilemma of building several iterations of the same website by targeting every single device, the web-design agency, Design by Front, came out with an official set of guidelines many designers were already adhering to. In essence, the Goldilocks approach states that rather than rearranging our layouts for every single device, we shouldn’t be afraid of margins on the left and right of our designs. There’s a blurb about sizing around the width of our body text (which they state should be around 66 characters per line, or 33 em’s wide), but the important part is that they completely destroyed the train of thought that every single device needed to be explicitly targeted—effectively saving designers countless hours of time.

This approach became so prevalent that most CSS frameworks, including Twitter Bootstrap 2, adopted it without realizing that it had a name.

So how does this work exactly? You can see a demo at http://goldilocksapproach.com/demo; but for all you bathroom readers out there, you basically wrap your entire site in an element (or just target the body selector if it doesn’t break anything else) and set the width of that element to something smaller than the width of the screen while applying a margin: auto.

The highlighted element is the body tag. You can see the standard and huge margins on each side of it on larger desktop monitors.

As you contract the viewport to a generic tablet-portrait size, you can see the width of the body is decreased dramatically, creating margins on each side again. They also do a little bit of rearranging by dropping the sidebar below the headline.

As you contract the viewport more to a phone size, you’ll notice that the body of the page occupies the full width of the page now, with just some small margins on each side to keep text from butting up against the viewport edges.

Okay, so what are the advantages and disadvantages?

Well, one advantage is it’s incredibly easy to do. You literally create a wrapping element and every time the width of the viewport touches the edges of that element, you make that element smaller and tweak a few things. But, the huge advantage is that you aren’t targeting every single device, so you only have to write a small amount of code to make your site responsive.

The downside is that you’re wasting a lot of screen real-estate with all those margins.

For the sake of practice, create a new folder called Goldilocks. Inside that folder create a goldilocks.html and goldilocks.css file. Put the following code in your goldilocks.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>The Goldilocks Approach</title>
        <link rel="stylesheet" href="goldilocks.css">
    </head>
    <body>
        
        <div id="wrap">
            
            <header>
                <h1>The Goldilocks Approach</h1>
            </header>
            
            <section>
                <aside>Sidebar</aside>
                <article>
                    <header>
                        <h2>Hello World</h2>
                        <p>
                            Lorem ipsum...
                        </p>
                    </header>
                </article>
            </section>
            
        </div>
        
    </body>
</html>

We’re creating an incredibly simple page with a header, sidebar, and content area to demonstrate how the Goldilocks approach works.

In your goldilocks.css file, put the following code:

* {
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,.05);
    font: 13px/21px Arial, sans-serif;
}
h1, h2 {
    line-height: 1.2;
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 20px;
}
#wrap {
    width: 900px;
    margin: auto;
}
section {
    overflow: hidden;
}
aside {
    float: left;
    margin-right: 20px;
    width: 280px;
}
article {
    float: left;
    width: 600px;
}
@media (max-width: 900px) {
    #wrap {
        width: 500px;
    }
    aside {
        width: 180px;
    }
    article {
        width: 300px;
    }
}
@media (max-width: 500px) {
    #wrap {
        width: 96%;
        margin: 0 2%;
    }
    aside, article {
        width: 100%;
        margin-top: 10px;
    }
}

Did you notice how the width of the #wrap element becomes the max-width of the media query?

After you save and refresh your page, you’ll be able to expand/contract to your heart’s content and enjoy your responsive website built with the Goldilocks approach. Look at you! You just made a site that will serve any device with only a few media queries. The fewer media queries you can get away with, the better!

Here’s what it should look like:

The preceding screenshot shows your Goldilocks page at desktop width. At tablet size, it looks like the following:

On a mobile site, you should see something like the following screenshot:

The Goldilocks approach is great for websites that are graphic heavy as you can convert just three mockups to layouts and have completely custom, graphic-rich websites that work on almost any device. It’s nice if you are of the type who enjoys spending a lot of time in Photoshop and don’t mind putting in the extra work of recreating a lot of code for a more textured website with a lot of attention to detail.

The Fluid approach

Loss of real estate and a substantial amount of extra work for slightly prettier (and heavier) websites is a problem that most of us don’t want to deal with. We still want beautiful sites, and luckily with pure CSS, we can replicate a huge amount of elements in flexible code. A common, real-world example of replacing images with CSS is to use CSS to create buttons.

Where Goldilocks looks at your viewport as a container for smaller, usually pixel-based containers, the Fluid approach looks at your viewport as a 100 percent large container. If every element inside the viewport adds up to around 100 percent, you’ve effectively used the real estate you were given.

Duplicate your goldilocks.html file, then rename it to fluid.html. Replace the mentions of “Goldilocks” with “Fluid”:

<!DOCTYPE html>
<html>
    <head>
        <title>The Fluid Approach</title>
        <link rel="stylesheet" href="fluid.css">
    </head>
    <body>
        
        <div id="wrap">
            
            <header>
                <h1>The Fluid Approach</h1>
            </header>
            
            <section>
                <aside>Sidebar</aside>
                <article>
                    <header>
                        <h2>Hello World</h2>
                    </header>
           <p>
                        Lorem ipsum...
                    </p>
                </article>
            </section>
            
        </div>
        
    </body>
</html>

We’re just duplicating our very simple header, sidebar, and article layout.

Create a fluid.css file and put the following code in it:

* {
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,.05);
    font: 13px/21px Arial, sans-serif;
}
aside {
    float: left;
    width: 24%;
    margin-right: 1%;
}
article {
    float: left;
    width: 74%;
    margin-left: 1%;
}

Wow! That’s a lot less code already.

Save and refresh your browser, then expand/contract your viewport. Did you notice how we’re using all available space? Did you notice how we didn’t even have to use media queries and it’s already responsive? Percentages are pretty cool.

Your first fluid, responsive, web design

We have a few problems though:

  • On large monitors, when that layout is full of text, every paragraph will fit on one line. That’s horrible for readability.
  • Text and other elements butt up against the edges of the design.
  • The sidebar and article, although responsive, don’t look great on smaller devices. They’re too small.

Luckily, these are all pretty easy fixes. First, let’s make sure the layout of our content doesn’t stretch to 100 percent of the width of the viewport when we’re looking at it in larger resolutions. To do this, we use a CSS property called max-width.

Append the following code to your fluid.css file:

#wrap {
    max-width: 980px;
    margin: auto;
}

What do you think max-width does?

Save and refresh, expand and contract. You’ll notice that wrapping div is now centered in the screen at 980 px width, but what happens when you go below 980 px? It simply converts to 100 percent width. This isn’t the only way you’ll use max-width, but we’ll learn a bit more in the Gotchas and best practices section.

Our second problem was that the elements were butting up against the edges of the screen. This is an easy enough fix. You can either wrap everything in another element with specified margins on the left and right, or simply add some padding to our #wrap element shown as follows:

#wrap {
    max-width: 980px;
    margin: auto;
    padding: 0 20px;
}

Now our text and other elements are touching the edges of the viewport.

Finally, we need to rearrange the layout for smaller devices, so our sidebar and article aren’t so tiny. To do this, we’ll have to use a media query and simply unassign the properties we defined in our original CSS:

@media (max-width: 600px) {
    aside, article {
        float: none;
        width: 100%;
        margin: 10px 0;
    }
}

We’re removing the float because it’s unnecessary, giving these elements a width of 100 percent, and removing the left and right margins while adding some margins on the top and bottom so that we can differentiate the elements.

This act of moving elements on top of each other like this is known as stacking.

Simple enough, right? We were able to make a really nice, real-world, responsive, fluid layout in just 28 lines of CSS.

On smaller devices, we stack content areas to help with readability/usability:

It’s up to you how you want to design your websites. If you’re a huge fan of lush graphics and don’t mind doing extra work or wasting real estate, then use Goldilocks. I used Goldilocks for years until I noticed a beautiful site with only one breakpoint (width-based media query), then I switched to Fluid and haven’t looked back.

It’s entirely up to you. I’d suggest you make a few websites using Goldilocks, get a bit annoyed at the extra effort, then try out Fluid and see if it fits.

In the next section we’ll talk about a somewhat new debate about whether we should be designing for larger or smaller devices first.

Summary

In this article, we have taken a look at how to build a responsive website using the Goldilocks approach and the Fluid approach.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here