The following guidelines should be followed for optimal use of HTML content in Showpad.
Dynamic programming languages like Ruby, PHP, .NET, etc require specific server software and will not run in the Showpad app.
Flash is not fully supported since it's an older technology and that may result in the pages not displaying as expected.
It is possible to run web apps inside Showpad even when there is no internet connection. The requirement for this is that all resources are available in the zip archive.
Script source & Google Analytics
Showpad web app
On the Showpad web app, HTML content is requested over https, so be sure not to use HTTP as source script, since this will keep the app from loading correctly on most browsers. Best practice is to use "//ajax.Googleapi" as source script. This way the browser will decide which protocol to load the source from the base on the parent website.
Showpad Mobile devices
On mobile devices, HTML content is run locally (using file:// protocol). Cookies don't work there, you can use local storage instead.
- As a consequence, Google Analytics does not work by default for mobile. For a workaround, please see this link
- Mobile devices can run HTML content offline. Google Analytics doesn't support offline tracking by default, for a workaround, please find this link
- Showpad can be accessed on iOS, Android, browser and Windows (8.1+). This means the web app should fit multiple screen sizes, so using a responsive design is a good idea. The technologies used should fit these devices. On iOS/Android we use the standard web kit (Safari/Chrome). Showpad Web supports IE9 (and higher), Chrome, Safari and Firefox. For specific Windows guidelines, click here.
Showpad navigation & js functions
On iOS there is an icon top left to enable the Showpad navigation to quit the web app. This means that this space should be reserved for that button and no action objects of the web app itself.
Please see this article for the full report on js functions we offer in HTML content.
It is possible to use local storage to save the state of a web app, so you can leave the app and come back to that state. Think of a filled in form, a language selection, etc.
When developing your HTML5 file, you should keep in mind that you cannot use iFrames for internal links since they will not work on the iPad.
HTML development for Windows
In this article, we explain how HTML content development should be used on Windows devices.
For utilization in the Showpad web app, please use the <a href=“”> tag method for asset links.
For use in the Showpad web app, please use the <a href=“”> tag method for hyperlinks.
Also keep in mind that Showpad loads content over the https protocol and hyperlinks will also need to be loaded over https.
Also keep in mind section 2 about script source when you're linking to external pages.
Keep in mind the following developer's best practices:
- Know your hardware limits, it's not a spaceship you're running the code on.
- Know your external libraries, they provide you with easy to use APIs, but they might come with the cost of performance when not used correctly -> jQuery: `$()` is expensive, cache your selectors, chain your action/methods.
- Don't use JS animations and setTimeout, either use CSS animations (preferable 3d, so the GPU takes over the calculations, not the CPU) or use requestAnimationFrame.
- Keep your DOM as clean as possible. Hide/remove elements you are not using.
- Preloading assets are only interesting when they are coming from the network, not when they are stored on the device, also don't keep them in your DOM and make sure they have the right cache headers (or you won't be doing any preloading at all)
- Test inside Showpad.
- Don’t develop for a fixed viewport, not all devices are 1024*768 and devices can be rotated. If the app you're developing needs to be user landscape or portrait, be sure to add a message when used incorrectly.
- When sharing HTML content to a client (collection viewer), the HTML content will be shown in an iframe, make sure your viewport dimensions and overflow is set up correctly
- When implementing a button that does a location.reload(), using a click handler in JS, this will not work on the Web App. From inside the iframe try setting 'document.location.href = ' instead of window.location.reload()
For more information please contact our support team.