‹FrontEndeavors›

Came across a post @ Lucas Smith's blog which does a great job of setting up a test case for checking if a particular font is installed on a user's system. My particular need for this script came out of a senario where I wanted to use a Web font service if the font didn't exist on a user's machine. You may question why I would need a checking mechanism in the first place but to make a short answer, web front services are great but can also block an entire site from loading... 

So I keep hearing about Free CDN + Security services like CloudFlare and Incapsula that I figured it is time to give it a try on my simple WordPress site at Host Gator with a shared hosting. 

I also stumbled upon a resource for scalability testing = blitz which has a free plan for cheap-O's like me. 

So here is a very unscientific case study using WP caching with CloudFlare CDN.  

Each test/rush was with concurrent connections scaling 1-250 over 60 secs: 

1) No WP Caching, No CDN - 

This rush generated 110 successful hits in 1.0 min and we transferred 156.25 KB of data in and out of your app. The average hit rate of 1.80/second translates to about 155,825 hits/day.

You got bigger problems though: 99.94% of the users during this rush experienced timeouts or errors!

2) WP Caching, No CDN - 

This rush generated 149 successful hits in 1.0 min and we transferred 1.28 MB of data in and out of your app. The average hit rate of 2.78/second translates to about 239,817 hits/day.

You got bigger problems though: 99.92% of the users during this rush experienced timeouts or errors!

3) WP Caching + CDN - 

This rush generated 6,169 successful hits in 1.0 min and we transferred 50.63 MB of data in and out of your app. The average hit rate of 98/second translates to about 8,506,039 hits/day.

You got bigger problems though: 0.29% of the users during this rush experienced timeouts or errors!

Summary: I ended up using the Super Cache wordpress plugin instead of Total Cache (for some reason I couldn't get the same results with Total Cache). Also it is worth noting how crappy my shared hosting is with Hostgator, I can only get about 149 connections open before my server (shared) gives the fail whale...

There is a slight difference when using caching within wordpress even on my crap load of 149 connections. My site is not very DB intensive but caching helps and enables CloudFlare to work it's magic. 

There is a HUGE difference when caching + CloudFlare are enabled to the tune of ~5,500 % (if I did my math right) which is certainly specific to my shared hosting environment but that isn't too bad for FREE. 

Now this means that all of your WP pages will need to be cached and that might not be an option depending on how you use your WP instance. My site utilizes WP for as a CMS and I don't run my blog through WP. 

Also, it is important to note that CloudFlare isn't the Fastest CDN out there and honestly if I know my traffic wasn't ever going north of 50,000 pageviews a day, I would go with out it as the latency (at least in N. America) is faster straight out of Host Gator. 

Interesting development from Google, Yahoo & Bing yesterday… Read about it here,http://googlewebmastercentral.blogspot.com/2011/06/introducing-schemaorg-search-engines.html

Basically the big three have chosen to actively promote the idea of MicroData (machine-readable information contained in the HTML markup) that HTML5, web 3.0, Microformats and RDFa has helped facilitate. This will give more control to web developers as to what gets shown in Search engine listings and by default help give greater SEO value.

This applies to anything that falls in the list of ‘Schemas’ or types of content http://schema.org/docs/full.html Most notably for the clients that I work with would be reviews, products, services, organizations and events. 

The big question the web community is asking, "what about Microformats & RDFa?"  Apparently the big three just don't think there is enough traction to be a major consideration...  Maybe the tide will turn...

Further Reading:

Often times, browser compatibility checks come at the end of an interactive project. And in general, most clients don’t consider what browser(s) their site should work in, as it is the job of the website developer to make sure they don’t have to worry about it. But browser compatibility is an issue that has been brought to the Web Development forefront recently with events in France and Germany warning against using ALL versions of Internet Explorer1 (IE) and in China where the Chinese Government presumably used a security flaw in IE to retrieve personal information from individuals’ Gmail accounts2. It may come as a surprise (if you’re not involved in web development) that IE has not been up to par in terms of security, web standards compliance and supporting current technology. Possibly even more surprising is that many large companies are choosing not to support legacy versions of the once-market-share-leading browser. Most notably, Google is choosing not to support IE 6 as of March 1, 2010 starting with Google Docs and Google Sites3. Eventually all Google services will cease to support IE 6. So is Google really making the right move considering that conservative estimates still rank 20% of the world’s web browsing population4 as using IE 6? The answer is in YOUR analytics… It doesn’t make sense to support a browser that YOUR audience isn’t using so based on that assumption, let’s take a look at the numbers. We are going to compare browser trends from July 2007 to February 2010 for my employer's website (ermarketing.net). Below are the percentages of browsers used to view the ER Marketing website which make up at least 1% of our total audience. 

Trend 1 – Average from July 2007 to Feb 2010:

    Trend 2 – Average for the month of Feb 2010:

Giving a link that is currently the same page being viewed specific styling isn't something you can do with just HTML and CSS alone. 

It is generally easy to use backend programing to style the active link but I have developed a solution with Vanilla JavaScript so that your active links will take on a CSS class of "active". 

// Active Class by B> (function(ext) { var a = document.getElementsByTagName('a'); for (i=0; i<a.length; i++) { var l = (window.location.pathname).split(ext)[0]; var h = a[i].href; if ( h.indexOf(window.location.host) != -1 && h.indexOf('#') == -1) { var h = (h.split(window.location.host)[1]).split(ext)[0]; var c = a[i].className; if (l.indexOf(h) != -1) { a[i].className = c + ' active'; } } } })('.php');

The way it works is to compare the current page link with all the anchor tags in the DOM. It will add an "active" class to the anchor elements.

If you use parent/child naming conventions it will also set the active class to the parent links (i.e. about.php and about-history.php will both have an active class on the yourwebsite.com/about-history.php )

If you're not using PHP Just change the last string '.php' to be what ever your file extension is. 

Sending email is something we take for granted. Most of us have sent email for more than a decade and I would wager we think we are pretty good at it. Sending bulk email, however, is a much different animal. There are laws and best practices that even the savviest personal emailer might not be aware of. For business, sending email is an effective tool that can drive sales, leads and website visits but can also do real harm if misused.

WHY AN ESP Email can be sent many different ways. What makes using an ESP (email service provider) better than say blasting out an email through outlook? Here are a list of ten reasons why using an ESP makes sense.

It’s the law (sort of) – Any commercial content (promotions, advertisements, etc) sent from a business falls under the CAN-SPAM Act and subjects that business to legal ramifications if the requirements of CAN-SPAM are not followed. ESP’s don’t automatically equal CAN-SPAM compliance but they invest loads of money to make sure they do all they can to keep your email sends free from the Spam Folder including forcing you to abide by the rules.

Deliverability – ESP invest lots of money to make sure they are white-listed (approved list of IP addresses for unhindered deliverability) with many ISP (Internet Service Providers) and email providers. This can be very important as there are a variety of things that can stop an email from reaching it’s intended recipient. ESP’s generally have a process for making sure each email sent achieves its maximum deliverability.

Analytics – Using an ESP means that you can track things like email Open Rates, Bounce Rates, Inactive Emails, Click-Through Rates and other measurements that tell marketers useful information and can influence ROI. These analytics can also be used in conjunction with website analytics to give comprehensive campaign reporting.

Personalization – Since ESP’s use a database to store your email recipients, you can collect information such as name, address, store association and age to create unique personalized messages in emails sent to your subscribers.

Segmentation – You can also create entire lists based on subscriber preferences. Using this approach, subscribers can subscribe to different lists or relevant offers. This allows for a more targeted approach to email communication that saves you money, time and subscribership by sending the right offers and the right amount of email.

List management – As part of the CAN-SPAM requirements, a business must provide a way for the email recipient to “opt-out” of receiving future email. ESP’s provide simple list management that is automatic when a person’s clicks an unsubscribe link at the bottom of an email.

Professional look – If you’ve every subscribed to a large company for ongoing email offers or specials, you might have noticed that these emails look a bit different than what you can do when sending an email in Outlook. ESP’s provide email designers the ability to use HTML (the language of websites) that allows for a richer media experience than just text email.

Data integration/triggered email – Some ESP’s have the ability to integrate customer data to trigger email offers. Triggered email offers are extremely relevant as they are generated based on behavior or specific info and generally have a much higher click-through rate than non-triggered email.

Time sensitive content – Larger ESP’s have the ability to program emails to react differently based on when the email was opened or how many times an email is opened. This can be helpful for time sensitive offers. 10. A/B Testing – Getting the greatest response via email can be a delicate balance of content, visuals, time of delivery, subject lines, etc. Using an ESP makes it easy to test different combinations and compare their analytics to fine-tune your email efficiency.

DESIGNING EMAIL Email design has become increasingly complex as new tools and standards are realized. There are multiple components that come together to create an email just like sending one. So now that we’ve covered why using an ESP makes sense lets discuss the basic steps that go into a successful email send.

CTA (call to action) – The most important aspect of starting the email process is to think about what the purpose of email is. The call to action could be to educate, to purchase, to generate a lead, to click to a website or to forward to a friend. Once the CTA is identified, a clear set of analytic goals should be tracked to measure the effectiveness of the email send. This is one of the major selling points of email versus traditional media communication.

Visual design – Your email’s visual design, often referred to as the concept, will greatly affect how the recipient responds to the CTA. Decisions regarding this phase range from how to best layout the content of the email to what color a link should be in order to get the greatest number of click throughs. Each decision regarding the visual design should reinforce the CTA and help provide a platform for content consumption. Generally a concept is created using a graphics program such as Adobe Photoshop from which graphic assets are generated.

HTML DEV – Even though emails and website use the same base language (HTML) the application of this language is VERY different. Grade A email clients like ThunderBird render HTML almost identical to modern web browsers. Grade F email clients like Eudora or Lotus Notes 7 can’t even be compared to modern web browsers. So a working knowledge of popular email clients and their HTML support is necessary to ensure your message is delivered in a legible manner. This importance is further compounded when you have webbased email clients that combine web browsers with email client nuances such as the infamous Firefox and Gmail image-margin bug.

Dynamic content – This is where the real programming takes place. Making dynamic content area is possible by setting variables in your email that pull in blocks of other content or HTML stored at the ESP. These variable areas are best used with rules that correspond with the recipient’s preferences or info. Dynamic content makes it possible for one email send to serve multiple relevant messages to the entire subscriber base.

Subject line – Writing effective subject lines is often overlooked. This could be the only thing that a recipient actually reads before deleting your email. It is worth spending some time researching the most relevant words that will resonate with your audience. Often times it is better to use slang or text/chat abbreviations to get more information packed into a subject line.