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