The Benefits of Designing in the Browser

Today’s Secret Sauce comes from one of our talented web designers Ashley Cyborski, who is a champion of designing in the browser. Not only is the method a major part of the design process here at Palantir.net, a deeper understanding of code and how it relates to design can allow web designers to push the limits of what their designs can – and probably should – do.

We'll be back next Tuesday with another episode of the Secret Sauce and a new installment of our long-form interview podcast On the Air With Palantir next Thursday, but for now subscribe to all of our episodes over on iTunes.

Transcript

AM: Hi again everyone, and welcome to The Secret Sauce, a short podcast by Palantir.net, that offers a quick tip on some very small thing you can do to help your business be much more awesome.

I’m Allison Manley, an Account Manager here at Palantir, and today’s advice comes from one of our talented web designers Ashley Cyborski, who is going to champion the benefits of designing in the browser.

AC: Hey everyone, My name is Ashley Cyborski and I’m a designer here at Palantir.

A major part of our design process for projects is designing in the browser. At first, I was a bit reluctant to learn code. It sounds kind of intimidating, but doing so has made me happier with my designs and much more efficient in my work.

Now, I’m a strong believer of working in the medium. As a web designer, it is important that we understand the medium and tools used to create our designs. Some people think that working in code will limit their creativity, but I’ve had the very opposite experience. Understanding the basics of CSS, HTML, and some JS [JavaScript] give me an understanding of what is possible. A deeper understanding allows me to push those limits and really flex my creativity on the web.

I’ve written a post about this topic that you can find on our blog, but I want to go through a few of the reasons that I think designing in code is something that every web designer should at a minimum dabble in. 

First, your designs will be more accurate, and more realistic. Have you ever comped up a design in Photoshop, only to have your developer push back and say “this is too hard to do” or “it’s impossible” or that you need to modify various pieces so that the designs will work? If you are the one writing the HTML and CSS, you will be able to implement these harder bits. Creative thinking, which we all practice, extends to code. I’ve found that I’m able to code out some interesting bits that have stumped my development team. When you are invested in the designs, you are invested in getting the details right. You don’t have to worry about passing it off to someone else who maybe has different priorities.

Additionally, you can design with real content. Not that you can’t do that in Photoshop, but you don’t have to adjust the whole page when you change one little thing. There’s no need for random little boxes to measure the distance between list items or titles. Just type the value once and it remains consistent throughout your design. You can easily explore how various title lengths work, or how a news item looks with or without an image. And you don’t have to shift other things around on the page. They just shift on their own.

You are able to realistically see how things adjust responsively. There is no need to create two or even three comps to show a tablet view or a mobile view. You can show it more realistically in the browser, how it shifts within a single comp. 

The real highlight though is when a client comes back with feedback. You only have to make that change in one spot, rather than in two or three static comps.

Secondly, all these little pieces give your clients a better understanding of the final design as well. Before, I often found that clients struggled to understand how a site might change as it adjusts to different viewports. But if you use code, they are seeing it as it actually is. The colors are rendering properly, as are the fonts. They can see how hover states work, and you can implement simple animations to show them things without having to provide a vague explanation that can be hard to understand. 

Third, you will be more efficient once you master the code. Initially, it may slow you down a bit because you are learning, but once you get a basic understanding, you can create one comp that communicates responsive design, you can implement changes without having the page break apart. and you can set up basic styles that you can reuse consistently, and adjust in one spot. 

These are all things with basic HTML and CSS that will increase your efficiency. But once you have mastered those, you can begin to add more tools such as a templating systems or things like sass, compass, postcss, or gulp that will increase your efficiency and improve your workflow.

Designing in the browser doesn’t just increase your efficiency, but it increases your team’s efficiency as well. You are shortening and combining two steps of the process. Not only are you not creating as many static comps, but you are shortening the process of translating those comps into code. And since you are the ones implementing the design, it shortens the design QA process.

This leads to the fourth benefit to designing in the browser, you can communicate better with your developer. Since you are implementing behaviors in your code, you don’t have to describe an interaction or animation, because you already made it. By writing the code, you have left little room for interpretation, so there will be less translation error between the design and development phases. You can add additional comments in your code that your developers can follow. You and your developers are now speaking the same language. There is no need for an interpreter which can ultimately lead to better cross team collaboration throughout the entirety of the project.

You’ve already heard from Carl [Martens] in a previous podcast about design systems, and designing in the browser helps to maintain and truly utilize the benefits of a design system during the process. The fifth benefit is the ability to create reusable code. This code can be as small as a single class, or as large as an entire component. You can reuse existing components to craft them into additional, new components that maintain the base styles of your system.

All of these benefits come together to make you more efficient, but the real benefit is to your clients. I spoke about how they are viewing their designs in code, as they will ultimately end up, giving them better understanding of the process and their final product. But your efficiency saves them time, which translates to either a smaller budget, or more features in their final site.

So how does designing in the browser fit into your process? For me, I usually start with some design discovery and exploration, maybe create some wireframes, and static comps using my tool of choice. Only from there do I move into the browser. I’ve found that you need to get some initial buy-in before you get into the code. My static comps tend to be desktop comps, and when I code them, I begin to make them responsive. As a team, we have improved the process by including a living styleguide with our prototypes. We break each page out into its components and document these along with their elements. This is a tool for our clients after we hand over the site, and for our developers as they implement the site into additional templates.

Learning to design in code can greatly improve your process and final product. So where should you get started? There are many resources online, from instructional posts and videos, to tutorials. I’ve found the best way to learn is to get your hands dirty. Take one of your existing designs and attempt to recreate it using HTML and CSS.

All you really need to get started is some type of text editor. I use Sublime Text. Create one document for your HTML, name it index.html. Add a doctype to the top and a head tag and body tag. You can check online to find how to do that. Create another doc named styles.css. Use a link tag to connect the two together, and drag the index.html file into your browser.

Within the body tag, write something simple like, “hello world.” You should see it in your browser. Within the body section, you can start to write your HTML, and on your styles.css page, you can begin to write your styles. You can style an element with a class or just style the element itself. Just get the initial coding bit out of the way first, and worry about best practices later.

I can’t really describe that feeling of accomplishment when you’ve been working to code something and you finally get it to look right in the browser. It is really awesome!

I really think that learning the basics of designing in code can help to improve your process and increase your efficiency. Your clients will really appreciate it as well. I hope I’ve encouraged you to give it a chance!

Thanks.

AM: Thank you Ashley, and thank you all for listening to this week’s Secret Sauce! For more great tips, follow us on twitter at @palantir, or visit our website at palantir.net. Have a great day!