Design In The Browser For Real World Sites

Posted by on Mar 18, 2011 in Design | No Comments

When I started designing, it was a long road to learn how to design a beautiful site … one that just looked cool, bitchen and fantastic. As time went on and browsers became more capable of providing us with many of the features we would use images for, CSS3 has made it possible to design within the browser itself and totally skip the mock-up stage in Photoshop or Fireworks and design with code in our browser. I think this is evolutionary. As browsers become more capable at handling our code, why not take full advantage of this and bring your design to life as you code.


When I design, I do a mock-up of sorts. I have my mock-up in Fireworks going but not in full detail as I use too. I have color chips to show the color way, gray rectangles with an x in them for images, Lorem text for body copy ( unless I have real content from my client in which case I always use real content ) and the rest of the page being done in Dreamweaver using the browser to design. What’s essential to do this is a thorough knowledge of HTML. When you move chunks of code around in designing, one must have a knowledge of browser differences and a complete understanding of how to fix or code for browser compatibility. Dreamweaver makes that easy with it’s coding engine and that’s a nice knowledge base to have as a backup.

Write HTML First

What’s also essential I have found is to write your HTML first before even touching a line of CSS. When I first started I tried to do both and that was a nightmare. Then I read somewhere to do the HTML first, get the framework going and then use CSS. That little recipe for success has helped me in many ways. It’s made me a better coder. I try and make the code as lean as possible. When it’s time for the CSS I know all is well with my framework and am ready to go.

Deliver The Content

I first heard of designing in the browser from Andy Clarke in his book Hardboiled Web Design, in which he eloquently discusses why to do it this way and its benefits. After reading that book, I started to code and design in the browser. It made sense to me and I find it easy to do and actually prefer to work this way. I’m not going into the design blind without a mock-up. I have a reference design done in Fireworks and although it’s not a complete design, there’s enough to it that I can use it for reference. And before I start designing, I have a nice mockup in my head also, I see the finished piece and a lot of work goes into that reference mock-up that shows on the page. I try to cover everything and make sure that’s the best way to present the content. Yes, the content. It’s all about the content, that part of the design that’s 95% text based.

Happy Clients

What I love about working this way is that I can show my client in true form, what the end result will be at any time. No PDF’s or snapshots. They can see a real working, true to life presentation of what, say, their navigation will look like or their homepage. Wow them right from the start. And from my experiences in doing it this way, my clients are happy because the stress of waiting, the stress of not knowing is banished. I can say, here’s your homepage as it will look in real life. That way they get excited and are blown away right from the start thus alleviating any undue stress from worry they may have. Think about it from their point of view. They are putting money for work they won’t get to see for a time and hope it looks great. One quick email with a link and that worry is gone.

One Change To The CSS File

Another reasons I like and prefer to work this way is that I cut out a lot of time in the mock-up stage. Yes, I have a mock-up and although it’s not as detailed as I use to work, it’s enough for designing. Think of all the pages that need mock-ups? Homepage, contact, about, products … when you factor in the time to do all of them it adds up. I can cut all that time out and work directly in Dreamweaver and be more productive. Don’t like the color of the rollover state? It can be changed with one click to the CSS styles.  Same with ANY feature. Don’t like it, I can make state wide changes to the site with one change to the CSS. Now that’s productive.

Graceful Degradation

I design for the latest browsers and in doing so the browsers that support CSS3 get all the lovely goodness that CSS3 gives us. Internet Explorer still gets the links and a functioning site except they do not get the CSS3 goodness because they do not support it. This is graceful degradation at work. Design for the most capable and still give the others a full functioning site.

Some Helpful Tips

Here are some tips I use that will help you on your quest.

1) Use a good framework – This will help with organization and alignment of columns and sidebars. It’s essential.

2) Use a great editor – That can be Dreamweaver or Coda. Just get a great one and it will make your work easier.

3) Have your color scheme planned out – This may not sound significant until you start and realize there’s lots of greens or reds to choose from. Having it set up in advance will make coding a breeze.

4) Get a good browser testing tool – Whether that’s Adobe’s Browserlabs or some other testing site, use it and use it again until your design sparkles.

As you progress in your skills with designing websites, consider designing within the browser. Try it out. See if it goes with your work-flow. Note my essentials and go forth and design with the knowledge that today’s browsers are quite capable of handling CSS3 in giving your design all the curves without the images. Soon, all browsers will be supporting CSS3 so get on board now.

Liked this post? Subscribe to my RSS feed and get loads more! If you enjoyed this article tweet it and follow me, I’d appreciated it.


Leave a Reply