Web Design and Development

After writing the Firebug Layout tab article yesterday, I found a great write up by Jacob Gube called Awesome Things That Firefox’s Web Developer Extension Can Do. He goes on to list a lot of features that I never knew you could do with the tool.

Some of these things are:

• Determine server information of a website. You can actually see a website’s HTTP response headers by using “Information > View Response Headers”.
• Use a “magnifying glass” to zoom into parts of a web page.
  You can use the “Miscellaneous> Display Page Magnifier” option to get a window that allows you to zoom in and out of the desired areas of a web page.
• You can even view a website’s color palette by using the “Information > View Color Information”

For more tips and better detail, head on over to his site and check it out. He has another great article on the topic called 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension.

I have realized that I really need to look more into the tools that I use to increase my productivity and make these less frustrating. These type of tools can be life savers especially when you work on projects where you actually have to compile every time to see the smallest changes as I do.

I have been using Firebug since it has been released. It is probably the greatest development tool created ever. Yes, the Web Developer Toolbar is great, but I feel Firebug dominates it in many ways. With both tools I probably only use about 30% of it’s capabilities, but it does me fine for now and every time I find out something new, it makes my life that much easier.

Finding Layout

For the last month or so I have been looking through more and more Firebug tutorials. One day I just so happened to go to the main FireBug page, and started reading the text on the homepage. I see a block of text talking about “visualizing CSS metrics”. I was instantly intrigued! I proceeded to click on the link where I was blessed with the capabilities of the Layout Tab.

I have looked at the Layout Tab before but dismissed it as some weird Box Model thing. Sure, some of you out there are thinking “You didn’t know you could do that with the layout tab”, but I am sure others out there have overlooked it.

What Does the Layout Tab Do?

The Layout tab is located after you select the html tab, in the right column next to Style. To get the element in which you want to know the box model specs, click on Inspect and hover over the html elements in the HTML frame. Before finding the layout tab I always used inspect and just the normal Style tab.

Some of the cool stuff it does are:

• Gives you the width and height of the inner most box, the actual specified width in your CSS.
• Gives the specified padding, border and margin of each side of the element.
• Something that I never thought of is the offset. This is the element that its left, top, bottom, and right CSS properties are relative to. Just think of when you are positioning an element absolutely inside a relative positioned parent and I think you will understand it.
• Not only does the Layout tab give you all these values but it lets you modify them.

Aren’t we happy now?

To sum it all up, this is a great piece of functionality that firebug offers and I felt others out there might have been missing the power of it. I have been using it religiously the last few days. It is much easier to edit the margin, padding, border, or width of an element then just using the edit CSS feature, which I find to be a bit buggy sometimes.

I think I might be posting a couple other entries on the functionality of Firebug that we might be missing. Please feel free to add any features you find you can’t live without. You never know if everyone else knows about it or not.

Obviously its been a while since posting, but I figure I will start up again and start sharing some information, tutorials and what not. I always feel if your not going to post regularly then don’t post, I’m sure a few people would disagree with that.

Anyone in the Ann Arbor area should definitly com checkout out our next Refresh Detroit meeting. All the details are listed on our website. We are doing a demo night, where anyone can come and show us their latest websites, designs, applications, tools, and products. You do have to RSVP if you are wanting to demo something, so please checkout out the site for more details.

For anyone that doesn’t know what Refresh Detroit is, we are a group of web developers, designers, usability specialist and anyone who has a passion for the web. We get together to talk about industry trends, special techniques, marketing and a whole assortment of topics.

If you are like me, then most others involved in your life don’t really care about how you used some really cool techniques to code a web site or hear you talk about the usability of a certain site, kind of sucks! The best is how my girlfriend gets so annoyed when I view the source of a site we are randomly checking out. Only us web nerds can understand that type of stuff, so why not get together and talk about it with each other.

With that said, look forward to hearing more post on various ecommerce topics. Since starting my career in ecommerce last year, I have been working on a lot of cool things such as Comparison Shopping Engines, Affiliate Marketing and my dive into the world of software engineering.