Table of contents
- Exploring design ideas in the browser
- Presenting the design
- Ideas and concepts that we can use today
- How modern CSS can make things easier and faster
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 😄
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.
Describing content by using the suitable HTML elements will make the process faster. Here are a couple of things I usually do:
- Finishing the HTML of the whole page before starting with CSS styling.
- Review the page just like you are looking at a word document. Is the content easy to read? Did you find any difficulty in getting a specific info? If yes, then you should make the HTML better.
- I like to use the humble
<hr>for separating header and footer from the main content.
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:
- Typography styles
- Color Palette
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.
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.
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.
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:
Open Firefox dev tools.
Right-click on an element and pick
The screenshots are saved in the default downloads folder.
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:
Editing the HTML file.
Selecting that element from dev tools and right-click, then “Edit HTML”.
document.designModein the browser console.
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.
What we have so far:
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.
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:
Go to Tools > Web Developer.
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:
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.
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:
Freeing up space by moving elements down.
Increase the artboard size by using the crop tool.
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.
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:
Exporting it as
.jpgfile and apply it as a
background-imagefor the body element.
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
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.
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
In the below video, I added
filter: hue-rotate(value) to the HTML element, all colors has changed, even the featured recipe photo.
In order to remove the effect from the featured recipe photo, we will revert the hue value by using a negative value:
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:
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?
By using CSS Filters and
mix-blend-mode, we can try different blending effects right in the browser.
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:
- Download the font and embed it manually with CSS
- Link it in the
<head>of the page. This option is faster.
Add the below line to your page’s
Then in CSS, apply the font to the
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
Example 2: Editing Shadow
Example 3: Editing Featured Recipe
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.
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
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
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.
For instance, we can use it to create a mansory-like layout in no time.
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.
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.
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.
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.
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!
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.
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. ;)
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.
- Deciding in the browser
- A huge thanks and shout out for Stephen Hay and his inspiring book “Responsive Design Workflow”. You can find it here
- Designing in the browser, pro tips to make it work for you
- Designing in the Browser: Why You Should Make the Leap
- Designing it better in the browser
Share the article
Did you like the article? Share it on Twitter