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.

Internet has changed the way we find and compare products and services. Both – Search Engine Optimization (SEO) and Pay Per Click (PPC) have been getting a lot of attention and are making there way into many business marketing plans. Below graphic shows the difference between both.

So, which should you choose to spend your budget to get the best result? The comparison chart will help you to make your decisions.

Conclusion, no matter which option you choose, if done correctly both are sure to improve your business in general. In my opinion, a strategic combination of both SEO and PPC, using short term advantage as well as long term results can be beneficial. SEO and PPC are really two pieces of the same puzzle and should be used together.

It’s an understatement to say that AJAX is hot right now. There’s a lot of hype; no one can argue about that. After all, let’s face it that AJAX is neither perfect nor ‘rocket science’ but the fact remains that leading Fortune 500 enterprises are using it.

To someit is a new tool and to some it is merely a client-side scripting language used for implementing an application but regardless of the many views there is no doubt that AJAX has forever changed the way Web applications are written. One thing that has made AJAX so popular is that it can post or get data from the server without reloading your page, which explains why almost every Web 2.0 site has some AJAX tucked away in its foundation.

We all know and love these sites, which include Google Maps, Gmail, Reader, and Yahoo’s Flickr. So should you be using AJAX in your next cool site? It all depends on what you are trying to achieve. Regardless of which way you decide to go, make sure you understand all be benefits and drawbacks prior implementing in your application.

Over the weekend I was checking something on my personal website-myCreativity.com-and realized that one of the web pages was not appearing correctly. A link on the page was broken and the had graphic shifted to the side. The result, my web page’s look-&-feel was unpleasant. That’s when I realized that how essential it becomes to test your website on an ongoing basis.

A commonly accepted good practice for website design is to test your website on a variety of browsers such as Internet Explorer, Firefox, etc., and on a variety of platforms such as Windows, Mac OS, Linux, etc. This testing should happen not only when you initially deploy all files to the web server but also every so often to ensure that it still works as originally intended.

It is a good idea to always make sure that all pages, links, etc. are working correct. Most likely you can test yourself and or you could ask your friends or family to visit your website and ask them to provide you a feedback. You don’t want your visitors to go away just because she/he uses different browser or different platform, correct?

Plan your website from the start. Ultimately, frequent testing will help you achieve maximum benefit by reaching the widest audience that you’ve strived so hard to obtain!

Thank you for visiting my little corner of the World Wide Web!

I created this blog to share my thoughts, ideas and opinions on all innovative design topics.

Innovative design is a vision-oriented approach. My thoughts are: keep it SIMPLE. The greatest of designs, product or web site or whatever, is the design that is simple, looks like what it’s supposed to do, and yet is attractive as well. It’s not easy to go the extra step and make your product appealing to the general eye as well as correctly functional and obvious, and do that successfully. That is truly the ultimate goal of design: the full combination of functionality, usability and aesthetics.

Enjoy the blog! 🙂