Designing Websites In Browser (gasp!) [closed]

Question

I'm interested in people's opinions on the pros and cons, or downright "hell no's" on designing websites in the browser, and moving away from Photoshop, Fireworks, etc.

I've been designing a relaunch for my website, and trying it out in the browser, and I'm not looking back.

For example (I use a 960px grid with 12 columns):

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

Not only has designing become fun again, but using grids, vertical rhythm, even the golden ratio, has never been more easy. Not to mention, it completely annihilates the gap between designing and static coding.

What do you think?

Answer 1

Are you saying you make wireframes of pages in the browser (by HTML/CSS) first and then apply a design? That's what I do (and 37Signals follows that thought too).

In my opinion it's good for developers to make static wireframes without touching Photoshop since the site is instantly usable and time isn't wasted on making things look just right.

Also there doesn't tend to be much of a design streak with programmers - I like to leave that to the people who know every PS command under the sun :)

I also use the YUI Grids CSS framework for speedily creating layouts.

Answer 2

Well, doing work using the browser isn't the worst thing in the world, but there are a couple of "hell no's":

1) Do NOT design your app using IE. Use Chrome or FireFox. IE's noncompliant behavior can fool you into thinking your CSS is valid when it really isn't. Your primary use case for IE is testing your site in IE.

2) Don't name your classes for how they appear, like you've done in your example.

Answer 3

Don't!!

If iDesign Steve learns to design directly in the browser,

1. Innovation will suffer: Steve doesn't care the limitations of CSS/HTML/whatnot. He is free to dish out the most impressive site humanity has yet to see. It's average programmer Joe's duty to stretch the limits of CSS/HTML/whatnot to cram that approved deisgn in time, and see it torn to bits by some stupid browser, which happens to have a good size of market share, just before the deadline. Face it, writing CSS feels like writing assembly code. Accomplishing even the most basic things (fluid multi column layout anyone?) is ridiculously hard and it makes you high for a while.
2. Steve's coolness factor will diminish: Not a single developer that I know uses a WYSIWYG tool to generate HTML/CSS or considers this acceptable. When all you need is a text editor, you don't look as cool. When a customer throws a look at Steve's monitor, and sees a bunch of text instead of several windows, a hundred little funny icons, and a half finished colorful draft, he may as well think "My 7 year old grandson can type stuff too...".
3. Joe has still more constraints than Steve has: Site should be accessible, layout should be fluid enough to accommodate all kinds of output, play nice with javascript... If CSS/HTML will be rewritten anyway, there is no point struggling.

Be a good teammate and fire up Photoshop now. Joe needs his job to pay his bills.

Answer 4

Well for someone with my level of design incompetence it's one white board sketch and then straight into HTML and CSS.

Still my websites look awful...

Answer 5

Over the last few sites I've done, I've taken both approaches. Each time, the page designed directly in HTML/CSS has taken a lot less work, but has been a much less appealing website. If you care about making an attractive page, start in Photoshop, otherwise you'll too often take shortcuts in your CSS. An idea can be created quicker and is much more flexible in Photoshop which will lead you to experiment with your ideas and you'll come up with a visually better site.

Answer 6

I never design websites in Photoshop; I go straight from physical sketches to HTML and CSS. I find it quicker and you don't end up throwing away something that you've been working on for hours (the Photoshop file).

Answer 7

I've chosen to stay with wireframes and designing from paper right into the browser. Of course, it's what works me for, and it has made me a much more creative designer.

Although I like to use my own CSS libraries for it, take a look at Google Blueprint, and check out this article by web designer, Mark Boulton.

Answer 8

hell no!

• you're redoing the 'tables for everything' mistake, just using classes instead of tables.
• you're mixing presentation (where do i put this) with content. your classes don't tell what is this, they tell where to put.
• your design is fixed size. it won't flow with windows sizing, so it would either need horizontal scrolling or big white space at the right.

but i don't get why anybody mentions PhotoShop. it's almost the last tool for web design, maybe Illustrator is the only one even less appropriate for this.

Answer 9

I have found that, although a physical sketch can get you started on the right track for a design, you can make far better looking layouts within Adobe Illustrator (which is much easier to move elements around in than Photoshop). Once your design is complete, use Photoshop to slice it up.

Answer 10

One opinion to consider is who you are designing for. If you are designing a site for a client, it can be helpful to do quick mock ups in photoshop so they know the layout and they can sign off on your design. Once the client has agreed on a design, you create a wire frame that will fit the elements from your mock up and then you can splice you elements that require actual images right from your mock up.

When following this method you have to consider all the available design elements that you can use to implement your mock up and make sure that you put them together in a well designed and semantic nature, not just something that will get the job done.

Answer 11

Compass, specially blueprint/semantic, helps a lot when you're designing in the browser. I also like to keep layout and styles on different files, so I can more easily dispose of styles I don't like while keeping the wireframe in one place. I'd also recommend using color pallettes and composing to a font scale, both are useful and easier to achieve using SASS variables.