An idea or information represented in visual form is an infographic. It may contain graphics, images, charts (pie, bar, column, etc.), graphs, Venn diagrams or familiar icons. An ideal infographic may scroll to at least two web pages in length. Recently, the use of infographics in the Internet has significantly increased. Research companies like Forrester release data as infographics. The best internet companies like Webs, Volusion use infographics either to communicate company information or to explain their products.

This sample infographic explains activities on the internet in 60 seconds.


The Secret Behind Infographics
Pictures convey more than words: Infographics is the applied engineering of the old Chinese adage ‘A picture is worth a thousand words.’ A picture can convey more than words. Our human mind is capable of absorbing more from images rather than from words.

Information is made interesting: By a mix of data and images, and attractive colors, complex information is broken down and easily conveyed in infographics. Business milestones, company revenue information are boring reading stuff unless the reader is interested. Here is a company that has used infographics and made it interesting for its readers.

Can be quickly read: One infographic is equivalent to an article of at least 1000 words. Our human brain takes less time to go through an infographic than it takes to read 1000 words. The various histograms and graphics in the infographic provides an overview of the entire information almost immediately.

Infographics Helps Businesses
Improves the company website’s SEO ranking: Back links are close friends of search engine bots. When infographics get shared on the Internet. they generate back links to the parent website. The title can also be used as a target keyword. Another method is to educate the target audience on industry trends and best practices using infographics to make clients/customers keep coming back to the website often. This can be done in the company blog.

Company activities will reach clients/customers: Unless the business is among the top players in the market, we cannot expect clients / customers to eagerly look for the developments in the company. Latest developments in the company, when communicated as Infographics will reach many.

Improvised marketing strategy: Email communication becomes more effective with infographics. This is a good method to bring in more leads. An attractive infographic can allure more business prospects than a dull one with only words.

Expertise Is Required
Just like infographics can deliver more, infographics demands more dedication and hard work for its creation. There are many automated tools available on the Internet. However, we need a designer’s touch to make the infographic a hit. Infographics can be a mess if careful attention is not given to details. A bad infographic will not only devalue the information but also spoil the reputation of the company producing it.

1. Color scheme and layouts are the backbone of any design. A designer geek alone can choose the right color combination for the content of the infographic.
2. Typography may not be important in articles but they certainly play a vital role in infographics. There must be different typography for different sub-titles and all of them need to be catchy. Too much of variety could reduce the professionalism in the infographic. Only a web expert will be able to strike a balance between variety and professionalism.
3. Right words must be used. Words used in infographics are few. Conveying information in few words is complicated. Even the title must be crisp and to the point. Unless a content specialist works with the designer, producing an effective infographic will be difficult.

Explore some of the best infographics in the web and reach out to us for customized solutions.

The evolution of HTML has been in progress for close to two decades. The first version of the language released in the early 1990′s started off with just twelve HTML tags. The quantum of development that happened to this mark up language over the last few years is unprecedented. HTML5, the latest version of the same has come out with the some of the best possibilities with the language.

Semantics

The main overhead in HTML4 is the extensive usage of <div> elements to mark the various sections of a standard web page like header, columns, footers etc. But HTML5 has flown in with the right solution for the same, with better semantics for marking these elements in a more structured way. New elements would be able to identify each section distinctively.. Elements like <header>, <footer>, <nav> etc., provide a more disciplined semantics making the lives of web developers easier.

Advanced Audio and Video Support

Advanced tags like <audio> and <video> tags are going to make the process of audio and video embedding a much smoother and faster one. Apart from audio and video support, HTML5 has provisions to view animations and other Rich Internet Applications too. This could turn out to be a real challenge for its counter parts like Adobe Flex and Microsoft Silverlight.

Offline Storage

HTML5 is on stage with a highly advanced version of Cookies through an offline storage system. HTML5 promises an offline storage of around 5 MB, much bigger than the capacity of Cookies. The exponents have named this as ‘Local Storage’ that would enable the users to continue using applications when the connection gets terminated under certain non-predictable conditions, through its offline storage of data.

Hyper Threading

One of the most interesting features of HTML5 is that different background threads can be utilized for processing. This proves to be one of the best solutions for web applications that use huge scripts for processing. Performance would also remain unaffected through this hyper threading process.

The Art of ‘Canvas’ing

HTML5 brings forth a new element by name – <canvas>. The <canvas> element holds the power to draw shapes, graphs, gradients etc which would enable to canvas drawings of any shapes in your web page. In short, HTML5 provides the feature where you can render any images or graphics dynamically with the support of javascript libraries.

Geolocation

Geolocation is yet another brand new experience that HTML5 plans to launch.In other words, one would be able to locate the Geo information of a person who browses the website through a Geolocation API support in all browsers. The integration of a high level interface of Global Positioning System (GPS) makes it possible for locating the geographical information of the user.

The fascinating features about HTML5 mentioned above are just a few among the hundreds. The list of new elements that have been launched as part of HTML5 goes endless, empowering the users beyond boundaries.

The world is all set for the revolution. Are you?

Businesses today are compelled to have active presence in popular social media sites. And when we say social media, its Facebook, Twitter and Linked in. Facebook has some 100 million users and its pretty easy to spread the word virally. Twitter is convenient for sharing news and real time events. Linkedin enhances professional identity and reputation. In addition to Facebook page, Linked in profile and Twitter updates, Ning community is also becoming mandatory for businesses.

What is Ning?

Ning is an online platform for creating social networks. More than 2.5 million networks have been created so far and there are 41 million registered users. The number of people visiting Ning sites  in a month come to around 92 million. Similar to Facebook, Twitter and Linked in, Ning also does not have a direct competitor. However Crowdvine, KickApps, CollectiveX, ONESite and few more companies offer similar services. Let us capture few of the features that Ning provides.

1. White Label – Ning allows its platform users to customize it with their own brand. There is no fixed frame or color scheme which has to be followed. The entire site can be created in the user’s interests.

2. Domain Name – There’s more than just vanity URLs in Ning. It provides options to create new  domain names and map already existing ones. Community links for most of the companies in their website are mapped to the Ning site.

3. Even More Social Experience – Ning provides a deeper social experience. Interaction with brands, celebrities, musicians go to the next level here: Personal profiles, events, forums, chats and many more.

4. Ads and Other Premium Features – Best of all, Ning platform also allows its network creators to generate money from their networks through ads. Premium features like virtual gifts also does the same.

None of the popular social networks offer all of the above features. It convinces us to conclude that Ning stands in a different dimension without aligning itself along any other already existing social networks and therefore compel businesses to be a part of it. Let us also look at a few networks created in Ning.

Ning Networks

(a) Gaither

Gaither.com is the official website of the Gaither vocal band. The band has a Ning network for its community. The community has sub-groups, micro blogging, forums, latest events and many more for their fans. The Connect section in the snapshot below shows links to various social media links from the Gaither website including Ning.

(b) Ellen Degenres show

One of the popular show in the United States, the Ellen Degeneres Show has many active members in its Ning community. The sub domain http://community.ellen.tv is being mapped to the Ning network.

The above snapshot is taken from the Ellen official website. We can see the links to Twitter, Facebook, Ning (community) along with the other main links .

(c) Techcrunch (Zorapcrunch)

Techcrunch, one of the leading reporters of web developments and happenings are also having their presence in Ning.

(d) Content Wrangler

Content Wrangler is a popular destination for communication professionals seeking information about content management. This is an initiative of Scott Abel, a content management strategist. The screen shot below shows the community created in Ning where a global network of content professionals from around the world meet and collaborate.

Similar to these communities, there are more than 2.5 million networks created so far. Celebrities,  politicians and established organizations have already made their presence. For more information on Ning, visit Ning Help.

After months of anxiety and speculation Apple has finally launched their latest creation, the iPad Tablet. Apple’s CEO, Steve Jobs, unveiled the breakthrough product in a grand meet held at San Francisco on 27th Jan 2010. Apple’s iPad is developed for people on the go to ease their online usage and other PC related tasks.The iPad is neither an iPhone nor a PC but a gadget that bridges the gap between the two. With its small size and touch screen technology, Apple’s iPad  is all set to create a new era of Tablet Computing. Although the device lacks complex functionalities when compared to a PC, it is equipped with much desired functions like web browsing, delivering media, capsuling literature, video gaming etc.
The 9.7 inch device with half an inch thickness weighs just 1.5 pounds. It features a touch screen and is available in 16, 32 or 64 gigabytes of flash memory storage.

Competitors

Analysts foresee Apple’s launch of this handy device, as a possible threat to the notebook and PC makers like HP, Dell, and Acer who have attained considerable growth in the notebook market in recent quarters.

Pricing

Aiming at a deeper market penetration, Apple has reasonably priced the Tablet at $500. Surveys project a sales estimate of approximately 3 – 4 million Tablets in the first year.

Available Models

Three basic models were introduced at the launch with WiFi capabilities. However, 3G connectivity which is expected towards March 2010 needs to be ordered separately. Price tag starts from $500 with 16GB of memory increasing to $600 and $700 for 32GB and 64GB memory. The device comes with a Dock connector to USB cable, 10W Power Adapter and documentation.

Interested to know more on iPad Tablet? Find it here: Apple.com.

With the increasing number of video formats, the complexity in identifying the best format has also increased.  Compatibility, size, quality and affordability together determine the format that best suits for any requirement in the web.

A video format used in the web should be compatible with major browsers and Operating Systems. Major browsers include Internet Explorer, Mozilla Firefox, Opera, Google Chrome and Safari. Major Operating Systems include Windows, Macintosh, and Linux. When it comes to size, the smaller, the better. And when it comes to quality, the higher, the better. The cost factor also plays an important role. I have summarized below, few recognized and used formats in the web with their pros and cons. Proper analysis of our requirement with the capability of the video format will help us to identify the best format for the requirement. These formats are developed and backed up by giants who continuously update and keep them to standards.

• WMV:

Windows Media Video (wmv) is developed and controlled by Microsoft. The video file is based on Microsoft Advanced Systems Format (ASF) container format and is compressed with Windows Media compression. The quality of the video is good and the file is also of low size. One major drawback is that the file runs only on Windows. Neither does it support Flash nor Synchronized Multimedia Integration Language (SMIL) standard.

• Quick Time:

Quick time (.mov) is developed by Apple Inc. The latest released version is 10.0. QuickTime is particularly suited for editing. It contains one or more tracks, each of which contains abstract data references for the media data. QuickTime also supports key standards for web streaming, including HTTP, RTP, and RTSP. Also, QuickTime supports every major file format for images, including JPEG, BMP, PICT, PNG, and GIF. QuickTime also features built-in support for digital video, including MiniDV, DVCPro, and DVCam camcorder formats, as well as support for AVI, AVR, MPEG-1, and OpenDML.

• Real Media:

Real media was the first streaming technology on the market. However, Real media still trails Flash when it comes to smooth playback of high-impact interactive multimedia. Web developers have begun to use the Real System G2 and SMIL to stream synchronized multimedia presentations over the Web. This in turn is promoting a wider usage of real media by the developers in the web.

• Macromedia Flash:

Flash is often referred to as the best solution to web media. However, its unfriendliness with search engines has always left it behind. Flash generates high-impact web multimedia with short sound effects and loops. Formerly called as Future Splash, the Flash company was later acquired by Macromedia in 1997. With Flash, users can also draw their own animations or import other vector-based images.

• MPEG-4:

Developed in 1998, MPEG-4 was specially designed to play streaming media file with high quality in the web. MPEG stands for Moving Picture Experts Group and is managed by ISO (International Organization for Standardization). MPEG-4 is a proprietary technology; it requires licensing in order to be used. AT&T claims to have the patent rights for MPEG. But Apple and a number of other video content providers are continuously working on MPEG along with their technologies.

Stay tuned for my next blog in which, I plan to explain the different methods that are available to deliver these formats on the web.

WhatWG (Web Hypertext Application Technology Working Group) was formed in 2004 with focus on HTML and APIs for web applications.  Specification document for HTML 5.0 is in progress.  The document gets updated on a regular basis.  Check out the document at http://dev.w3.org/html5/spec/Overview.html.  Getting our head into the document is tedious and cannot be made to fit into one page.  So here we will glance over a few new elements to get a picture of how HTML 5.0 is going to be.

Div Element

Header, footer, nav, aside, article and section are new elements that will replace div.  The complexities of div have paved way for these elements.  Instead of having so many div tags inside the code, HTML 5 gives the capability to use separate element for each purpose.  During modifications, identifying a particular portion thus becomes easy. These two snapshots will give an idea of how the simplification is going to work.

Audio Video Elements

Recently, audio and video have mass migrated to Internet.  HTML 5 provides the ability to treat audio and video as web pages without the need for plug-ins to play them. That is, audio and video will be natively supported by the HTML 5 compliant browsers.  The debate on whether to use a standard format or to support all formats is still on.  These elements are expected to contain textual content for every video, audio brought in the web page.  Such a provision will enable information to be conveyed through non-supportive browsers.  Internet users with debilities will also have the accessibility to web content.  Here is a lookup.

<audio src=”Martinluther.mp3″>

<p>I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>

…</audio>

Few More Elements

Time element will help browsers,  search engines and web crawlers identify time from web pages.  Images are brought through the figure element.  Captions of the image are always associated with the image.  This will allow the user agents to understand more about the image.  Dialog is a another new element and it comes up with 2 sub tags: dt, dd.  dt will indicate the speaker and dd will indicate the dialog.  Here is an example:

<dialog>

<dt>Fay</dt>

<dd>Jerry, could you show me how to hold the racket?</dd>

<dt>Jerry</dt>

<dd>Sure Fay, it’s just like shaking hands. Hold your hand out as though you were going to shake my hand… </dd>

<dt>Fay</dt>

<dd>Do you mean like this?</dd>

<dt>Jerry</dt>

<dd>Right, like that. Then put the racket in your hand, like this. </dd>

</dialog>

There is more in HTML 5.  Seeing by the way developers are contributing to its specification, we can sure expect fascinating behaviors in web pages soon. Most importantly, you can contribute too. Here’s how:

Subscribe to the WhatWG mailing list: http://www.whatwg.org/mailing-list

Participate in discussions: http://forums.whatwg.org/

Comment and post blogs: http://blog.whatwg.org/

Links to articles on HTML 5:

http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html

http://www.webmonkey.com/blog/How_HTML_5_Is_Already_Changing_the_Web

Going through the number of times WCAG is mentioned in Twitter and blogs, I find that it has not got the publicity it deserves. Most developers tend to think of accessibility as a luxury they cannot afford. Consequently it finds its place way down in their priority list. However, as we shall see, making a site accessible will not cost you a lot. And accessibility is not only aimed at addressing the needs of disabled, but people who use text browsers, low resolution monitors etc. Thus if your site is designed with accessibility in mind, you will surely see more traffic to your site.

World Wide Web Consortium (W3C) is responsible for developing Web Content Accessibility Guidelines (WCAG) documents. The first version, WCAG 1.0, was published in May 1999. The latest WCAG 2.0 was released on 11^th December 2008. The primary intent to publish these documents was to make web content easily accessible to everyone irrespective of any disabilities. WCAG 2.0 is designed in such a way that it is simpler and easier to understand for the web developer community. The document is built on four foundational principles. Then, there are few guidelines provided under each principle. Each guideline is challenged by different testable success criteria. Satisfaction of all these criteria will make the web site conform to WCAG. Let us go through the four principles in brief.

Perceivable

The first principle implies that any content that is displayed on the website must be perceivable. The dictionary meaning of the word perceivable means ‘To achieve understanding of’, ‘To become aware of directly through any of the senses, especially sight or hearing’. In our context, it means that anyone who accesses the web for content should be able to apprehend the information that is presented.

There are four guidelines furnished to illustrate this principle. The first two coerce to provide text alternatives for non-text content and time-based media. This would enable the user to enlarge or render in whatever tactile form as needed. The third guideline focuses on the structure and presentation of the content. A simple design that complies to the standards will reduce the complexities when there is a requirement to extract content and present to debile users. Sometimes distinguishing foreground information from background can become difficult. The fourth guideline helps avoid this conflict and focuses on making information distinguishable. Success criteria are determined on color, contrast, background audio, text images and many more.

Operable

The second principle deals with the operability of the user interface components. Users can come across situations where they are not able to interact with the content due to issues in links, user controls and other navigation.

The first guideline under this principle recommends making all the functionality of the content available from a keyboard. This does not outweigh the use of mouse and other interfaces. On the contrary, it means that complete dependence on these devices must be forgone. The guideline also cautions of keyboard traps and advices methods to keep the user away from them. The other guidelines focus on ensuring that the users will be able to complete the tasks required by the content with their own individual response times. For every time limit automatically set by the content, it requires the user to have options to turn it off, adjust and also extend the limit. They also caution the design about seizures mainly occurring due to excessive use of Flash. The last guideline recommends helping the users in their navigation to find content. There are 10 success criteria listed to check whether a user is properly guided.

Understandable

Understandability is the next issue the document addresses. The principle mainly targets the people in the lower part of the intellectual group. It compels the developer to make the content easily available in predictable ways and also help the user avoid and correct mistakes.

The first guideline stresses on making the content readable and understandable. Success criteria are set on languages, abbreviations and pronunciations. It also speaks about restricting unusual words or phrases including idioms and jargon. The other guidelines show light on making the pages predictable and providing assistance to the user in mistake-prone sections. Using instructional labels and help pages can assist the user in different areas.  Detecting errors and reporting immediately, as and when the user is inputting information is also a better method of assistance. These together form the success criteria for this principle.

Robust

The last principle is the most important of all the four. It checks the robustness of the content. Accessibility by user agents is checked here. There is only one guideline and it speaks about the compatibility of the content with the current and future technologies. Avoiding deprecated features of W3C technologies makes the site more compatible. Success criteria are designed for custom user interfaces to check compatibility.

Adhere to the guidelines suggested in WCAG 2.0 will bring in more traffic. Therefore it is essential from the developers’ point of view to know these standards and make them a part of our work.

Link for further study:
http://www.w3.org/TR/WCAG20/