Monday, December 12, 2011

Working with HTML Emails

Off lately I have been working on html emails. i.e sending emails to users on submitting the form on website / newletters etc. These types of emails can be designed in two forms
  1. Plain Text format
  2. HTML based.
It was quite nteresting to build these emails. Because as HTML has reached to its 5th version and we cannot use any of its properties/tags here, we are required to use properties which were even deprecated in HTML4.

All I had to do was to google around the deprecated tags. Another interesting thing is you are required to use table based design here. I hate it! Email clients do not understand the new / clean div tags.

But still, at times its fun to search out the deprecated tags from our html store and use them in building up something really useful. Its like ‘Best out of waste’. ;)

During my study I found out many interesting practices that needs to be followed in email designing, Some of them are :
  1. Keep Design Simple.
  2. Take care that your emails are not sent to SPAM / JUNK folders of users.
  3. Embedded CSS ( Internal CSS ) is not very well supported in newer browser-based email programs like Y!mail, gmail, windows live, Mac mail, AOL webmail.
  4. Make sure you provide ‘plain text alternative’ in your mails. Use MIME Multipart Alternative content type.
  5. Some email clients makes the links clickable , some wont so type out the entire URL if you want your user to visit certain webpage.
  6. Give all image tags an ‘alt’ tag.
  7. Wrap the email in 100% width table.
  8. Do not allow width to extend beyond 600px.
  9. All easy unsubscribing from your mailing list.
  10. As IE troubles webdesigners , how can it spare emails ! Windows live Hotmail adds a few pixels of additional padding below images. We have a hack for it! : img{display:block;}
Resources:
  1. http://www.tutorialized.com/view/tutorial/20-Email-Design-Best-Practices-and-Resources-for-Beginners/54668
  2. http://www.1stwebdesigner.com/tutorials/ultimate-guide-html-emails/
  3. http://mailchimp.posterous.com/20-email-design-best-practices-and-resources-1
  4. http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/

Sunday, October 9, 2011

Making Web Handheld Device friendly

The next generation of websites are going from desktop to laptop to handheld devices. 
Overall the world the ratio between number of mobile phones and desktop is varying largely , number of handheld device users are increasing greatly than desktop / laptop users.
This may be the evolution of web world and being aware of approaches to make your websites handheld device friendly would be the survival of fitest.

After researching on handheld friendly web , I found four major approaches that could be adapted to build handheld device friendly web. May be there are many but I found these four.

Please advice me if you know anything better than this I am still hunting!

1. Responsive Web Design:

  This technique is widely used lately. In this technique same url is used and based on viewport size, media queries change the layout / styles in website. 

CSS 3 media queries have bunch of useful attributes which can help to build websites handheld devices friendly.

‘Orientation’ attribute of media queries helps to develop ipad friendly website wherein website styles changes based on orientation of the iPad.

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

In this technique images are also resized according to screen size. However images which are not intended to display on handheld devices (using  “display: none“  ) are not shown on screen but in background it does gets downloaded on mobile.

Because to display resizable images <img> tag is used and gets downloaded irrespective of its display property in CSS.

Being mobile phone users have low storage capacity loading unwanted images should not be acceptable.
  
But the issue is all browsers do not support CSS 3 completely.

Popularly content based websites uses RWD.

2. Redirect Users to different URL:

Use different url for mobile version of website.  Detect user-agent and redirect user to mobile version url of website. 

Create a flexible website layout here based on standard screen size or meta tags used to stretch page to full available width of viewport in iOS , Android devices.

WAP / HTML-MP :

This is the type of markup used to develop mobile friendly websites. 

In earlier versions of mobile friendly websites, WML was widely used. If you have fixed width layout then may be you would most likely to go for this approach. But it is restricted  in use. And mostly mobile phones now support normal HTML / XHTML.
So if your website statistics says mostly your users are using old mobile phones you can still consider this option.

Drawbacks in this approach: will need to maintain two sets of website. 

3. Provide URL on desktop version:

    Buld a mobile version of website and provide a link to mobile site on desktop / laptop version site. So user can go to any site as required.

4. Hybrid way:

    Responsive web design to layout your design and detect user agents to organize content on your website.

Website statistics should be analysed and depending upon decision can be taken based on user behavior.

References:
  1. http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/
  2. http://sixrevisions.com/web-development/mobile-web-design-best-practices/
  3. http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html