Table of contents

At the beginning of my front-end career, I heard a lot about the idea of designing in the browser. But for many reasons, including the lack of front-end skills at that time, I didn’t think I will do it someday.

Throughout this article, we’ll explore a workflow to design and maintain mockups right in the browser. There are many tools to do that in no time and it doesn’t matter whether you were a designer without coding skills or a Front-End developer.

In the examples, we will work on a simple cooking recipes web page, as I’m fairly sure that we all love food 😄

Content outline

Pick a paper or a writing app of your choice, and outline the content and the structure of the web page, such as header, lists, navigation.. etc

Working on the content this way gives you a new perspective; it’s like zooming out in a design app to see a broader view of your design. With that in hand, we can translate the outlines into plain HTML.

Content Priority Wireframes

No need to dig into the details at this step, we only need to organize the content by priority so we get an idea where to place each element.

Taking a few minutes to work on the content priority will save you a lot of time. Now we can think and sketch the design elements based on the priority wireframe and the details we wrote in the content’s outline document.

Sketching the design elements

Work on a very quick sketch and ideas exploration. Try to finish each sketch with only 1 minute or so.

HTML Outline

Describing content by using the suitable HTML elements will make the process faster. Here are a couple of things I usually do:

  <header class="header" role="banner">
    <h1 class="page-title"><a href="#">Awesome Recipes</a></h1>
    <nav>
      <!-- Navigation items -->
    </nav>
  </header>
  <hr>
  <main role="main">
    <section>
      <h2>Featured Recipe</h2>
      <a href="#">
        <img width="300" src="assets/imgs/blueberry.jpg" alt="">
        <h3>Blueberry Sour Cream Coffee Cake</h2>
        <time>Mon 26 Sep</time>
      </a>
    </section>

    <section>
      <h2>Recipes</h2>
      <ul>
        <li>
          <a href="#">
            <h3>Cajun Chicken Pasta</h2>
            <img width="300" src="assets/imgs/cajun.jpg" alt="">
          </a>
          <p><a href="#">Healthy</a></p>
        </li>
        <!-- More recipes -->
      </ul>
    </section>
  </main>
  <hr>
  <footer role="contentinfo"> <!-- content --> </footer>

This is how our content looks without CSS:

Kindly note that all of the food images are from the BBC Food and are used for learning purposes only.

I know it doesn’t look that good. We will style elements with CSS and explore how it will look.

Picking a design direction

Before starting with the actual design, I prefer to do some quick ideas exploration which will let me choose:

Codepen is my go to place for such quick explorations since I can share them easily with people. In our example page, I added the markup of the header and the featured section, then started to explore different options for each of them. This step will make the ball rolling.

Exploring design ideas in the browser

At the beginning, I started to add a wrapper and center the content with CSS margin-left: auto and margin-right: auto. Then, I started exploring different variations for the page header based on the design direction we worked on.

Header Variations

We have 3 different options for the header design. To make things easier in CSS, I scoped the styles of each option with a specific class using Sass Pre-Processor.

For instance:

.header1 {
    h1 {
        // logo styles
    }
    nav {
        // nav styles
    }
}

.header2 {
    h1 {
        // logo styles
    }
    ...
}

// and so .header3..

Google Chrome gives us the ability to add all of these classes and toggle (show/hide) them with a checkbox to make a quick comparison.

Toggle different variations for the header from Ahmad Shadeed on Vimeo.

This is how the current design looks like with the first option of the header design.

Screenshotting the header variations

There is a useful feature in Firefox to take a screenshot of a specific element in the DOM. By doing that, we can compare our variations side by side to see which one is the best for our case.

Follow the below steps:

  1. Open Firefox dev tools.

  2. Right-click on an element and pick Screenshot Node option.

  3. The screenshots are saved in the default downloads folder.

Taking screenshots in Firefox from Ahmad Shadeed on Vimeo.

If you want to use Chrome for screenshotting, it’s fine. There is a plugin called “Element Screenshot” that did almost the same job as Firefox.

We will follow the same concept as we did in the header (scoping styles with different classes) and toggle different options in Chrome dev tools.

I want to go with the first option because it’s bigger and indicates that the section is important. Also, it works better for the header look and feel.

After that, while looking at the recipe title, I thought about making it longer by adding some dummy content to test how the design will look. We have different ways to do that:

The last option is the fastest one, adding that line of code to the browser console will make the entire document editable. Just like a writing app.

Changing text using document.designMode from Ahmad Shadeed on Vimeo.

What we have so far:

Recipes Listing

After styling the recipes listing with 2 different options, I picked the first one.

There is one thing I want to tweak, the shadow on the recipes photos. Should I go back to CSS and change that manually? No! We now have a visual editor for CSS shadows. In the meantime, it’s only available in Chrome canary browser.

Changing recipes shadow in the visual box-shadow editor from Ahmad Shadeed on Vimeo.

This tool is very handy. We are lucky that Safari browser have a visual editor with many CSS properties to change. There is a section on that coming in the article, if you are in hurry, you can check it there.

First complete design

Now with that design, we took a full page screenshot using Firefox developer toolbar. Follow these steps in order to show the toolbar:

  1. Go to Tools > Web Developer.

  2. Click on Developer Toolbar option.

You will notice a bar at the bottom edge of the browser window, type the command screenshot --fullpage and press enter. The page screenshot should be in your Firefox’s default downloads folder. I learned that from Eric Meyer’s great article.

Making updates in a design app

Now we have a full screenshot of the page. We want to fiddle with it and explore some design changes. I prefer to use Photoshop for that because it’s great for editing images. By the way, feel free to use whatever editing app you are comfortable with.

See the below video to get the idea of editing a design in Photshop:

How to edit web designs in Photoshop from Ahmad Shadeed on Vimeo.

If you are not familiar with Photoshop, it’s totally fine. We can screenshot every component we have using the Chrome plugin we introduced or Firefox built-in feature.

Using the above collection of elements we can move things around and test how they would look in different places and contexts. We will need a version of the design with an empty wrapper so we can place and move elements.

There is a very useful featured in Chrome dev tools, we can inspect any element in the DOM and type h to hide it.

Hiding elements in Google Chrome from Ahmad Shadeed on Vimeo.

After hiding the elements we want, we will have something like the following:

With that in hand, you can screenshot different components and try to move them around to test how the result will look. Once you are happy, it’s time to implement them in the browser.

Getting updates while working on the design

Suppose that the client want to make an update to the design. For instance, he want to add a search feature with filtering and such things right below the header. In Photoshop, I will start by moving the featured section down and start working on a design for the search section. I hate the idea of moving things in Photoshop once a design is confirmed.

Here is a GIF that show that:

Doing that in the browser is really easy and straightforward. Add the new HTML just below the <header> element and then start with the styling.

Check the final demo

Presenting the design

It’s better to show the design as an interactive web page by uploading it somewhere. That way, the client will be able to interact with it and resize the browser window to check how the design will look at various sizes.

In case you want to present it as a static image without interactions, you have two options:

  1. Exporting it as .jpg file and apply it as a background-image for the body element.

  2. Using a css trick to make the design look like an image.

Exporting the design as an image

I exported the design from Firefox and then measured its height from OSX info.

Then, create an empty HTML file and add the following CSS to the body element:

body {
  background: url('home-page.jpg') no-repeat; /* we don't want the design to repeat */
  background-size: 100%; /* to make it same size as the page */
  min-height: 1299px; /* the image height */
}

In case you want to wrap the screenshot with a specific browser frame, there is an awesome tool that is really helpful for that. Just upload the screenshot, pick the browser frame you want and you are done.

Using CSS to lock the design

This is a fake way to make a design looks like an image. Sometimes the client don’t accept the idea of reviewing full web pages at the early stage of the project. You can use this trick in order to make it look like an image.

We will add a pseudo element and make it fixed on the whole screen (100% width and height). This will prevent hover effects so it will look like an image.

body.is-locked {
    user-select: none; /* important to prevent selecting text */
    -webkit-user-select: none;

    &:before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

Note that keyboard focus will work though.

Ideas and concepts that we can use today

Changing the website color palette

With the power of CSS filter hue-rotate, we will change the color palette of the page with one simple step.

hue-rotate: the result of a hue rotation for each pixel in the image. The value could be specified in deg or rad.

In the below video, I added filter: hue-rotate(value) to the HTML element, all colors has changed, even the featured recipe photo.

Changing Colors with CSS hue-rotate Filter from Ahmad Shadeed on Vimeo.

For example:

html {
    filter: hue-rotate(100deg);
}

In order to remove the effect from the featured recipe photo, we will revert the hue value by using a negative value:

.recipe-photo {
    filter: hue-rotate(-100deg);
}

Using CSS Variables (a.k.a Custom CSS Properties)

Even if the support is still not 100% cross-browser (It’s currently in-development in Microsoft Edge), we can get the benefit of CSS Variables today. Using them to define the spacing and color units will make it easy to make huge changes by changing tiny values on the fly.

I defined the following for our web page:

:root {
    --spacing-unit: 1em;
    --spacing-unit-half: calc(var(--spacing-unit) / 2); /* = 0.5em */
    --brand-color-primary: #7ebdc2;
    --brand-color-secondary: #468e94;
}

These variables will be used throughout the website elements like links, nav items, borders and background colors. When changing a single variable from the dev tools, all the associated elements will be affected! Neat, right?

.recipe-featured {
    border: 6px solid var(--brand-color-secondary);
}

.nav-item:hover {
    background: var(--brand-color-secondary);
}

/* and so on.. */

Using CSS Variables to Change a Color Palette from Ahmad Shadeed on Vimeo.

Blending Images

By using CSS Filters and mix-blend-mode, we can try different blending effects right in the browser.

.image-wrapper {
    background: #7ebdc2;
    padding: 2em;
}

img {
    display: block;
    margin: auto;
    mix-blend-mode: multiply;
    filter: brightness(1.1) contrast(1) saturate(0);
}

Invert elements with CSS

This is useful when you have a white text on black background or vice versa. For instance, in the header, we have the page title in white on a black background, and by adding filter: invert to the element, all the colors will be inverted.

Using blokk font

This is a font that will convert all the text to rectangles. It might be useful to use it in order to focus on the look and feel, elements placement and such details.

To use this font, you have 2 options:

Add the below line to your page’s <head>:

<link href="https://blokkfont-losgordos.netdna-ssl.com/v2/blokkfont.css" rel="stylesheet" type="text/css">

Then in CSS, apply the font to the <body> element:

body {
    font-family: "BLOKK";
}

Safari Browser CSS Visual Editor

There is a less well-known feature in Safari that let use update the styles visually! Remember how we changed the box-shadow using Chrome canary visual editor? It’s the same here, but for many CSS properties. 😍

Example 1: Editing Page title

Safari Visual Editor - Page Title from Ahmad Shadeed on Vimeo.

Example 2: Editing Shadow

Safari Visual Editor - Box Shadow from Ahmad Shadeed on Vimeo.

Example 3: Editing Featured Recipe

Safari Visual Editor - Float and Margin from Ahmad Shadeed on Vimeo.

Making subtle design changes on mouse hover

With the power of CSS Variables, we can add hover styles to the body element to change the variables’ values on the fly by only moving the mouse cursor.

body:hover {
    --brand-color-primary: #7ec283;
    --brand-color-secondary: #46945a;
}

What if you want to take a look without moving the mouse inside the body? Simply inspect the body and then right-click, pick hover. Now the styles will act as if you are hovering on the element. (And this is useful when you want to take a screenshot to the hover style)

Using Chrome’s Device Toolbar

While designing in the browser, you will need to see how the design looks on various screen sizes. The handy device toolbar feature in Chrome will help us achieve that.

In order to use it, show the device frame by clicking on the 3 dots icon and activate “Show device frame” option. Then, click on “Capture screenshot” to get a screenshot with the frame.

We can take screenshots for different screen sizes along with phone frames.

How modern CSS can make things easier and faster

Flexbox

Equal height columns

No need to use fixed-heights for such items, Flexbox can help us to achieve this kind of layout very easily. Notice how the height is equal regardless of the recipe title text.

Align items and leave a space between them

Mocking things up in the browsers means that we don’t have time for adding small details. We need to do things quickly. Flexbox justify-content: space-between is useful for having a space between child items.

Laying out navigation items horizontally

We usually use CSS float in the nav items with a clearfix on the parent item. While designing in the browser, we don’t have time for all of that. Simply add display: flex to the parent and all the items will be displayed horizontally.

CSS Columns

I love using CSS columns for quickly dividing a section into a specified number of columns. The support is pretty good as well.

For instance, we can use it to create a mansory-like layout in no time.

ul {
  columns: 3;
}

li {
  float: left;
  break-inside: avoid;
}

How much time do you need to do that in a design app? Suppose that you have the design of the recipe component ready. In the browser, it took less than 1 minute to do that. 🔥 I expect that in a design app it will take 3 - 5 minutes.

Grid Layout

In spring 2017, grid layout support should land in browsers. We can use it as a tool to fiddle things quickly and try different concepts in no time. I’m really excited about it.

With grid, we can simply divide our recipe listing to 3 items per row.

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

What if you want to make the first recipe occupy 66% of the space?

This is a very easy thing to accomplish in grid layout.

li:first-item {
  grid-column: 1 / 3; /* span from grid line 1 to 3 */
}

To learn more about grid, I highly recommend checking Rachel Andrew’s resource.

Where to go from there

If all goes well with the other pages, the next steps will be to refactor CSS and make it easier to update in the future. Also, you will need to progressively enhance the layout. For instance, we used Flexbox and CSS Columns, at first you should have a base experience by using Floats for example and once you detect a support for a feature, you can enhance the layout based on that.

Pros

Deciding in the browser

Our approach is based on that, I like how Dan Mall summarized this. We don’t need to start from scratch in the browser, you can start exploring options in a design app or an online Front-End playground, like Codepen for example.

Exploring different options will make it really easy to shape the design in your mind, by time you will decide on something and then start working on a full page based on that!

Design Changes

Do you want to change an element like the header? You will only change one file and the rest will follow. Do the client want to change the whole color palette? CSS Variables to the rescue!

Checking designs at different breakpoints will be easier as well, changes will be applied to all breakpoints. While in a design app, you will manually change things for every breakpoint.

Cons

Limitation of HTML & CSS Skills

If your skills are better in design apps, you can develop yourself and learn basic HTML & CSS so you can fiddle with web pages. You don’t have to build a page from scratch, maybe you could get help from a developer and take it from there.

Using Multiple Browsers

As you have seen, we have used three different browsers: Chrome, Firefox and Safari. Each one of them has a powerful feature that I used it for. We can solve this issue by looking for browser plugins like the Firefox screenshotting thing, there are a lot of plugins for Chrome that almost do the same thing.

A Bit Slow at the beginning

You will need a bit of practise to get yourself used for that approach. Like any new design app, you need some time to get familiar with it. In all cases, it’s a lot easier that memorizing the shortcuts of a new design app. ;)

Conclusion

Designing and fiddling in the browser is powerful and can open a lot of opportunities for us. Making changes is faster, the idea of taking a browser screenshot to a design app and fiddle with it is refreshing, at least for me. It breaks the routine and let you see the design from a different point of view.

The ideas above might not work for every website, maybe some of them will work and the other will not. If you have any suggestion, I will be happy to hear your feedback and ideas.

OMG, the article is a bit long. Thanks a lot for reaching to the end! I hope that you learned something new.

Further Reading

Share the article

Did you like the article? Share it on Twitter