Firebug! Why develop without it!

If you haven’t seen Firebug then you’re definately missing out. Firebug has been out for quite a while, it’s nothing new; but I think it never got the attention (especially in .NET developer circles) it deserved.

Once, at a convention I brought up that Firebug had javascript debugging capability for a long time while Visual Studio waited until 2008 to really offer it.

Let me make sure I’m not confusing anyone, Firebug is just an addon to FireFox and is not a development environment. It is however a great tool for developers working on multiple browsers to debug javascript and peak under the covers of their web resources and clientside processing.

Here are some nice screenshots I just made of how I use Firefox:

Screenshot of Resources Loading Clientside

You can list your resources that are loading (images, external files, etc.). By doing so, you can see load times as well as broken links or clientside errors (marked in red) while loading.

Debug Firebug

Screenshot of Javascript Debugging in Firefox

Javascript debugging has always been a bit of a pain. With Firebug you can use a familiar system of breakpoints and even an Immediate-style window to check variable values, etc.

Javascript Debugging in Firebug

More than one way to skin a cat… and a webpage

This is a multi-series blog posts regarding one of many ways to take a graphic design and convert it into HTML. This is the current method that I tend to use when doing fairly basic website designs.

Please note, that there are several different ways to do this and their are advantages and disadvantages to each approach; not all of which are technical in nature, such as maintainability, cost of skilled labor when dealing with highly complex CSS methods versus more typical CSS/HTML use, SEO, etc. Many individuals/companies have turned towards developing very strong CSS based designs while others have remained in table-based layout. For the purpose of this post, we will be approaching slicing graphic designs using CSS but from a more “boxed” approach.

The term “boxed” that I am using, simply refers to the majority of the design being segregated out into box regions. I will try and demonstrate this with screenshots.

The design

Let’s begin by starting with our graphic design. The following is a very simply design I started for a friend of mine who sells motorcycle parts. This design was never finalized, so it will work perfectly for our demonstrative purposes and we can continue to build upon it in future posts.

Demo Website Homepage Screenshot

Ok don’t laugh too hard at my attempt at graphic design, I’m not a graphic designer and this is not a production site (but I gave it a shot right?).

Conceptualizing Regions

Now when I view this, I tend to break everything apart into boxed regions. First, major regions starting vertically. For this particular design, I view it as 5 regions which are as follows:

  • Header (logo, search box)
  • Navigation, (navigation, login link)
  • Intro Content (intro/promo text, supporting image)
  • Tabbed Content (what’s hot, browse catalog, search products)
  • Footer (footer links, text logo)

It is perfectly acceptable to do more or less specific regions. For example, I could have made the tab and the content in the tabs seperate regions, or make the header and navigation a region, Intro and Tabbed Content a section, and footer.

Let’s visually demonstrate the region’s we’ve chosen for this example:

Demo Website Homepage Overlay Screenshot

Now, keep in mind, these are not slices. These are for conceptualizing only. We don’t want to slice this in this manner for several reasons; we don’t want to mix images which should be optimized as .gif versus .jpg, we don’t want to use graphics when we can use text, etc.

HTML Conversion

Now that I pretty much know how i want to begin grouping everything, I am going to work top-down to begin converting this design into HTML. I want to stay within each region and work from left to right using a CSS to create a tableless design.

Here is the HTML for the regions that we’ve just seperated:

<div id="header"></div>
<div id="navigation"></div>
<div id="promocontent"></div>
<div id="tabbedcontent"></div>
<div id="footer"></div>

Ok, we’ll expand on this quite a bit in upcoming sections so stay tuned to find out more about conceptualizing, slicing, and building basic html from graphic design mockups.

Teaser

In the next section we will be covering how to build out each section (header, navigation, promocontent, tabbedcontent, and footer) based on the current design.