Monday, February 27, 2012

Add Facebook apps to Fans Page's Tab

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_APPS_Canvas_URL

Wednesday, December 7, 2011

Google Page Speed


In conjunction with the Pre-Live Checklist, here are some additional info for your perusal.

Google Page Speed
If you want to have a quick glance on how good a particular site is doing, you may use Google Page Speed other than YSlow.

Example of Page Speed Reports:

1.       Facebook.com  – 99 out of 100 (https://developers.google.com/pagespeed/#url=www.facebook.com&mobile=false)
3.       Tigerbeer.com.my – 85 out of 100 (https://developers.google.com/pagespeed/#url=www.tigerbeer.com.my&mobile=false)
4.       Strongbow.com.my – 86 out of 100 (https://developers.google.com/pagespeed/#url=www.strongbow.com.my&mobile=false)

We should aim to score at least 90 out of 100.

Also, we can even explore using Google’s Page Speed Service which is an online service that fetches the contents from our servers, rewrites the pages with some best practices and then serves them out via Google’s servers across the globe.

Think of it like a CDN service, but with optimization automated. If you do not know what CDN is, it is called Content Delivery Network, read it up here.

Our current client iProperty, is currenty a user of Akamai, which is a CDN provider. Hence, you will notice that no matter from which region you’re accessing iProperty’s website, you will be connected to the nearest local server and the page will load up as fast as accessing a local server.

W3C Validation
For W3C validation, you may use W3C Markup Validation for a start.

Example of W3C Validation Report:

1.       Strongbow.com.my – 9 errors, 18 warnings (Using HTML 4.01 Transitional)
2.       Kilkenny.com.my – 4 errors, 6 warnings (Using HTML 4.01 Transitional)

W3C Link Checker
Good for checking broken links.

Example of Link Checker Report:


W3C CSS Validator
Good for checking CSS templates.

Example of CSS Validator Report:


Wednesday, November 16, 2011

Best Practices of HTML Designing in Email Marketing



Email marketing is one of the most powerful and effective forms of marketing today. Email campaigns can be quickly deployed, offers measurable results, allows one-to-one communication and personalization and delivers a very high return on investment relative to other marketing options.

Achieving maximum results from HTML emails, at least from the standpoint of message construction, does require adherence to sound HTML design techniques. Simple mistakes in your HTML code can adversely
affect delivery and usability --- and ultimately hamstring your ROI. For this reason netCORE has compiled this guide to HTML design.

Also, avoid scripting. Security risks due to script vulnerabilities in email browsers have increased over the years. The result is most scripts, such as JavaScript and VBScript, get stripped out of messages. Some email systems outright reject messages if that contain scripting. For greatest compatibility of emails avoid using scripts. Instead, drive recipients to your website, where dynamic components are easily rendered.

Designing a template plays a vital role in the success of a particular email campaign. If your HTML interest the reader and if it communicates the message clearly to your end user, then surely you have won the battle and your purpose of engaging the customer with your brand name was successful.




Let’s look at some of the aspects which we need to consider before designing a HTML
Image and Text Combination:

It is very important to use a combination of images and text in the email content. Generically the industry standards state usage of 60% - 40% usage of image and text combination respectively.

Using Forms in HTML Emails

We discourage embedding forms into email because of delivery and usability problems. However, when you do need to use a form, consider the following:
Hotmail will not allow a working form in an email. Hotmail displays the form but strips all values from your <FORM> tag and removes the name values of all form elements, rendering the form useless. Hotmail recipients can complete the form, but nothing will happen when they hit the submit button.

Font and Font Size

In general, use only universally-supported fonts such as Arial and Times New Roman for your message. If you include fonts that are not also loaded on your recipients’ computers, their email clients will substitute different fonts, which can effect your design. If you must use a special font (such as within a company logo), use it with an image. Arial is a font that was specifically designed for onscreen readability. Studies indicate that Web uses prefer Arial, Verdana, and Tahoma to others when viewing Web pages and email.

Fonts can be specified in pixels, points or HTML font size value. Use a point size no smaller than 10 point, size “2” or 10 pixels.

Color

From images to fonts, colors play an important role in the design process but can also create problems. For example, don’t choose a font color such as a muted gray on a gray background that makes your headlines and calls to action hard to read. Don’t hide valuable information in your emails by blending the content into the background.

Background Colors

Firstly we should avoid the usage of dark background colors as the probability of ISP’s blocking the particular email content is more. We should Use a white or very light background with dark to medium font color to provide easy readability for your recipients. Also, email clients such as Microsoft Outlook might retain the background color when replying to or forwarding the email but use their default font color (usually black), making the text difficult to read.

These are certain observations made at our end which often tend to hamper the inbox delivery, that is the probability of the delivery getting hampered increases. It would be wrong to conclude saying that these factors would surely lead to spamming, but

Buttons Charts, etc…

Buttons, charts, and other supporting images should use colors of your design elements to pull the reader’s eye to the images. Make sure the text color used on your images stands out and is readable. Most importantly, make sure the recipient understands the action.

Keep HTML Emails 500-660 Pixels in Width

Most HTML emails are 500 – 650 pixels wide. Early email clients were developed before HTML and were not designed to render wide web page-like emails. More recently, the message windows of popular web-based email services like Yahoo Mail, Hotmail and Gmail will typically present 600-750 pixels, although this will vary according to users’ screen resolutions.

This means that HTML messages wider than this range require the recipient to scroll horizontally to view the whole email. Forcing a user to scroll horizontally might be OK on your website, but you should avoid it in an email.


Images

Images for emails should be hosted on a web site and not embedded within the email to ensure proper rendering and minimize file size. It is preferred to avoid attachments in the mailer. You can use as many images as you wish (but be sure to keep each image size at or below 50kb to avoid filtering) – the right number depends on purpose, type and focus of the email.
Consider using graphic images and buttons to draw readers’ attention. These images can convey concepts such as Free Shipping, Email-Only Special, Buy now and Limited Supply in combination with your copy. Make sure your call to action is not only supported by an image but also by text. This way, if the images are turned off, the recipient can still find your call to action.
Call to Action
Call to action is one of the crucial aspects of the email content without which an email is incomplete. Call to action is a hyperlink which is given on the images in your content. Now we may not be able to highlight all the aspects of our product or the various product lines in the email content, this is where call to action plays a crucial role in directing the reader to your website or any other landing page. (Social Media hyperlink is commonly used on and  images to direct the reader to your social media pages on these websites)


Use Image Alt Tags

HTML “alt” tags display a text description of an image when either the image does not display or when a cursor rolls over a displayed image. Using alt tags in your HTML emails is important for two reasons:

1. Recipients using dial-up or other slow connections might not see images for several seconds. Displaying alt tag text can convey what is to come.
2. Many email clients (Outlook 2003 and Outlook Express) and email services (Hotmail and Gmail) disable images by default or display a warning message or command to download the images

3. When the email is viewed from on handhelds/mobile, Alt tag gives an option to user to refer the text and understand whether it is important to download the image or not.

Added suggestions on HTML
Use Table for layout. It is very essential to declare Cellspacing and cellpadding for each table. The Style should be defined in specific table cells or <td> tags. Usage of colspan and rowspan should be avoided.
Background images should be avoided; inserting them in the HTML is preferred with <img> tags.
Avoid paragraph and heading tags. Paragraph tags <p> and heading tags (<h1><h2><h3> etc.) sometimes tends to adversely affect the design of the email in a particular mail client . Instead it is preferred to style text within div or span tags to avoid such discrepancy

Use of tables:
Use tables instead of div tags and alignment should be define according to tabls intead of margins.
Background images should be define in styles in <td> tags.

References:
Websites
http://www.clickz.com/
www.flyte.biz
Books
“The Complete Guide in Email Marketing” by Bruce C. Brown

Thursday, September 22, 2011

Web Portal Load Test Tools

Web Site Test Tools and Site Management Tools
http://www.softwareqatest.com/qatweb1.html


Web Accessibility Checker

http://achecker.ca/checker/index.php

PHP API data encryption

Below is the mcrypt method that I use to do for API data encryption


define('KRYPT_KEY', 'nextblog');

function encrypt($string) {
$iv_size = mcrypt_get_iv_size(MCRYPT_BLOWFISH, MCRYPT_MODE_ECB);
$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
return mcrypt_encrypt(MCRYPT_BLOWFISH, KRYPT_KEY, $string, MCRYPT_MODE_ECB, $iv);
}

/*** decrypt string ***/
function decrypt($crypttext) {
$iv_size = mcrypt_get_iv_size(MCRYPT_BLOWFISH, MCRYPT_MODE_ECB);
$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
return mcrypt_decrypt(MCRYPT_BLOWFISH, KRYPT_KEY, $crypttext, MCRYPT_MODE_ECB, $iv);
}



$userid = "94017";
$encodeduserid = base64_encode(encrypt($userid));
print 'Encoded Userid: ' . $encodeduserid;


$decodeduserid = trim(decrypt(base64_decode($encodeduserid)));
print 'Decoded Userid: ' . $decodeduserid;

Tuesday, September 6, 2011

Online privacy

Your online privacy is your safety, you are responsible for it!

Tuesday, August 16, 2011

Submit Sitemap

Submit Sitemap to MSN, Google and Yahoo

In November 2006, Google, Yahoo! and MSN joined forces to support a new industry standard for sitemaps: Sitemaps 0.90 (see MSN announcement here). As long as webmasters follow the protocol, they can ensure their sites are fully and consistently indexed across all the major search engines (a real step forward). This article is important for all those with missing or poorly ranked pages.

The official site for the joint venture is at http://www.sitemaps.org/ and contains a lot of info about the new standard and it's syntax. What the site singularly fails to do is explain correctly how to submit your sitemap to the big three! The format suggested on the site of:

http://search-engine-url/ping?sitemap=your sitemap_url

does not currently work at any of the three sites! Until it does, this blog page provides instructions for how to (a) create your sitemap and (b) how to submit to each of the three search engines...


Creating your Sitemap

Some hosting providers(for example 1and1) provide utilities via their web control panel, to create your sitemap, so you should always check with your provider first. If this service is not available, then make a visit to http://www.sitemapspal.com/ and enter your site URL into the generator box. Copy-and-paste the resulting sitemap into notepad, then save-and-upload to your site with the file name: sitemap.xml

If you want to validate the XML prior to uploading to the search engines (useful if you have made any manual amendments), pay a visit to the SmartIT XML Sitemap validator where you can put in the URL of your sitemap and check it against the standard.


Submit sitemap to MSN

MSN have yet to implement a formal interface for Sitemap submission (as at April 2007). To monitor the situation, please visit (from time to time) the following pages:

MSN Site Owner Help
Livesearch official blog (where future announcements are likely to be found)

Whilst MSN have yet to implement a front door, there is a recognised back door for submitting your sitemap to the MSN Search index; namely moreover.com! You should use the following syntax directly in your browser URL box:

http://api.moreover.com/ping?u=http://yourdomain.com/yoursitemap.xml

For example, to submit the sitemap for this site, the correct entry in the browser is as follows:

http://api.moreover.com/ping?u=http://www.seo-expert-services.co.uk/rss.xml

Since February 2005, moreover.com have been the official provider of RSS feeds to the myMSN portal (see press release) and reliable evidence suggests that submission to moreover.com will result in MSN spidering your pages within 2-3 weeks.

Update 18/07/07: MSN still do not support direct submission but now suggest on their blog that you add a reference to your Sitemap into your robots.txt file (something now supported by sitemaps.org). For example:

User-agent: *
Sitemap: http://www.yourdomain.com/sitemap.xml
Disallow: /cgi-bin/

This would tell MSN (and all other engines) to crawl your sitemap file but not to crawl your cgi-bin directory. For more info on how to implement a robots.txt file (in the root of your site webserver) please visit: http://www.robotstxt.org/


Submit sitemap to Google

Google originally developed the XML schema for sitemaps and have developed a dedicated portal for webmasters, from where you can submit your sitemap:

http://www.google.com/webmasters/

First, you need to tell Google all the sites you own, then verfiy that you indeed own them. The verifiaction is achieved by adding a metatag between the head tags on your site homepage. The syntax for the tag is as follows:

<meta content="unique code advised by google" name="verify-v1">

There are full instructions on how to do this on the Google site.


Submit sitemap to Yahoo

Yahoo follows a similar approach to Google. Again, there is a dedicated sevice for webmasters (Yahoo! Site Explorer) and a procedure for verifying your ownsership of the site. First go to:

http://siteexplorer.search.yahoo.com/

Add a site, then click on the verification button. You can then download a verfication key html file - which you will need to upload to the root directory of your webserver. Then you can return to Site Explorer and tell Yahoo to start authentication. This will take up to 24 hours. At the same time you can also add your sitemap by clicking on the manage button and then adding the sitemap as a feed.


Submit sitemap to Ask

Ask follows a simpler approach to the other three. To submit you sitemap, you simply enter a ping URL, followed by the full URL of where your sitemap is located:

http://submissions.ask.com/ping?sitemap=http%3A//www.yourdomain.com/sitemap.xml

After clicking return, you will get a reassuring message from Ask that they have received your submission. Very neat!