Programming – Page 2 – PDG & Associates Web Design

July 5, 2012July 15, 2012

Making rich graphical emails from your desktop email program

A client recently asked about placing graphics into an email template — namely, background graphics.

Email programs (Outlook, Entourage, Thunderbird) are not designed to easily create rich graphical HTML emails. They make it difficult to embed background images (for mastheads, say); they vary in their support and tools for styling CSS, and there are greatly varying display abilities of email platforms across the internet.

HTML emails need to be designed as simple as possible — no backgrounds, complex CSS, floats, etc. since there are 100+ different email readers/webmail systems [hotmail, gmail, yahoo, aol, cpanel webmail, etc.] with varying levels of support. In all, your emails’ html and css must be very simple to be cross-platform.

All the fancy emails you and I get (from Amazon to Gap to Starbucks to NatGeo) are sent by dedicated email publishing systems… carefully constructed to let the sender add design elements to the templates that will work on most email platforms.

The client, if its needs are growing for rich graphical emails, needs to use a 3rd party tool like Campaign Monitor or Mailchimp, or build its own email publisher tool.

These types of emails are useful for communicating with their audience. For internal emails, using Outlook can work, since all employees are likely on the same platform.

We can hack and tweak our way to success in Outlook or Entourage or Thunderbird, but it’s not for the faint of heart.

To make a template in Outlook, for example, a background image behind the title text can’t just be copy/pasted in. Outlook provides an import/place menu command to insert the image in the background.

June 19, 2012

Wring the most performance from the Google Analytics script

From an excellent post by Mathias Bynens… originally posted in 2010 but updated in June 2012.

http://mathiasbynens.be/notes/async-analytics-snippet

<script>
  var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
  (function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.src = '//www.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
  }(document, 'script'));
</script>

March 16, 2012March 16, 2012

D’Oh, Says Global Registrar Network Solutions

It wasn’t D’oh that I said when I was stymied in my attempt to update a nameserver record.

February 17, 2012February 17, 2012

CSS 3 – Box Shadow properties

The box-shadow property in CSS3 allows a comma-separated list of shadow attribute values.

These specify, in order, the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow);

Then, an optional color value and an optional ‘inset‘ keyword.

Inset lets you create an inner shadow, rather than the default outer shadow.

Examples:

  box-shadow: 5px 5px;
  box-shadow: 5px 5px 15px #888;
  box-shadow: inset 2px 2px 2px 2px black;
  box-shadow: 5px 5px #666, -12px -12px #f4f4f4, 0px 0px 15px 15px #cc6600;

These are supported in newer browsers.

February 3, 2012February 17, 2012

Mac Users: Configuring new Mail Accounts in Thunderbird 3

Creating a new Account for which you want to use the Global Inbox

When you create a new POP mail account in Thunderbird, the Account Wizard may ask if you want to use the Global Inbox for that account. If it does that (and you want a global inbox), check that feature. If it doesn’t ask (recent versions don’t) then you need to select “Global Inbox (Local Folders account)” in Preferences -> Advanced -> Config Editor .

Try to do that before Thunderbird checks for new mail to avoid complications.

If you often create new accounts, you can set the default in the Account Wizard by setting the preference :

mail.accountwizard.deferstorage

true

(to check the box by default), or false (to clear the box by default).

In a new Thunderbird profile this preference does not exist initially, so you must create it as a new Boolean preference.

On the Mac, right-click in the editing window, and choose “New…”

Changing the Global Inbox setting for an existing account

To change the Global Inbox setting for an existing account, you need to follow three simple steps.

Change the destination Inbox

Go to “Tools -> Account Settings -> Server Settings” and click on the “Advanced” button. A dialog box will then pop open.

To set the account to use the Global Inbox, select “Global Inbox (Local Folders Account)” and click “OK”.

Important: if the account already has messages in the Inbox or other folders, you should copy or move these messages into Local Folders before setting the account to use the Global Inbox. If you don’t copy or move the messages into Local Folders and you set the account to use the Global Inbox, the account will no longer be displayed in the folders pane and you will not be able to access those messages unless you go back and undo the Global Inbox setting.

To set the account to not use the Global Inbox, select either “Inbox for this server’s account” or “Inbox for different account” and click “OK”.

Check settings for other folders and filters

After you have changed the account’s setting for which Inbox to use, see if any of the following need to be changed:

Go to “Tools -> Account Settings -> Copies & Folders”, and look at the destination folders for Sent, Drafts, and Templates. Make sure that the messages for each will be stored in your preferred folder locations.
If you are using junk-mail filtering for the account, go to “Tools -> Account Settings -> Junk Settings” and verify that the folder selected for Junk messages is the one you want to use.
If you have set up any filters, go to “Tools -> Message Filters” and make sure that they will work properly with your new Inbox configuration. Especially important if you are changing an account so that it will start using the Global Inbox: if you have set up any filters that sort messages into any of the folders for the account, you should disable/delete those filters or change the destination folders.

Exit and restart Thunderbird

Important: exit Thunderbird and restart before downloading mail into any account whose Inbox/Global Inbox setting you’ve changed. If you do not exit and restart, messages might continue to download into their “old” locations (e.g., into the individual account Inbox rather than the Global Inbox).

July 1, 2011July 1, 2011

Which Tablet is the best platform upon which to build an app?

From InfoWorld:

http://www.infoworld.com/d/mobile-technology/rim-blackberry-playbook-unfinished-unusable-534

Not only can it not compete with an Apple iPad, it can’t compete with the second-best tablet, Motorola Xoom, nor even with marginal Android tablets such as the Galaxy Tab that use the smartphone version of the Android OS rather than the Honeycomb tablet version. In fact, if my choice were between a PlayBook and a Windows 7 tablet — my benchmark for unusability — I think I’d rather go sans tablet.

The fundamental nature of the PlayBook’s flaws begin with the requirement that a BlackBerry be tethered to it for access to business email, calendars, or contacts. Other than using a Webmail client, a PlayBook without a BlackBerry is unable to communicate. You can’t connect to POP, IMAP, or Exchange servers directly from the tablet, as you can from an iOS or Android device — you must have a BlackBerry tethered via Bluetooth using the BlackBerry Bridge application. In that case, you essentially see your BlackBerry email, calendar, and contacts in a window on the PlayBook when connected.

And the other competitor:

Tablet deathmatch: HP TouchPad vs. Apple iPad 2

http://bit.ly/kJWzeS

Plainly put, the TouchPad is a mediocre tablet that poses no threat to the iPad or to Android tablets such as the Galaxy Tab 10.1 or Xoom. Even though the iPad 2’s high bar is no secret, it once again appears that corner-cutting or rush to market has been allowed to tie a potentially strong tablet’s arm behind its back.

[ InfoWorld’s Galen Gruman says “Whatever you do, don’t buy a Chromebook.” | See all of InfoWorld’s tablet deathmatch comparisons and personalize the tablet scores to your needs.

David Pogue from the NYTimes:

It’s the H.P. TouchPad ($500 for the 16-gig model, $600 for 32 gigs): a black rectangle with a glossy 9.7-inch multitouch screen. You can zoom into maps, photos or Web pages by putting two fingers on the glass and spreading or pinching them. The screen image rotates when you turn the tablet 90 degrees.

It runs the WebOS from Palm, which means there are far fewer apps. It is not an Android device.

May 25, 2011May 25, 2011

Google makes new image format

But fails to support Alpha channels (for true transparency)!

Firefox maker rejects the format, and will not support it until changes are made.

WebP’s lack of basic feature parity with JPEG in areas like metadata handling and ICC color profiles is identified by Muizelaar as another major problem with Google’s format. It also doesn’t add any important features that JPEG lacks, such as support for an alpha channel. He goes as far as using the phrase “half-baked” to describe the deficient WebP feature set.

Adopting a new image format in Web browsers is a big decision. Once a format becomes a part of the Web, it will have to be supported in perpetuity—adding overhead to the browser—even if it largely fizzles and only gains a small niche following. The chances of WebP attracting widespread use at this stage are very limited, so it seems prudent to avoid shoveling it into the browser.

WordPress editor has an iframe glitch

If you have been trying to paste in Amazon product iframes, then you will discover that the WYSIWYG editor in WP (provided by TinyMCE) strips out the entire Amazon html snippet that you’re trying to embed.The editor does not know how to show the iframe, so it strips it out. Argh.

WordPress configures TinyMCE (i.e. the Visual Editor) to strip IFRAME tags. So it’s not a bug per se. It’s just terribly inconvenient for those wishing to embed a product from Amazon.com, like this:

One way to stop this is to keep the post in HTML view/editing mode. Do NOT switch to Visual mode, ever, for that particular post. But this is a hassle.

A blogger posted a solution in this WordPress Forum post. It involves editing your Theme’s functions.php file. I tried it and it works well; just be careful if you every update your Theme; it likely will be overwritten.

You can also install the plugin TinyMCE ADVANCED by Andrew Ozz — it has the option in its Settings config to allow iFrame tags. Go to: http://www.laptoptips.ca/

I don’t prefer solving the problem by using this plugin, however. The TinyMCE editor is heavy already; adding 17+ new buttons and features will slow the page load times even more.

Recommendations: edit the functions.php file with the easy fix by Chip Bennett. It is:


function mytheme_tinymce_config( $init ) {

// Add IFRAME to list of valid HTML elements (so they don't get stripped)

	// IFRAME
	$valid_iframe = 'iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]';

	// Add to extended_valid_elements if it alreay exists
	if ( isset( $init['extended_valid_elements'] ) ) {
		$init['extended_valid_elements'] .= ',' . $valid_iframe;
	} else {
		$init['extended_valid_elements'] = $valid_iframe;
	}

// Pass $init back to WordPress
	return $init;
}
add_filter('tiny_mce_before_init', 'mytheme_tinymce_config');

It works great for this blog.