Designing in the Browser

So there's been a lot of talk lately about designing in the browser, and while I 100% agree with the idea in theory it oftentimes doesn't hold up in practice.

Both Andy Clarke and Meagan Fisher both make good cases for it and lay out some pretty convincing arguments on how to persuade clients to buy into the idea.

My problem comes with the fact that they both base their arguments as if the client has supplied them with the content the are planning to use on their site. Oftentimes when I am designing a site, I use generic Lorem Ipsum until the client has provided me with the copy. It seems as though the client wants to move forward without being ready with the copy.

If that is the case, what is the best way to educate the client and convince them to use agile design and development in the browser? Do the same arguments still hold, or is there another way of going about this?

I wholeheartedly agree with both Andy, Meagan, and others with designing in the browser and I do want to start working this way immediately. Sometimes though, I feel if you're not an industry-leading designer such as Andy or Dan Cederholm, you're not always working with clients who are as understandable as theirs are.

What are your thoughts?

I think the problem has nothing to do with clients. Speaking from experience, my clients couldn't care less if I do a PSD mockup first and then code it or design straight in my browser. They want a working website and if you're confident enough to tell them that you design in the browser and it will never be completely identical across browsers, they will respect your expert opinion and process, even if you're not an industry leader.

If they are telling me that I have to do a PSD mockup first when that isn't the way I'd usually do it, they might not be a good client for me. I don't tell them how to do their job.

If you did need to explain it to a client, tell them that developing in the browser will save you time and therefore it will save them money. It eliminates the time spent on the unnecessary PSD mockup, which is about 15 hours from an unofficial survey by @sazzy. I will also be working with the code and actual content (even if it isn't finalized by the client, make some real stuff up or get their working draft. Anything is better than Lorem Ipsum. The content is the biggest part of your design).

What worries me about designing in Photoshop is that web designers spend time being PS jockies rather than the code of their website. A few designers who commented on Andy's article seemed to design websites only in PS and outsource their coding. I think that is insane. How could a web designer not know how to code a standards-compliant website with HTML and CSS? That's like a painter not knowing how to use an actual paint brush or an architect not knowing about the ins and outs of the building material he's working with.

Part of your business is educating the client up front. Too often designers complain about clients simply because they didn't set the right expectations from the beginning. I rarely see a site that puts into detail the design process. Imagine if you told the client that you do mockups in Photoshop, but also like to get it in a browser as fast as possible so the client has a working prototype.

Of course a client is going to be upset when they see a perfect PSD and then are handed something that looks different in their browser. You don't go to a car dealership and order a red car with a spoiler to be given a blue one without a spoiler.

People talk about the perfect clients and how rare they are and the reason usually is because they are not educated in how they should go about things.

Feel free to stick with PSD mockups and show them to the client as long as you make them aware of how things might change within the browsers.

I don't think there is any such thing as a perfect client, although some clients are definitely better than others. I never think a client is stupid and will always go to great lengths to describe my design/development process.

I agree with you, Kevin, that any Web designer worth his or her salt should be adept at HTML/CSS. Learning HTML/CSS is not any harder than it is to use Photoshop, and CSS design could arguably be easier with the advent of CSS3.

I'm missing your point, Scrivs. Are you saying that we should continue to use practices such as designing in PSDs and then switch to development in the browser? Or are you implying that each designer should do what they and their clients are most comfortable with?

Where do you see this going? Do you see more people designing in the browser now that CSS3 is gaining momentum? Are those that do design in the browser going to jump far ahead of their peers who continue to strictly use Photoshop?

I'm saying if the argument for designing in a browser is to help benefit the client and not to confuse them when things look different in browsers then usually that can be fixed by a little education up front.

I don't see an issue with designing in PSDs although I have always preferred to see working prototypes instead.

I just skimmed through Andy Clark piece and agree whole-heartedly.

It's not so much about designing in the browser as it is having the design degrade gracefully across browsers.

The IE page in Andy's article looks nice but the Safari page has some nice details. Neither affect the content of the page. Sometimes as designer we forget that users visit sites for the content not for the design. The design should showcase and lead the viewer through the content and as long as this is accomplished the details aren't important as long as they degrade nicely.

I'm loving using Firebug to fix my CSS issues on the fly, then once I've solved the problem or got it looking exactly how I want it, I'll go and hardcode those changes into my CSS file.

In my experience the tools don't matter so much as the end result. I agree that there needs to be a bit of education to the client so they understand that you've designed flexibility and forward-compliance into their site. Most of the time they like knowing that their site is on the "cutting-edge" and once you explain that to them they will likely be fine with current CSS3 browser limitations.

Is anyone aware of a Safari plugin similar to Firebug? I love Firebug, but would rather not use Firefox.

Scrivs,

You can enable the Web Inspector in Safari 4.

Preferences > Advanced. Then, once enabled, you can go to Develop > Show Web Inspector.

Ah, I only used that feature for JS debugging. I'll have to check it out, thanks Damon.

I think it's a great approach to consider for certain projects, and I've worked on projects where we did that. But I can't stand how preachy people are getting about it. I and designers I work with play Photoshop like a musical instrument, but Andy insists that it's clunky and slow. That's just not true--not for everybody.

It also matters how you approach design. Some people like to settle on their rules first and then find ways to effectively break them. I, personally, like to explore and goof around with ideas, going for the feeling of it first. Then I build in those necessary rules. Sort of working inside-out versus outside-in.

The truth, of course, lies somewhere in between. Photoshop is not the best tool for web design. Neither is the browser. Someone, soon, is going to get smart about it, take the strengths of both approaches, and create a kick-ass piece of Web Design software.

I think you said it best Colin. We are provided with the tools and it's up to us to decide how to make the best use of them.