Designing in the browser is one method to create our websites or applications. It isn’t the oldest methodology and is usually not for everyone. For me, it is a convenient way the design, and in this article, I try to tell you why.
It is quite a popular idea to use Bootstrap or Tailwind to build any layout today if you think about it. You can create anything with predefined tools in an opinionated way; all you need to do is learn the preferred framework.
What is “Designing in the Browser”?
Designing in the browser means that your tool of the trade is HTML, CSS, and JS right in the browser. From the start, you write code and iterate with it. You don’t use classical applications for graphic work like Photoshop, Affinity Designer, or Figma for static mock-ups. Your design will be living and dynamic (you can view it on any viewport) from the start.
And why is it a good way of creating?
- You can test it in all viewport which is handy because today everything is responsive.
- We merge two different processes into one (static mock-up creation and HTML/CSS building).
- Early testing. It is different when you see your ideas right in the browser as it is intended.
- You can use a lot of great tools (Axe, Wave) to test accessibility from the start.
- Easier to present the plan to your customers. It is different when they can view it correctly in the browser and on mobile.Simpler prototyping. Designing this way is like prototyping. If you want it, you can test different parts and processes.
And what are the disadvantages?
- It is messy. Correcting your mistakes is more complicated than in a graphic program. You have to give your best to get better code, but in the end, it is an advantage. Refactoring elementary in every project, you can’t start it early enough.
- It would help if you had a starter kit or a framework in which you can work faster. Tailwind CSS or Bootstrap can be an excellent way to start. And, of course, you can always create your foundation.
- You need to know your profession well; if you want to design this way, you must understand design and code well.
My Story With in-Browser Design
I have a classical graphic design background back from my early web journey days. At first, I designed static sites in Photoshop. There was a lot of problem with this way of creating. It was hard to present the work or view it in the browser (in its natural environment); this was partly solved with the appearance of some new tools like Figma. Figma is for layout designing, but unlike PS (or Affinity Designer), you can export linked presentations, prototypes.
After that, I started to learn HTML and CSS. With the appearance of the responsive design, the image-based plans were a little bit obsolete. You can’t see and show how anything would look on a smaller browser. Of course, with Figma, it is also more manageable now.
I know the front-end, and I like to think in components. So why not try to remove any graphic program and create something right in the browser? I gave it a try, and I liked it. It was evident for me; usually, I use this technic in the design phase.
The Starting State Is Important
When you use a classical design program, you get a lot of handy tools. Some of them are needed when you code first, too.
- You need a system to write DRY code.
- CSS variables (custom properties) are an excellent way to lay the groundwork.
- It would be best if you had a grid. With CSS Grid now, it is easy to make any complex layout.
- Sass can help to separate the files and write less.
- A good code editor which you are pretty familiar with.
- A server with instant preview to eliminate manual reloading.
- Some templating engine (like Pug) or PHP to reduce the repetition (using include).
We experience a long time creating a starter kit that we can use and just published it on GitHub. The “Spruce CSS Starter Kit” is a simple foundation where we (or you) can fastly prototype or design using our very own CSS framework, Spruce CSS. It contains the necessary tools like Pug for the templates, Sass for the CSS, and Browsersync for the server.
Refactoring, Refactoring, Refactoring
In my opinion, one key component is refactoring. When I start to design, it ends up in really, I mean, really messy code. Refactoring is a must, which – in the end – is great because it results (mostly and hopefully) in better code.
The Pixel Perfect Design
There are always bad ideas, and for me, the whole pixel-perfect concept is one of them. Our medium (the web) is a wonder. It is resilient and can be amazingly inclusive. I don’t think that coping or recreating any static plan to pixel perfect would count or matter. Designing in-browser, you can also eliminate this.
When you design static, it is hard to eliminate the pixels as a unit. I can’t remember when was the last time I used pixels on the web. We don’t need them; there are better, relative units like em, rem.
