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.

Remember the mottoes you learned when you were a kid: “Winners don’t do drugs”, and “Cheaters never win”?

Well, a little cheating never hurt anyone… when it comes to using cheat sheets, that is.

TechPosters has a colossal collection of cheat sheets for just about every program, coding language or OS that uses code or keyboard shortcuts.

Since there’s such a huge list of cheat sheets, let’s look at some of the useful cheat sheets for web designers.

HTML

• HTML 5 Quick Reference Guide
• HTML 5 Cheat Sheet
• XHTML Cheat Sheet v 1.03
• XHTML 1.1 and HTML 4.01 Extensible Hypertext Markup Language
• HTML Help Sheet (HTML 4 and XHTML)
• Form Tags
• Character Entity References in XHTML 1.0 and HTML 4
• HTML – Special Entity Codes
• HTML Common Tags

Note: If you’re looking for more resources for UTF-8 special entities, check out my earlier post, Most Used XHTML Character Entities.

CSS

• CSS3 Quick Reference Guide
• Core CSS Part 1 (by Molly E Holzschlag and published by DZone), Part 2, and Part 3
• CSS Properties
• CSS2 Cascading Style Sheets
• CSS Shorthand Guide
• CSS Shorthand Cheat Sheet by Example
• CSS Property Index
• CSS Cheat Sheet v2
• CSS2 Quick Reference Guide
• RGB Colour Codes

jQuery

• jQuery Selectors (DZone)
• jTouch – jQuery Cheat Sheets For iPods and iPhones
• jQuery 1.2 Cheat Sheet 2
• jQuery 1.2

There are a ton of other cheat sheets for javascript in general, as well as other frameworks like EXT JS, Prototype and an entire category for Mootools.

These can be found in the general Javascript Cheat Sheet category.

PHP

• PHP Cheat Sheet (DZone)
• Symfony PHP5 Framework – Admin Generator Cheat Sheet

Plus Many, Many More

There are also tons of other web design cheat sheets for MySQL, ASP.NET, Flash, Silverlight, XML and more.

Another nice thing about the TechPosters site is that you can subscribe to RSS feeds for each category and know when new cheat sheets are added.

Share

Do you use any great cheat sheets for web design that are not included here? Where do you get your cheat sheets from?

Share your thoughts in the comments.

<my2cents>

Personally, I’m glad. Not glad that XHTML 2 is going to go the way of the dodo, but I think that having 2 standards would have been a bit defeating.

BlueRay vs HD DVD vs XHTML 2 vs HTML 5

Remember the BlueRay vs HD-DVD fiasco? There were 2 specs being developed and disc manufacturers were having to either choose to support one or the other, or add extra expense and support both. Then disc manufacturers have to choose either or both techs. Madness.

So, I am not saying that I think HTML 5 is better than XHTML 2, but that I’m glad a decision has been made and one spec has been chosen.

With the additional resources that HTML 5 will be getting, its future looks much brighter. Not to mention browser makers and web designers have one less thing to worry about.

</my2cents>

Start Using HTML 5 Now

There are some web apps (okay, Google Wave) that are beginning to use HTML 5 already.

Now, roll up your sleeves and start using HTML 5 now (an interesting article with code examples from SitePoint). This article even explains how to make it work with Internet Explorer — yes, IE.

More info on the future of XHTML 2 (W3C).

Some common mistakes are using … (3 periods) instead of the … entity. Or using an x (letter x) instead of × (multiplication symbol).

While WordPress users can use the Insert custom character tool when writing posts, having a nice resource of all the character entities when coding a site can be a big help. It can also help cut down on validation errors (ampersand woes, anyone?).

Here are 4 nice resources listing most/all the XHTML character entities.

XHTML Character Entity Reference (Digital Media Minute)

Contains all 252 allowed HTML 4 / XHTML 1.0 character entities. Entities can be filtered to show only characters in specific categories such as shapes and arrows, mathematical symbols, international entities, etc.

The list can also be printed out easily for use as a cheat sheet.

Entity Code

Entity Code shows the most common / most used entities and can be filters also to show only certain types (math, currency, etc) of character enties. This makes browsing and finding the right entity easy.

Character Entities in HTML and XHTML (Web Standards Project)

The Web Standards Project has a set of very accurate and complete resources for character entities.

HTML XHTML Entities (Cookwood)

Very detailed list of XHTML 1.0 and HTML 4 characters. Includes descriptions of each symbol.

Today, I’ll share 10 secrets basic steps I take when coding a site in CSS—steps that will hopefully get you thinking about your coding process.

The following assumes that you already know how to code valid XHTML and CSS.

This is in no way the only way—this is just how I generally go about it.

10 basic steps I follow when creating a CSS-based site:

1. Finalize your design
2. Finish your XHTML before touching your CSS
3. Validate your code
4. Start with typography
5. Structure the main page elements
6. Start big and work your way down
7. “Finish” work
8. Test in IE
9. Fix inevitable IE bugs
10. Optimize your code and do final testing

1. finalize your design

This is probably the most important step in order to be productive. If you’re working with a client, make sure you get them to sign off on the project before you start coding the site.

Even seemingly small changes (from your client’s point of view) to the  layout may impact your code in a big way.

I keep a copy of the approved PSD design open in Photoshop. This serves as my reference and lets me grab dimensions and colors.

I also draw out a rough sketch of the layout on paper so I can jot down element dimensions, hex colors, etc. It also helps me visualize the different div’s I’ll need for my layout when I’m writing my HTML.

2. Finish your HTML before touching your CSS

Don't put this before your horse.

Make sure you have all the sections and major (X)HTML code in place before even touching (or thinking about touching) your stylesheet.

Just like building a house, you have to have a solid foundation laid first. Make sure all your major page sections are accounted for, along with appropriate headings, paragraphs, etc.

It’s generally a good idea to keep the HTML structure as simple as possible—avoiding unnecessary div’s, for example.

3. Validate your code

If you’re building a house, you not only have to have a foundation first–it has to be level. Lots of problems later on can be avoided if you take the time to ensure your foundation is good.

Take the time to make sure your (X)HTML is valid and there are no mistakes. This can save you unnecessary aggro when you start styling.

I use the Web Developer add-on for Firefox to quickly validate local HTML files.

Only after I’ve completed this, do I start on my CSS layout and styling.

4. Start with typography

Now it’s time to dig into the CSS.

I find it useful to first focus on a site’s typography: fonts, colors, line height, link styles, list styles, etc when the page is nearly a blank slate. Instead of having a bunch of page layout and sections with background colors, I like to start with the typography before moving on to the page structure.

A CSS reset (Eric Meyer’s Reset CSS, YUI Reset CSS) can be very useful in these situations. They save lots of time writing code to undo default browser settings.

I prefer to use a slightly modified version of the one that comes with Deploy. Save a copy somewhere of your modified version so you can work from it on future projects.

5. Structure the main page elements

There are certain main elements most pages have:

• Header
• Main content
• Sidebar(s)
• Footer

I like to take care of these sections first; centering the whole page, giving main elements dimensions, floating sidebars, and the like.

Important: As you work on your CSS styles and especially layout, test in Firefox, Safari or Opera and adjust accordingly to make sure things look right in one of those browsers.

It’s also good to check your progress as you go in IE6, but always remember that IE6 will almost always be wrong. You can avoid huge issues in IE6 by fixing those bugs as you go.

6. Start big and work your way down

Once the major parts of the page are laid out and positioned properly, I work my way down; working on the layout and styling of sub-elements and sections.

For instance, your header may contain other elements such as a logo, navigation or search field. With the header already sorted, you can start styling the layout of these other elements.

7. “Finish” work

“Finish” work, in the construction trade, are the fine details and finishing touches that are done toward the end of the project; like trim and molding, paint and so on.

In web design, I consider finish work to be the finishing touches like: image-replacement (for headings, etc), hover effects for links or navigation, and fine-tuning margins, padding and the like.

It’s also a good time to re-validate your code; including your CSS.

8. Test in IE

Testing your site in Safari and/or Firefox will make sure your site looks good in 99% of the major browsers—except Internet Explorer. So you will need to test in IE 6/7.

Again, it can often save you some headaches by checking your page in IE6 every once in a while as you go along. However, in this step, I go back through and check all the IE-related bugs and issues.

Personally, I test in Firefox and IE6 all through the process; from layout on.

9. Fix inevitable IE bugs

The more you work with IE 6 and 7, the more you will start being able to foresee issues and know how to correct layout bugs more easily. However, let me tell you, there will always be something you will have to fix in IE 6 or 7. So fix the bugs and you can move on.

Now, I fix IE6 bugs (dropped floats, wonky margins, etc) with some special rules in a separate stylesheet.

10. Optimize your code and do final testing

There are many ways to optimize your CSS code in order the cut down on size–now’s a good time to do that.

Occasionally, when optimizing though, you may get carried away and accidentally remove an important bit or place a rule where another cancels it out. Make sure your pages still display correctly and then re-validate everything.

Use what works for you

Whether you use the above steps or not, take the time and think about how you code.

• Do I have a set routine that keeps me organized and focused?
• Is the way I code efficient, or could it do with some streamlining?
• Am I needlessly rewriting code that I could (re)use as a starting point on other projects?

If there’s something you can change, great. If what you’re doing works great as is, that’s great too.

• Can you setup or modify an existing CSS reset of your own and use it to cut down time?
• Can you use standard names for elements and consistently use them in every project?
• Can you create your own list of steps and follow it on your next project?

Bottom line: Use what works for you and the way you work. If what you currently do doesn’t work, think about what you can do to improve it.

Conclusion

Again, this is not the only way to code a CSS design—just the way I do it. There are lots of web designers who code differently and many who probably do a better job of it than me.

What do you think?:

• What steps do you take when coding a CSS-layout?
• How would you order the above steps so it works best for you?