+86-21-33842882

Your position:

Home > Knowledge Sharing

Knowledge Sharing

HTML5 is fundamentally changing the way developers approach the Web. Whether it is for desktop browsers or mobile, the language and standards of the future are not some distant point on the horizon. It is right now.

In the mobile realm, the debate rages on: Web or Native? The difference between the two is beginning to blur as HTML5 standards evolve. We examine what happened in HTML5 in this year in our third installment of 2011's top trends. Check out the rest of the series, starting with John Paul Titlow's music trends and Alicia Eler's mobile commerce trends.

1. Mobile First

Yesterday, we named appMobi as our ReadWriteWeb Most Promising Company of 2012. As a startup, the company is doing interesting work on the fundamental goal of making HTML5 easy to use and ubiquitous with an emphasis on mobile first development. appMobi is carrying the torch for mobile first but it is a trend that is fast sweeping the development community as smartphones and tablet use explodes with data usage projected to increase by orders of magnitude in the next several years.

Fundamentally, the mobile first initiative revolves around the simple yet loaded questions of Webs apps versus Native apps.

This year we saw some large companies go to mobile first initiatives in regards to HTML5 design. The Financial Times pulled its native app iPad from the Apple App Store over its subscription and in-app revenue policies and has done very well with its Web app, designed with HTML5 with mobile devices in mind. Game developers, as discussed below, are leading the charge in creating dynamic mobile Web apps.

The trend of developing for the mobile Web first will continue into the new year with the explosion of smart devices coming to dominate computing, especially on the consumer/consumption side of the equation. To a certain extent, users do not really care what an app is written in, as long as it works like they expect it to. With some of the evolutions of HTML5 described below, the line of capabilities between Web apps and native apps is starting to blur.

2. Game Developers Take The Lead

We noted multiple times throughout the year that some of our favorite developers in the mobile realm were of the gaming variety. To a certain extent, game developers have the most to benefit from taking on HTML5 as a platform to avoid the 30% that Apple scrapes from paid games in the App Store and in-app purchases. Games are some of the hottest selling apps in all of mobile and a one reason that platforms like Android and Apple look so attractive to people looking to buy a smartphone or tablet. It is not just about reading email or making phone calls and texts. If that was so, Research In Motion would be doing a lot better with BlackBerry than it currently is.

A lot of game developers are being pushed along by the likes of Facebook and Zynga. The future of the Facebook app ecosystem is based on HTML5. Game developers, such as those working at MocoSpace or Moblyng are hard at work creating HTML5 versions of their publication library. As Stewart Putney, CEO of Moblyng, told me in August, "do you know how hard it is to make a Texas Hold'em game in HTML5?"

Games are not all about Web apps though. Through the magic of PhoneGap and HTML5 development through appMobi's XDK, Web app mobile games can be wrapped for easy integration into the native app stores. The approach is very similar to what Facebook does with its own mobile app. Based of the Web and browser but wrapped for native functionality.

We wrote about how game developers have taken the mantel of pushing the bounds of technology from the porn industry and it is true. Porn, an industry that once was the bellwether for technological adoption, has now fallen behind the times. We expect this trend to continue in the next couple of years as HTML5 matures as a platform.

3. Responsive Design & Handling Screen Sizes

There are fundamental advancements that need to happen before HTML5 truly changes the way that development is handled across platforms. One big step was taken this year with the evolution of what is called "responsive design." Essentially, responsive design will let content adapt to any screen size that it is on. The brightest example of responsive design this year was when the Boston Globe released BostonGlobe.com, its mobile-first Web application designed to work on any screen size, anywhere. We interviewed Filament Group, the developers behind the Globe's responsive design, in September and learned that responsive design is not actually an easy to figure out. Some basic concepts had to be built from scratch, such as the notion of RespondJS that handles media queries. Learning what to do with photos and ads from third-party sources also proved to be problematic.

"I think some facets of this could have been done in the past. I mean, HTML5 has a lot more APIs available for targeting features. Like, being able to check for touch support is technically part of HTML5 even though it is not HTML5 markup," Filament developer Mat Marquis said at the time. "So, that definitely allows us to do all of that conditional loading and such. In terms of the markup itself, we are doing a lot of HTML5 with additional semantic meaning, it could have been done in HTML4, just not meaningfully in terms of the markup."

Dealing with responsive design has a lot to do with understanding how content is going to react to a particular screen size. ZURB, a Silicon Valley design company, is also working on responsive design implementations. Responsive design is based off the concept of "fluid" design and is complete shift in how content has been handled on websites and mobile devices for much of the last 16 years or so. It is still a work in progress but HTML5 is finally making it possible.

4. Device Access

One of the biggest barriers of erasing the line between Web apps and native apps is the ability for browser-based applications to have access to some of the most fundamental aspects of mobile devices, like the camera, contacts lists, calendar, accelerometer etc. This is another area where appMobi is a leader in the HTML5 space, especially after it open-sourced all of its APIs the day after Thanksgiving. Mozilla has also been working hard on creating device access through the Fennec mobile browser project.

To mobile developers, device access is the most exciting innovation within the HTML5 set. It means that true Web apps can come to mobile, without the need of doing any PhoneGap-style wrapping. Game developers will be pleased because aspects previously locked to them, such as the accelerometer or the phone's read state, can be integrated into games. This opens a world of possibilities, such as better cloud integration (which can help with in-app purchases, push notifications etc.) and enhanced game play. Depending on the platform, apps are fundamentally built off Javascript, CSS3, HTML and other programming languages and given functionality through APIs, SDKs, cloud functionality and dozens of other moving parts. HTML5 did not allow for many of those functions but until recently. That is beginning to change and will be a development to watch in 2012.

5. Offline Caching

Hold, wait a minute here. You mean that my app can work even when I am not connected to the Internet? Well, I'll be a goat in a canoe on the River Thames. The concept of offline caching is fairly new and still one of the trickier aspects of HTML5 development for Web apps to master. This year, the prime example of offline caching to be deployed on a grand scale is the Kindle Cloud Reader, a Web app from Amazon that is supposed to give the Kindle sync functionality through the browser and remember everything in in a users Kindle library. It works in Firefox 6+, Chrome 11+, Safari 5+ and iOS 4+. There is so much that can be done with offline caching but the prime benefits, combined with device access, are to make Web apps work when not actually connected to the Web. That possibility is what many pundits think will eventually be the doom of native apps because overall deployment of Web apps will be frictionless, of every platform and no platform.

Mozilla is also working on offline caching with Fennec. Actually, name any particular trend in HTML5 development, and Mozilla has a hand in there somewhere. Check out Mozilla's mobile roadmap that we wrote about a few weeks ago to fully understand how the open-source organization plans on integrating HTML5 into its smart devices platform.

6. Maturation Of Developer Tools

In August we wrote that, "HTML5 Can Get the Job, But Can HTML5 Do the Job," a riff on a Pinch/Zoom blog post on the anatomy of an HTML5 Web app. In that post, Brian Fling said this about developers planning on HTML5:

  • Allow for time. Assume it will take far longer than any other project you've previously done.
  • Budget appropriately. This is not a website, and it will cost you a lot more.
  • Make sure you have the right talent in-house. If these problems are hard for the most seasoned experts in the world that do it every day, assume they will be hard for your team, too.
  • The "tools" are non-existent. More often than not, you will have to build your own tools.
  • Consider all your options. A dogmatic approach to technology is a surefire way to spend money unnecessarily. There are no right or wrong answers in mobile. Keep an open mind and focus on what your customers need.

The fourth bullet point on tools is perhaps the most pertinent of all because it is the aspect that has changed the most from August until now. In addition to the tools that appMobi provides, framework and IDE providers Sencha and Appcelerator have gotten into the HTML5 development game, providing new ways for developers to create apps with the set of standards. At this point those tools are not yet as power or simple as some of the native Android and iOS developer frameworks and tools but in the next 12 months they will continue to evolve. Frameworks, IDEs, emulators, bug detectors and other basic functions that developers have come to rely on will roll out for HTML5 development and become more ingrained into the ecosystem. When developer lives' are easier, the more productive they can be and the more Web apps we will start seeing flood the market.

Conclusion

Other functions of HTML5, such as forms and new standards, continue to evolve. Fairly soon, HTML5 will probably be just HTML as the community and the W3C work to standardize the set. The leaders in HTML5 development will be companies like Sencha, Adobe, Appcelerator, appMobi along with the titans of the industry in Facebook, Amazon and Google.

It is an exciting time to be a developer whether you are working on new forms of video rendering such as Brightcove or trying to figure out the best implementations of HTML5 for audio the way SoundCloud is. From the desktop to the mobile Web, HTML5 is making the Web's one true killer app, the browser, the centerpiece of innovation.


Contact Us

+86-21-33842882

573 Bibo Road, ZhangJiang Hi-Tech Park, Shanghai, China 201203

Roonzone Information Technology offers a range of online services including corporate website design, customization, development and system integraton. We have succesfully built website for some circuits which integrate with Vista Cinema management system. The modules include online booking/ticketing, online payment (Union Pay), SMS marketing etc.

© roonzone.com, all rights reserved

ICP:10215834-1