Tag Archives: HTML5

What is HTML5?

QR Code Hit or Miss

← Back to Directory

Over the next few weeks, we’ll be rolling out a series of definition blog posts, where we discuss one aspect of the mobile web and how you, the marketer, can use it effectively for your clients. Today’s topic: HTML5. Stay tuned for more.

Yep, our last blog post was about HTML5, too, but we realized that sometimes (read: most) people use this term incorrectly. Here’s the most important thing to realize: HTML5 is not it’s own language — it’s not a thing. It’s just the latest evolution of HTML.

So what does that mean, exactly? Here’s what Google’s eBook, 20 Things I Learned About Browsers & The Web says:

HTML5 [is] a set of capabilities that gives web designers and developers the ability to create the next generation of great online applications.

So it’s just a new set of features in an already-sophisticated web language — and it’s encouraging innovation for the next great websites and web applications.

So that’s cool. But what can HTML5 do, exactly? What are some of those buzz features we’ve been hearing about lately? There are several.

  • Video. There’s a <video> tag is new in HTML5. In the olden days, you needed a plug-in to watch a video inside a web browser. Now, HTML5 allows you to watch the video embedded in the page.
  • Geo-location. HTML5 has powerful mapping capabilities. If a user agrees to share his or her location, HTML5 can pinpoint (within feet) where they access a site. This is useful for getting directions and finding nearby retail stores. And, on the back-end, geo-location allows you to see where people are when they find your site.
  • Offline capabilities and caching. HTML5 can store data from the web locally on a user’s device for a period of time. When this happens, elements of a website or web application load faster next time a user accesses it.

The cool thing is that HTML is always evolving. Even though HTML5 is the latest version, developers will continue to improve on it. However, you have to keep up with the times as well. Google says, “Just as you need to use an up-to-date, HTML5-compatible browser in order to enjoy sites and apps that take advantage of HTML5’s features.” That goes for mobile, too. Your phone is already HTML5-enabled, but to make full use of HTML5′s features, you need to have an HTML5-enabled website.

Mojaba websites are HTML5-enabled — meaning they can deliver HTML5 features to your phone (in a sleek, mobile-optimized format). See how Mojaba works in our new video, and learn how you can give your clients an HTML5-enabled website today.

HTML5 in 2012: Predictions for Mobile

QR Code Hit or Miss

← Back to Directory

Back in December, we found a post on TechCrunch called The Definitive Guide To HTML5: 14 Predictions For 2012. Here are some of our favorite takeaways and our thoughts on what (mobile) HTML5 will look like in the coming year.

1. More applications will be built as web apps, not native apps. We already use “web apps” every day. (As opposed to native apps that you download and install on your phone, web apps are browser-based systems like Gmail, Google Calendar, Flickr, Hootsuite, Pinterest, etc.) Web apps are more easily accessible than native apps — they’re searchable in Google and they don’t require a user to take the extra step to download after discovery. They’re also cheaper, easier to produce, and available across all operating systems. And HTML5 allows for more mature and sophisticated web apps than ever before. Watch for the decline of the native app and the rise of the web app.

2. HTML5 will start to “blur the line between desktop and browser.” Sounds cool, huh? HTML5 allows web apps to cache data and work offline, meaning access speeds for web apps will sky rocket. (TechCrunch says the speed of native apps is what was attractive until now. But with caching, web apps can zip just as nicely as native apps.) More web apps will start to embrace this capability in 2012.

3. Internet Explorer will make a comeback. This is a interesting, and TechCrunch’s logic makes sense: “Microsoft has made major investments into improving HTML5 performance that will give IE 10 a huge performance lead over competing browsers. Its hardware accelerated ‘canvas’ will blow away all the other browsers in any speed test.” We’re excited, because we’ve already seen this OS/web integration in the new and improved Windows Phone Mango. Look for a similar desktop experience coming soon.

4. Browsers will start to look more like iOS, with push notifications and  geolocation. HTML5 is cool because it gives us fun new services like geo-location and push notifications. These are already being used by smartphones to deliver content and track where users access that content. And we agree with TechCrunch that these are valuable features that desktop browsers will soon start to implement as well, bringing the mobile and desktop experiences more in sync — meaning it will be even more important for companies to embrace mobile strategies this year.

5. Less Flash. Period. Flash is out (maybe “dead” is more accurate). HTML5 animation is in. Like we said above, HTML5 is more sophisticated than ever. And now that Flash is over for mobile, HTML5 is the option many web apps will use.

This is an abbreviated list. Click here to see TechCrunch’s 14 HTML5 predictions.

Why Maps and Locations are Important for Your Mobile Website

QR Code Hit or Miss

← Back to Directory

Making maps in Mojaba is easy — and useful. Some mobile web developers will say you need to do something complicated to get a map on your mobile site: Make a layout, save the image on your desktop, upload the map as an “image element,” link it to the location’s address in Google Maps and …

We think that’s too complicated.

So we made it simple to mark locations on a Mojaba site — just enter an address.

Specify your client’s address in the Locations tab of the Mojaba dashboard, then link the location to a client’s site. After that, you can drag the location element onto your mobile site’s contact page (or any page you want — we don’t discriminate), and your map is ready to go.

 

Best Use for Maps and Locations on Your Clients’ Mobile Websites:

  • Use locations to direct visitors to a “nearest open” location. Consumers searching on their phones are highly motivated and action-oriented — so why not direct them to a location that’s open for business? Help local consumers find your client’s business by offering easy-to-find maps linked to hours of operation.
  • Make it interactive. Visuals are great — but an interactive map lets a user see a location in context — as in, he knows where he is in relation to the business. Users are well-used to navigating a map by dragging and zooming to navigate the area digitally. Let them do this on your client’s mobile site.
  • Give directions. A dot on a map will tell consumers where to go — but not how to get there. Include a button on your map page that pulls up directions. Again, give consumers something to act on, and ensure their action benefits your clients.
  • Offer a phone number. This is another actionable feature that connects consumers with your clients. Google reports that 61 percent of users call a business after searching. Even if a consumer is on his way to your client’s business, he may have questions in transit. Make sure he can easily make a phone call. Include click-to-call buttons and one-touch dialing to streamline the process.

Conveniently, all of these best practices are included in Mojaba’s location features. Sign up for Mojaba’s Beta testing to see for yourself.

You can sign up for the Mojaba Pre-Launch Program today. Just go to the entry form to sign up!

The DOs and DON’Ts of Using HTML5

QR Code Hit or Miss

← Back to Directory

In a recent blog called Five Ways to Decide if HTML5 is For You, Arno Du Toit says three things are certain in this world: “death, taxes and the fact that businesses must mobilize or go out of business.” Though “going out of business” might be a bit harsh, we do agree that this is the age of mobile — and creative agencies can lead their clients through this handheld revolution. HTML5-enabled websites (like those created with Mojaba) can be valuable for businesses and consumers, but here are some Dos and Don’ts when thinking about HTML5 to meet your mobile needs:

 

DOs

DO create a mobile-friendly version of your website. This is a big one, and we like that Hubspot Blog made this #1 on The First 3 Steps to an Instantly Mobile-Optimized Website. Mojaba lets agencies create websites specifically for that 2 x 3-inch screen, and then gives them a mobile redirect code upon purchase. This code directs the user to either the desktop or mobile site, depending on their device.

DO make a site that works on all smartphone operating systems. There’s a lot of them out there. Don’t waste time making native apps for iOS, Android, RIM and Windows Phone systems. Instead, make a website that end-users can see, regardless of OS.

DO make sure your site works on feature phones.  Nearly half of mobile users don’t use a smartphone, so agencies should cater to flip-phone users, too. The advanced features of HTML5 (such as geo-location) don’t work on feature phones, but websites do. A Mojaba site delivers information differently to feature phones and smartphones (in a good way), meaning each user sees a mobile-optimized website, regardless of their phone’s IQ.

 

DON’Ts

DON’T assume your users will share their locations. Just because they can doesn’t mean they will. Unless a user gives permission, smartphone browsers don’t share location coordinates.

DON’T force users to stay on the mobile site. Use mobile site redirects so visitors see the mobile site when they access it on a mobile device — but don’t make them stay if they don’t want to. Mojaba automatically adds a link to the full website. Also, don’t redirect iPad and other tablet users to a mobile site. They can easily browse the desktop version on the larger screen. Do like Mojaba, and keep tablet users on the desktop site.

DON’T worry too much about code. HubSpot recommends using a Meta Viewport Tag in the code of your desktop site (so the site tilts and zooms depending on how you hold your phone). That looks nice, but not unless you’ve made a mobile version of your desktop website. Create a site designed for a phone first. Then let us worry about the code. Mojaba takes care of the Meta Viewport Tags so you don’t have to. Everybody wins.

 

You can sign up for the Mojaba Pre-Launch Program today. Just go to the entry form to sign up!

HTML5 Gets the Spotlight

QR Code Hit or Miss

← Back to Directory

HTML5 LogoAfter the announcement by Adobe that they would end their development of Flash for mobile devices, the mainstream press has put HTML5 into the spotlight. For creative professionals, this may bring some questions from clients like “How can we use this new HTML5 stuff? I read it’s better, etc.”

Let’s start by doing a quick review of two articles that appeared in today’s Wall Street Journal so that you know what your clients may have read.

Don Clark writes in HTML5: A Look Behind the Technology Changing the Web

…a set of programming techniques called HTML5 is rapidly winning over the Web. The technology allows Internet browsers to display jazzed-up images and effects that react to users’ actions, delivering game-like interactivity without installing additional software.

A subtext to the article is that Flash “lost out” to HTML5 and that Apple’s Steve Jobs was the main architect of HTML5′s “victory”.

That’s an over simplification. Suffice to say that the open-standard of HTML5 is more widely used because of a range of benefits including generally excellent support in web browsers – particularly those used by Google Android and Apple iOS mobile devices.

Clark has a companion piece entitled HTML5 Is Popular, Still Unfinished where he explains how HTML5 is a evolution of the Hyper Text Markup Language (HTML) standard that web browsers use to determine how a web page is displayed. As such, the standard is evolving and some elements of it do not have complete support or agreement in the technical community. Still, as Clark observes,

One of the biggest drivers for HTML5 is to avoid the labor of creating different apps for different devices.

That addresses one of the issues of Native vs. WebApps debate. We wrote about that in our post Native or Web Application: Helping the Client Decide and concluded that you need to understand exactly what the client wants an needs first and then decide which technological approach is best.

The takeaway for creative professionals is that it is progressively getting easier to deliver compelling designs and content across the range of web platforms. Clients really don’t need to know or understand the tools or standards used to do that – just the benefits that may include faster production and wider reach.

Adobe to Cease Mobile Flash Development

QR Code Hit or Miss

← Back to Directory

Jason Perlow and Scott Raymond of ZDNet broke the news late Monday that sources within Adobe are preparing to make the following announcement:

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer adapt Flash Player for mobile devices to new browser, OS version or device configurations. Some of our source code licensees may opt to continue working on and releasing their own implementations. We will continue to support the current Android and PlayBook configurations with critical bug fixes and security updates.

Anyone in the creative professional space has to have been aware of the “feud” between Apple and Adobe about the absence of Flash support in the Apple iOS. This took on the dimensions of a religious war over time amongst various technical pundits, but in the creative world, designers quietly moved Flash movies into containers that worked across all platforms. Looks like that was the right move all along.

Our view is that Adobe is now admitting the obvious. Flash on mobile is dead. Long live HTML5.

Additional news from Adobe on Tuesday brought word of a corporate restructuring that will eliminate 750 jobs worldwide.

Iowa-Based Grocer Hy-Vee Almost Hits a Mobile Home Run

QR Code Hit or Miss

← Back to Directory

 

Hy-Vee Curtis Stone Print Ad

Hy-Vee Curtis Stone Newspaper Insert

Hy-Vee grocery stores, one of the top 20 grocers in the United States with 232 stores in the Midwest, have recently launched a marketing campaign featuring Australian celebrity chef Curtis Stone. After a few weeks of preparatory TV ads, they launched the “Curtis Stone for Hy-Vee” campaign this week. The integrated campaign hit TV (see the TV spot here), web, print and — what concerns us here — mobile.

The mobile campaign was integrated with a newspaper print supplement that was found in the Des Moines Register on June 7th. Stone’s Grilled T-Bone Steak with Chimchurri Sauce recipe included a QR code. Scanning the code brought you to a mobile-optimized Hy-Vee website. Stone’s steak recipe was then available for review.

QR Code as Part of Newspaper Insert

Hits
What we liked about the mobile aspects of this campaign was how Hy-Vee hit the main points on the mobile site and used the QR code to full advantage. We’ve recently seen many QR code implementations that took the mobile user to a non-mobile site, which represents a complete failure to understand the mode of use and what the consumer will do with a QR code.

Misses
While we applaud Hy-Vee for at least bringing mobile users to a mobile-optimized site, the site itself didn’t take full advantage of the situation. Looking at the landing page (below left), the most prominent item is a request for feedback – not a marketing message tied in with Stone and his steak recipe. Also, the link to the recipe itself is the 4th item down the list.

There is also a “My Hy-Vee” page, which is apparently some type of log-in, but the mobile page itself provides no information whatsoever as to what the feature is and why I might want to use it.

Good mobile-optimized content.

Not so good home page call to action.

The Change Up
Our advice for the next round of Curtis Stone recipes is as follows:

  1. QR Code: Take the consumer directly to the Stone recipe featured
  2. Home Page: Don’t ask for feedback – sell something or ask for the consumer to sign up for something
  3. Add in a link to the associated Stone recipe commercial on the Hy-Vee YouTube account
  4. Put the Stone Recipe button at the Top
  5. Explain and promote “My Hy-Vee”
  6. Store Finder – upgrade to use HTML5 GeoLocation to suggest to the consumer where the closest store is located

These tweaks are just that – small changes to improve the already good mobile experience and make it great. As Jason Speros of Google says, with mobile you must “Iterate, Iterate, Iterate.” And we can hardly wait for the next recipe, Curtis…

 

 

HTML5, What It Means For Mobile and The Marketer

QR Code Hit or Miss

← Back to Directory

HTML5 Logo“HTML5″ is one of those terms like “Web 2.0″ that can mean different things to different people and therefore may be confusing. For marketers, the key is to understand what solutions and therefore benefits HTML5 can deliver to your customers.

HTML5 is the next generation of the basic code that web browsers, desktop and mobile, read to display web pages to a user. This code is called “Hyper Text Markup Language” or “HTML. The last major specification, HTML4 was adopted in 1997. While there are a number of new elements that affect all types of web browsers, our focus here is mobile web browsers, such as Mobile Safari and Android. These are often collectively referred to as “WebKit” browsers.

1. HTML5 is Supported in a Wide-Range of Mobile Browsers
While the specific support of elements is not universal, the major parts are well supported. This means that a mobile website built with HTML5 elements will enjoy very broad support amongst the leading smartphone producers that use the WebKit browser.

2. GeoLocation Allows Mobile Websites to Offer Native App Features
GeoLocation is not technically part of the HTML5 specification, but the support for GeoLocation in mobile web browsers is now widespread. This means that users can access websites which access their position to provide directions to a business or show nearby points of interest – benefits that were formerly restricted to native apps.

3. Offline Support
Mobile websites can now provide support for offline functions. Users can now accomplish tasks when they have no wireless connection. Simple caching of elements means that graphics will remain available to the user and database support provides for storage of pages or information for use later. For the marketer, this means that some options available in native apps are now available in a mobile website, such as storing a list of products.

The principal benefit to the marketer is that all three of these elements above provide a choice in terms of deploying solutions. Native apps are powerful and have their place as a solution for clients, but they are also expensive to build and provide a narrower distribution channel. There has to be compelling value to ask a potential consumer to go through the time and processes to download a native app. HTML5-based mobile websites on the other hand, can deliver many of the features of native apps with a shorter time to produce, the broadest possible distribution channel and a lower costs.

These sites provide (technical) references that are still useful for the marketer.

There are more HTML5 elements that we will cover in a future post, but these three are arguably the most important for marketers to understand today.