Amateur’s Guide To Customizing Website Design With FireBug

Ads by Google

firebug   Amateurs Guide To Customizing Website Design With FireBugI have a huge problem with web designers: I am seldom satisfied with what I am offered and can’t express in words what I actually want. Being an Internet marketer I have to launch new sites quite often, so naturally I frequently come across the problem.

So what to do? I can’t afford the time to learn web design and turn into a professional web developer. Besides, I can’t do everything by myself. Luckily, I’ve recently come across a cool web development tool that allows me to tweak CSS on-the-fly and come up with the ultimate version I feel comfortable with.

The tool is a FireFox addon called FireBug and it is so cool that many web developers use FireFox for the only reason that it can be extended with FireBug. It’s an ultimate Firefox addon for web developers. So in this post I am sharing my amateur’s tricks of creating a web site design with FireBug.

Introduction:

Navigate to the site template you want to edit and activate Firebug: use F12 key for quick access.

You will see the tool open in the lower half of your browser window with 6 tabs: “Console”, “HTML”, “CSS”, “Script”, “Dom”, and “Net”. I’ll be talking about two tabs here: “HTML” and “CSS”.

firebug open   Amateurs Guide To Customizing Website Design With FireBug

Ads by Google

CSS Tab:

Edit attributes and attribute values

To change an attribute or the value of an attribute, just click on it, and edit it right in the code. The effect of the change will be immediately visible in the browser window above.

Preview colors and images in CSS

Firebug allows amateurs like myself to better understand the CSS by showing me the preview of each visual property:

firebug color preview   Amateurs Guide To Customizing Website Design With FireBug

Easily figure out exact positioning, padding and margins

The tool provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard – see the effect immediately on the page above and modify the edit if needed.

Let the tool prompt you what property can be used

Highlight the property and use up/down arrow keys on your keyboard to list all allowed CSS properties in alphabetical order.

firebug css properties   Amateurs Guide To Customizing Website Design With FireBug

HTML Tab:

Learn each box properties on-the-fly (margin, border, padding, and content): open HTML tab + Layout to the right and click “Inspect” in the top bar of the tool window. Now you can navigate throughout the page and observe the following:

  • each page element in the blue frame;
  • the corresponding area in the source code highlighted in blue (HTML tab);
  • the box properties visualized (Layout tab).

firebug boxes   Amateurs Guide To Customizing Website Design With FireBug

Firebug’s Layout tab gives you a visual breakdown of each box in the box model and the width of each edge. Additionally, it shows you the width and height of the innermost box, and the x and y offset of the element relative to its parent.

Edit any property right in the layout tab and see the changes live on a page:

firebug boxes layout   Amateurs Guide To Customizing Website Design With FireBug

A few helpful tips:

  • Use Control+F12 (or Command+F12 on Mac) to open Firebug in a separate window.
  • Maintain blacklists and whitelists: Firebug lets you keep a list of websites that it should or should not be enabled for. You can browse in two modes – either enable Firebug for all websites except those on the “blacklist”, or disable Firebug for all websites except those on the “whitelist”.
  • Get some more help here: FireFox tutorial in simple words.

So as you have seen with FireBug Firefox addon you can create and customize website designs even if you are absolutely unknowledgeable in web design like myself. Of course, FireBug has much broader possibilities than described above, so I’d love you to share more tips and tricks of this awesome tool.

Ads by Google

36 Comments - Write a Comment

Reply

kitschparade

1. learn to communicate better.
2. find better designers.
3. stick to your own specialty.

Ann Smarty

LOL, valid points :) trust me, I’ve had to deal with a huge number of designers…

anAmateur

4. dont feel threatened by amateurs.
5. lighten up : )

Reply

allcarvedup

indeed I agree with the communication part, but having been on both sides of the battle between designer and client, I must say that it is also the designer’s responsibility to communicate better. The best designers might not know all the “tricks” (but are damn talented)– they know how to communicate and deliver to expectations. Designers need to realize that unless they are doing something solely for their own use, they are being commissioned by the client to design something FOR THE CLIENT. It is the DESIGNER’s responsibility to interpret what the client wants.

Communication is key on both sides…neither side should EVER assume anything. I have a lengthy checklist I use with all my clients as well as when I have to outsource work. details everything i can think of. (and really, yes, both sides need to learn each other’s lingo at least on a basic level)

I love designers, but like this author, i have found too many designers who know a “bunch of tricks” but do not know what it means to be contracted/commissioned for work.

c

This is also wrong. Unless the design is only for the clients use (which in marketing is not the case), the design should be FOR THE USERS. Its the DESIGNER’s responsibility to interpret what the client wants and then align it with what will work best for the intended users.

Reply

eyal sela

great post, exactly what I needed.

Reply

no_thanks

“I am seldom satisfied with what I am offered and can’t express in words what I actually want.”

Sorry to have to say this but I would fear working with you very much.

“I can’t afford the time to learn web design and turn into a professional web developer.”

It doesn’t just take time. Stick to what you are good at. If you cannot convey what you want to a designer then you probably don’t have the eye for it and, even if you did, it seems you couldn’t convey it to a client properly. You must be able to explain your rationale!

Read no. 7. If you don’t have faith in a designers decisions after they have explained their rationale, ask someone else’s opinion. If they cannot see the sense behind the designers decisions then maybe you have a bad/ill-suited designer.

Also, fiddling with CSS without knowing the impact your changes will have in the cascade or in other browsers is a dangerous thing to do…mind that you don’t request/implement a change that b0rks the styles on another layout or in IE/Safari/Opera/Chrome etc.

Your comments on using FireBug, however, are sensible and may help a non-professional improve their site. Under ‘A few helpful tips:’ list item should read ‘Get some more help here: FireBug tutorial in simple words’.

Reply

Chris

I can think of a lot of people that would be helpful for, good article.

I’d like to add that you cannot actually create a design with FireBug, it’s just useful to try experimental HTML changes on the fly, you could then implement your changes in your code.

@kitschparade, @no_thanks, relax. While I agree that it is not our problem if a client can’t communicate what they want, I find it very helpful if they have some knowledge of HTML, and FireBug is a great learning tool.

Reply

Dunlop

Firebug is really a life saver. I cannot imagine debugging CSS stuff without this tool in FireFox. For IE, I use Developer Toolbar.

One useful feature that firebug has (and IE Dev Toolbar doesn’t) is, for an element, you can see which Style is exactly applied and from which CSS class and file. When you have multiple CSS pages and classes, it becomes difficult to figure out what went wrong and where.

Reply

William Waldon

Great article. Helpful to those new to firebug.

Reply

Xupa

I agree with no_thanks. My largest fear as a designer/developer is when people who don’t know what they’re talking about try to get their hands into the things that I am working on for them. Firebug does help developers, but if you don’t know all the little nuances about cross-browser specs, you can easily destroy the aesthetics and usability to more than 50% of your audience.

Reply

kiran

Great post…Thank u.

Reply

Design4US

I agree that Firebug is an awesome tool to have but for a regular people who have little to no HTML/CSS experience this tool may not be helpful.

You sound like you have had some bad experiences with designer but it may be that you are hiring poor designers with little experience or you are not communicating what you want to the designer in a good way. A good designer will sit down with you and nail down everything you are looking for before you start any creative work COMMUNICATION IS KEY!

As for learning to be a designer… anyone can learn to use Photoshop but it takes a lot of creative knowledge to be successful some people just don’t have it. I would stick with what you know best and consider hiring professional designer not someone who says they can do they work at the cheaper price.

Check this out: it may help you re-think they way you communicate with your designer:

freelanceswitch.com/clients/how-do-you-know-youre-working-with-a-bad-client/

Reply

Adam

Wait, so you are an Internet Marketer but you can’t convey what you want into words? Let me guess, you are always just the “idea” guy and it’s everyone elses fault if they don’t get it right?

Ann Smarty

LOL, I never said that was anyone’s fault :)

Reply

Scrapbooking Baby

Great post, thanks heaps for this, also bookmarked it :)

Reply

Michi

Ann, thanks for the good tips.
I’ll try the tool.

Reply

Design4US

I agree that Firebug is an awesome tool to have but for a regular people who have little to no HTML/CSS experience this tool may not be helpful.

You sound like you have had some bad experiences with designer but it may be that you are hiring poor designers with little experience or you are not communicating what you want to the designer in a good way. A good designer will sit down with you and nail down everything you are looking for before you start any creative work COMMUNICATION IS KEY!

As for learning to be a designer… anyone can learn to use Photoshop but it takes a lot of creative knowledge to be successful some people just don’t have it. I would stick with what you know best and consider hiring professional designer not someone who says they can do they work at the cheaper price.

Check this out: it may help you re-think they way you communicate with your designer:
freelanceswitch.com/clients/how-do-you-know-youre-working-with-a-bad-client/

Reply

Business Person

I was just starting to make the switch from Firefox to Google Chrome. I guess I’m going back. Damn firefox and its awesome developers! (right fist in air)

Reply

Ann Smarty

Thanks all for the comments! And to clear up a few misunderstanding. I don’t suggest creating new designs with Firebug. Far be it from me to do anyone else’s job. Wat I was doing is customizing what I was offered by designers – because with that creative type of word it is hard do realize and describe in words what you are up to. So Firebug is the tool to show rather than express in words what you are trying to achieve.

Again, thanks for the comments! Keep them coming!

Reply

Obamunism

It sounds to me like it does a lot of what I now do with DreamWeaver, but it’s worth a download to check out.

Thanks.

Reply

zParacha

Excellent post for all budding web desingers. Of all the Firefox add-ons Firebug is definitely one of the best if not the best.

Reply

chris

This is a funny designer vs client battle. While Im not a designer, I have commissioned web projects. I can say, without equivication, that if you dont all but give even the good designers EXACT specifications about what you want, meaning design details, it is rare that a designer will deliver what you want. People usually do what is easiest for them, and not what is best for you. And its especially frustrating when a designer performs under your expectations, even after what your detiled explanation, but you have only contracted for “two revisions”. Motivation enough to learn web design. Hey designers: put some effort in and you wont have to tell article writers to “stick to their own specialty” when they want to get into web design.

Reply

Ann Smarty

@Chris, the problem is, with web design you don’t know what you want most of the time. Design is a highly creative work, so most of the times you just need something “beautiful” and “usable” in the end. Therefore it is so hard to understand what is wrong until I “see” the variant I like.

Reply

Imran

Excellent post! I really had no clue how to start on Firbug, this post explained it!

Suggestion: Last bullet “here: FireFox tutorial in simple words.” should be “Firebug tutorial in simple words”.

:)

Reply

Zeal

You sound like a Pro web design though!
You are just fooling us that you are an amateur

Ann Smarty

Thanks for the kind words, but no I am not a Pro (I swear) :)

Reply

John

Firebug is an awesome add-on. Yes, it is a lot like dreameaver but on your browser. On your browser!!!

Reply

Terry

On the flip side of this debate, getting information from the client is very difficult for the most part. If they don’t know that they are looking for, I go over various looks and give them examples of sites that may meet their needs. Very seldom are they satisfied with everything you do for them. They almost always seem confused…..LOL.

Reply

Nasar

Yeah..my top rated Firefox Add-on. All the sites I code in DW, but Firebug makes it faster for editing layout & styles.

Reply

employee clockin clockout

Firebug is one of the best tool for me. Whether using it for tweaking my designs or simply peeking at how other designers create theirs

Reply

Website Designer Katy TX

Firebug is a great tool. I have been using it for a while now and have other plugins that work great with it. SenSEO is a great search engine optimization tool that complements Firebug. Also YSlow is a great tool to check on how fast your website loads that works with Firebug.

Firefox is by far the best browser on the market.

Reply

web

I’m new to this tool, but i think it is really great

Reply

Islamabad

Great article and thanks for sharing. Good guide for all developers

Reply

Chris

Very interesting tool.

Reply

stellar website design

This is a great reference for website design.

Your comment