As someone viewing websites on the web, ad-blockers filter out adverts for “enhancements”, and a bunch of flashing, ugly advertisements. Not only this, but ad-blockers can help protect you from potentially sneaky and malicious code.

This is why one of the most popular downloads for Firefox is an ad-blocking extension.

However, have you thought about the reverse? What about the effect ad blockers have on your website or the sites you design for clients?

Is my coding style or design choices limiting what’s viewable to visitors because it’s being incorrectly identified as advertising content by ad-blockers?

Choose Your Class and ID Names Carefully

You may reason, “I don’t have to worry about ad-blockers because I don’t have any advertisements on my website”.

But do you really have to reason for concern?

While you may not have a single ad on your site, the names you give your classes and ID’s matter.

Classes and ID’s containing keywords like banner, ban, ad, advertisement, etc may get flagged incorrectly by a visitor’s ad-blocking plugin.

Important sections of information could never appear on the screen because of this.

Avoid:

<p class="panel banner" id="bannercontent1">Real content. Not an advertisement. But still blocked.</p>

Better:

<p class="panel section" id="section1">Real content. Not an advertisement.</p>

Remember, elements with classes and ID’s that contain any filtered keywords run a high risk of being blocked. In theory, an ID or class named ‘bandaid‘ may get filtered as an ad.

Safe Choices For Classes and ID’s

What are safe choices for classes and ID’s?

While there’s no way to know exactly what custom keywords people will add to their blocking list, a good rule of thumb would be to look at the keywords that are contained in the default filter list. This list can usually be found in the ad-blocking extension’s settings.

Avoid using classes or ID’s that contain any of the keywords on the filter list.

Choose Your Images Carefully

You should also pay attention to your choice of images.

Since ad-blockers cannot actually view the contents of an image, they identify advertisements by relying on both the image filename and image dimensions.

Image Filenames and Directories

Images that contain banners, ban, ads, advertisement, and so on in their filenames may very well get flagged as an advertisement and get removed.

You should also be aware of the directory names you choose. For example, using directories that contain words commonly used in banner advertisements are fair game for ad-blockers.

Image Dimensions

Your images’ dimensions matter. Images that have the same dimensions as common banner sizes run a high risk of getting wrongly blocked.

Common ad sizes (in pixels):

• 728 × 90
• 468 × 60
• 234 × 60
• 180 × 150
• 125 × 125
• 88 × 31
• 120 × 600
• 160 × 600
• 336 × 280
• 300 × 250

Source: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

If Unsure, Test

If you’re not sure, download an ad-blocking plugin for your browser and test your design before going live.

Ever had to make a form for a site mockup from scratch? It’s a pain and eats up your time.

Never again! Here are some UI (user interface) elements for your next website mockup project.

OS and Website Elements

Designers Toolbox: OS Form Elements

Form, browser and OS elements for Windows Vista and XP (IE and Firefox) and Mac OS X (Firefox and Safari) in Photoshop format. Available in all major screen resolutions.

Design Stencils–Yahoo! Design Pattern Library

Ad units, calendar, charts, UI controls, form elements, menus and buttons, general and iPhone mobile UI, OS elements–you name it.

Available in OmniGraffle, Visio (XML), PDF, PNG and SVG formats.

Browser Screens and Website Elements (VectorTuts)

Browser windows, buttons and more for the Mac.

Browser Form Elements (teehan+lax)

PSD form elements for Firefox 3 on Mac OSX and IE7 on Windows Vista.

The Ultimate Web UI Kit (GraphicRiver)

A PSD containing mouse cursors, form elements (check boxes, radio buttons, next and previous buttons, form fields, drop downs, buttons) and more.

This one’s not free, but for $6, how can you go wrong?

iPhone GUI Elements

Designers Toolbox

Nice GUI elements for the iPhone in PSD format. Includes the phone, keyboard, buttons and other elements of the iPhone.

iPhone 3 GUI PSD (teehan+lax)

An updated version for the iPhone 3.0.

iPhone 2 GUI PSD (teehan+lax)

PSD containing UI elements for the previous Apple iPhone 2.

Other Elements

Web Safe Area

View web safe areas for Vista, XP and OSX for IE, Firefox and Safari browsers.

Ad and Web Banner Sizes

If you’re planning on incorporating ads on a site, these ad templates will help. Choose from all the standard (and some non-standard) sized ad banners in PNG format.

Cursors (Graffletopia)

A nice set of mouse cursors for use with OmniGraffle.

Due to the popularity of last week’s list of programs and services for freelancers, we’re bringing you 24 must-have online tools specifically for web designers.

Testing

Xenocode Browser Sandbox

Run and test your sites in IE6, IE7, IE8, Firefox 2 and 3, Safari, Google Chrome and Opera without having to actually install the browsers on your system.

This unfortunately seems to only work on Windows.

BrowserShots

View screenshots of your render webpages in multiple browsers and operating systems. You can even test different screen resolutions.

Favelets

Validate and test your sites using this collection of favelets. Validate microformats, HTML and CSS. Test your pages at different screen sizes (iPhone, Blackberry, etc) and lots more.

Are My Sites Up? (Website Monitoring)

Get alerts when you or your clients’ sites go down or experience hiccups. Alerts can even be sent to your mobile phone.

Page Code Generation

gridr buildrrr

Create CSS grid-based layouts easily with gridr buildrrr.

Project Deploy

Project Deploy makes it faster to get a site up and running by letting you select the type of information you want. Deploy then generates common folders, standard HTML and CSS files and even jQuery–all in a zip file for easy download.

Web Form Generators

Icebrrg

Icebrrg lets you easily create all kinds of forms and embed them on your site. There are paid plans, but the free version still allows 3 forms and up to 100 per month.

WuFoo

WuFoo makes creating forms a piece of cake. Adding forms to your site is simple as well with a great web-based user interface.

Web Form Factory

Another great web form tool. You can create forms linked to a database or to generate emails.

Typography

Typechart (CSS Typography)

Browse, compare and grab the CSS code.

PXtoEm.com

Convert pixels to ems quickly. The generator even creates the CSS all for you.

sIFR Generator

Even if you don’t have Adobe Flash installed on your system, you can convert font files (TTF) and create your own Flash files (SWF) for use with sIFR.

Web Code

XHTML Character Entity Reference

Find UTF-8 character entities for XHTML.

View other XHTML character entities resources.

ecoder (Web-Based Code Editor)

Ecoder makes it easier to write and edit code. All your coding can be done right in your browser.

Ecoder sports a beautiful UI, plus real-time code syntax highlighting and line numbering. You can also edit multiple documents at once.

As far as I’m concerned, this one beats out Mozilla Bespin (especially as far as ease of use goes).

BuiltWith

Check websites and see what technologies are being used. See what your favorite websites are running on–databases, CMS, hosting, etc.

Other Online Tools

Unix Permissions Calculator

No more trying to remember Unix permissions codes when updating file permissions.

SlimTimmer

Keep track of the time you spend on projects.

The interface is extremely simple and easy to use. You can also manually add time and filter by date, client and other options.

Media Convert

Convert just about any type of file into just about any format that exists. Just upload and Media Convert takes care of the rest.

Privacy Policy Generator

Easily create privacy policies for sites by just filling out and simple, quick form.

Hohli (Online Charts Builder)

We wrote about Hohli earlier. This is a great tool for generating embeddable charts and graphs. Choose the type of chart, size, data and colors–Hohli does the rest.

Validifier (Flash Embed Code Generator)

A lot of the code generated by sites for embedding Flash content is not valid markup. Validifier turns Flash embed code into valid XHTML (using the object tag).

Genfavicon

Generate favicons from GIF, JPG or PNG files in just 3 easy steps.

Favicon Generator

Create favicons (ICO) for Internet Explorer from images (GIF, JPG, PNG).

CSS Sprite Generator

Improve your site’s performance. Upload images and the CSS Sprite Generator will create the code for your CSS sprites.

What Online Tools Do You Use?

Be sure to check out our 15 Must-Have Programs and Services For Freelancers for other great tools.

There are tons of online tools for web designers out there. Which ones do you use? Tell us in the comments.

Here’s a list of 15 free or inexpensive programs / online services for freelancers.

The list is broken down into 5 main categories:

1. Backup and Syncing
2. Finances and Invoicing
3. Communication and Project Management
4. Programs and Working With Filetypes
5. Graphics Programs

Backup and Syncing

Freelancers many times need to be able to work in different locations and have access to their files wherever they are. Having a good backup and syncing plan can help.

1. Mozy (Online and Off-Site Backups)

Mozy is a great service that, through an application for Windows and Mac OSX, automatically backs up your files and uploads them to their secure site.

In the case of an emergency, you can simply log into your account and download the files. You can also request a DVD(s) be mailed to you with all your files.

The MozyHome version lets you backup 2GB for free. Use our special link to get an extra 256MB of storage free. You can also get unlimited storage for about $5/month.

You can read more about Mozy in our previous post.

2. Dropbox (Online Backup and File Syncing)

Drop your files into a folder in your My Documents folder (or equivalent for your OS) and all the files will be updated and synced to any computers linked to your free account.

The great thing about Dropbox is that it works on all major operating systems–Windows, Mac OSX and Linux.

Sync your files between your home, work, laptop and other computers and as soon as they are saved, the files are uploaded for all your computers–whether they’re turned on currently or not.

Dropbox gives you 2GB of free storage. Get an extra 256MB free.

3. Xmarks (Bookmark backup and syncing service/plugin for Firefox, Safari, Internet Explorer)

This plugin and free service synchronizes your bookmarks (and site passwords if you want) between your browsers and computers. Xmarks (formerly FoxMarks) has plugins for Firefox, Safari and Internet Explorer.

You can even set it to only sync certain bookmarks to certain computers.

Finances and Invoicing

One of the least exciting and most dreaded parts of being a freelancer is managing finances. These next 2 services help you spend the least amount of time dealing with billing, invoicing and general finances.

4. CurdBee (Online billing and invoicing)

We already have written about CurdBee before, but it’s such a great service, it deserves another mention.

CurdBee is an online service that lets you create and manage invoices and accept payments via PayPal, GoogleCheckout and 2CO (paid version).

When invoices are created, your clients get to choose which payment gateway to go through to pay your invoice.

Simply click Send and a link to the invoice is emailed to you and your client.

CurdBee is free (no limits on clients or how many invoices you can send).

With the CurdBee Pro version ($5/month), you get extra features like recurring billing, PDF invoices, accept 2CO payments and some other niceties.

5. Mint.com (Manage your finances and spending)

Mint is a free service that lets you track checking, savings and other financial accounts and assets for your business. It provides an easy way to keep track of your spending, and reports can be emailed to you weekly.

Communication and Project Management

Freelancers often need to communicate and manage projects easily and while on the go.

6. Drop.io (Project management / file and document sharing)

Drop.io is a free service that lets you upload and share files via your browser.

With Drop.io, you can add images, documents, audio and video files for others to view (up to 100MB per drop).

Comments for each file can be added, so this works well as an easy means of working remotely with clients and getting their feedback.

Drop.io even provides special phone numbers for conference calls, voicemail and faxes. There is also a live chat option for simple chatting through the browser, and a web presentation option.

Drop.io can send alerts via RSS, email, Twitter, etc when new files and comments are added, making it great for organizing projects.

There are also several apps as well as a Firefox plugin that use the Drop.io’s API to connect and interact with your drop.

7. Zenbe (Check multiple email accounts from anywhere)

Zenbe basically lets you check and manage emails from all your email accounts through your browser without going to several different sites.

Emails can be easily and automatically tagged so it’s simple to keep track of which messages came from which account.

Zenbe also has a collaboration tools (ZenPages/ShareFlow). You can also import existing address books, and integrates with Google Talk, Twitter and Facebook.

Though the free account option doesn’t seem to exist anymore (I got mine early on), paid accounts start at $5.99/month.

To learn more, you can read our earlier post about Zenbe.

8. Collabtive (Project management)

Collabtive is an open source, self-hosted project management system (cloud-based groupware).

Manage projects, tasks and milestones easily with a simple web-based interface.

Collabtive provides messaging and instant messaging, file management, time-tracking, iCal syncing, can import Basecamp files and is available in over 25 languages.

Programs and Working With Filetypes

9. OpenItOnline (Open and edit files online without having the program installed)

With OpenItOnline, you don’t have to have a bunch of proprietary programs and applications installed on the computer you’re using in order to view and edit files. No more having to have Microsoft Office installed just because a client sends you a .doc file.

Open and edit documents, spreadsheets, presentations and images within your browser with OpenItOnline.

There are even extensions for Firefox, Flock and Internet Explorer.

10. PortableApps (Carry all your programs with you on your thumbdrive)

PortableApps lets you install and run portable versions of programs from a thumbdrive—giving you access to your programs no matter what computer you’re using.

11. LOOP Apps (Online PDF creator)

LOOP Apps is a free online tool lets you upload and convert files into PDF format, or convert a webpage into PDF. Your files can be sent to others and electronically signed.

Also worth checking is Zamzar.

Online Graphics

Whether you’re a web designer or a graphic designer or some other type of freelancer, there’s a good chance you will need to do some, at least basic, adjustments to photos and images.

12. Picnik (Basic online graphics program)

Picnik is a simple to use web-based graphic editor. Picnik is perfect for resizing images, adjusting colors, tone, contrast and applying other effects to your images and photos.

Picnik works with Flickr, PhotoBucket, Picasa and many other image sites; letting you share your images with others, are well as save them to your computer.

Picnik is free and you don’t even have to sign up for an account to use it.

Our previous post has more details about Picnik.

13. Smush.it (Online image optimizer)

Smush.it is a free online tools for optimizing (shrinking file sizes) your images. Simply upload or provide the URLs of the images you want shrunk and Smush.it will take care of the rest.

This can even shrink images that have already been optimized in Photoshop and Fireworks–all without noticeable hits to image quality.

14. Sumo Paint (Online graphics manipulation / Photoshop alternative)

If you need more than just simple image resizing and color correction, Sumo Paint steps up to handle the job.

Sumo Paint 1.1 is almost like using Photoshop. The only differences: it’s free, and it runs in your web browser.

Sumo lets you import images from your computer or a URL, or you can create a whole new image from scratch.

You have all the basic tools found in Photoshop: you can create layers (with blending modes and layer effects), typography control (leading, tracking), and much, much more. In fact, if you’re familiar with Photoshop, you’ll be using Sumo like a pro in no time.

Your resulting work can be saved to your computer, emailed or saved to your Sumo account if you’ve signed up for one.

15. Pixlr (Graphics manipulation / Photoshop alternative)

In a similar vein as Sumo, Pixlr is a good alternative to Photoshop.

There are many things you can do with and to images, just like you can with Sumo, so we won’t go into much detail here. For more details about Pixlr, take a look at our previous post about Photoshop alternatives.

Which fonts can be freely embedded using @font-face? Our list of 5 resources will take out the guesswork.

One of the most anticipated web developments recently is the @font-face rule for CSS3.

The @font-face rule allows for actual fonts to be embedded, so you don’t have to rely on the visitor having that specific font already installed on their system. No more font stacks.

Free @font-face Fonts

Finding fonts with licenses that allow for embedding via @font-face can be difficult.

Here are 5 7 links and resources to free fonts that can be embedded using @font-face:

1. The League of Moveable Type

A foundry that creates free, open source @font-face fonts.

2. Fonts Available For @font-face Embedding (Webfonts.info)

Includes a large list of 25+ free fonts that either specifically allow @font-face embedding, or are open source/public domain fonts.

3. Font Squirrel

A collection of free and open source fonts available for commercial-use. Many of the fonts’ licenses allow for embedding, but make sure to check 1st before embedding.

Update: Font Squirrel has added a @font-face filter to their site. Now you have the option to view only @font-face fonts. You can read more about it here: Filter @font-face Fonts on Font Squirrel

4. 10 Great Free Fonts For @font-face Embedding

5. Internet Explorer Embeddable Fonts (EOT)

Embeddable fonts for IE.

6. Update: Open Font Library

HUGE list of freely usable fonts for embedding via @font-face as well as the option to link to hosted fonts on the openfontlibrary.fontly.org site.

7. exljbris :: Free Quality Font Foundry (Updated 05/12/2009)

All the exljbris free fonts (except including the free weights and styles of Museo and Museo Sans) are licensed for embedding. This includes popular fonts like: Anivers, Delicious, Fertigo Pro, Fontin, etc. See licensing and linking details.

@font-face Browser Support

Currently, the following browsers support @font-face (TrueType/OpenType TT and OpenType PS fonts unless otherwise stated):

• Safari 3.1+
• Opera 10
• IE4+ using proprietary EOT (Embedded OpenType) fonts
• Firefox 3.1

If you want to test if your browser supports font embedding, visit OpenType.info’s @Font-Face Demo page.

For more details on browsers that support @font-face, see WebFonts.info’s @Font-Face Browser Support.

Have you found any embeddable fonts or sites with lists of free @font-face fonts? Share with us in the comments.

Now you can search all the web and graphic design posts on the Es Developed Blog right from your search bar in Firefox and Internet Explorer 7+.

We’re going to learn how to create your own custom OpenSearch search engine plugin for your site.

The search plugin will work in both Firefox 2+ (including Firefox 3) and Internet Explorer 7+ (including IE8).

OpenSearch and Your Site or Blog

OpenSearch is a collection of simple formats for the sharing of search results, created by A9.com.

In the context of your browser’s search bar you can use OpenSearch to help visitors find information on your site or blog even when they’re not currently at your website.

An OpenSearch plugin will work in both Firefox and Internet Explorer 7+.

Online Search Plugin Generator

One of the simplest and fastest ways to create your own search plugin is to use MozDev.org’s Mycroft Project Search Plugin Generation Tool.

The tool is a relatively short form you fill out and it does all the heavy lifting for you.

You supply:

• Icon for use in the search bar of the browser (can be your site’s favicon)
• Your details (used to register the plugin to you in the Mycroft database)
• Plugin name and description
• Search URL
• Category (where to place your generated plugin on the Mycroft database), plugin language, etc

It’s a good idea to tick the ‘Show full instructions?‘ box at the top of the form. This explains the type information to place into each field. Most of what you need is explained.

If you need more information about what to put in each field, take a look at Creating OpenSearch Plugins in Firefox.

The code for the search plugin is generated. You can either copy and paste the code into a blank XML file on your computer (recommended), or you can just install it in Firefox and test it first.

Once you’re sure it works, you can submit it to the Mozilla/Mycroft search plugin database using the same form.

Linking the Search Plugin

Now that you have the search plugin generated, you will want to provide a link to it in your website.

The easiest way is to copy the generated code from the Mycroft Search Plugin Generator and paste it into an XML file on your harddrive. Then upload the file to your site and link to it in your <head>:

<link type="application/opensearchdescription+xml" rel="search" title="searchTitle" href="pluginURL/fileName.xml" />

This line of code allows your custom search plugin to be autodiscovered by browsers that support OpenSearch. Be sure to change ’searchTitle’ and ‘pluginURL/fileName.xml’ to the actual values you want for your plugin.

Automatic Updates in Firefox 3.1+

Beginning with Firefox 3.1, OpenSearch plugins can be automatically updated. To support this, you need to add another line to the <head> section of your site as well:

<Url type="application/opensearchdescription+xml" rel="self" template="pluginURL/fileName.xml" />

Notice also the ‘rel=”self”‘. Be sure to change ‘pluginURL/fileName.xml’ to the actual URL of your plugin.

More info about automatic search plugin updates can be found here:

Mozilla Developer Center (Creating OpenSearch Plugins For Firefox)

Works in Firefox and IE

Even though you’re going through all the steps here using Mozilla’s site, the resulting search bar plugin is in OpenSearch format, so Internet Explorer 7 and 8 can use it as well.

See the Plugin in Action

If you’re using Firefox or IE 7+, you can see the search plugin that I made for this site in action.

Click on the dropdown on your browser’s search bar and select Add “Es Developed Blog”.

Add the Es Developed Blog Search plugin and give it a try.

You can search through our collection of web and graphic design:

• Tutorials
• Articles
• Online tool and services recommendations, and
• Design inspiration and resources

Here are 2 quick tips for Firefox and Google Chrome users that let you view the processed source code generated by a javascript snippet. Neither tip requires any plugins.

Situation

You need to insert a link to a video, form, etc into your site using embed code provided by another website and the embed code is only javascript.

Problem

While many sites and online services are getting better at providing standards-compliant code to paste into your site, sometimes you have to make adjustments to their code so that your pages validate.

This is easy to fix if it’s plain, viewable source code. However, if the code is just javascript that writes the (X)HTML code to the page when run (or the javascript is encrypting the code), you can’t see what to fix.

If you add the javascript code to your page, open the page in your browser and View Source, you still only see the javascript as it appears before it’s processed. That doesn’t help at all.

Firefox Solution

The fastest way to view the code created by the javascript is to use Firefox’s View Selection Source instead:

1. Paste the provided javascript into an XHTML page
2. Open the page in Firefox
3. Select the portion of the webpage in the general area that contains the javascript with your mouse
4. Right-click and choose View Selection Source

You should now see the source code that the javascript code rendered.

Then, you can copy and paste the actual code from View Selection Source and make your changes.

Google Chrome Solution

I haven’t forgotten about Google Chrome Users. The above solution doesn’t work for Chrome because it doesn’t have a View Selection Source option. We have to go about it another way.

Depending on what the javascript is designed to do and how it goes about that, you may be able to simply save the page as a file on your drive and open it in your editor.

In my test, the original javascript appeared, but below it was the code the javascript generated. You’ll probably have to do more digging around in your code, but if you copied your javascript into an otherwise blank webpage, it won’t a big deal.

No Plugins Required

The beauty of the above tips is that you don’t have to have any plugins or extensions installed in your browser to make them work.

Other Browsers

Safari and Internet Explorer don’t seem to be able to view processed javascript code without the use of plugins. At least not that I know about.

Keyboard shortcuts are vital for navigating and performing various actions quickly, and are very helpful for designers when working on projects. Firefox has a keyboard shortcut for just about everything.

Unfortunately, finding and remembering them all can be difficult. Also, shortcuts differ slightly between Windows, Macs and Linux versions of Firefox.

Firefox Keyboard and Mouse Shortcuts

Fortunately, AccessFirefox.org—a site dedicated to showcasing accessibility tools and features in Mozilla Firefox—has a great list of Firefox keyboard and mouse shortcuts. You can filter shortcuts by operating system (Windows, Mac, Linux) or view them all at once.

Accesskeys Keyboard Shortcuts

Some websites use accesskeys to allow people with disabilities to access site navigation links by keyboard. This is a requirement for most sites in the UK.

View our list of keyboard shortcuts for activating accesskeys in all major browsers and OS’s. This list contains the keyboard shortcuts to activate accesskeys in Firefox, IE, Safari, Opera, Google Chrome, Konquerer and Epiphany in Windows, Mac OS X and Linux (Ubuntu).

On the previous version of this site, I used accesskeys for the main site navigation. However, because of no clear standards and the chance of interference with browser shortcuts, I decided not to include them in the current version.

Leave us a comment and tell us what Firefox keyboard shortcuts you use the most.