Macinfosoft

The Definitive Guide To HTML5: 14 Predictions For 2012
by Contributor

Editor’s note: Guest contributor Ben Savage is the founder of Spaceport.io, a native Javascript and HTML5 platform for mobile game developers.

From tech titans like Zynga, Facebook, Microsoft, Google and Apple, to startups just launching, the battle lines of 2012 will be drawn across the landscape of HTML5. Below are 14 bold predictions for how HTML5 will evolve in 2012.

Welcome to a more interconnected web:

In 2012, HTML5 will be adding support for some really useful and cool APIs that allow one
website to connect to another.

For example, Zynga games on Facebook run inside of iframes. Using the new postMessage API these games will be able to communicate within the containing Facebook frame directly. Before HTML5, inter-window communication had to rely on a remote server – or use unreliable hacks.

Another exciting addition is CORS (Cross Origin Resource Sharing). This will make it much easier for different websites to share information with one another. For example, CORS will enable startups to create photo-editing services that download your photos from Facebook, let you modify them, and then re-upload them – again without having to resort to ugly hacks.

With all of the new semantic information (see Semantics and Microdata) available with HTML5, it will become much easier to create web tools that extract information from web pages. As a result, you can expect to see a plethora of new mashup services, as well as better browser modes (like readers and translators).

Web browsers will look more like iPhones

Everyone loves Apple’s iOS. Now it’s coming to the HTML5 web. In 2012 your browsers will start
sporting push notifications, geolocation, and offline capable applications. Some browsers will likely adopt a more iOS-like user interface that will make the comparison all the more apt.

More and more applications will just be built in HTML5 instead of downloadable apps

If you’re like me, you already use web apps for email, calendars, and photo-sharing, but in 2012 more classes of applications will be HTML5 enabled. Next up, you can expect to see content creation apps like Inkscape and Illustrator emerge for HTML5 and start to catch on.

Internet Explorer & Microsoft will dramatically improve in coolness.

Internet explorer’s reputation will stop being “the browser where nothing works right” and start being “the fast browser”. 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. Microsoft is also adding interesting ways for the HTML5 web and the desktop to work together that will really spice up its operating system. Having good support from IE will be the impetus that will really turn the tide in favor of authoring HTML5 applications.

Browser manufacturers will get into the App Store business

Taking a cue from Apple, browser manufacturers will start to realize that they are missing out by not being in the app store business. Google Chrome already has an integrated app-store as its splash page. Expect many other browsers to follow. This is actually a good thing for HTML5 application developers – it means more distribution opportunities for apps, although platform specific payment systems and platform revenue-shares will follow later on.

At least one major console game released or re-released using WebGL

In 2012, at least one AAA console game company is going to make the leap and decide to launch a 3D title on the web using WebGL instead of (or in addition to) creating a downloadable client. It might be a re-release of a well-known title (Like “Team Fortress 2″ or “Assassins Creed”), or another way to play a popular MMO (like “Eve Online” or “World of Warcraft”), or it may be an entirely new title launching for the first time.

Many more applications will use offline cache and will work offline

The offline application cache will dramatically improve the usability and speed of HTML5 apps. Querying a local database will allow applications to avoid a round-trip to the server, eliminating that laggy web-app feel that makes us all prefer native apps today.

In 2012, expect to see a few issues arise from this extended usage. You’ll lose your work by clearing your cache at least once or twice. Also expect security vulnerabilities to keep showing up that allow malicious applications to access private files stored on your computer by another
website.

HTML5 ads will become prevalent and overtake Flash ads

Website owners keen to monetize the increasingly large amount of traffic coming from iOS devices will demand HTML5 ads (rather than Flash ads). Startups will emerge to serve this market. These startups will solve the sand boxing, security, and authoring tools issues that this new market will face. Now that HTML5 is capable of doing everything that flash ads commonly do, it’s just a matter of time before they take over.

JavaScript will get a lot faster with better memory management and typed arrays

JavaScript has gotten really, really fast – it’s already among the world’s fastest scripting languages – but there is room for improvement. Google Chrome has started pushing the envelope on better memory management and garbage collection algorithms. This, combined with typed arrays, will bring JavaScript performance closer to more mature languages like Java.

Canvas will get hardware acceleration in more browsers (but no major mobile browsers)

Other browser makers will follow Internet Explorer’s lead and add hardware acceleration to their canvas implementations. Those that don’t will suffer a severe loss in mind-share. Firefox is most at-risk in this regard. If Mozilla fails to accelerate their canvas it risks being portrayed as the new IE — slow and bloated and burdened down with legacy code.

However, in 2012, no major mobile browsers will successfully roll out a hardware-accelerated canvas. We will have to wait until 2013 to start seeing that catch on.

People will play popular HTML5 games on their mobile devices from Zynga and others, but they will be very simple games

You can expect to see your friends playing games like Zynga Poker, Words with Friends, and Mafia Wars on their mobile phones, running purely in HTML5. These games will be played on both destination websites and within native applications (like the Facebook app).

However, successful HTML5 games on mobile devices will be limited to menu-based games, card games, board games, turn-based multiplayer games, and avatar customizer games. More complex and visually intensive Zynga “Ville” style games with isometric worlds or hundreds of animating sprites will not yet strike gold in 2012.

Facebook will release improved HTML5-based APIs that allow for more seamless integration with external websites

In its continued quest to be the de facto social-graph of the web, Facebook Connect will grow and expand to take advantage of new HTML5 features. This will allow even deeper and richer integration of Facebook connect with external websites and services.

Facebook will get a lot more seamlessly integrated with your desktop

Think drag-and-drop, file system access, photo synching, and widgets on your desktop. All of these features (and more) will start to blur the line between desktop and browser, bringing your social graph more closely into contact with your traditional desktop experience.

Apple will NOT fix HTML5 sound in mobile Safari

HTML5 sound used to work well in mobile Safari, back in the days iOS3. However, Apple disabled most of the API in iOS 4 and 5. It just introduces competition for iTunes — both the music store, and the App Store. In its continued fight to maintain total control over the Apple ecosystem, they will refrain from fixing HTML5 sound in 2012.

Fourteen years ago, in my first job where my title was “Information Architect,” I clashed with a designer. We were working at a large advertising agency that was known for stunning design work. The art directors wielded a level of power at the agency that I have never seen anywhere else, and the result over the decades was a portfolio of gorgeous print and TV ads. The design-first method had worked well for this agency, winning them awards and a long roster of Fortune 500 clients, so they naturally decided to use this approach in their newly launched web department, too.

Things went well for a while, until I attended a kickoff meeting for a new website project. The designer came to the meeting with an already completed graphic design, before any information had been provided about who the site was for or what it would do. This designer had been at the company longer than me, and she had been happily designing sites without an information architect for several months. As far as she was concerned, this was a process that worked well for her, and why shouldn’t it? She had complete control of the site, her designs looked lovely, and they were not in any way influenced by user needs, site goals, or reality.

What followed was a long, drawn-out battle for control of the site between me and the designer. This battle usually sounded something like this, played out again and again:

Me: And when you click on this button where does it take you?

Designer: I haven’t worked that out yet, but it’ll be fine.

At the time, I thought I had encountered a particularly obstinate designer, but in fact I had just bulldozed my way into the biggest challenge in information architecture (IA): navigating the line between beautiful design and usable IA. Because this was early in the web world, the agency had yet to learn about this balance between usability and design, and I hadn’t either. And in the intervening years, things haven’t changed much. Designers still want to make things beautiful, UXers still want to make things usable, and those two goals are frequently at odds. What has changed for me, though, is the approach I now take to working with designers.
1. Get the Right Designer on the Project

We don’t always have the luxury of selecting the designer who will bring our wireframes and prototypes to life, but on occasion this happens. All UXers should have a roster of designers who are UX-friendly who they can call when the opportunity arises. More and more frequently, I have clients who either ask us to handle design or ask for designer referrals. When this happens I always feel like I’ve won the lottery. I have a collection of designers I’ve met over the years who are great at working with highly functional sites; if you have the opportunity to influence the designer selection, you need to be ready to jump in with names and portfolios.
2. Don’t Just Throw Wireframes Over the Fence

Last year, I worked on an unusual project where the timeframe was so compressed that there was no time for wireframes. Instead I spent many, many hours each day on the phone with the designer discussing the interface, working out where each element should go and exactly how it should function. While I wouldn’t recommend this process as a rule, the end result was a beautiful working relationship and an interface that we were both thrilled with.

Many agencies are structured such that designers are just handed a stack of wireframes and told to execute on them. The end result tends to be either a site that looks like a very pretty version of the wireframes, or one that is only very loosely based on the UX design. To strike the right balance that prevents designers from either taking an overly literal interpretation of wireframes or from developing their own new interaction models, designers need to be involved early and often. As soon as you’ve got a few wireframes done, pull your designer in to start mocking up a visual design so you can work together through anything that needs to be rethought.
3. Give Designers Space to Do Their Thing

People go into design because they want to express their creativity, to play with shapes and color, and to have fun doing it. In some ways, information architects just come in and rain on designers’ parades by imposing structure and preferring the obvious over the unique. But there are designers out there — more and more all the time — who look forward to working with information architects because working off of wireframes makes their jobs easier. These designers still want to play and have fun, and (in the right place and time) new and interesting designs and interactions can make people happy, so it’s a good idea to include a design-centric section on sites that warrant it, where the information architecture takes a back seat to the design. This works for areas of a site that needs to provide a visceral feel for a brand, or portfolio sections of sites that need to showcase work or case studies. If you respect the designers’ need to create something beautiful, they are more likely to respect your need to create something usable.

4. Don’t Discount the Importance of Design

It’s important to remember, as Don Norman has famously said and Dana Chisnell recently reiterated, that beautiful design makes people happy. Good UX design is the backbone of good visual design, and one cannot exist without the other. Back when I was engaging the designer at my first IA job in thermonuclear warfare, I did it because I only barely registered design as something that mattered to the user experience. But the joy inherent in beautiful design is important as well, so sometimes when a designer overrides your UX design on aesthetic grounds, the designer is right. UXers need to weigh the pros and cons of all design decisions very carefully in order to determine where visual design should triumph over UX design, and vice versa.

There are still struggles, of course, and there are projects where designers want to go one direction and the UX team wants to go another. But I do seem to encounter fewer and fewer all-out wars between design and UX teams. When designers and UXers work well together, the ultimate winners are the users, who get a product that is not only easy to use but lovely to interact with.

UX Magazine is a Mashable publishing partner that offers instruction, opinion and analysis on the field of user experience. The following article is reprinted with the publisher’s permission.

It was published in Mashable.