Overview

When writing markup for Pugpig, there are a few things you should keep in mind. This page documents our suggested best practices for Pugpig markup.

This section describes things you should be aware of when creating HTML pages for content in Pugpig. It is very relevant when creating full page interstitial adverts too, so should be shared with any publisher/brand/agency that are creating their own adverts. Most HTML authoring tools (for example, Tumult Hype) will create HTML that is valid and works but at times there are app, device or O/S considerations that don't apply when creating a webpage for the browser.

Style your content responsively: Android has so many different screen layouts that trying to target exact sizes is unworkable. You can still target specific device resolutions (like the iPad or iPhone) using CSS3 media queries.

Read this: Recommended design development approach-Responsive-HTML

Check your content boundaries: Pugpig uses document.body.scrollWidth to work out the width of your page. If you have any floating elements outside of your main flow that affect the page width, you may end up with unexpected panes or unexpected scrolling behaviour.

To create columned content, use CSS3 columns to allow your content to flow into as many columns as needed. The content should be no higher than the device height - and the columns should be an appropriate width to fit nicely in a pane. If the paning functionality is turned on in the app code, Pugpig will pane the content. To create scrolling content make your HTML no wider than the device width, and allow it to flow down the page.

Avoid fixed position elements: It's unreliable on older mobile browsers.

Don't include fixed position or scrollable elements at snapshot time: Certain versions of Android don't show these elements in the snapshots. Apply the required styles after snapshotting has completed

Start animations after snapshotting has completed: Your snapshots won't match your page, and this will be perceived as flicker. Pugpig can generate Javascript when the snapshot is ready. You should use this to start required animations.

Older Android devices don't support overflow scrolling: If you intend to support pre-HONEYCOMB Android devices and want overflow scrolling, you will need to handle it yourself with Javascript. We suggest injecting a style on older devices and using this to determine if Javascript scrolling is required.

Stop phone numbers being styled by the webview: Meta tag for disabling telephone number styling -

<meta name="format-detection"content="telephone=no"/>

Detecting orientation change

Use media selectors to decide on an orientation. Injecting a style for the orientation with javascript (by detecting width and height) is unreliable. Suggested selectors are:

@media all and (orientation:landscape) {
  /* landscape styles */
}

@media all and (orientation:portrait) {
  /* portrait styles */
}

Remember your ad can rotate at any time - design animations accordingly. If you want your ad to lock orientation, you’ll need to do it yourself.

If your JavaScript needs to know the current orientation, you can use the following example function:

pugpigOrientation = function(){
  var orientation = “portrait”;
  if(document.body.scrollWidth>768){
   orientation = “landscape”;
  }
return orientation;
}

Using injected body classes

The framework may inject a class into the body tag (for example for a theme change or to toggle between day and night mode). Use the class of the body to determine night mode (for example, it'll include a class name of 'nightmode'). Base your transitions on CSS rather than using javascript to detect the injected attribute - it may change..