Technology : The Vision of Future: 2011

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

Plain Text format
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 :

Keep Design Simple.
Take care that your emails are not sent to SPAM / JUNK folders of users.
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.
Make sure you provide ‘plain text alternative’ in your mails. Use MIME Multipart Alternative content type.
Some email clients makes the links clickable , some wont so type out the entire URL if you want your user to visit certain webpage.
Give all image tags an ‘alt’ tag.
Wrap the email in 100% width table.
Do not allow width to extend beyond 600px.
All easy unsubscribing from your mailing list.
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:

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:

Wednesday, October 5, 2011

Eye Tracking and Web Designing

Eye tracking is one of the UX approach to be considered while building UI.

Eye tracking in UI referes to the behaviour of user's eye while traversing UI. There are some useful eye tracking tips that could be followed to develop a sucessful UI.

It takes users about 2-3 seconds to rate your website based on content , look and feel. And an optimized use of this 2-3 seconds by an UI developer can result in success and failure of UI.

Find out where user see first while opening your website, what draws the maximum user attention.
To find out this, eye tracking study plays a vital role.

1. 'F' shaped :

Top left part is the first point where users normally fix their eyes after opening your website. After that according to a general tradition user moves his eyes from left to right and then narrow down their fixation towards the bottom of website. This forms 'F' shape, thus 'F' shape should be considered while putting your website content.

2. Golden Triangle :

As mentioned above 'F' shape is the general way user fix their eyes while traversing the content of your UI. When you'll join the edges of the 'F' , the traingle is formed. Typically content placed in this triangle can result in the success of UI. Pictures, videos, and audio are more useful if they are embedded in this area. Reading and scanning content takes effort, and placing multimedia content in the golden triangle relieves the need to scan for relevant information. The users just have to sit back and immerse themselves in the experience.

3. Single Column before Multi Columns :
Studies also show that one column formats on a page tend to perform better than many columns side by side. Multi column formats can be overwhelming to viewers, so better just to keep it simple and straightforward.

4. Headings get attention :
Similar to newspapers, an attractive heading draws attention of users. In case of an huge heading, starting 2-3 words should be appealing to user that makes him to make an effort to read whole heading.

5. Navigation goes up top :
Navigations are more effective when placed on the top. The point may be that anything at the top of a page will be seen immediately. And since top navigation must be simple because of space limits, top navigation is probably much simpler to use.
However studies does show that side navigation also helps.

6. Paragraphs, White space , remove irrelevant images :
Irrelevant images consumes precious space and does not serve any purpose. These images should be replaced with whitespaces. As recent studies has proved that white spaces supports users to relax their minds and grasp relevant information.
Same as in our print media, paragraphs should be made with proper interval to help users to scan the information. Breaks should be logical, and organized into a flow of ideas rather than distinct paragraphs.

7. Images :
What this means to you: Be very careful when putting important visual cues or content near pictures of faces. If you want to draw attention at some very important message on try putting an image person's face. often face grabs the attention of users.

Reference Links:

Monday, April 11, 2011

Quick Response Codes - A Subway between the Print Media and an Electronic Media

You might have seen some jigsaw picture built with black and white combination while surfing an internet... on some products... on hoardings... on business cards etc. and might have wondered what this is??

When I saw these images for the first time I thought they are something like placeholders for missing pictures. But then I understood these are something more than placeholders.

They are QR code abbreviated for Quick Response also known as hard links or physical world hyperlinks.

We are very well familiar with barcodes. We could find them on almost every product. They are famous for their quick readability, quick conversion.

QR code has the same concept like bar code. QR codes were built with the aim of storing some important and quick information in a small code by Denoso Wave, subsidiary of Toyota, Japan, in 1994.

Unlike barcodes, QR codes are 2-dimensional codes. Meaning QR codes can store information vertically and horizontally whereas barcodes store information only horizontally. This makes QR code more useful and more efficient.

Bar code can store information only horizontally.

QR codes can store information Vertically and Horizontally both.

Bar codes can only store small amounts of information—a byte or so. But being 2D, QR codes can store a lot more— up to 2 KB of data under the current ISO standards.

What can you store in them?

You can store website url, contact info, some critical info, company logo, can put QR code on dinner plates embedding menu in it! , can gift coffee mug with QR code on it… etc.

How to decode them?

Any smart phone with camera having proper QR decoder application can decode this code.

Many smart phones does have built in QR code decoder applications.

Take a picture of the code and your application will decode this code.

For e.g. if you take picture of the above show image you’ll get redirected to http://www.itlero.com

How to generate QR code?

You could find many online QR code generators. Just add your text and click generate!

Some of them are:

Print media is the one long living and widely spread media across the globe, and QR code is like a subway between print media and the electronic world. So it is an easy way to connect with an user.

References: