Three quick tips to help the responsive web design process

Date: 21 October 2012
Author: Russ Weakley

Tip 1: Creating a narrow viewport in Chrome

Have you ever noticed that some browsers (such as Safari, Chrome and Firefox) do not allow you to reduce the width of the viewport narrower than a certain point?

To allow Chrome to show pages at narrower sizes:

Step 1. Right click or Control click anywhere on a web page and choose “Inspect Element”

Step 2. In the bottom right corner of the browser window, click on the Cog icon. This will bring up the “Settings” dialog box.

Step 3. Choose the “Dock at right” option.

The “Inspect Element” panel will now be docked at the right of the screen, rather than below.

Step 4: Move your mouse over the divider line between the web page and the “Inspect Element” panel. You can drag this divider line to resize the web page viewport size. The viewport can now be resized to any width you want.

Tip 2: Counting characters to determine ideal line length

Responsive web pages used to be built to match the needs of specific device widths – such as iphone tall and wide, ipad tall and wide.

More recently, people have begun to realise that web pages should be built to meet the needs of the content, not devices.

One key factor is making sure that the content is readable. The optimal line length for your body text is considered to be anywhere from 50-75 characters per line.

When building liquid layouts, it is often hard to determine exactly how many characters appear on each line… until now.

With a simple piece of JavaScript, built by Phil Paige, you can see exactly how many characters appear on each line.

The JavaScript creates a span every 10 characters and injects a character count within each span. These spans are the positioned absolutely, so they sit on top of the content.

The source files are available on github. Here is a demo in action.

Tip 3: “Seeing” your responsive CSS files in action

When building responsive web designs, I find myself constantly moving the browser window in and out to see exactly where breakpoints should occur. I often found it frustrating that I could not “see” when specific stylesheets kicked in. To resolve the problem initially I created a series of <div> elements that could be displayed and hidden by specific @media requests.

The problem was that this meant adding markup into the templates. For the next project, I used a much simpler method. Instead of creating additional <div> elements, I used the ::before property.

The :before pseudo-element selector is written using an optional element, followed by “:” or “::”, followed by “before”. Whitespace is not permitted within the selector.

.container::before { }

The :before pseudo-element selector is used to generate content. This “generated content” is initially rendered within the specified element – before the elements real content. However, the generated content can be positioned outside the element.

In the CSS below, the generated content is being applied to the .container element. The generated content is being positioned absolutely in the top right corner of the viewport.

  position: absolute;
  top: 0;
  right: 0;
  padding: .5em;
  color: #fff;
  font-size: 200%;

@media only screen and (min-width: 400px) and (max-width: 500px)
    content: "400-500";
    background: red;

@media only screen and (min-width: 500px) and (max-width: 600px)
    content: "500-600";
    background: green;

@media only screen and (min-width: 600px) and (max-width: 700px)
    content: "600-700";
    background: blue;

@media only screen and (min-width: 700px) and (max-width: 800px)
    content: "700-800";
    background: purple;

@media only screen and (min-width: 800px)
    content: ">800";
    background: black;

Here is a demo in action.

Comments so far

  1. Jason says:

    Tip 3 is great. max-width seems to be more reliable than max-device-width too.

  2. James says:

    There is more on the media queries here to help with development (a little plugin for Dev work)

  3. Erin Bell says:

    Love tip #3. Great idea!

  4. Erik says:

    In addition to tip #1:

    If you go to Settings > Overrides you can override the device metrics and User Agent as well. Chrome ships with some handy presets, like ‘iPad’ for instance. It also supports overriding the fontscale factor (for retina displays), touch events and portrait/landscape modes.

  5. Mor says:

    Thanks for the tips.

    I use a border with different color to the main content area to test when media queries kick in. This is one line under each query.

  6. Avangelist says:

    3 tips:
    1. Develop for mobile handsets first
    2. Test on REAL devices not resizing browser windows
    3. Build up a component library.