HTML5 Audio and Video   5 comments

Audio and Video

Over the past decade, video on the web has exploded. As bandwidth has increased, and more people have access to high speed internet connections the likes of YouTube and Vimeo have gripped the imagination of web users. Before HTML5, the most common method for including video on a webpage was to render it using Adobe Flash. YouTube and Vimeo continue to use this approach by default, but both have started migrating to a more accessible and standards friendly HTML5 version <video> tag. The HTML5 <video> tag, <audio> tag are fast becoming the method for presenting rich media content in a way that is compatible  with all devices,  including smartphones.

More recently, many vendors including Apple dropped support for Flash from their mobile devices. The HTML5 specification has long proposed native video and audio in the browser, as part of its aim to reduce the amount of code and work required to deploy common media types to the web. As with other HTML5 enhancements, direct embedding offers numerous accessibility benefits, and search engine indexing improvements over Flash.

The usage is simple: use a <video> tag to embed video,  and an <audio> tag to embed audio, and nest within the tag links to the different formats in which you have encoded your media.  There are two competing standards H.264 and WebM and many more for audio.

In order to use HTML5 to render video, you need to encode your video and audio into multiple formats and link to each format within the <audio> and <video> tags ensure every HTML5 capable browser will be able to render your media. For older browsers that do not support HTML5, it is also safe to use H.264 encoded video only and provide Flash as a fall back for those who don’t support H.264 files.

Both new tags allow for fallback content, which makes it a simple process to upgrade your existing Flash embed code to make use of HTML5 without excluding older browsers and no direct need for browser sniffing scripts.

Geolocation

The growing market for location-aware applications, where content is specifically oriented towards both the user and their current position. These apps take advantage of a hardware enhancement common to most smartphones running software from Apple, Google and Microsoft.  HTML5 offers us the ability to query the user’s location and tailor our web content accordingly.

The geolocation element of HTML5 is made available through an API, accessible with Javascript. The location isn’t dependant  upon the device accessing the page having a GPS chip, so any HTML5 capable browser with support for the geolocation API will attempt to locate the visitor using available means Wi-Fi networks, Bluetooth, RFID etc. The user has to explicitly choose to share their location through the API before any results are returned to the browser.

Current smartphones and tablets devices are typically running HTML5 engineered browsers, so are the most common devices able to use this functionality. You can request the user’s location with a few simple lines of Javascript code. The data is only useful if you do something with it like, a customised map that shows the location of nearest public convenience or a set of driving instructions to the office locations.

Translating the user’s location into something meaningful is made easier with the likes of OpenLayers, OpenStreetMap, Bing Maps or Google Maps, and each of these offers an API allowing you to pass in a location expressed in latitude and longitude.

Video in Email   5 comments

How important is video in digital marketing? Has including video in email become a standard practice?

Brand sites and social media sites are the most popular channels for distributing video content, but just over half of those surveyed were actually using video content within their email campaigns.

Video is a powerful way to move prospective buyers through the conversion funnel. Video within email has a positive impact on campaign performance and email generate a higher click-through rate. Now a  whole new crop of email service providers and technology vendors now offer solutions that give marketers the ability to provide users with a richer experience within the inbox.

To make the most of video within email, marketers must understand the value proposition brought by open standards. Since HTML5 , is built into most modern Web browsers as well as most modern mobile devices, many mail clients (e.g. Hotmail) are actually now capable of displaying video directly in the body of the email when users view that email in an HTML5 compliant Web browser (e.g. IE9+, Chrome3 and Firefox3.5+).

To include video in email, it is necessary to use the HTML5 video tag. While the rate at which your own recipient list will be able to view and play video directly within email will vary,  it is imperative that your email service provider also offers the ability to “fall back” and provide either an animated .GIF/.PNG or a static image to the recipient, depending on the mail client in use.

Solutions from email service providers should be sophisticated enough to automatically know where videos work and provide fall-back support in real time as the message is opened. For example, while an email  with video won’t play in Gmail, it does support animated .GIFs ; whereas in Outlook 2007 or 2010, neither video or animated .GIFs will work, so you need a static image fall-back.

Many best practices remain that should be employed to ensure that video within email carries value for the campaign. Sending videos relevant to your audience should be given, as would indicating the contents of the email- in this case , that there is in fact a video.

Supporting copy should be included, along with some information about what will happen when the video is clicked.

HTML5 Semantics, Structure and Forms   5 comments

The new semantic tags and structure that form part of HTML5  specification are the biggest new features that’s fully ready to be used regardless of your visitor’s browser. The semantics are important for better search engine optimization, more accessible content, easier to understand structure and improved maintainability.

Semantics is the study of language meaning. In HTML the  language meaning relates to the tags we use to mark-up our content. the <p> tag means that the marked-up content is a paragraph.

HTML has a limited number of tags. As designers we tend to use <div> to mark-up navigation menus,  sidebar, page header and so on. So in HTML5, rather than create a header using the code <div id=”header”></div>, you can now use the semantic <header> tag.  Similarly, tags have been introduced for <footer>, <aside>, <article>, <section> and <nav>.

From a  search engine optimization point of view, having universal tags that describe content is a big plus; using these tags helps search spiders to determine the most important content on the page and index accordingly. Using a semantic approach to you code also helps with screen-readers, allowing disabled visitors to get to your content more easily.

HTML5  forms

One of the challenges associated with designing web forms is helping the use to complete the form correctly. Dates have to be checked to ensure they are in the correct format, email addresses need to be validated and so on. Each time a form is deployed , therefore, we are compelled to use client or server-side validation , writing own routines to provide date picker, validate input etc.

HTML5 solves these problems with the introduction of new input types, browser- native user controls and input validation.  The new options use the same core tag that you are familiar with, <input>, but add content specific features. Examples include the email input, number, tel, date and url. Crucially, because <input> remains the primary tag, older browsers will simply ignore the new type declarations and fall back to type=”text”, allowing these enhancements to degrade gracefully.

The syntax for new input options is the same. Rather than use the code <input type=”text” name=”email”> you can now use <input type=”email” name=”email”>. In addition, there are some new attributes and CSS pseudo classes that allow you to make the most of native browser controls and validation. The required attribute will tell an HTNL5 ready browser to validate and require a field, while the CSS invalid pseudo class allows styling to be used to provide visual feedback to the user without the need for any external scripting at all. Elsewhere, the placeholder attribute allows you to specify some example content that demonstrates the type of input you’re expecting from the user. This will typically render as light grey text inside the form field which disappears once the field gains focus on the page.

Older browsers will simply fall back to treating each of the new types as standard text field, and will totally ignore any attributes they do not recognize.  For the time being you will need to provide your own validation.

Twitter Microblogging for Business   6 comments

Social media skills are increasingly important for business. Twitter is an ideal resource for companies, celebrities and anyone who feels a need, to build an online presence and engage with customers or fans.

Being able to provide instant feedback on products or direct complaints to a listening ear is an invaluable service. Simply registering with Twitter isn’t enough. You also need to properly manage your presence, and ensure that you are responding to any tweets directed to your company.

(A) It is possible to see what other people are tweeting without becoming a member. Twitter is free to join. Register at Twitter.com. Choose your Twitter account name carefully – you want customers to be able to find you.

(B) Publicise your Twitter account to attract more followers. Key areas include your website, blog and email signature, but you should also add your Twitter address to your company letterhead, business cards, advertising and any other marketing materials you may produce.

(C) Make the most of your Twitter Feed. Provided that majority of tweets are relevant, consider adding a feed to your blog or home page. If you use WordPress, you can drag a Twitter widget into your blog.

(D) Link your company’s feed using the @ tag. You can also use the @ tag to grab the attention of particular Twitter users.

(E) Squeeze as much information as possible into your tweets. Although URLs will appear shortened, the longer version still uses upto 20  characters of a tweets 140 character limit. A URL shortening service like bit.ly will leave you more characters for your tweet.

(F) Use generic terms that other users may be searching for.

(G) If your company is showing off its wares at an event , use hashtags to attract people who are interested in or visiting that event. A hashtag is a generic search term prefaced with a ‘#’ symbol. Clicking a hashtag within a tweet will call up all tweets that contain it.

(H) Crosslink your website and Twitter feed. Regularly mention  your blog or website, as well as any products of particular interest. However, your followers are likely to drop you if they think you are only interested in marketing.

(I) Tweet regularly. If you want to keep hold of your followers and hopefully attract new ones, you must maintain a strong presence.

(J) Schedule your tweets. Rather than uploading a number of tweets at once, spreading them out will help your company stay at the top of your followers’ feeds for longer.

(K) Engage with your followers. Respond to your followers tweets regularly. If someone complains about your service or products, or asks for help, a response is essential.

Save Streaming Videos and Audio   2 comments

You can save a lot of time and bandwidth by downloading and storing your favourite streaming videos which you would like to watch repeatedly. You can use various utilities and websites to snag your own copy of videos or audio. Show you how to convert flash videos for iPhone, iPads and other devices.

Online videos are unreliable: Most popular video sharing sites like YouTube, Dailymotion, Metacafe and Vevo
you need an internet connection to view their streaming videos. You will need a reliable broadband connection with speeds of at least 512 kbps to make these sites usable. Even if you have an ultra-fast connection, there is no guarantee your favourite  videos will always be available online. Videos may be removed due to takedown notices, URLs may change, or the poster might decide to stop sharing  the video.

Benefits of Offline Videos: If you can download streaming videos, you’ll be able to view them even if you have no internet connection. You can also “pre-download” important videos if you are planning to work or vacation in locations where internet access is unreliable or very expensive. And of course, if the original video should disappear from video sharing sites, you would still have your own copy safely stored in your hard drive. If you are planning to use a video from the internet for a demo or presentation, it would be better to have your own copy stored on your computer instead of relying on an internet connection.

 Easy YouTube Downloader: Firefox users who mainly go to YouTube for your videos, then the aptly named Easy YouTube Downloader (http://tinyurl.com/ezyoutubedl) might be all you need. After you install this add-on, you will see a direct download button within YouTube pages. Click on it, and you will get a selection of video and audio formats  for that particular clip which you can download.

Chrome YouTube Downloader: If you use Google’s Chrome, try the Chrome YouTube Downloader (http://tinyurl.com/chromeyoutubedl) extension which works similarly. After you install this extension, you will see a direct download button within YouTube pages. Click on it, and you will get a selection of video and audio formats  for that particular clip which you can download.

Video Download Helper:  The Video Download Helper (http://tinyurl.com/45w8438) is aFirefox add-on which allows you to save videos from most of the other popular video sites, in addition to YouTube. When you install Video Download Helper, Firefox will restart and you will be taken to an “installation successful” webpage. All you will see is a in your browser is a greyed-out button with three circles in it, near the navigational toolbar. Once you surf  to a webpage with a  video, the button changes colour and animates, and you will see a small arrow next to it. Click on the arrow, and you will see the filename for the video. Click on that, and you will see a menu with various options. Click on download and save the video to a location.

Clip Converter: is a free online media download and conversion website allows you to save web videos. You do not need to install add-ons or extensions, and you can use any web browser. You will first nedd to copy the URL of the webpage which contains the video. Go to your browser’s address bar, click on the URL, press Ctrl A (select all) and Ctrl C to copy. Now surf to clipconverter.cc, and under Media URL to Record, paste the URL (Ctrl V). Then click on the download button under Conversion format. Now click the continue button. You should now see the conversion window. When the process is finished, you will see another download button which you can click on. Save the file to a location.

Playing Downloaded Videos: Many online videos these days use MP4 file format. The latest versions of  Windows Media Player should be able to handle this format. WMP may try to update itself by downloading a codec from the Net. If that fails, try installing the codecs manually by downloading the Codec Installation Package from Microsoft (http://tinyurl.com/msoftcodec). If you find that you have downloaded Flash video (.flv) files and can’t play them, get a copy of the KMPlayer (kmplayer.en.softonic.com) or VLC Media Player. The KMPlayer is only available for Windows, while the VLC Media Player is cross-platform and also available for Mac OS X and Linux and Ubuntu.

Convert Flash Videos for Apple Devices  (A): New owners of iPads, iPhones and ipod Touch will quickly discover their devices will not handle Flash. Apple is unlikely to support Flash in their devices. Luckily,  most of the popular YouTube videos are available in both Flash and H.264/MP4 formats; YouTube should detect if your computer can’t play Flash and will usually stream MP4 instead. But some of the less popular videos on YouTube are still available only as Flash video. If you try to play them on iPhone or iPad, you might get an error message “server malfunction”. You can get around this by using the Clip Converter website which can convert online Flash video to MP4 video format playable on Apple’s devices. However, you cannot download the converted file directly on your iPad / iPhone, because its file system is not directly accessible. Everything on these devices has to be associated with a app.

Convert Flash Videos for Apple Devices  (B):  On your computer, surf to clipconverter.cc and under Media URL to Record, paste the URL of the online video. Click on the MP4 button under Conversion Format. Set the Audio Bitrate to 128 kbps and the Video Bitrate to 256 kbps, and leave the other settings to their defaults. Click on Continue button. You should now see the conversion window. When it has finished, you will see a download button which you can click on. Save the file  to a location of your choice.

Convert Flash Videos for Apple Devices  (C): You can now transfer saved video to your Apple device. Plug in your iPad, iPhone, or  iPod Touch, the launch iTunes on your computer. In the Devices section, select your device, then click on the Movies button on iTunes’ top pane. Next, drag the newly converted video files to the library window. The new window should be automatically transferred to your device. If it is not automatically transferred, you can do a manual sync by checking the box next to the video.

Commercial Options: Sometimes, downloading web video can be difficult. For YouTube, Easy YouTube Downloader works well, while Video DownloaderHelper and Clip Converter can probably handle other major video sites. Some  streaming videos require commercial programs which capture anything playing on your PC screen, including web videos, webinars and Skype or live chats.

Search Marketing Results   Leave a comment

Mobile Payment   3 comments

Mobile payment is simply the capability to pay for a product or service using your mobile phone. Mobile payments can take place over the Web or can be completed in the offline world through contactless payment options such as Near Field Communication (NFC) and Radio Frequency Identification (RFID).

All mobile payments fall into one of two camps, micropayments or macropayments, depending on the size of the transaction and how the payment is processed. As in nonmobile commerce, processing credit card payments (especially macropayments) usually requires that the merchant pay the credit card company a fee for each transaction. Credit card processing thus cuts into the margins of many mobile commerce solutions and must be figured into your business plan.You should also balance the potential revenue from mobile commerce with the credit card processing fees, as well as other hard costs and overhead that will be required to complete the transactions.

Micropayments:

Micropayments are small mobile commerce transactions that can be completed on a phone and, in many cases, billed directly to a user’s mobile phone bill or to a credit card. These payments are useful for low-consideration purchases and the purchase of digital content. The most common types of micropayments are direct-to-carrier billing, subscriptions, and user accounts that are tied to credit cards.

(1)Direct to Carrier Billing:

One common instance of micropayments in the United States and around the world occurs when mobile carriers offer directory service (411) or premium SMS charges and downloadable mobile content such as ringtones or wallpapers. The carrier provides these goods and services, so they can be billed directly to your mobile phone bill.According to Wikipedia, 70% of all digital content in Asia, including traditional Web content, is purchased in this way. This type of mobile payment is ideal for the carriers. It is a simple and viable add-on to any mobile service plan and can be quite profitable. The carriers can bill customers directly instead of processing credit card payments and incurring merchant fees. Because credit card information does not need to be obtained, the processing of a purchase is quick and secure, and usually is completed within 10 seconds on a fast connection.

(2)Subscriptions:

Carriers and other mobile content providers offer subscriptions to SMS updates that are charged to the subscriber’s bill in the same model. These subscriptions can be alerts about news, sports, weather, stocks, horoscopes, and the like, and the subscriber is generally billed for each text individually. These types of subscriptions are ongoing commitments, as with a magazine or a cable TV subscription, and subscribers must cancel or deactivate them if they want to stop incurring charges.

(3)User Accounts tied to Credit Cards:

Other types of micropayments can be completed via accounts where credit card information is stored and validated with a PIN or a password. In the mobile world, the most common company that uses this type of service is iTunes; people download music or videos directly to their iPhones. This format of payment is also quite common in the gaming and adult mobile industries, where users can pay for downloads one at a time.

Macropayments:

Macropayments are used for purchases that cannot be billed as a micropayment. Prepayment, prompted mobile payment, full mobile Web transactions, and full brick-and-mortar transactions with proximity based mobile payment are the four most common types of macropayments.

(1)Repayment:

A variety of different companies have begun to allow their customers to create prepaid accounts that are debited each time charges are incurred and that stop working when the money in the account has been spent. This mobile payment option allows account holders to track their spending and prevent charges for excess use of the service, by avoiding overage charges. Prepayment accounts are most commonly used for mobile phone bills themselves, but can also be used with public transportation and fast food.With this method of payment, users create an account, usually online, and submit an initial payment to start the service. Periodically, users are sent text messages to inform them of their account balance or remind them to add money to their account, otherwise known as “topping-up.” Because accounts have already been created, the customer has the option of repeating the payment amount and billing information of the last transaction, or adding different amounts or billing information to the account.

Restaurants are also beginning to test prepaid accounts, although so far this has mostly focused on the larger fast food chains. This mobile payment model works in exactly the same way as the public transportation scenario, but it can be a bit more complicated to implement. In fast food restaurants, the exchange is simple because food is purchased directly at the register, where the phone can be swiped over an  NFC or RFID sensor and immediately deducted from the prepaid account, just as it would be with a debit card.

In more traditional restaurants, where the waitstaff either takes a credit card to swipe at a processing terminal or processes the card at the table wirelessly, there is the expectation to tip. In this instance, the signal from the NFC or RFID chip owned by the restaurant must prompt a screen that allows the customer to enter a tip. This is a bit more of a hassle, but you can preprogram the system to precalculate common tip percentages for the patron,making the process easier and quicker to complete.

(2)Prompted Mobile Payment:

Prompted payment is much like prepayment, except that the credit card on file is not charged until after the service is rendered. In this payment model, the service provider usually sends the customer an SMS with the total bill and asking permission to charge the credit card on file.Again, some carriers use this to remind their customers to pay their bill on time. In this scenario, the carrier sends a text message to the subscriber at the end of a billing cycle, notifying the customer of the total amount due and allowing him or her to respond with a preset PIN to pay the bill with the credit card information stored in the account. Prompted mobile payment is a great way to streamline bill payment or even charitable contributions because it can provide a cost savings over direct mail and can be used by a variety of different service providers, including home utilities, subscription TV services, and even childcare services.

(3)Full Web Transactions:

As on the traditional Web, entire transactions can be completed on the mobile Web without the need for an account or any kind of prepayment. Customers simply enter their credit card information, just as they would on the traditional Web. This type of mobile commerce is most commonly used by websites that offer some kind of mobile shopping experience.

Follow

Get every new post delivered to your Inbox.

Join 918 other followers

%d bloggers like this: