Everybody is integrating interactive elements in their web pages rather than boring static page. Video/audio has become an integral part online presence. Lately, on my work, I am seeing lot of request to integrate video/audio files on web pages as well. Flash is the easiest and popular method of encoding videos in the web pages. You never have to worry about whether it will play or not as it is truly a cross-platform compatible—Mac, PC or Linux—any platform that support flash will play the video. As a user probably you won’t see what is the delivery method being used since this happens behind the scene; end result may look the same. There are two distinct delivery methods – Progressive Download and Streaming Delivery.

Having said that, let’s look at the completely distinct methods of delivery:

Wrapping up, both options Progressive Download and Streaming Delivery has their own benefits and limitations. It’s really depends on project requirements and what you are trying to achieve. Regardless you choose any options we have compared above, you still have one more choice of embedding videos in your webpage – which I have not discussed here.

I would really love to hear your experience; please feel free to share your experience here.

Click following links to read more:
ADOBE – Video Learning Guide for Flash
mydeo.com – Understanding the difference

I love that I have entitled this blog title! Titles like this sell books; drive user attention and this is what all website owners wants. There is no shortage of companies out there who claims that they can get you on the top but really can they deliver what they have promised? If your content is not relevant, no amount of clever Search Engine Optimization will get you on number 1 – the bottom line!

There are ways to trick Google which helps you rank on top, but few of them tricks break Google’s guidelines. Google comes down hard on websites who does not follow the guidelines. So, how can you distinguished legitimate techniques and those black-hat techniques?

Following are few practices to bear in mind being black listed:
1.) Beware of companies that guarantee a particular rank
Ask for more information. First question to ask the provider is to describe clearly how/what they use to get us to that rank? You can judge whether you’re in danger being black-listed or not.

2.) Hidden text and links or search-engine only content
These text or links are intentionally hidden in the page to improve ranking. Means, users cannot see it but search engines can.

3.) Automatically submitting to Google
This is specifically prohibited in Google guidelines. Avoid using software packages to automatically submit your website to Google.

4.) Duplicating content or keyword stuffing
Google understand the difference if there is a legitimate reason of duplicating content such as if you have specified separate version for print. But, it break the rules if websites which deliberately dump the content or stuff keywords repeatedly to manipulate the ranking.

5.) Doorway pages
Sole purpose of creating these types of pages is to rank well in search engines. By using certain keywords or poor content which no relates at all to the actual website does no good.

By using above techniques creates a negative user experience and may ultimately cause Google to take actions. So how you can improve your ranking? Following are number of techniques you can use.

1.) Improving your website’s build
• Avoid using content types such as flash which search engines cannot access. Also, it’s a good practice to stay away from flash intro which doesn’t have SKIP button anyway.
• Mark up your content and use appropriate attributes such as ALT and TITLE to ensure accessibility for search engines.
• Add a site map. Create a clear hierarchy of your web pages which is easily accessible.
• Deliberately use text links instead of using an image, flash or other interactive element to get to the other pages on your website.
• Use short URLs
• Submit your website. For Google, you can submit at http://www.google.com/addurl.html or using Google’s webmaster tools page. Doing so helps Google learn the structure of your site and increases the number of pages indexed.

2.) Improving your content.
No brainer, correct? Additionally, it is a good practice to incorporate search terms in your content; naturally into the copy/content, headings or in the image ALT attributes. Be careful not to use too many search words; preserve the value of the content. Two or may be three words is adequate. Don’t dump all words you can think of, because you may get penalized for doing so.

3.) Encouraging quality links
If you’re website owner, it’s not so hard to understand. You may be getting lot of emails from somebody wanting to exchange your links with them. It is truth that Google may rank you high if your WebPages are linked to other websites. But keep in mind that quality matters than quantity. It’s worthwhile responding to a link request unless it comes from high-profile website with appropriate content.

Although these techniques which I’ve explained here will help improve your ranking, but shouldn’t be your sole focus. In almost all cases, the benefit is temporary, because Google constantly works to close such loopholes. It might take months for your site to become listed on top and all these techniques to work to take an effect. It means that site with short span may or may not appear on top at all. Despite all these frustration, search engines can’t be ignored.

In my earlier posts I have talked about the importance to ensure cross-browser and cross-platform compatibility followed by power of Web Analytics. In this post I would like to talk about how you can check your website performance.

Now that you have an analytics report in your hand and you noticed that the bounce rate is more than 50 or 60%. So what does that means? Bounce rate is the percentage of single-page visits or visits in which the person left your site from the entrance (landing) page. This can happen for a variety of reasons. They may have come to the wrong site or been confused by the user interface or they have met technical difficulties accessing to your website. Whatever the reason may have been but how can you identify potential problem?

You can easily perform three tests to identify potential problems:

1.) Check your website in as many different browsers as possible.
In my earlier post, I talked about why it is important and today I will tell you how. I recommend that you look at your site—frequently—in at least the last two versions of Internet Explorer, Firefox, Chrome and Safari. What if you don’t have access to all these browsers? Try an awesome online free service, www.browsershots.org where you can test your website’s compatibility on different browsers at the same time by taking screen shots of your web pages rendered by real browsers.

2.) Check your website’s accessibility using an online accessibility checker
Go to any of these free tools such as www.contentquality.com or www.wave.webaim.org which provides a web accessibility evaluation. A report which outlines the various accessibility problems within your website.

3.) Carry out a speed test of your website
Users will often abandon a site they perceive which taking too long to download. How quickly a page loads depends on numbers of reasons such as connection speed, type of content, number of images, etc. of the user. I recommend you to check out splendid website www.websiteoptimization.com/services/analyze where you can monitor download times in various connection rate and analysis & recommendations to improve the page performance.

These are my favorite few of many free automated performance checkers available online. If you happen to use any other awesome sites please share with me, I would love to hear from you as well!

I have done some Googling over the weekend and finally I have fixed the PNG transparency issue. Many thanks to Ellen from TheDesignspace. The solution she has provided works well in all major browsers! I knew it that I needed to add a conditional js code and Alpha transparency to make it work in IE6 but somehow it was not rendering correctly in all browsers. I have seen a few tutorial on this topic on different website, and this is the one to actually explain it well.
Again, thanks for sharing…

I have just noticed that the PNG graphic on my website homepage is not appearing correctly in IE6! It works fine in other browsers. Split browser standards. No wonder IE is behind in the browser wars! Little recap – I am using transparent PNG file as a background image but it does not render as transparent; you can see a whole white block instead of the image. I have googled it to find the solution but the examples I found are making me more confuse. Still am trying to find cross-browser compatible solution. I would appreciate it if you drop me a line or you came across any solutions to make a PNG file work—transparent— in all browsers.

Yay! Ever since I installed a barcode scanner app on my phone, I see QR codes everywhere–so naturally I wanted one of my own. If you too are a barcode-scanning fool, point your phone’s camera at this QR code and you’ll get a link to my personal web site. Fun! 🙂 🙂 🙂

Have you noticed that more and more companies are incorporating QR code (Quick Response Code) in their campaign adds lately? Weather it is on a New york’s time square or Dick’s Sporting Goods displayed a QR code during the football game or Pepsi campaign, it’s just one more way you can drive traffic using QR codes.

So what is this QR codes? A QR Code is a matrix barcode (or two-dimensional code), readable by QR scanners, mobile phones with a camera, and smartphones. (It looks like above image – which happens to contain my website URL) In simple language, they are hyperlink for digital/mobile technology. You simply take a picture of a code with your mobile phone, and you get redirected to the website page in your cell phone’s browser. QR technology provides cell phone users the ability to scan using cell phone’s camera to decode the graphic by using QR Reader (simply called a matrix-barcode scanner) on a magazine, a business card, billboard or a website. Once the QR code has been scanned and decoded, a user can access via their cell phone to the desired destination.

QR codes are so easy to use, and are so versatile that they provide instant value to individuals and companies alike. Here comes the good news. You don’t need to be a tech-savvy to start using this super cool technology. You just need following to get started:

1. Generate your own QR code
There are plenty of sites where you can generate codes in a second for FREE. Did I hear FREE? YES.

2. Install QR reader on your cell phone (if it is not installed already as some smartphones come with preinstalled reader).
Again, there is a long list you can choose from; just search online for your specific cell phone or smarphone.

There you have it. I bet you will instantly ‘fall in love’ with QR technology!

Following are interesting QR code links:
An animated QR links
QR code as an art

Did you know that the theory of evolution doesn’t just apply to mankind?
It has been over 20 years since the first release of HTML, Hyper Text Markup Language. The web is constantly evolving. HTML has gone through a series of rapid evolutionary steps—from simple text to adding images to coding in CSS styles. HTML5 is the next generation of HTML. It is a new standard for HTML, XHTML and the HTML DOM. The previous version, HTML 4.0 has been around for over a decade now. HTML5 is still a work in progress, a joint effort between W3C HTML and WHATWG. Many key players are participating in this effort including four major browser vendors: Apple, Mozilla, Opera, and Microsoft.

Everyone is talking about it—so what are the most appealing segments in HTML5? It can be broken down in five main segments. Core Page Structure, Visual Presentation, Graphical Tools, Rich Media Support, and Enhancement of JavaScript. Some elements are deleted or re-written in HTML5.

Let me start by asking simple question: Who has some experience in coding page in HTML? My guess is that all of you reading this have some experience with HTML. The good news is that as with previous evolutions, HTML 5, too, will not required you to learn and un-learn much. In fact, with HTML 5 there will be an even easier and simpler coding structure with the syntax becoming even more meaningful.

So, let’s take a look at the five segments I mentioned above:

	HTML5	Previous HTML version
Core Tag Structure
	HTML5 introduces whole new common elements such as header, navigation, articles, section, aside, footer, etc. that make it much easier to structure webpage. The role of these elements is to better describe specific parts of the document. See below new code structure and compare yourself—isn’t it amazing? <body> <header>…</header> <nav>…</nav> <article> <section> … </section> </article> <aside>…</aside> <footer>…</footer> </body> Want to glimpse at the complete list of HTML5 elements and attributes?
Graphical  Tools	Now, you can create mathematically generated images. The new format is called SVG, scalable vector graphics. SVG is an XML-based language that describes how an image should be displayed in 2D (two-dimensional). So do you want to create basic shapes such as square, circle or star? May be a smile face, you can easily create most complex drawing by using SVG. Also you can apply color, gradients, text interactivity and JavaScript to your SVG drawings. And list goes on and on…	HTML has provided support for pixel-based (raster graphics) images such as JPG, GIF, etc. format. Means, you have to include shapes as an image.
	If you are comfortable working in HTML code then you will feel comfortable working is SVG as well.
Rich Media Support	Yay!! Most exciting; central player in HTML5. The new elements—VIDEO and AUDIO allows you to easily add video and audio files to your website. Means, you don’t need to rely on Flash or other media to provide that functionality. There are two readable formats you can choose as a source file: Ogg and MPEG4. See below simple Tag you need to insert in your webpage: <video controls> <source src=’your video name.ogv’> <source src=’your video name.mp4’> </video> <audio controls> <source src=’your video name.oga’> <source src=’your video name.mp3’> </audio>	Need to rely on media such as Flash. Currently, a widely deployed plug-in to provide functionality which provides a cross-browser compatible solution.
	The challenge that you might face with using HTML5 is getting your video to play back on Apple’s Safari and Microsoft IE9. Both browsers DO NOT support Ogg. Arghh! Split standards. You need to use the other media standards, MPEG4 to make it work. To cut a long story short, there will be no distraction by the complexities of inserting video into a webpage; your focus will be on the creation of content. I’m loving it….already! Adding video and audio will be as easy as inserting an image.

With all these enhancements, you might be wondering if browsers will continue to support a  website developed in HTML4 or older version? My gut feeling is that this should not be of concern for at least a few more years because even though HTML5 does not support many older elements, it does not mean that your favorite browser will drop support of these as well. As always, you will just need to check cross-browser compatibility to see which ones are allowing your webpage to render correctly.

CSS, SVG, Video, and Audio are all great improvements to HTML5. But wait….don’t start using all these—HTML5 is not W3C recommendation yet—not all browsers are supporting it so be patient until next year!

Stay tuned for more updates…

References:

W3C’s HTML: http://www.w3.org/html/wg

Web Hypertext Application Technology Working group: http://www.whatwg.org

http://simon.html5.org/html5-elements

Hyper Text Transfer Protocol Secure (HTTPS) is the secure version of Hyper Text Transfer Protocol (HTTP). Both are system for transmitting and receiving information across the internet.

While browsing your bank account online or credit card website, have you ever observed the web URL starts with https:// instead of http://?

Web browsers such as Internet Explorer, Firefox, etc. display https:// in the address bar as well as a padlock icon in the status bar (bottom of the page) to indicate that the webpage is secure.

If you don’t see these two indications on the webpage, which means your web browser is using the ‘unsecured’ language. In other words, it is possible that someone else can see your computer conversation with that website. Say, if you are filling a form and entering all information such as credit card number, social security no, etc. in that case someone else might see that information you send to the site. In short, it is a good idea to make sure that you see these two warning signs prior providing your sensitive information.