Web 3D is a technology that enables 3D graphics to be displayed on a website. This technology is becoming more popular and is rapidly developing. This article will explain the recent technology trend of Web 3D and how to prepare for a 3D advertising future.

Figure 1. Web3D Body Explorer by Google

History of 3D advertising

Table 1.Chronicles of Web 3D

3D advertising was born during the 2^nd generation of Web 3D. Wildtangent and Viewpoint created several experimental advertisements for Nike, Coke, Ford, and Toyota[4]. However, there was no standard for 3D graphics, so companies created their own format using ActiveX control. ActiveX control often irritated users due to features such as installing additional toolbars in a users’ browser or monitoring users’ information without their knowledge[5]. It was unfortunate that the success of these early 3D advertisements was limited due to being built black hat and without a standard. Also, at the time, another factor limiting the success of 3D advertising was that most computers didn’t have enough computing power to run 3D graphics in a browser.

Figure 2.Viewpoint Hyperview Banner Ad.

Recent Trends

Microsoft announced their new web browser IE9 on March 14, 2011. This is Microsoft’s first browser partially supporting the HTML5 standard. Recently, Microsoft has also announced their new IE10 preview 1 at a MIX 2011 event just a month after launching IE9.[6] One of the major updates for IE10 is faster GPU acceleration. GPU acceleration handles most graphic effects including 3D rendering (but, Microsoft doesn’t include the WebGL context, yet.) Microsoft also announced Silverlight 5, a rich media platform (even richer than HTML5[7]), which now has a 3D API derived from XNA, Microsoft’s game framework.[8] It is clear Microsoft is joining the Web 3D race.

Adobe has announced “Molehill” which is code name for a new 3D API that will be a subset of the Adobe Flash platform. This API allows rendering of 3D graphics and shaders using GPU. Molehill will be published to a new version of Flash player. Since 99% of internet-enabled desktop users have flash player, you can expect almost all desktop users will have Molehill.[9] HTML5 is changing the rules of the entire web world, but did you know that Web 3D is one of the major changes in HTML5? On March 3, 2011, Khronos group, an open standards consortium, released a final WebGL 1.0 Specification.[10] WebGL is a web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces.[11] Currently, recent versions of Firefox, Chrome, and Safari support WebGL, and eventually Internet Explorer will support it. The iPhone and iPad, don’t support WebGL for now, but the devices will in the future due to Apple’s strategy of supporting HTML5.[12]

Comparing  Web 3D technologies

Comparing Web 3D technologies could be confusing for advertising agencies since the offerings have different specs and support from various web browsers across different platforms. Right now, it is hard to predict who will become the leader in 3D advertising.

Table 2. Comparison of Web 3D technologies

WebGL

WebGL is now a web standard and will dominate the 3D advertising world, but not in the near future. If you think about HTML5 as an advertising platform, you might consider including WebGL in your long term plan. Microsoft has not announced their support of WebGL officially yet, so Microsoft’s plans could be a decision point for you.

In mobile, few devices such as Nokia N900[17] support WebGL, but HTML5 is becoming a major platform for mobile advertising[18] rather than Adobe Flash, and it’s highly possible that WebGL will be added to a current mobile advertising platform such as Apple’s iAd.

Silverlight5

Silverlight is becoming popular in the RIA (Rich Internet Application) platform and WMV streaming container. Silverlight’s new 3D feature will extend the UX (User Experience) and interactivity of advertising. However, Silverlight doesn’t have many benefits compared to the Web Standard WebGL and Flash which is everywhere. Silverlight is a poorer choice than Flash in mobile devices since Silverlight only works on WP7 (Windows Phone 7) devices.

Silverlight is useful though for creating an advertising campaign around an RIA app that requires heavy UX and high performance such as face detection or augmented reality.

Molehill from Adobe Flash

Needless to say, Flash is still the number one solution for rich media advertising. Once Adobe expands 3D capabilities to Flash, a creation pipeline could be smoothly transitioned to handle 3D assets and animations.

Backup plan for unsupported systems

Although recent systems can handle cool technologies like Web 3D, there are still many computers that only run IE6. In most cases, a page can detect whether a browser supports Web 3D using JavaScript, and switch content to a compatible substitution. WebGL context could be switched to 2D context, which will handle 2D graphics within the same <canvas> container. 2D context profile is supported by most recent browsers including Android and iOS devices. Silverlight is a plug-in, so you can put backup content in <embed> and <object> tags. In Flash, you can run a 3D API check ActionScript, which detects if the current version of Flash supports 3D API.

The Future of 3D Advertising

If you are still unsure about the future of 3D advertising, here is a summary of why 3D matters.

• 3D is more interactive than 2D, especially rendered video reel. Characters and objects are dynamic and react based on your action.
• 3D leads new interaction. Smartphones have new sensors that detect motion, rotation, and your face, and 3D advertising is ready to react.
• 3D content could work with 3D TVs – a fast growing segment that will probably become mainstream.[19]
  • Importantly, advertisers can easily repurpose 3D TV content for Web 3D – since the content is already made 3D for television little additional work would be needed to use the same content on the web
• One Source Multi-use – Disney could repurpose their 3D character assets for 3D advertising; Hyundai could repurpose the 3D models of their cars so users could explore their vehicles in a 3D environment
• Augmented Reality (AR) requires 3D. AR is a fast growing advertising platform.[20]

Do you know how to create a mobile website? Or more importantly, do you know what a mobile website is? Domus Dish has covered this topic quite a bit, but in case you’ve missed it, a mobile website is what smart phone users see when looking at your webpage from their phones. There are many differences between mobile and traditional websites, which is why your website may not work for many smart phone users. For one Apple doesn’t support Flash (perhaps because Steve Jobs hates Adobe, but we’ll save that for another time), so we need to focus on HTML5, which is the next major revision of the HTML standard and is still in development.  It can be frustrating that there’s such a disconnect, but learn it and move on – you don’t want to miss out on the mobile website movement.

I encourage you to look on the bright side – once you have mobile web mastered you’re opening your business to millions – some analysts even say BILLIONS – of mobile web users. Mobile websites are a new way of digital marketing, and a completely different approach compared to the development of traditional websites. Therefore, you can’t just treat it like a regular website with a smaller layout – there are distinct differences in the website’s development that will drastically affect the final result if they’re ignored. Read on as I list the top ways of making your website mobile friendly.

URL schemes for mobile

Although we can argue the various differences between regular HTML and HTML5, they don’t mean anything in terms of marketing efficiency. Most of the uniqueness comes from different functionalities of the hardware; 3G, WIFI, GPS, and more from the Operating System (OS) or software, such as app connectivity. App connectivity is when a smart phone runs another application when you click on a link on a mobile web browser – it’s what makes mobile web so convenient. To integrate new functions, we use a custom URL, scheme whose format looks like the following:

custom://function/pathorid

Mobile sites can make calls

One of the most important URL schemes to learn is how to set up your site to make a phone call. Ex:

You need to put the full phone number including the country code with plus(+) symbol (see above). Once a visitor clicks a “Call me” link, the user’s phone will automatically call the number that you input.

Mobile sites can send text messages

In a similar way, you can also create a link to let users text your number.

How about “FaceTime” me?

If you’re intent on contacting your customers even more intimately, you can include an innovative FaceTime link, demonstrated below:

If you are using a Mac or iPod touch 4^th generation, input your Apple ID instead of your phone number. Ex:

App connectivity

Some cell phones’ mobile functions are developed to operate in other applications such as Google Maps, YouTube, iTunes, the iPhone’s App Store, iBooks Store, and third-party social applications, such as Facebook, Twitter, Foursquare, etc. For example, many websites will direct users to Google Maps when they search for a business’s location. Very helpful, but once users click on these links, they will be directed away from your website. With this in mind, you might consider a different approach to track the outbound traffic[1].

Google Maps

If you want to show a map and pinpoint a certain place, you can include a Google Maps link, demonstrated below:

{ } values need to be replaced with numbers that indicate the selected location. It’s still a HTTP URL scheme, but Apple devices recognize it and automatically switch to a map application on the iPhone, not the actual Google Maps website.

YouTube

Like Google Maps, regular YouTube links will link to a YouTube application. See below:

Facebook

Facebook has its own URL scheme, which could link to a user’s newsfeed, friends, etc. However, at the moment linking to a certain fan page[2] has been blocked in the most recent version of the Facebook application. We’re continuing to investigate if there is a way around this. Stay tuned.

Twitter

Twitter also has its own URL scheme as follows[3]:

Foursquare

Foursquare is location-based service where users can check-in when they arrive at a store, restaurant or other business. Businesses can include a link to their user profile or venue page.

To link to a user profile:

To link to a venue:

Notice that the venue ID should be 24 bytes, or letters/numbers, long which is used in Foursquare API v2.

iTunes

If you have an album or podcast in the iTunes Store, you can create a link for that on your website. Ex:

App Store

Similar to the URL for the iTunes Store, you can create a link to the iPhone App Store. Ex:

iBooks Store

Some sources say that we can link using the “itms-books:” URL scheme[4], but what I figured out is that “http://itunes.apple.com/{Country Code}/book/{ISBN}”[5] will also work. Ex:

Other tricks

This looks like a tricky one, but with a little guidance it’s not too difficult. Including mobile Safari running in iOS has unique protocol named “data:” which can link to an offline page whose source is located in the link itself[6]. Ex:

Summing Up the Elements

No matter what features you choose to include in your mobile website, you still need to check the site’s compatibility for each device. For example, a link to Twitter will not work on smart phones that are not an iOS device or on phones that do not have a Twitter application already installed. As you get your site mobile ready, it’s helpful to engage an expert in the beginning stages. Once you have a handle on writing the URL code and deciding how and where to include it on your website, you’ll be ready to introduce your business to the rapidly growing world of mobile web users.

For more information about making your website mobile-ready, watch our video presentation here: www.domusdigital.com/getmobileready

[2] http://mobileorchard.com/opening-the-facebook-app-to-your-facebook-fan-page/

[3] http://handleopenurl.com/scheme/twitter

[4] http://stackoverflow.com/questions/2594321/how-to-launch-ibooks-e-reader-programmatically-on-ipad/2596002

[5] http://essentialworks.co.uk/blog/2010/06/how-to-link-to-books-on-the-ibooks-store/

[6] http://handleopenurl.com/scheme/apple-safari-data
CodeProject

The “Like” button is now the alpha and omega of media conversions, leading to the fact that most traffic has been driven from the “Like” button, and it’s good enough to be considered a final goal in social media engagement. Quick question for you:  Do you track “Likes” and calculate how much money you spend per one “Like” or how much value one “Like” generates? If your answer is no, go to the movie theater and watch the Social Network and see what 500M friends means.

Embedding the “Like” button on your website as most of you probably have gives you the most basic connectivity with Facebook; however, if you don’t set up toolbox to track the “Likes” then you’re cheating yourself.  Facebook has announced their simple analytic tool, “Insights,” which allows you to count “Likes” in addition to the click rates of your fan page, applications, and your website outside Facebook.

As far as tracking your Facebook fan page goes, it’s already set up for you.  You can use the “Insights” menu on the left side of the fan page, but you also need to put Facebook meta tags on your web pages as well. In order to obtain the meta tag, go to http://www.facebook.com/insights and press “Insights for your domain.” Then you can bind your domain with Insights and get a meta tag such as <meta property=”fb:admins” content=”xxxx” />. Put this meta tag on your web pages’ headers, then Facebook will count “Likes” from your website.  Easier than you thought!

Although Facebook “Insights” gives your website useful statistics of social activities, it can’t be combined with your media conversions through campaign, landing page, website, email blasts, direct mail, mobile page, or mobile app by itself.

Additionally, there are two tricks to combine “Like” activities into existing analytics solutions, such as Google Analytics. The first trick is to create a script to monitor “Like” clicks.   Facebook provides a javascript SDK with an event handler object named “FB.Event.”  With “FB.Event” you can trigger every “Like” click by putting “FB.Event” subscribe(‘edge.create’, function(response) { … }); on your page.  Track away!

Another trick is to integrate Facebook Insights with Google Analytics using Facebook’s Graph API. Utilizing this solution, you can pull analytic data from Facebook Insights by time range using Graph API, and cross-reference it with Google Analytics using the Google Analytics API.  Then, you can finally merge all data into one unified report. This solution can give you significant views of which users clicked “Like” grouped by campaign, age, sex, location and etc. The only drawback to this solution is that it requires several programming techniques including Web Service, FBML, Facebook Graph API, the Google Analytics API, oAuth, and etc.   But in the end, all the sweat and tears are worth it.

Social Media, tracking, and programming is a capability and product offering of Domus Digital.  We’re here to help!

Domus is a leading edge internet marketing agency that brings its full range of classic marketing expertise to its hi-tech digital capabilities. For more information on how Domus can help you accurately analyze your internet presence and develop effective strategies to further your brand, visit us at http://www.domusinc.com.CodeProject

If we’ve learned anything from social media, it’s that we need to be where our customers are. According to Morgan Stanley, mobile internet grows faster than any other platforms including Netscape, and AOL in history.  Customers, and more importantly, NEW customers, are on their mobile phones.

It’s clearer than ever – mobile marketing is something you simply can’t miss.  So what do phone users see when they go to your website?  There is a fundamental design difference between a regular website and a mobile website.  It’s worth grabbing your phone and taking a look. We’ll wait.

A mobile site needs to have a different content structure for viewing in palm sized screens.  It can’t have too much information in one screen. Customers can zoom in on your microscopic content, but who wants to do that?

Mobile searchers are on a mission.  They want an address or phone number, a menu, movie times, store hours, or a quick drink not only by searching keywords, but also by geography.  And they want it NOW.  A mobile site should be set up to serve up every types of information.

Mobile social media is also pumping up traffic to your mobile web.  I’m sure you’re not surprised to learn that Facebook has surpassed Google to become the top source for web traffic, but you should take note that the Facebook application for smartphones is ranked #1 in popularity across most smartphone platforms.  Once users “like” your page’s content or products, it needs to be displayed correctly in both desktop and mobile forms.

It’s just a simple way to make your site instantly more accessible to a mobile user.

First, revisit the existing website, evaluate what’s currently there, and more importantly, what you want to see there.  Then you can begin to plan your mobile content and information architecture.

Next, consider new user experience (UX), such as multi-touch and gesture zooming in/out or selection options, which are popular in mobile UX. Inconsistency between touch and mouse interface can block some functions of your website.  For example, a rollover menu or image will not work on mobile device at all.  Keep these portions of your website in mind when evaluating your site.  User interaction should be re-considered and re-created in all applicable areas of your website.

Also, please be aware of Flash and its drawbacks for mobile web.  Cell phones and smart phones are not compatible with Flash.  Period.  If your website uses Flash mobile users are seeing a whole lot of nothing. (Technically, Android devices do currently support Flash but practically performance is very bad).

Lastly, re-implement new analytics that can track mobile activities.  Keep in mind that you need to track not only web traffic sources, but also “app traffic sources,” which can be more tricky.  Location-based query and phone-query should be considered and counted as well.

In the March 2010 issue of Fast Company Magazine, it was noted that US Cell phone penetration was at 34% in 2000 and increased to 89% in 2010.  While those figures are impressive, they don’t point out a very critical detail of today’s cell phone: it’s not a cell phone at all, it’s a smart phone.  Phones today are used for so much more than talking and texting – they’re handheld computers and with the right features they can connect to the internet, engage in social  media, upload videos, and if your business has a functional mobile site, lead customers directly to you.  If your site is not smart phone compatible, then throw in the towel, because more than half of cell phone internet users go online daily through their mobile device and its rate is increasing.  But if you can sustain business by losing half your customers – then please, let us know how.

Domus is an interactive agency with the ability to help you transform your business into a mobile machine with 24/7 access through smart phone technology.  Let us help you.CodeProject

First, it can accept a user’s gestures, not only on the touch screen but also by motion. For example, you can create a banner ad showing a soda bottle, allowing users to shake it until it explodes. Using the kit, you can also develop ads that detect orientation.

Next, the iAd JS provides for integration with social media. When iAd is activated, the user is online; therefore, it can connect to a social network and download dynamic content to the banner. It’s also possible to update real-time status of an advertising campaign, such as competitive or ranking information.

Based on user interaction, it can also store an image generated by the banner to the iPhone’s photo gallery, so users can see ad images on their albums. For example, by utilizing social media integration, an iAd banner can create and save a user’s future baby photo with campaign copy based on a photo identified by Facebook ID.

Domus has full iAd creation capabilities and is actively involved in development projects for our clients. For more information, please visit us at http://www.domusinc.com.

Below are some key points -

1. Developers will be able to embed ads in their apps using the AdBannerView object. After developers embed ads in their apps, they will start earning revenue.
2. iAd will use an ad network. When adding iAd to an app, developers will choose to display their apps among different segments available in the ad network.
3. iAd includes standard ad sizes including 320×50 for portrait banner ads and 480×32 for landscape banner ads. The ads are shown in the background of an app.
4. The iAd program can be enabled and disabled. App developers can recognize if iAd is loaded by bannerLoaded property while cancelBannerViewAction allows applications to cancel displaying iAd.
5. Because developers can shutdown iAd at any time, revenue wouldn’t be calculated by PPC or PPV but instead a new way that is to be determined by Apple. Apple mentions that revenue can be lower if developers let apps close iAd frequently.
6. Lastly, this technical document only covers the iPhone and iPod touch but not yet the iPad.

We are eagerly awaiting more details on iAd as they become available.