22nd Day of Christmas

Shortcuts and Cheat Sheets

“Ah, finally,” you say. But come on, you should be wise to me by now; nothing has been easy. Daily you engage with web-based applications. Yet many of you are confused about the mechanics behind how they work.

There are quite a few of you suffering from phobias about code. Even though you rely on visual editors and content management systems and are not actually working in the code, you will benefit from today’s present. You don’t need to know how to program to be able to eliminate a few annoying bugs.

Your present today is a best practice. Whenever possible, avoid special characters in your titles. And never use a special character or a empty space in a file’s name. A special character is anything beyond the alphabet and numbers. These are special characters: @, &, %, and so is punctuation such as an apostrophe or a quotation mark. This is the best resource for HTML Character Code. In the content area, WordPress will render special characters into code for you. But for email HTML it is essential to use the character code.

Today’s gift, for those of you who dare to peek at the HTML code, is a bag full of shortcuts and cheat sheets to use in your digital projects. Hopefully, these resources will be enough to help you solve annoying problems on your own.

Briefly, HTML is formatting and CSS is styling. Wikipedia has an excellent definition of HTML and CSS. Everything you see online is HTML and CSS rendered by a browser. There are eight popular browsers; not all render the code the same way. This is why things do not appear the same in all browsers. The industry has been insisting on standards, but they appear to be elusive, a bit like passing a bill through both the House and the Senate. Don’t get me started. We have come a long way since the battles between Netscape and Internet Explorer.

To see the code of any web page you are currently viewing, just click the view the page source. Here is a screen capture of where to find it using the Firefox browser on the Mac.

Email has even more hurdles to jump over. There are about 24 different email clients with 10 competing for most of the market share. Here is the pdf of the HTML code used in MailChimp for this email.

There is one major difference about where the CSS is placed in an HTML file rendered by a web browser and one rendered by an email client. HTML for a web page such as your WordPress site is contained in separate files with a .css extension like this one. An email HTML has to have all of the styles in the header of the HTML document.

Here are Cheat Sheets for HTML, CSS, and PHP. These are extremely useful for trying to sort out a simple problem. This Campaign Monitor’s pdf guide to CSS support in email is a major time saver.

My primary browser is Chrome. I use the following browser extensions to help me chase down and squash bugs: Firebug and CSSViewer. Visit my Toolbox to see the applications, plugins and resources that I use.

Code can be extremely frustrating for everyone, including professionals like myself. Getting emails and web sites to look great on all browsers is hard work and requires testing during the entire process. I use Litmus to test everything.

Any questions or concerns, please let me know.