Advertise here with BSA

Google Browser Size is a visualization tool by Google Labs that shows any website behind an overlay of browser-window-sizes average

The overlay information is actually created from the data of people who visit Google (which won't be wrong to call it an average).

The tool is perfect for learning what percentage of the visitors are seeing the most important parts at initial load & what are they missing.

When you move the mouse, a rectangle which follows the mouse pointer enables us to interact with the website. And, optionally, the opacity level can be changed.

But, like mentioned, it is created with the data from google.com & will work for websites that target average internet users. It would be great to see this integrated into Google Analytics creating a custom overlay.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Opera, with version 10, is announcing a new feature named Opera Unite which converts any device running this browser into a web server.

It is an open platform where, using its API, developers can create new services/products (with HTML, CSS, JavaScript, SVG and AJAX) which will be served from user’s computers.

It already comes with various ready-to-use services like:

• file sharing
• media player (reach your media from anywhere)
• web server (host websites, currently static pages but won’t be surprising to see new ones supporting PHP, ASP.NET & others)
• the lounge (for hosting a chat room)
• & more..

To read more & download Opera Unite, click here.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Firebug is probably one of the most helpful tools used when developing websites.

Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

• working inside browser, no need to switch apps.
• being real-time, logging every request
• ability to edit code & see results instantly
• debugging JavaScript, measuring its performance & more..

It also has another feature, which is extendibility with help of Firefox add-ons.

There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

YSlow

YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it™ and JSLint.

Page Speed

Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on "Web Performance Best Practices") on ways to improve them.

Page Speed automatically optimizes images & provides compressed ones foruploading later.

It can also detect  JavaScript and CSS loaded that actually isn’t used for decreasing the total size of these files.

Pixel Perfect

In order to easily find out how a fresh element will look with the design in general, Pixel Perfect enables web developers and designers to overlay a web composition over top of the developed HTML.

It is possible to toggle on/off any number of design elements to see if they fit well or not. And, with the opacity option, HTML below the composition can be viewed.

CodeBurner

CodeBurner offers a reference panel with a search tool for looking up HTML elements, attributes, and CSS properties.

It also provides shortcuts to view information or code samples about a selected item.

FireUnit

FireUnit provides a simple JavaScript API for doing simple test logging – unit testing and viewing within a new tab of Firebug.

FirePHP

With the help of FirePHP, it is possible to log to the Firebug console by a simple PHP method call.

Data is sent via response headers & won’t interfere with the content on the page.

For any developer who got used to the Firebug interface , this extension is great for PHP debugging.

FireRainbow

FireRainbow adds a better syntax highlighting support to Firebug & has theming support.

FireDiff

It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.

This provides a deeper look into the functionality of the website & helps keeping a record of the changes that were required to debug and tweak the page’s display.

Jiffy Firefox Extension

Jiffy Extension, using the Jiffy-Web, adds a new panel to Firebug & generates the visual view of the JavaScript time measurements. It can also output a print-friendly version of the report.

Hammerhead

It enables you to measure the loading times of webpages.

The extension has support for multiple pages & can clear caches (disk & memory) with a click for a healthier result.

Firecookie

Firecookie, is a cookie viewer/manager that works inside Firebug.

For a faster development, when coding an application using cookies, the panel eases viewing the cookies & their values, expire dates, etc.

It is also integrated with the Net panel & displays both sent and received cookies.

Firefinder

Firefinder offers a way to quickly finding HTML elements matching mentioned CSS selector(s) or XPath expression.

It allows you to instantly test CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

It also shows a count of how many matches there are & lists all the matching ones in a collapsible list in the Firefinder panel.

LiveCoder

LiveCoder extends Firebug by allowing developers to look at the Firefox chrome.

It is especially valuable to developers building add-ons. LiveCoder’s GUI lets you examine and modify the DOM of any Firefox add-on.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

StatOwl is a website presenting internet usage statistics in a comprehensive way.

There are various reports that will be helpful to anyone into web design & web marketing like:

• web browser's market shares
• percentage of Flash, Quicktime versions installed
• operating systems used
• screen resolutions & much more..

The data provided is valuable to web designers / developers to better analyze internet users.

All data presented can be displayed for custom date ranges & as different chart types.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

IE6, well, was a browser with fresh features when it first came out but it is currently 8 years old (must be about 160 human years).

It is still around, mostly because it came bundled with many distributions of the most popular Windows OS ever: XP & bad luck that users still have that old CD.

So, within time, unlike every software, it didn’t disappear, got more powerful & managed to build new communities around it: "designers & developers who try to overcome the IE6 difficulties", "users with bad browsing experiences".. : ).

Now it can even:

• Make a web project development process longer
• Shorten the life of a web designer / developer (that’s what I had tweeted while working on an IE6 compatibility)

But it is time to go now. Hopefully quickly (with the medal).

Within this 8 year period, just for IE6, designers & developers are:

Defining The Problems & Creating Solutions

Explorer Exposed!

Position Is Everything provides an amazing list that defines Internet Explorer problems (not only IE6) in detail & shows some workarounds.

IE CSS Bugs That’ll Get You Every Time

CSS-Tricks presents the most common IE6 problems that can be faced including the box model & double margin bug.

IE6 – CSS Bugs and Fixes Explained

Dave Woods explains several IE6 CSS bugs & how they can be fixed.

Unit PNG Fix

A script, inspired from supersleight, to fix the popular transparent PNG problem. There are also many others like:

IE PNG Fix

One of the first fixes which is developed continiously. It adds near-native PNG support with alpha opacity to IE 5.5 and 6.

And there are many others like:

• DD_belatedPNG
• CSS PNG Image Fix for IE
• IE7.js

Trying To Stop It!

Stop Living In The Past

A campaign to acknowledge users that still browse with IE6. Users can find the reasons for upgrading IE6 & with a scripr presented a warning can be displayed to IE6 users.

STOP IE6 Campaign

The website lists the reasons why IE6 isn’t needed anymore & provides a script. The script can be installed on any website which will display why users shouldn’t use IE6 to users who visit the website via IE6.

I Dropped IE6

A website that encourages website owners to drop IE6 support & lists the ones already dropped.

Stop IE6

A very similar campaign that aims to stop the usage of IE6. It provides easy-to-install widgets that redirect users with IE6 to their website for informing them.

Even Wrote Letters

Dear IE6

Want to have IE6-related fun for a few moments? Then this website is for you.

It displays short letters – by users -  that is written to IE6.

A Letter To IE6

A very funny letter written to IE6. From the letter:

It’s not you, it’s me. You’re still the same girl I met 7 years ago.

 There are also letters written to IE6 users like this one.

 And, Many Already Decided Not To Support It

• 37Signals (BaseCamp, CampFire..)
• Usability Post (Drop IE6 Support — Give People a Reason to Upgrade)
• Google tells users to drop IE6
• Salesforce and Internet Explorer 6
• Norwegian Websites Declare War on IE 6
• And many more..

Or Support It Partially

• Feed IE 6 with a basic stylesheet
• How I Might Deal with IE6
• No more pixel perfectionism in IE 6

Conclusion

If IE6 hadn’t existed, we would probably be more productive by having the time spent on fixing bugs & writing hacks.

And, it is very clear that, if we, web designers & developers, don’t drop the support, IE6 is not going anywhere.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Browser compatibility issues with how they render HTML differently is a common problem for web designers and developers.

Reset.CSS, if you are not already using it, can save some time from the CSS editing process.

What is Reset.CSS?

Reset.CSS is simply a collection of CSS styles which removes and neutralizes the inconsistent default styling of HTML elements.

By using Reset.CSS, you simply clear the default values of web browsers and you won’t need to alter these differences for every element again.

There are 2 popular Reset.CSS styles:

• YUI Reset CSS
• meyerweb.com Reset.CSS

How to use Reset.CSS?

Using Reset.CSS styles as another CSS file or by inserting the Reset.CSS styles at the top of your CSS file is enough.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Examples of how to make CSS gradient text effects are published in 2 different & beautiful web design blogs: WebDesignerWall and CSS Globe.

Both techniques are using a similar method which is adding a small PNG gradient file over the text with extra tricks. Both methods are compatible with all the major browsers. Have a look at how nice they are:

Css Globe solution:

http://cssglobe.com/lab/textgradient/

WebDesignerWall solution:

http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Sample codes for these nice effects can be downloaded from each website.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

With many different operating systems, many browsers and different browser versions the design of a website can look different to every user.

Testing your website in different browsers easily is possible.

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)