Art and Science of Interactive Design

Hi folks, this blog has moved to a new address

2009-11-05T01:57:00.000-08:00

Thanks visitors for sparing time to read my Blog - Art and Science of Interactive Design. For some specific reasons I am shifting this blog to WordPress.com. The new address of my blog is http://interactivei.wordpress.com/

Though current blog will be available for future viewing, new postings will be available on: http://interactivei.wordpress.com/ only.

Usability is what I call Design

2009-09-22T05:17:00.001-07:00

I often find it difficult to answer – Are you a Designer or a Programmer? Generic thought says, the designer is creative guy who spend a lots of time thinking graphic, colors, decorations etc. For me things start of with information architecture, user interface design and then come so called creativity.

The idea is that, no matter what you’re doing, there’s a always a user-centered way of doing it. The user centric way of designing is called as usability.

Usability is a necessary condition for survival in Web jungle.
The proven fact is – No matter how interesting is the design, people leave if they find content not relevant to them. Usability makes user’s browsing experience, easy, satisfactory. He gets most out of a usable web design. Since user stays longer, gets more during his stay and tends to come back because of his pleasant experience, it leads to better ROI.

Usability facts:
People leave, if a website is difficult to use.
People leave, if the homepage fails to clearly what a company offers and what users can do on the site.
People leave, if users get lost on a website.
People leave, if a website’s information is hard to read or doesn’t answer his key queries.

User looks for a familiar navigation pattern, there’s no such thing as a user putting effort or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first option user chooses when finds a difficulty.

The usability is vital for e-commerce & news oriented websites. If users cannot find the product, they cannot buy it either. If they can’t find the relevant information, they leave either.

Google started learning Flash

2008-11-06T04:23:00.000-08:00

In depth detail about Google's ability to crawl Flash website.
Which Flash files can Google better index now
Google improved its ability to index textual content in SWF files of all kinds. This includes Flash "gadgets" such as buttons or menus, self-contained Flash websites, and everything in between.

What content can Google better index from these Flash files
All of the text that users can see as they interact with your Flash file. If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches.

In addition to finding and indexing the textual content in Flash files, Google also discovering URLs that appear in Flash files, and feeding them into the crawling pipeline—just like it does with URLs that appear in non-Flash WebPages. For example, if your Flash application contains links to pages inside your website, Google may now be better able to discover and crawl more of your website.

What about non-textual content, such as images
At present, Google only discovering and indexing textual content in Flash files. If your Flash files only include images, it will not recognize or index any text that may appear in those images. Similarly, it doesn’t generate any anchor text for Flash buttons which target some URL, but which have no associated text.

Also note that it doesn’t index FLV files, such as the videos that play on YouTube, because these files contain no text elements.

How does Google "see" the contents of a Flash file
Google developed an algorithm that explores Flash files in the same way that a person would, by clicking buttons, entering input, and so on. Its’ algorithm remembers all of the text that it encounters along the way, and that content is then available to be indexed. It can't tell you all of the proprietary details, but it can tell you that the algorithm's effectiveness was improved by utilizing Adobe's new Searchable SWF library.

What do I need to do to get Google to index the text in my Flash files
Basically, you don't need to do anything. The improvements that we have made do not require any special action on the part of web designers or webmasters. If you have Flash content on your website, we will automatically begin to index it, up to the limits of our current technical ability (see next question).

That said, you should be aware that Google is now able to see the text that appears to visitors of your website. If you prefer Google to ignore your less informative content, such as a "copyright" or "loading" message, consider replacing the text within an image, which will make it effectively invisible to us.

What are the current technical limitations of Google's ability to index Flash
Major Limitations
There are three main limitations at present, which Google is already working on to resolve-
1. Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file, in which case it will not be indexed.

2. Google currently do not attach content from external resources that are loaded by your Flash files. If your Flash file loads an HTML file, an XML file, another SWF file, etc., Google will separately index that resource, but it will not yet be considered to be part of the content in your Flash file.

3. While Google is able to index Flash in almost all of the languages found on the web, currently there are difficulties with Flash content written in bidirectional languages. Until this is fixed, it will be unable to index Hebrew language or Arabic language content from Flash files.

Basic Email Design Guidelines

2008-08-05T00:40:00.000-07:00

The very best of email marketing communication is true art. It is both attractive and effective. However, even a novice, who follows some simple considerations, can dramatically improve their chances of success.

Overall design
• Keep email width under 650 pixels. We’re designing for the preview pane and it doesn’t get much wider than that.
• Design above the fold. It’s okay for an email to scroll but basic idea is to design considering the fold area (Area visible at first glance). If the content is lengthy and overflows above the fold area please make sure that key elements are at the top (logo, call-to-action, navigation, primary subject matter, etc.) and by top ( within the first 300 pixels).
• Keep it short. Don’t overload your email with content. Use it as a tool to drive recipients to your website or landing page. Most people prefer to read large amounts of text in a web browser as opposed to their inbox. Give them a taste and a “Read more here…” link.
• Keep it simple. Don’t try and design a complex html masterpiece and expect everyone to see it the same way you do. The more difficult your email is to code, the more difficult it will be to see across the many email clients.

HTML Do’s and Don’ts (mostly Don’ts)
• Code emails by hand. Many “WYSIWYG” editors will typically add in a lot of extra code that email clients will tend to “cough on” and cause your email to display poorly. Never use the “Save as Webpage” feature of Microsoft Word. Dreamweaver is usually okay, but have a working knowledge of HTML so you can check for code that shouldn’t be there.
• Tables are your friend. In the web world designing with tables is on its way out. In the email world designing with tables is the only full-proof way to have your design rendered correctly across all email browsers. Use tables.
• Don’t use Javascript or other dynamic scripts. Even if a SPAM filter happens to let your email through untouched, most email clients will not allow these scripts to function.
• No Flash, Quicktime, Windows Media, Etc. By default, the ability to view these rich media platforms in email is turned off in most email clients. Provide a link to view your rich media on a custom landing page.

• Avoid excessive CSS. Many email clients strip out Cascading Style Sheets (CSS) or over
write it. The use of CSS is acceptable in email, but there are many strict guidelines you need to follow. Simple attributes like text style, color, and sizing are usually okay and acceptable across the majority of email browsers. When you start defining spacing, margin and other
positional elements with CSS you will run into problems.
• ALWAYS use inline styles. Do not attach style sheets or define all of your attributes in the section on your html.
• Avoid nested tables. A lot of times they are unavoidable, but we recommend using them sparingly. Some email clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly.
• Avoid complex colspans and rowspans. Some email clients will choke on these and they can make content revisions a nightmare for the next edition. Use them sparingly.
• No body attributes. Most applications strip out everything that’s not in between the body tags.
So if you want to make a background green, do it with a stretch table background or CSS.
• Don’t embed images. Host images on your website or let your email service provider host them for you. Then make sure your image paths point to the full URL: (http://www.yourwebsite.com/yourimage.jpg)
• Avoid 1x1 pixel spacers. Some spammers use them and they may get your email flagged.

Images
• Don’t use images for important content such as headlines, links, or call-to-action. Or if you
do, make sure there is an html backup. Chances are images may be turned off making the key elements of your email useless.
• Use alt text for your images and make it say something compelling about the subject matter like “see this motorcycle in action”.
• Use image widths & heights. This way your design will maintain it’s basic structure when images are turned off in email browsers.
• Optimize. Make sure your image file sizes are as small as you can get without losing their visual integrity. Large images should be cut up into smaller, more downloadable sizes. No one wants to wait 10 seconds to see your 100kb jpeg.
• Background Images. Avoid using them. Many email clients do not allow.

Text Content
• Balancing act. Include an even balance of images and text. The email campaign that is sent as one image tends to end up in a Junk or SPAM file.
• Avoid gimmicky phrases like “Act Now”, “Special Clearance”, or even “Click here” in your emails. Spam filters look for these key words when diagnosing a potentially unsafe email. If you need to use them, put them in a graphic.
• Avoid invisible text. This is another trick spammers use and has become an instant flag for spam filters.
• Make it compelling. A no-brainer, but often overlooked. The more compelling your text is, the more your recipient will ignore possible design problems, be less likely to hit the delete button, and more likely to click your call-to-action.

Best Practice
• View this email in your web browser. Always give your recipient this option. Often even after every step is taken to ensure proper design, an email client will mangle an email. It happens. Make this a text link at the top of every email.
• CANSPAM. You must include an unsubscribe option in every email as well as your company name and address. Follow the rules like we do. Often this option is automatically built into your email provider’s application.
• Forward to a friend. What better way to reach more recipients than by adding a simple link to let others share your message? It’s also a good idea to include a “subscribe” option so the friend can subscribe to the mailing list. What better way to ensure deliverability and build your list?
• Subject Lines take first place. Without an accurate and compelling Subject Line, the chances of your email being viewed are very low. Give people a reason to open your email by branding your subject line and by highlighting the most important part of your message. Anything longer than 55 characters (and spaces do count) will get cut off for many recipients. A character count
of 35 really is a better number to aim for. Finally, test at least two subject lines to a portion of your list before selecting one to send to the majority of your recipients.
• Table of Contents. For scrolling newsletter-type emails, include a list of anchors at the top of the email so that users can easily navigate throughout the email.
• Subscriber Preferences. Having options is always nice. If your email provider offers it, include a link to update subscriber preferences. Allow recipients to add or change an email address or select content best fit for their tastes.

Testing Testing Testing.
• Test your email to various email clients and see which ones work best. If possible, compare this with your list analytics and design accordingly.
• Try turning images off to see what your email will look like. This will give you a reference for designing around this common occurrence.
• Use Spam-evaluation services Check it … It will make sure that it is not going in to recipient’s spam box.

An easy way to Spam

2008-06-15T02:37:00.000-07:00

Do these common mistakes and send your mail as a spam. On the contrary undoing following mistakes will certainly help you send your mail spam free.

Using spammy phrases, like "Click here!" or "Once in a lifetime opportunity!" specially in subject line.

Keeping the HTML text size tiny and trigger spam filters.

Using exclamation marks crazily and you will be exclaimed to see how your mails are falling in to spamming category!!!!!!

USING ALL CAPS IS LIKE YELLING IN EMAIL. Another effective way to trigger spam filters. Using ALL CAPS further slows down the reading process.

Color the fonts into bright red, or green color.

Creating an HTML email that's nothing but one big image, with no or a little text . Since spam filters can't read images, they assume that you are trying to trick them.

Using the word "Test" in the subject line. (Even I used this word it my subject line before sending the drafts for clients' approval and amazed to see how my emails are falling into their junk folder)

Sending a test to multiple recipients within the same company. Company's email firewall in this case could assume it's a spam attack.

Code in tedious sloppy HTML* triggers spam filters.

Design HTML email in Microsoft Word, and export the code to HTML. It is Sloppy HTML* code, and spam filters will hate it.

So guys following above those tips will certainly help you to trigger spam filters.
Happy spamming!!! Happy spamming!!! Happy spamming!!!

Sloppy HTML It isn't perfect. It has many extra repetitive useless tags, Inserted by a WYSIWYG editor in the rush and chaos of design. For example It happens while converting a Microsoft Word file to HTML.

Also when designers code in Macromedia Dreamweaver's Design view mode, lots of extra codes are added repetitively. This is non optimized HTML coding. Those repetitive codes make the file size heavy. Any decent HTML guy could probably cut the file sizes down considerably.

Points to remember before apply Form in HTML Email

2008-06-13T11:53:00.000-07:00

Some points to remember before you start creating "Form" for your HTML email.

The "GET" method of sending form works better than "POST". most notably Mac Mail do not support forms that use "post".

When coding your FORM "action," don't use very long urls. Long urls tend to wrap wrap in the email design, which sometimes breaks the link.

Don't use JavaScript submit buttons, in most of the email applications JavaScript is treated as a threat. Hence as an anti-virus measure it is disabled by most email applications.

Avoid submit buttons that are images. Email applications block images by default, plus image submit buttons has their own problems.

Using old-fashioned non-fancy, grey, beveled FORM submit buttons gets a better response. They work better because people are very familiar to using them. that's the reason they respond to them better anyway.

Submitting to secure forms can cause problems.

Don't forget to post a version of your form online, Link it to your Email with an alternative message (for those that can't read HTML email).

If you include a FORM or survey in your HTML email, keep it short. For a better response rate I think there shouldn't be more than 8-10 questions.

Happy working on Forms. Best of luck guys!!! Last but not the least test test and test your campaigns before the finally blast it.

How good is HTML Forms in Emailer

2008-06-13T11:35:00.000-07:00

In my another article "Dos and Donts of applying Form in HTML Email" I discussed the issues pertaining to HTML Form Creation. Now is the turn to discuss the positive and negative sides of HTML form in Emailer.

More to come...

Email Design - A beginner's guide

2008-06-13T08:09:00.000-07:00

Web Safe Fonts The very basic is to always use web safe fonts (it is true for any kind of HTML document which is meant for online purpose). Web safe fonts are universal hence can render without any problem on any PCs worldwide.

Use inline style Always use the style attribute in the relevant tag. See the example below-

Example 1-
<P STYLE="font-size: 10pt; color: green"> Example of an Inline Style</P>
Example 2-
<h2 style="background-color: #CCCCFF; > Generic Font Families </h2>

Code in Table style The Table layout is classic layout, it is safe and secure in case of emailer.

CSS coding For CSS coding it is advisable to write CSS codes in the HTML file itself. An external CSS file called in the document will not be supported well. Also test your file well on multiple platforms as all CSS tags are not supported well in all Email recipients.

Text Alignment Left text alignment is default text alignment and supported by most of the email recipients.

Hyperlink HTML text Color Assigning hyper-linked text a specific color value, always keep it inside font color tag. For example
<font color="#color code">hyperlink text</font>.

In absence of this code the hyper-linked text will more likely convert to default blue color (#0000CC) on recipients end.

Heading Heading as an Image is a big no no. Never use heading as an image, since images are blocked in most of the cases your heading will not appear this will leave user with incomplete message.

Use of Image Don't rely on one big image or images. Especially Avoid using image on the top of E-mailer. Since images are blocked in most of the cases, The images section will appear as a vacant space to the recipient. Use small images in mailer if required.

In the Scenario where we have to show big , what is the solution? Answer is simple use small images in E-mailer and link them to their bigger bigger versions hosted somewhere on remote server. By this way any curious users will be able to see the bigger version of images by just one click.

ALT Tag ALT Tag Don’t forget to put Alt tag in image Tag. Because in case image is blocked it gives an indication to the reader as what the image is about.
For example
<img src="logo.JPG" alt=" company name logo">

In above example logo.jpg is a Company Logo, company name logo in Alt tag will indicate the user that the image is a company logo.
Starting with ALT Tag Starting EDM with a appropriate HTML or Alt tag is a good idea since it encourages reader to go through the email. Here are two reasons why?

Capitalize the power of your Snippet Snippet is the Grey text follows immediately after the subject line. It is starting lines of your HTML text.
The example of how snipets look like are:
Outlook: Short line of text in auto preview.
Gmail: PC users see a shaded bit of text after a truncated subject line. (Just sender, subject line and date sent show up in the Macintosh version.)
Yahoo: Renders as a pop-up when you mouse over the subject line in the inbox preview on your Yahoo home page.

The snippet gives you extended opportunity to go beyond the subject line and add more value to your message. It tell the reader that your message has more value and should be seen. If your are not optimizing it you are throwing away the opportunity to make more sense of your message.Further in the scenario of image blocking and preview pane this might be the only line which reader is gonna see. (More to come as a detailed article.)