Designing in the Browser

*I realized after writing this article that you might not be totally sold on the idea of In-Browser Design so here’s a list of Pros & Cons.

There have been many industry leaders talking about their ideas for how web design is changing. Most of the talks center around the idea of getting out of Photoshop and designing in the browser. Over the last year, I’ve made a considerable effort to put this into practice. As of right now, I’ve designed 8 websites fully in browser. There’s been lots of problems, but there’s been even more rewards. Hopefully, I can share with you some experiences where I’ve had great results and places where it didn’t work so well.

Tips

Make big decisions first then move to small decisions

The biggest difference I see between using Photoshop and the browser is that one makes it easy to change your mind and the other is not. If something isn’t working in Photoshop you just move it around until it makes sense. In the browser, it’s not that easy. To deal with that, you have to take things one step at a time. Don’t worry about what color your links are when you don’t even know what’s in your navigation. The first thing you need to do is make a list of everything on the page. I start with the logo at the top and end with everything in the footer. Once you have a full list, put it in order of the most important thing to the least important thing. That would generally be the logo and navigation listed at the top with the content in the middle and the everything in the footer at the end. This isn’t necessarily the order it all has to be on the site.

Once you have it all listed out, it’s easier for your to make sure you have everything accounted for. You should also be able to link everything on that list back to the main goal of the site.

You’re going to need a pencil and some paper

In my opinion, sketching is an essential part of the design process. It doesn’t matter what you’re designing, but it’s especially true for in-browser design. There’s nothing simpler than drawing 10 boxes on paper and arranging them in a layout. By sketching out your ideas first, it takes away the need to move everything around later. Make your layout decisions on paper. Sketch everything until you’re more than comfortable with it.

I would actually start by sketching small parts first. For example if you need a cart widget for your eCommerce store, start with that. Your navigation is by far the most important part of your site, maybe start there. See if a horizontal nav bar or a vertical sidebar nav will work. Once you’re happy with that start drawing it in relation to the rest of the site. You’ll know you’re ready when you can see it all coming together in your head.

HTML goes before CSS

To some it might seem obvious, but for me it wasn’t. On my first project designed in browser, I stumbled through trying to organize my CSS and HTML at the same time. It ended up as a big mess and it took me much longer. So, I suggest pulling out that list from before and opening up your HTML. Write out your HTML to follow that list. You might look at your sketch too for guidance on what goes in the sidebar and where that sidebar shows up in the document. In any case, make sure that HTML document has everything in it before going into CSS.  Yes, once you start on the CSS, you will probably have to move, change, or add to the syntax of your HTML but it’ll be less than if you’re trying to do them both at the same it.

Don’t start with your CMS

We use WordPress and I absolutely love it for many reasons. But when designing in browser I don’t want to have to worry about PHP. I just want simple static HTML and CSS documents that I can have full control over. So don’t try to make your comp in your chosen CMS, all you’re trying to do with your comp is communicate an idea as quickly and efficiently as possible. If fact sometimes I even show my sketches to the client to communicate the idea before I even move it into the browser.

Make a template for yourself

Since we use WordPress, we also have a base parent theme from which we build everything. So I’ve copied and pasted the actual mark-up from that theme into static HTML and CSS documents. That way I’m working with the same wrap, container, header, body, footer tags as the theme which it will be developed in later. This helps the developer get a little closer to the final product.

Don’t make your first comp responsive

Although designing in the browser is super easy to make your comps responsive, I suggest you hold off. Just make your comp with a regular width of 960px and leave it there until you’re pretty comfortable with it. My first project, I tried doing it responsive as well in browser and I ended up wasting a lot of time and, we’ll just say, things didn’t turn out great. When you’re ready to start making your in-broswer comps responsive, I would do them mobile first. Since this is just a comp, you don’t really need to worry to much about browser support. Currently IE8 doesn’t support media queries so your site will look terrible for those older browsers. But as long as your client doesn’t use IE8 you will be fine.

Use a style tile

The style of your site is very important. It’s what the client will use make their ultimate decision. Branding a website correctly is an entirely different topic. Photoshop and other tools, help a lot in this area. Others have theorized and started using something called style tiles.

I don’t use them in depth. Maybe one day I will but I do use tools like ColourLovers to create my color palettes and to find my fonts I use Typekit. I’ve even used Typecast to see how the fonts and colors will work together. For patterns and textures, I use Subtle Patterns. When I need icons, I’ll start with The Noun Project and I usually modify them in Illustrator. Or I’ll just draw the icon myself. I’ll even use photoshop for creating custom textures, cropping images or creating a png that I need in a layout. You know, what Photoshop was created to do. All this goes into the look and feel of the site and with, some creative use of tools, can expand your creativity.

Summary

Although on the outside, it might seem more restrictive to the creative process, in-browser design has actually made me more creative. By changing my process to being more compartmentalized I’ve found great success and become a more disciplined designer for it. Designers make creative choices around a set of perimeters that solve a problem. Without the problems to solve, creativity is left to just making something look cool or different. As designers, we need to focus on making a website work for both the user and solve problems for the client. Our creativity is in solving those problems and in-browser design helps to that end.

Comments

  1. I find its really useful to go through the list of things you mentioned over here. What particularly stood out to me was the introduction of style tiles. They may be the perfect thing that I’m looking for since I can’t seem to get moodboards working, and detailed comps take up too much time.

    Thanks for sharing :)

  2. Thanks for sharing your process. I always find it interesting to read how others work. It gives me ideas to try new things myself. It’s funny you see it easier to make changes in Photoshop than in the browser. For me it’s the other way around. I’m just not that quick working with some things in Photoshop.

    I completely agree about sketching. It’s always among the first things I do with any design. It’s quick and you can explore a variety of possibilities. In fact I agree with most everything you said. A couple of differences though.

    Sometimes I will work html and css at the same time. I have code for common layouts I used saved and easily accessible so within a minute or two the basic structure of the page is set. I’ll then start adding more specific html and content to the header say and often I’ll then style the header. I’ll move down into a main content area and do the same. On some projects though I just fill in all the html first and then work the css.

    With style tiles I’m not quite using them, but I’m trying to do something a long similar lines. I like to start with type and to help me choose typefaces I add some real content to an html page and try different type with different font sizes, line heights and measures. I’ll usually have a text file with hex values for possible color schemes and I started adding in those colors in some way to the html page with the type. My thought is I can do the same thing with grids and in a sense build something of an html style tile that can be iterated to become the html/css template I later turn into a WordPress theme.

    • I’m with you on style tiles. I’m not quite using them to the extent that I see others. I don’t know. I don’t think my clients are savvy enough to understand what a moodboard or style tile would be in reference to their site. I’m sure they would think, “Why not just build the site?” But for myself, it gives me the ability to think about the branding aspects of a site before I’ve finished laying out the site.
      What’s also interesting is what some like Brad Frost are calling Atomic Design. Or another way of saying it is tiny bootstraps for every client. I’m really really intrigued by this for some of our bigger clients that are paying 100K for their site. This would give their IT departments the tools they need to make changes to their site in the future. By defining the smaller elements and how they fit into a larger picture, you’re, in essence, creating a brand guideline for their website. This idea really intrigues me.

      • Yes, I love this tiny bootstraps saying which I believe Dave Rupert coined. So I suck at PS (I’m developer first), so in a way, I have to design in the browser. As a result, I’ve developed an in browser sort of alternative called ditbi: https://github.com/roblevintennis/ditbi (get it? no? Design In The Browser Interactively). The github has a link to 4 min video demo.

        Right now it only helps you with color and basic typography (e.g. font stacks for title and body). The idea is you open up a style tile like web page, interactively pick colors and font stacks, and export. After export you’ll see values for CSS, Zurb Foundation (it’s optimized for this), Sass, LESS. You can use with Bootstrap too if you wish. If you happen to use Foundation you can copy over the values to _settings_overrides.scss and immediately view a kitchen sink like page which should reflect your color/font choices.

        Admittedly, ditbi doesn’t quite yet live up to it’s name but it’s early so I hope to continue to make it more interesting over time! Yeah, another huge part of DIB is getting the layout right and fiddling with fluid grids, etc. To my mind, layouts will always require flexibility and control, and so I don’t see a way to add that to my tool; well, I suppose preview layouts could be incorporated but I dunno.

        Subtle use of subtle patterns as you mention also adds a lot as you mention. Maybe I can add that.

        Of course there are many techniques popping up like paulrobertlloyd/barebones, Pears, pattern primer, etc. I love the idea of adding patterns/components in a directory and having the tool pick it up. But I don’t know that I love requiring firing up node.js or MAMP, etc., just to get started on static design. I tried it for research sake. Still not sure.

        Obviously, we’re all trying to figure out how to adapt to mobile first, responsive, etc. :) I think posts like the one you have here that provide insight as to how an experienced designer/developer does this in browser thing provide incredible value; for example, I use most all of the techniques you mentioned but hadn’t heard of the Noun project which is just awesome (yeah, I live under a rock I know) … now I can add that to my arsenal .. so thanks Andrew!

  3. I started to create WordPress themes back in 2007. I’m not a designer, so my Photoshop & Illustrator skills aren’t those of a pro. So I had to start to design somehow and my tools of choice were HTML + CSS. Now, for me, what you wrote above is something I already knew, because I am doing this for years. Basically, I agree with most of your ideas.

    However, I don’t agree with not using the CMS of choice when it comes to WordPress. The beauty of WordPress is that it makes it easier to wrap the content. Instead of a the common bulk content, such as images and paragraphs and links and stuff, you just use a PHP function. And the most beautiful thing about WordPress is that you don’t even need to know PHP, you just have to understand some basics – the include() function, so you can understand why the header, the footer, the single post and the page and other files are separate templates. Then you need to know some of the basic functions, like the_excerpt() or the_content() etc.

    It’s much easier to work with code, in a .php file, instead of a bunch of cluttered lorem ipsum in a .html file. And the beauty of it is that you only need Coda (or whatever editor of choice) to make all work.

    • Yeah, I totally agree that WordPress makes things much easier, but as a designer, I don’t want to get bogged down in creating custom post types and creating the meta boxes that go with each, and then creating the custom taxonomy that should be used. Also most often, our website will then create connections between different post formats. Now we use a lot of plugins to help make these things easier, but as a designer, all I’m trying to do is get an idea across to the client. I don’t want to build the entire site before they’ve even approved the homepage.
      It is possible one day that, at our office, we’ll switch and have the designers building more of the website, but as it stands now, there’s definitely a difference between designing and developing a site.
      Something interesting that I haven’t yet talked about, is that we create a content site. This site is a basic WordPress install that the client can start entering in their content based on the sitemap, planning and research we’ve done for their site. A lot of times the developer will go ahead and create the Custom Post Typess, Custom Meta Boxes, and Custom Taxonomies that we will need for later. That way the client can go ahead and start working on content for the site.
      If this model continues to be an incredible success for us, there could be a shift in our overall process where development is done first and then design is done after, or rather more in tandem. That’s probably where we’re headed at our company.

  4. Thanks for sharing, always insightful seeing how others approach it!

  5. Buen artículo, gracias.

  6. Andy:

    Your article is perfect! Unfortunately, I am no expert so my opinion probably counts for little. Instead, I have been around since before there was an Internet. I developed one website way back when and am only recently returning as a developer with a history of desktop programming experience. I am taking classes at a local college. Each class layers the possibilities and issues for web development, but never seems to take us past the divergent path of possibilities to one of “so now what it the best way to put this altogether?” As I have tried to piece together a best practice method for webpage development that would afford maximum efficiency and true clarity. In trying to put it together I have surmised everything you wrote here. Without wanting to go through the arduous process of trying out what made the most sense, (e.g., I have a full time job that is not development related and I would hope that I wouldn’t be starting from scratch because I have background/experience), I have been essentially stuck studying – everything!! It is overwhelming.

    Then I read your article. Its confirmation of what I thought might make the most sense for webpage/website development is so reassuring and relieving. I think I can put into practice everything you have said and then make decisions (informed and experienced ones) from there. I can’t tell you how grateful I am for the direction and confidence your article provided this novice. I greatly appreciate individuals putting into writing information like this for all of us. I am impressed that these “give-aways” of much experience are put out for others to take advantage for free. Furthermore, writing articles like this takes time and who knows how or if anyone will benefit. Do continue to think, write and help the rest of us. You’re the best!

  7. Michael Rutter says:

    Thanks for this. I used to be all for designing in the browser but its slow going at times. I think a hybrid approach is the best detailed in this video http://www.webpayload.com/video-episodes/ever-struggled-with-the-rwd-process-and-photoshop-vs-designing-in-the-brows. Good client communication, paper and no grand revealing really help too.

Trackbacks

  1. [...] Designing in the browser » [...]

  2. [...] Designing in the Browser http://andysearles.com/designing-in-the-browser/ by Andrew Searles: “Although on the outside, it might seem more restrictive to the creative [...]

  3. [...] supports the idea of designing in the browser. When you preview your work, it will open an instance of Google Chrome. As you’re coding, it [...]

Leave a Reply

My name's Andrew. I like to make things. Better yet, design things. At the moment it’s websites for a company called Infomedia. I also take on a few freelance clients when I have a chance. WordPress is my main tool at the moment. These are all the places you’ll find me on the web.