Essential Firefox Add-ons for Web Developers

Firefox has some cool add-ons which make the job of website designers much easier. These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
http://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer
The Web Developer extension adds a menu and a toolbar with various web developer tools.
http://addons.mozilla.org/en-US/firefox/addon/60

ColorZilla
Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
https://addons.mozilla.org/en-US/firefox/addon/271

FireShot
FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.
http://addons.mozilla.org/en-US/firefox/addon/5648

Codetech
Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
https://addons.mozilla.org/en-US/firefox/addon/1002

CSS Validator
Validates a page using the W3C CSS Validator.
http://addons.mozilla.org/en-US/firefox/addon/2289

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
https://addons.mozilla.org/en-US/firefox/addon/249

W3C Offline Page validator
Validates the source of a HTML/XHTML page via the W3C Markup Validation Service using the direct-input form.
https://addons.mozilla.org/en-US/firefox/addon/6006

Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.
https://addons.mozilla.org/en-US/firefox/addon/748

GridFox
Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.
https://addons.mozilla.org/en-US/firefox/addon/4904

HttpFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
https://addons.mozilla.org/en-US/firefox/addon/6647

CSSViewer
A simple CSS property viewer.
http://addons.mozilla.org/en-US/firefox/addon/2104

IE NetRenderer

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and 8 so you can get an idea of whether or not it looks right in IE.
http://addons.mozilla.org/en-US/firefox/addon/6455

Foxy SEO Tool
Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.
https://addons.mozilla.org/en-US/firefox/addon/9440

Google Music Search

Google has announced that Google Music Search is officially “rolling out.” This new feature will allow users to hear song previews and easily obtain artist and album information, and it is expected to be accessible to users across the U.S. soon.

Google Music Search
Google Music Search

According to Google:

Of course, this is just a first step toward making search more musical. There’s a lot of music out there in the world, and in some instances, we may not return links to the song you’re looking for. But by combining the strength of Google’s search algorithms with our music search partners’ efforts to increase the comprehensiveness of their music content, we’re on track to answer more of your rhymes with the right rhythms.

Read more at:
http://googleblog.blogspot.com/2009/10/making-search-more-musical.html

Basic Tips for SEO

  1. Use Correct Doctype
  2. Use Semantic code while htmlizing your website.
  3. Use Meta Content and Meta Keywords
  4. Use unique page titles
  5. Use SEO friendly page name or URL
  6. Use Alt tags for Images
  7. Use Heading Tags (e.g. H1, H2)
  8. Use Valid HTML and CSS Code (Make your code W3C Standard)
  9. Use Div based coding and avoid using Tables
  10. Make a Detailed Sitemap
  11. Use Breadcrumb
  12. Use Footer links
  13. Use Optimized images and code to make your web site load fast
  14. Use External JavaScript and CSS files
  15. Use a meaningful and helpful 404 error page

JavaScript Based Animation Frameworks and Libraries

These JavaScript based animation frameworks and libraries will enable you to create attractive and appealing user experiences. Also, those give developers the ability to create stunning and eye-catching animation and transition effects in there web pages.

1. $fx (http://fx.inetcat.com)
2. jsAnim (http://jsanim.com)
3. scripty2 (http://scripty2.com)
4. GX (http://gx.riccardodegni.net)
5. Glimmer (http://visitmix.com/lab/glimmer)
6. Animator.js (http://www.berniecode.com/writing/animator.html)
7. Scriptio (http://www.scriptio.us/index.php)
8. Processing.js (http://processingjs.org)
9. Run (http://aka-fotos.de/run)
10. Burst Engine (http://hyper-metrix.com/#Burst)

Web 2.0 Design Guide

The list below is a summary of many of the common features being used on “Web 2.0” sites.

Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t mean your site will look Web 2.0.

  1. Simplicity
  2. Central Layout
  3. Fewer Columns
  4. Separate Top Sections
  5. Solid Areas of Screen Real-estate
  6. Simple Navigation
  7. Bold Logos
  8. Bigger Text
  9. Bold Text Introductions
  10. Strong Colors
  11. Rich Surfaces
  12. Gradients
  13. Reflections
  14. Cute Icons
  15. Star Flashes

Source: http://2-0.net

Interesting facts about Google

Some interesting facts about user experience at Google

  1. The prime reason the Google home page is so bare is due to the fact that the founders didn’t know HTML and just wanted a quick interface. Infact it was noted that the submit button was a long time coming and hitting the RETURN key was the only way to burst Google into life.
  2. Due to the sparseness of the homepage, in early user tests they noted people just sitting looking at the screen. After a minute of nothingness, the tester intervened and asked ‘Whats up?‘ to which they replied “We are waiting for the rest of it“. To solve that particular problem the Google Copyright message was inserted to act as a crude end of page marker.
  3. One of the biggest leap in search usage came about when they introduced their much improved spell checker giving birth to the “Did you mean…” feature. This instantly doubled their traffic, but they had some interesting discussions on how best to place that information, as most people simply tuned that out. But they discovered the placement at the bottom of the results was the most effective area.
  4. The infamous “I feel lucky” is nearly never used. However, in trials it was found that removing it would somehow reduce the Google experience. Users wanted it kept. It was a comfort button.
  5. Orkut is very popular in Brazil. Orkut was the brainchild of a very intelligent Google engineer who was pretty much given free reign to run with it, without having to go through the normal Google UI procedures, hence the reason it doesn’t look or feel like a Google application. They are looking at improving Orkut to cope with the loads it places on the system.
  6. Google makes changes small-and-often. They will sometimes trial a particular feature with a set of users from a given network subnet; for example Excite@Home users often get to see new features. They aren’t told of this, just presented with the new UI and observed how they use it.
  7. Google has the largest network of translators in the world
  8. They use the 20% / 5% rules. If at least 20% of people use a feature, then it will be included. At least 5% of people need to use a particular search preference before it will make it into the ‘Advanced Preferences‘.
  9. They have found in user testing, that a small number of people are very typical of the larger user base. They run labs continually and always monitoring how people use a page of results.
  10. The name ‘Google‘ was an accident. A spelling mistake made by the original founders who thought they were going for ‘Googol
  11. Gmail was used internally for nearly 2 years prior to launch to the public. They discovered there was approximately 6 types of email users, and Gmail has been designed to accommodate these 6.
  12. They listen to feedback actively. Emailing Google isn’t emailing a blackhole.
  13. Employees are encouraged to use 20% of their time working on their own projects. Google News, Orkut are both examples of projects that grew from this working model.
  14. This wasn’t a technical talk so no information regarding any infrastructure was presented however they did note that they have a mantra of aiming to give back each page with in 500ms, rendered.
  15. Quote: Give Users What They Want When They Want It
  16. Quote: Integrate Sensibly