Adding splash screen in an android app built on PhoneGap

After struggling alot to add splash screen, finally I have managed to work. Followed the following steps -

1. Make sure you have all images for splash screen in your www/res/screen/android folder
2. Find/add the following tag to your config.xml file under www folder;
   (value is in ms, so please add accordingly)
3. Make sure you have the Splash screen plugin installed (org.apache.cordova.splashscreen). You can check by going to your folder and executing the following command on terminal:
   phonegap plugin list
4. If you don't have the plugin, add it by using the following command:
   phonegap add plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
5. In your JavaScript code you can add the following code to close the splash screen:
   //checks for splashscreen and hides it

   if (navigator && navigator.splashscreen) { navigator.splashscreen.hide(); }

PhoneGap and Android Studio

PhoneGap uses purely html, css and js ; so a good framework for those who have been worked on these technologies mostly. Just started building mobile application. After some research found that phoneGap to be the best framework to start with.

Required applications to install -

1. PhoneGap
2. Android Studio

PhoneGap Desktop application was not working well so I preferred to work on phonegap command line.

Followed the following links, it has explained very easy steps to start with phonegap apps - https://www.ringroost.com/blog/android-studio-phonegap-mac-hello-world-android-app-html-css-javascript/
http://www.codenutz.com/getting-started-phonegap-android-studio/
http://www.tricedesigns.com/2013/05/16/phonegap-android-studio/

Came across some issues and following links helped me to get through it -

1. Error - how-to-fix-hax-is-not-working-and-emulator-runs-in-emulation-mode
   http://stackoverflow.com/questions/21031903/how-to-fix-hax-is-not-working-and-emulator-runs-in-emulation-mode
2. Error - “No Content-Security-Policy meta tag found.”
   http://stackoverflow.com/questions/30212306/no-content-security-policy-meta-tag-found-error-in-my-phonegap-application
config.xml is present under applications root directory
3. https://developer.ibm.com/answers/questions/18840/not-able-to-connect-to-mobile-app-from-emulator-getting-exception-in-logcat.html

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/

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

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:

1. http://eyetrackingupdate.com/2010/07/27/eye-tracking-patterns-recurring-theme-web-usability/
2. http://eyetrackingupdate.com/2010/06/14/eye-tracking-web-usability-study-reveals-golden-triangle/
3. http://eyetrackingupdate.com/2010/01/05/top-5-eye-tracking-usability-findings/
4. http://eyetrackingupdate.com/2010/02/05/more-eye-tracking-tips-for-web-usability/
5. http://uxmag.com/articles/eye-tracking-the-best-way-to-test-rich-app-usability
6. http://usableworld.com.au/2009/03/16/you-look-where-they-look/

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:

1.  http://createqrcode.appspot.com/ 
2.  http://www.qrcode.kaywa.com/
3.  http://www.qrstuff.com/

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:

1.  http://www.denso-wave.com
2.  http://www.clevertexting.com/downloads/QRcodesIndia.pdf
3.  http://smallbiztrends.com/2011/02/qr-codes-barcodes-rfid-difference.html

Building font-size based UI

While building pixel perfect website, sometimes we landup in major issue if we want to change the font of the website. In our pixel perfect a simple

change in font size or family disturbs whole layout. So to build font based web-page 'em' unit should be used to give dimensions to the containers.
'em' unit gets calculated , based on the basic font you defined for the page.
the basic formula goes like:
1em = basic font size of the page.

Lets say you defined font-size:12px;

now, suppose we want to build a div container with width 120px and height 240px.
.container{
    width:120px;
    height:240px;
    background:#aaa;
}

so to convert 120px into em:
120px (width of the container) / 12px (font-size) = 10em
and
240px (height of the container) / 12px (font-size) =20em

New CSS:
.container{
    width:10em;
    height:20em;
    background:#aaa;
}

Putting 'em' as unit, now if we happen to change the font size in future our container will change proportionately without disturbing the layout.

It is better idea to provide min-width /height to the container so that even if the font is reduced our design should not shrink, after some point our design remains static.

Make main container 100% of browser height

Often we realise that putting 100% height to main Container does not cover the whole browser height.
HTML is the stack of container where any child element inherit the properties of its parent element unless properties specified explicitly.
now when we give "100%" height to our div it takes 100% height of its parent element.
So,

<html>
<body>
<div class="mainWrapper">This is My Wrapper Div </div>
</body>
</html>


CSS:
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}

Now here, <body> is the parent element of <div> so <div> will take 100% of <body> height. But since we have not defined any height for <body> , we cannot see any change in the height of div.

Adding couple of more entries in our CSS files may add success to our problem:

html,body{
height:100%;
}


.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}

Putting this CSS can give you 100% browser height to your <div>. Since <html> and <body> are parent elements. We provided them 100% height which says <html> and <body>
elements to take 100% of browser height.

Share your Blog / Website articles in facebook, twitter, linkedIn, buzz

Some quick ways to create buttons for your website/blog and share your articles on buzzing social networking.

Copy and paste the following codes in single.php in your wordpress theme.
1. Official Tweet Button:
goto twitter.com -&gt; Goodies -&gt; tweet button
make necessary settings and copy the generated code in you single.php

Something Similar link gets generated:
<a class="twitter-share-button" data-count="none" data-via="shrutijakhete" href="http://twitter.com/share">Tweet New</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>

2. Facebook like button:
Facebook like button can be integrated in two ways.
1. Iframe
2. Javascript Version

Iframe is the easiest way to put like button whereas javascript version allows you customize your settings. Thanks to hyperarts.com they have explained javascript version is explained here quite well.

Using Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px;"></iframe>

3.LinkedIn:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&title=<?php the_title();?>&source=<?php wp_title();?>" target="_blank"><img src="http://static03.linkedin.com/img/pic/pic_logo_119x32.png" border=0 alt="Share on LinkedIn" title="LinkedIn"  height="20px"></a>

4. Buzz:
<a class="google-buzz-button" data-button-style="small-count" data-locale="en_IN" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a><script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>

Reference:
1. http://www.developer.facebook.com
2. http://www.twitter.facebook.com
3. http://www.developer.linkedIn.com

swfObject

swfObject is the small javascript library (10Kb / GZIPed: 3.9Kb), used to embed flash content  in your html page.

Major Advantages:

1.       1.  It detects if the browser has flash player to play the flash content.

2.      2.  It detect flash player version.

3.       3. Can be helpful to display an alternative content if your browser does not have flash player installed in it.

4.       4. SEO optimization of flash content.

5.       5. Better way around for <embed> tag which is not w3c valid tag.

How to Use?

1.       Download the library.

2.       Add it in your app.

<script type="text/javascript" src="swfobject.js"></script>

3.       Add some container in your html page which could hold the flash content.

e.g. <div id=”flashContent”>&nbsp;</div>

4.    <script type="text/javascript">

var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");

so.write("flashcontent");

</script>

What each parameter means:

var so = new SWFObject(swf, id, width, height, version, background-color);

Related Links:

1.    http://osflash.org/swfobject

2.    http://blog.deconcept.com/swfobject/

3.    http://www.reelseo.com/swfobject-video-seo/

4.    http://code.google.com/p/swfobject/wiki/documentation

jQuery.noConflict()

There are different JavaScript libraries such as jQuery,mootools,ajax etc available which helps us to add functionalities to our web applications.
Hundreds of plugins built using those libraries are making our tasks easy. So without actually peeping into the code we use those plugins.
Now, the problem arises when these libraries are used together.

I stuck in the same problem when I was implementing jquery in my application which already had lighbox implemented in it.
After researching a lot I figured out that prototype.js which was used for implementing Lightbox and jQuery.js in my application were conflicting.

The real problem was both libraries were using '$' as their main function name. Hence one library was breaking the behaviour of other library.

for e.g. in jquery we use :
$(function(){
---
---
});

Here '$' represents jQuery. Similarly in prototype.js for lightbox '$' was used which was representing its main function.
jQuery has provided us the solution to get rid of this problem. Simply use noConflict() function immediately after jQuery.js.
When you use noConflict(), jQuery will return $() to its previous owner and you will need to use jQuery() instead of shorthand $() function.

so it can be written as
jQuery(function(){
---
---
});

else...

var j=jQuery.noConflict();

so,
j(Function(){
--
--
});

So now, jQuery is compatible with other javascript libraries and can be used easily.

CSS SPRITE

I have been working on this technique and found it quite interesting and loved working on it. Lets discuss more about this technique.

What it is??

Technique wherein small images are consolidated at one place and then that consolidated image is used to apply those small images around your application.

Whole magic is done by background position property. By using background position property the exact position of the required image can be identified.

Why to use??

The technique helps you to reduce HTTP request and thus performance gaining of your application.

When you look for optimization of web application you look around to reduce the number of HTTP requests.

So here if you have 10 different small images in your application then 10 different HTTP requests would be sent to fetch those images from server. Wherein when we use CSS SPRITE, all 10 images are consolidated in one image and then only one HTTP request is sent to fetch the images.

Where it has been used??

CSS sprite is now majorly used. Put your firebug (in Firefox) on and see the CSS of yahoo.com, aol.com, digg.com all are using CSS sprite to display small images.

When to use??

Typically the technique should be used to access small images.

How to make it?

Sprite images can be build in photshop or to make your life easier there are number of CSS SPRITE generators available on web wherein they ask you to upload your images and build sprite image for you with respective background position of particular image. I use www.csssprites.com

Useful Resources:

http://css-tricks.com/css-sprites/

http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

http://websitetips.com/articles/css/sprites/#why-sprites

http://csssprites.org/