Actually, consumers may have passed beyond the infatuation stage into a full blown marriage to their mobile devices.

Consider the recently published information from Gartner Inc. (a respected technology researcher) regarding the growth of mobile advertising. Gartner's research suggests sector revenue of $11.4 billion in 2013. (The company has projected 400% mobile advertising growth from between 2011 and 2016.)

The faster-than-expected growth is a result of the proliferation of smartphones and tablets combined with the usage behavior on the devices from consumers. Specifically, users are spending an expanded amount of time with the devices at the expense, it appears, of print advertising vehicles such as newspapers. The thinking remains that the mobile market will become easier to target which is driving the mobile advertising spend.

As noted below, the mobile advertising revenue projections (in millions of dollars) are being led by the Asia/Pacific and Japan geographical sector:

Impacts on Small and Medium Size Businesses (SMBs)

This increase reflects the advertising spends of small to medium size Australian businesses. For example, a Borrell and Pontiflex survey of more and 1,300 US and Australian SMBs found that 45% of them indicated their mobile ad spend would be maintained with 27% stating it would be increased in 2013.

A total of 48% suggested that they were either very likely or somewhat likely to incorporate mobile elements in their advertising strategy over the next year. SMBs also stated a strong preference for pay- for-signup (26%) and pay-for-clicks (18%) pricing. (Note: A significant 52% of SMBs state they didn't know which pricing models they prefer indicating that confusion still exists about mobile advertising models).

What's not confusing is that consumers are increasingly going to their mobile devices to make purchasing decisions meaning that a mobile advertising strategy is a must for any enterprise to continue to thrive.

Giving on the Go

It appears that non-profits, especially, are taking advantage of mobile advertising. More ways for consumers to give can be nothing but good for these organizations and it's beginning to show in the stats. For example, in its annual 2012 State of the Nonprofit Industry Report, Blackbaud (a software and fundraising firm) reported that more than 40% of survey respondents across nine countries planned to optimize their websites for mobile.

Half of the US and Australian organisations surveyed said they planned to consider three mobile strategies:

• Optimizing websites for mobile
• Enabling text giving
• Allowing access to donor database information

What are your advertising plans to take advantage of an upwardly mobile world?

In our previous two posts (Part 1 and Part 2) we introduced you to HTML5 and its capabilities. In this post and subsequent ones, we'll look into some examples of useful and good HTML5 applications and websites. You'll be surprised at what we found. Here are our picks from the cream of the crop.

The Wilderness Downtown

This website has to be visited to be seen and experienced. So surreal is this website that we can also call it the best HTML5 site we have seen so far. Please! Please! Do visit this site. Move your mouse cursor across the image and you will be immensely surprised you did. Enter an address in the address field, click Search and wait for the magic to happen. Proudly mentioned on the home page that this is done in HTML5, this is the work of people behind Google Chrome and so this website should be opened in your Google Chrome browser.

Digital Hands

There is a beautiful use of HTML5, Javascript, CSS and digital photography on this very creative site. Just point your mouse on the image and move to feel the truly amazing 3D like depth and movement on the image. Digitalhands are a company based out of Turkey.

Web Typography for the Lonely

Another WOW website that demonstrates how creative you can get with HTML5, Javascript, and SVG (Scalar vector graphics). Each template is showcased in the marquee and moving your mouse on each image (briefly explained using what technologies were involved for each one) will delight your visual senses in what each image can do, particularly the images shown above for the SADNESS template. One of the templates, COOLINATE was purely a HTML5 Canvas based one. At the bottom of the page are the various templates. Click a template to view it in another page and obtain details on how each of these templates was built.

Universeries

When we took a look at this site we did just one thing, drop our jaws wide! The beautiful site is a work of art. Using the data visualization capabilities of HTML5 the makers of this site have created a reference site about television producers and shows that is not only visually so appealing but also a comprehensive online library of shows, actors and genres grouped and classified very well. We couldn't believe how static information can be presented in such an interesting manner. Honestly, if you love TV and would like to find out more about your favorite shows there is no more entertaining way to do so online. Not to forget the beautiful background music. It adds to the surreal beauty of this site.

Toyota Prius Projects

This site demonstrates what an immersive experience a website can deliver, all possible using HTML5. The site, the Toyota Prius project, apart from celebrating the first 10 years that the Prius has been available also allows users to envision what is coming in the next 10 years. The site interactively demonstrates by highlighting changes in the world made over the 10 year time span of the hybrid car.

Golden State of Mino

This site is all about events and happenings in California. Just by scrolling the wheel of your mouse visual effects come into play to display content using the latest in HTML5 technology. The site is purely visual content based and has little textual or printed content. View source reveals http://html5shim.googlecode.com/svn/trunk/html5.js, the HTML5 enabling Javascript, being used. The simplified HTML5 DOCTYPE tag is seen here too.

Mobigeni

This is the website of the Dutch company that builds iPhone, iPad and Web apps with emphasis on usability, design and visual appeal. For the website mobigeni is using a HTML5 template populated via JQuery.

Rome

This is also another project from the Google Chrome team and therefore needs to be viewed in Google Chrome for the full experience. A beautiful site, where users can interact with the video that is playing and even create their own videos. For the first time you will get a feeling of not only being inside the video but also manipulating the video. Extensive use of WebGL has been made. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. In other words, it enables your browser to show some really beautiful visuals all without expensive and other Software.

Android Apps Developer

This company based out of India creates apps for the Android platform. Extensive use of JQuery, Javascript and HTML5 has been made to give the website an artistic and futuristic look showcasing the company's abilities in these fields of technology.

Agent 8 Ball

We not only couldn't help admiring this site but also couldn't help playing this addictive game of billiards, all just using the buttons of your mouse. You position, move and click and you are off with the game. A look into the source code reveals ample usage of Ajax, Javascript, JQuery and CSS not forgetting simplified DOCTYPE of HTMLS5.

From Crayons to Concept

When you are learning design and art what better way to showcase your newly learnt skills than create one such a website. The beautiful website literally replaces an art gallery. Designs and artwork are grouped well and can be easily accessed via filters, all neatly and graphically presented without having to enter any data. View source reveals use of JQuery and Javascript and we think this site has already made its transition into HTML5 pretty well.

After our review of great examples of HTML5 websites in Part 3 (and introducing HTML5 in Part 1 and Part 2) we'll now review some great examples of HTML5 apps.

SCRIBD

Your favorite online book reading site just got better. No more slow pages to read, no more additional downloads of the latest version of Flash or other plugins and add-ons to download as the entire site has been converted using HTML5. Scribd serves millions of free books online and books for a subscription to read online (yes much before Kindle appeared on the scene). However one long complaint was the slow delivery of pages and even more slower was skipping to pages and searching for content. All that has changed now and Scribd explains why they have moved to HTML5. Now you don't even need Flash to view the books (a boon for iPads and iPhones).

Unlike before where you actually needed a reader in your browser to read the pages of a book, this time the web page itself delivers pages without any additional software and use the browser's native functions to zoom in/out, search for content, scroll pages and select text on a page of a book. Another reason why Flash was previously used was due the various fonts it could support. Fonts not supported were converted to images. Heavy images were a problem too. A webpage using HTML5 now need not have any such worries as all those fonts supported by Flash are not supported in HTML5. The same goes for image-heavy pages, and all these universally delivered across mobiles, laptops and desktops.

Sketchpad

Worried that you don't have drawing or image-creator software on your computer? Just visit this site and you're set. With easy to use controls, a plethora of options for color, style, font thickness and more you will realize how addictive this application can get, almost ditching the free MS Paint on your computer for good. Heavy use of HTML5's canvas functionality is evident here, as well as offline storage (a previous feature of HTML5 that has now been moved out of the specification into its own).

Flickr Browser

A beautiful web application that searches and displays flickr photographs, all done using HTML5 technologies.

Hootsuite

If you manage social media you have undoubtedly heard of Hootsuite (or use it yourself). Available for both free and paid versions this is a classic example of how HTML5 has come to stay as a future-ready component of websites and webpages today.

CSS 3.0 Maker

What a handy site for developers and designers. If you want to generate CSS3 code and want test it then look no further than this cool site. The online application created using HTML5 even tells you how compatible the generated code will be on various browsers.

Twimbow

Twimbow is a web application that helps any social media user to engage their network of friends more effectively, by organizing and enriching their conversations online through the extensive use of colors. Colors make it easier for people to interact with their friends, filter groups of users, catch important tweets among the others and distinguish different type of messages. Twinbow uses HTML5, JQuery, CSS3, PHP and the node.js Javascript file for managing live connections. A blackberry version is in the offering.

Citicles

Our last example is an experimental site using HTML5. Citicles collects basic information about a city and displays it in a simple circle design. Each circle represents one of the city's population, temperature, time, elevation, latitude and longitude as displayed in the legend. Nice!

In our second post about HTML5, we'll cover how HTML 5 HTML5 is used for mobile application development and how it compares in terms of features and capability with native applications for mobile devices such as iOS apps.

HTML 5 comes with handy tags and attributes that will help one design webpages for the mobile market with ease and comfort. Following are some common ones for mobile use...

Typically when you view a website designed for a desktop computer on a mobile phone, the mobile phone's screen the site would be zoomed out and it would appear very small and one would have to zoom in to view the details. HTML5 conveniently offers the viewport attribute that can conveniently size the screen for you automatically for the mobile device.

A typical usage would be as follows:

In the above example the webpage is automatically adjusted to the size of the device's screen. The user-scalable = no option ensures that zooming is disabled. This helps if the user were to accidentally zoom out and distort the User Interface. However it is can sometimes be advised against using this zoom disabling feature as the zoom function is a very useful one.

HTML5 provides better caching facilities to help viewers view websites where Internet connections are poor or where connections have dropped off. This is made possible using the manifest and CACHE MANIFEST attributes. This is very useful in mobile environments.

Typical syntax:

As an example, the files that should be cached starting with the CACHE MANIFEST are:

And these are the files that will be available offline. The trick is to tell the server not to cache the cache manifest so that the most recent copy is downloaded and to use JQuery templates to build pages dynamically. For this the JQuery template plugin is also required. These may tend to look technical but system administrators and techies should be able to understand and fix these easily. Basically one defines a template, then the collection is defined and finally tell JQuery to populate the page with the template.

The other notable feature is enhancing client-side storage and the associated plugin for enabling this feature is the JQuery-Offline plugin. These are just few of the most important features that are good for development of webpages for the mobile apps, referring to apps for the iOS and the Android.

Another important functionality of HTML5 (not exactly another functionality but a separate specification) is the geolocation API using which one can develop apps that provide details about addresses, maps, latitude, longitude etc.,

As mentioned in the previous section the other features of HTML5 very suited for app development on the iOS and the Android platforms are the Canvas drawing, audio and video streaming support, advanced forms support, web storage, CSS3 and 2D animation.

Numerable apps are being created using HTML5 for the iOS and Android. Some of the best iOS apps include the following:

• CANVAS – A simple drawing board that automatically adjusts to the size of one's drawing. It is great to jot down an idea, make quick sketches and can be saved as images too.
• Geo Meter – Provides information about latitude, longitude, speed, altitude etc.,
• Google Voice – Known as the app to have disrupted the Google-Apple friendship this is a must have app on both the iOS and Google with loads of features used in Telephony.
• Google Latitude – Locate friends on a map and how far they are from one another, publish one's location or set up alerts, integrate with Google Talk and more.
• OpenAppMarket - A marketplace for mobile HTML5 web apps. The service lets a user subscribe to free and paid HTML5 web apps. Point one's mobile browser to OpenAppMkt.com and add it to the home screen to start browsing & using mobile web apps.
• Checklist – An easy to use HTML5 web app for creating quick to dos or shopping lists, keeps a running total of all items and tells how many are remaining as one checks them off one by one, can also email lists of remaining items to others
• YouTube – iOS and Android version of the popular video sharing site.
• Color Mail – create great e-mail templates for the iOS mail app
• ParkingAssistant – Displaying all the vacant parking slots to park vehicles
• PocketMarket – Keep track of all the prices of the latest commodities,

SAP, the ERP giant has also announced HTML5 versions of its SAP store for iPads. As of this writing more and more iOS apps are being created using HTML5.

Stay tuned for part 3 of this series where we cover some great examples of websites and applications that use HTML5 right now.

Alright - here goes another series of blog posts - this time on HTML 5. We're going to try to explain it in plain english but sometimes we just have to veer off into geek-land with more in depth explanations that you - if you're not code-inclined - can pass off to your resident geek (or ask us to explain further!)

First up - a bit 'o background: HTML5 is a markup language for structuring and presenting content for the big triple W. HTML is basically a core technology of the Internet beginning with release version 2.0 and currently in version 4.01. HTML5 is the fifth revision of the HTML standard with the oldest version created in 1990 and standardized as HTML4 as of 1997. HTML5 is the still under development and will also replace XHTML1 and DOM Level 2 HTML (two more geeky standards). In this post we'll look at what's new in HTML5 and the pros and cons of using HTML5 to create websites and webpages.

Why do we need HTML5? Why not XHTML 2.0?

First of all let us understand that HTML5 is not a complete re-invention of the wheel replacing HTML4 (though the specifications ran into 900 pages, twice that of HTML4) but that it attempts to address several inadequacies of HTML4.

So the question is why not move to the next version of XHTML instead of the next version of HTML. The answer to that lies in the beautiful backward compatibility of HTML5 with HTML 4.0 and previous versions - which is not the case with XHTML.

Also earlier specifications i.e. those written for HTML4 and earlier versions were vague about badly written code. Error handling was not given proper priority and previous specifications left error handling to user agents (the browser you use). XHTML 2.0 tried to address this by using a draconian error handling method. The result was devastating. XHTML would stop rendering a page as soon as an error was detected. So realistically not a good solution!

HTML5 on the other hand has detailed algorithms to parse valid syntax (i.e. the structure of a piece of code that tells your website how to run) and how errors should be handled and become a more capable, mobile and web authoring tool.

So what's new in HTML5?

Support for the latest multimedia – The new tags help play video and audio without resorting to third party players or flash. Why is this good? Because the more third party plugins in a website the more stuff you have to update seperate to your core website and the more testing needs to be done (= $$$).

New semantical elements (i.e. some code that explains better to the search engines what part of the webpage actually does) and attributes, such as

• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• timelike

These tags gives page better structure and meaning, and these are particularly helpful for blogs in particular (as well as other apps).

Built-in api's to assist in building applications ("API" stands for 'Application Programming Interface' which, to put rather simply, is a method of allowing connection with applications for the purpose of extending their capability to your specific requirements).

Local storage to help advanced browsers remember what we type even after the browser is closed (although for developers, note that this is now separate from the HTML5 specifications).

The canvas tag to actually draw on a canvas, using Javscript. Plain english: a picture that can be updated dynamically.

Some other new notable features include:

• A simplified DOCTYPE tag
• The figure tag which when combined with the figurecaption tag semantically associates captions with their image counterparts
• No need of using the type attribute while using Link and Script
• No need to wrap quotations within quotes
• Usage of the contenteditable attribute that lets a user edit the contents of an element
• hgroup attribute to group headings together
• required attribute that validates fields with an input that is mandatory
• Option to preload videos and display controls, sliders etc.,

Currently a lot of Javascript and third party plug-ins are being used by browsers for increased functionality (i.e. make them look ultra modern and give cool interactivity). HTML5 tries to address this by bringing much of this functionality to the browser and thereby reducing the need for third party plugins.

OK - so what are the benefits?

The biggest benefit of HTML5 is its backward compatibility with older HTML systems, the advantage of a now-and-future-ready code for websites and the ability to do away with a lot of third party plugins and add-ons. Many of these add-ons and plugins need to be constantly monitored for compatibility over the years requiring more extensive testing and security patching than a 'native' solution (like those found in HTML5). HTML5 also increases the interactions between Javascript and the browser.

The cons: HTML5 is only classed as "in development" so not all browsers are using HTML5 in its entirety (in fact many older browsers won't support most of its new features). For instance all browsers do not support the various audio formats and using the audio tag will only throw up a red flag if one were to use incompatible audio formats. So acceptability and adaptability are the major noticeable cons so this needs to be taken into consideration when planning a new website based on HTML5 - i.e. who do you want to support?

Stay tuned for the next post where we discuss HTML5 for mobile development.