Webmasters Gallery

As you use Google’s AdSense for more and more time you begin to learn from the mistakes of the past, and you slowly begin to realize which of your actions kept your site from reaching its full potential.

But an important part to making a mistake is telling people about it and teaching them how to avoid making the same mistake. So this is a list of the top five mistakes people using AdSense make.

You should read them well, and see if any of them is applicable to your contents. If it is, you must stop and attempt to fix such errors as quickly as possible.

The first major no-no that everyone seems to be hitting at one point or another has to do with breaking the rules. Google’s AdSense is a great program but it relies on you respecting a few set rules.

The most important thing is not to create “artificial clicks” through any means possible. Never click your own links, never ask your friends or close ones to click the links and never, by any means have your content encouraging the visitors to click the links. You run the risk of being permanently banned, and that will definitely damage your revenue.

Failing to comply with Google’s terms could have your AdSense account suspended. And this is why this rule is by all means the most important one of all. It’s because this is the difference between life or death.

The second thing users get wrong a lot of time is having a bad color palette for ads. Many times this happens because the publishers aren’t knowledgeable enough to change default color palettes.

Others just can’t seem to spend enough time in changing those defaults. Having bad ads that stand out is sure to push people away from clicking; whilst having something which is clearly visible yet distinctive will.

Third, of course, the position of the ads is probably the key element you should get right if you want to maximize your profits with AdSense. This is noted in a lot of places on the web and Google talks about this as well. Google can provide you with statistics which illustrate what positions work particularly well on your website.

Fourthly, banner ads are also a very bad idea if you’re using AdSense. 480×60 type ads are a sure way to drive many people away as most Internet surfers have developed a natural resistance to such means of advertising.

And last, but clearly not least, is not taking care of the site running the ads. Because ultimately it doesn’t matter how cool the site is itself. If it doesn’t have updated contents and a lot of daily visitors it will probably never earn you any serious AdSense revenues.

So these are the most important five things people get wrong while using the AdSense program. But of course if you don’t like this means of expressing the issues, here are the top five things you should do to ensure your AdSense ads are constantly bringing in that revenue.

Never break Google’s policy. Don’t make visitors create “artificial clicks” on your website regardless of the person doing so or the reason. Make sure your ads have the right colors that blend in with your site, and make sure they’re positioned in the right places to attract as many customers as possible. Always try to avoid using banner-like (480×60) adds unless you really know what you’re doing and constantly keep your site fresh and up to date.

So with that in mind you should be raising your AdSense revenues in no time.

Some times ago I wrote a post about a structured process you must know to develop a web application and many readers asked to me to write something simpler about how to manage a small web project. I think there are not general rules for that but, without doubt, a correct approach can help you manage your projects more efficently and achieve quickly the final result.
I prepared this picture that illustrates a simple process with 3 main phases you can use as reference to manage a small web project:

1. Planning
Plan what you have to do, how you have to do it and in which time.
1.1 Define project scope
First step: Identify 4-5 high-level points which define the scope of your project. Don’t underrate the importance of this step because if you are able to describe your project in a nutshell, it means you have a clear idea about what you have to do. So it will be simpler to realize it.
1.2. Identify main features to implement
Second step: Identify main features of your web project and add, for each of them, some details such as relationships, general notes, ecc. For example image to have a simple project with only two main features: user login and profile management. You can represent them in this way:

That’s a simplified example only to give you an idea.
1.3. Define sitemap
Next step: define a sitemap of your project with files and folder. Be accurate in identifying all files to implement (HTML/PHP page, JavaScript files,…) because they are final deliverables to implement.

1.4. Plan a daily to-do list
Set daily milestones using a simple to-do list. So everyday you’ll know exactly what you have to do. In this way, you can easy monitor your progress measuring what you did a certain day and what had to do.

2. Developing and testing
In this phase: write HTML, CSS, PHP, JavaScript… code and test small portions of code during developing (preliminary test). So it wil be simpler find bugs and errors. When your web application is ready, stress it with a final test to catch errors you didn’t find during preliminary test which cause unexpected behaviors .
3. Publishing
Now you are ready to publish your project on-line. When your website or web application is on-line do a last test on what you published to assure you that it’s all ok. That’s all!

Chris Pederick’s Web Developer extension for the Mozilla Firefox browser is one of the best tools in a web developer’s arsenal.

About a couple of months ago, I wrote an article about it entitled "9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension" and I’d like to follow up on that by showcasing even more things you can do with the Firefox Web Developer extension.

1. Determine server information of a website.

Ever wondered what your favorite website uses for their server technology? If so, you can quickly view the website’s HTTP response headers by using "Information > View Response Headers".

The following example shows Digg’s response headers:

We can see in the above example that Digg uses an Apache server and PHP 5. Additionally (at least for the page I tested) they served compressed files (gzip).

Heading over to Microsoft’s homepage, we can see that they – in turn – use an IIS 7.0 server and the ASP.NET framework:

2. 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.

Tip: As a shortcut, you can use the scroll button of your mouse to increase or decrease the level of magnification.

Here’s a sample from People’s magazine using the Page Magnifier tool.

3. View a website’s color palette.

If you’ve ever wanted to see a visual representation of all the colors used by a website (not including images) You can use the "Information > View Color Information" option of the Firefox Web Developer extension, which will open a new tab displaying Color Information.

Here’s Mozilla.org’s color scheme:

4. Preview the "Print" and "Mobile" version of a website.

Some websites choose to include a print version or mobile version for their content by providing an alternate stylesheet like so: <link rel="stylesheet" type="text/css" href="myprint.css" media="print" />.

If you’d like to preview how a website will look when printed or when viewed using a mobile device, use the "CSS > Display CSS by Media Type > Print" or "CSS > Display CSS by Media Type > Handheld" option of the Firefox Web Developer toolbar.

The example below shows A List Apart’s normal stylesheet and print styleshee.

The print stylesheet takes out the logo and the primary navigation.

5. See the dimensions of all images.

You can see all image dimensions on a web page by using Firefox Web Developer extension’s "Images > Display Image Dimensions" option. You can see this option in action below (using GameSpot’s home page).

 

From the above picture, we can what the dimensions of the images in pixel units (we can also see that they’re using a 1×1 px spacer, interesting).

6. See the sizes of block elements.

A quick way to debug layout issues pertaining to spacing is to use the "Information > Display Block Size" option of the Web Developer extension to see if something is adding unintended padding and margins to your block elements. Block elements include div’s and forms as well as elements with the display:block attribute.

Here’s an example of the option turned on for Yahoo!’s home page.

7. See if your page degrades nicely without CSS and do a simple accessibility test.

A key design feature that a website must have so that it can be viewed by the most amount of people is that it must look decent and readable with CSS turned off.

You can turn off all styles by using the "CSS > Disable Styles > All Styles" option. This also allows you (somewhat – and shouldn’t be a replacement to real accessibility testing) to see if your website is accessible via assistive technologies (you can see how the document flows and if you’re displaying important information).

For a very crude and quick accessibility test, you should also turn off all images and replace it with their alt tags by using the Images > Replace Images With Alt Attribute option.

Here it is without any styles:

You can see that the logo is an image replacement so that screen readers can still use the logo as a "home" link and read the name of the site.

We can also see that the mark-up complies with current web standards, putting the primary navigation in a list, and the page title "Welcome to StumbleUpon" enclosed in a header <h#> tag.

8. Quickly find CSS errors on a page.

The Web Developer extension indicates if a page has CSS errors in the rightmost part of the toolbar as shown below.

By clicking on the button, the Error Console pops-up, listing all the errors of the page. If there aren’t any errors, you’ll see a button instead of a button.

9. Never forget to put alt and title attributes in your images and links ever again.

I like adding lots of images in my articles because it breaks the monotony of my long-winded writing style. This does, however, lead to me forgetting (or neglecting) alt and title attributes quite often.

A quick method I use to double-check my work is by using the Images > Display Image Attributes option and the Information > Display Title Attributes option.

Here’s a screenshot from flickr that showcases the Display Image Attributes option.

And there they are, some more of my favorite Firefox Web Developer options. If you’ve never used it, try it out by downloading it from Mozilla’s Web Developer Firefox Add-ons page.

Whether you’re a front-end graphics designer or a back-end web programmer, if you’ve worked long enough in the field of creating web-based solutions, you’ve no doubt heard about an extension for the Mozilla Firefox web browser called (simply enough) the Web Developer extension. If you have no clue what I’m talking about, here’s a brief overview from Webs Tips to get you familiarized with this wonderful tool.

This article lists some practical, everyday uses of the Web Developer extension to help improve your web-building methods. I’ve tried to stay away from the more common and basic uses of the Web Developer extension like troubleshooting layout issues with the Information > Display Div Order option because I feel these have been discussed quite enough in other places. New users, don’t run away quite yet, I think this guide will help you get a rapid jump start into applying this tool into your daily development routine.

So without further ado, here’s nine highly pragmatic uses of the Web Developer extension for Firefox.

1) Change XHTML on-the-fly without changing your web files.

Unfortunately for many developers, we don’t all have the luxury of testing servers and sandbox environments. I for one, confess to developing on live websites even during peak web traffic times.

If you’d like to lessen customer support requests due to an inadvertent display:none; property assignment on the log-in box — use the Web Developer extension to effortlessly check your XHTML modifications before you commit them to the server.

Here’s an (extreme) example of how I was able to change a few of reddit’s XHTML marku

And here’s the modified version:

 

As you can see in the above picture, I changed the top three stories (to something else I’d much read about) and modified the background color to pink (I have an odd affection towards hot pink for some reason).

You can achieve the same results by using the Miscellaneous > Edit HTML Markup option which will open up the Edit HTML tab panel displaying the XHTML of the web page. Unfortunately, the window isn’t color-coded and the Search HTML function doesn’t quite work properly (yet).

Tip: You can change the position of the Edit HTML panel by clicking on the Position icon (right next to the Edit HTML tab on the above screenshot).

To change the CSS styles of the page, use the CSS > Edit CSS option, which will allow you to edit the styles used on the web page.

2) Measure things quickly with the Ruler Tool.

Raise your hand if you’ve ever print-screen’ed, and then copy-&-paste’d the screenshot onto Photoshop just to determine dimensions of certain page objects (like the width of an image) with the selection tool. *Raises hand in shame*

With the Ruler Tool (enable it via Miscellaneous > Display Ruler Tool), you can speedily size-up objects inside the web browser. It’s a great tool in conjunction with outline options such as Information > Display Div Order option or Information > Display Block Size option, allowing you to detect the amount of padding and margin between elements.

3) See how web pages look on a non-traditional web browser.

Nowadays, tons of people have mobile devices that lets them view web pages in non-traditional ways. Determine whether your pages render correctly (or close enough) on portable device screens by using the Miscellaneous > Small Screen Rendering option. This saves you from going out and purchasing a Blackberry or a Trio with an internet dataplan just for cross-browser checking.

What it will look like on a Small Screen Rendering device…

 

4) Find out how optimized your page is.

Use the Tools > View Speed Report option to automatically send your page to WebSiteOptimization.com, a site that provides a plethora of information about your web page load times like how quickly your page loads and how many HTTP connections are being used among a ton of other things.

There are built-in tools in Adobe Dreamweaver and Flash (if you even have access to them) that simulates download speeds, but nothing beats a free, comprehensive and actual live speed report.

5) Populate web form fields instantly.

Don’t you hate it when you have to fill in your custom-built web form for the nth time because you’re testing it? You can quit tabbing and entering junk information on your form fields and switch to using the Form > Populate Form Fields option in the Web Developer extension.

In the example below, you can see that it populates most web forms somewhat intelligently – It was able to guess the email field — but missed the phone number field.

6) Find all the CSS styles that affect an element.

For most fairly-proficient CSS developers, it’s quite easy to find the exact selectors that style an element’s properties – fyi: #selector { property: value; }. This is especially true when you’re the original author and/or the styles are contained in one stylesheet.

But what if you were working on someone else’s project… and the project in question has 1,000+ lines of pure CSS goodness, split into several external stylesheets (because Bob a.k.a. “Mr. Modularity” likes to keep things “simple“)? Another scenario you might encounter is being tasked to theme a content management system like Drupal or WordPress and you’re not quite sure where all the external stylesheets are.

For example, the Yahoo! home page has over 2,400 lines of CSS, spread over several external stylesheets and inline styles (Bob, you built this page didn’t you?).

If you’re tasked with revising this page, you have two choices: (1) look through, understand, and hunt down the styles you need or (2) decide that you’re smarter (and lazier) than that and so you use the CSS > View Style Information option of the Web Developer extension. With this option enabled, clicking on a page element opens up the Style Information panel which displays all the styles that affect the element.

7) View JavaScript and CSS source code in a jiffy.

One of the ways I troubleshoot rendering issues is by looking at how other web pages do it. JavaScript and CSS are often divided into several files — who wants to look through all of them?

Using the Information > View JavaScript and the CSS > View CSS options instantly displays all the JavaScript and CSS in a new browser tab. This has the side benefit of being able to aggregate all the CSS styles or JavaScript in one web page allowing you to use the Find tool of the Mozilla Firefox browser (keyboard shortcut: ctrl + f for PC users).

8) See how web pages are layered.

It’s often very helpful to determine which page div’s and objects are on a higher plane. Using the Information > View Topographic information gives you a visual representation of the depths of the page elements — darker shades are lower than lighter shades of gray.

 

9) See if your web page looks OK in different screen sizes.

I use a monitor size between 19 – 22 inches (wide screen). This can be problematic because many of our visitors use smaller monitors. Short of switching to a smaller LCD screen to simulate the user experience, I just use the Resize > Resize window option. It helps test whether my fluid layout works well in smaller windows (sometimes you forget to set min-widths for div elements and it jacks up the layout in smaller screen sizes), or if your fixed-width layout displays important content without user’s having to scroll.

Be sure to enable the Resize > Display Window Size in Title option to help you determine the exact dimensions, and also for documentation purposes when you’re taking screenshots of your webpages.

So there we are, nine ways you can employ the Mozilla Firefox Web Developer extension to better your web development experience. I don’t claim to be an expert, but I certainly know enough about the Web Developer extension to improve my web-building speed.