With EventPilot, you have a lot of flexibility to add event related content from housing information to event hours to bus schedules or emergency contacts. Adding this content as HTML directly within your native event app offers great benefits:

  • offline viewing
  • searchable – included in Global Search
  • accessible either via banner on NOW screen or navigation tab
  • mobile optimized (with the right tags – described below)

The tips below help you to quickly create a polished looking content page that works well with your conference app and looks great on mobile devices. Once you are done, copy the HTML source content and paste into the EventPilot CMS.

1. Use a Visual Editor with HTML Source access

Writing HTML code from scratch requires some HTML knowledge and it may be faster to use one of the many free online editors available to create your HTML code. It’s a good idea to look for one that doesn’t add extraneous HTML content, is still easy to use, and allows you to edit the source code.

You can try http://htmleditor.in/index.html

2. Optimize for Mobile Viewing

A basic HTML page is not optimized for mobile devices and requires a couple of lines to your HTML source code to correct the viewing experience. Once these two lines are added, your page will look great on your device:

<meta name='HandheldFriendly' content='TRUE' /> 
<meta name='viewport' content='width=device-width' />

Switch to the Source code view in your HTML editor and paste these two lines within your <head> … </head> tags:

<html>
	<head>
		 <title>HTML Online Editor Sample</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
		 <meta content="TRUE" name="HandheldFriendly" /> 
<meta content="width=device-width" name="viewport" /> 
</head>
<body> your actual page content ...
</body>
</html>

Please note that tables and large images can impact the viewing on mobile devices. Avoid large tables and follow the image tip #7 below.

3. Pick a Font that Matches Your App

If no font is specified within the HTML code, the browser will display its default font – which may be a serif font and look quite different than the sans-serif fonts used within the app. The two examples below have a different appearance even though the font size is the same:

This is a serif font – like Times New Roman. 

This is a sans-serif font – like Helvetica.

You can either use your visual editor to choose a sans-serif font or simply add the following section into your <head> … </head> tags:

               <style type="text/css">
                    body {
                      font-family: arial,helvetica,sans-serif;
                    }   
               </style>

If the device has the font Arial installed, it will use it first. If not installed, it’ll check for Helvetica. If that’s not available either, it will pick a sans-serif font available on the device.

<html>
	<head>
		 <title>HTML Online Editor Sample</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
		 <meta content="TRUE" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
             <style type="text/css">
body {
font-family: arial,helvetica,sans-serif;
}
</style>
</head>
<body> your actual page content ...
</body>
</html>

4. Work with Styles to Display Consistent Headlines

Just like MS Word or Google Docs, your HTML editor offers the option to apply Header styles. Using those for your headlines guarantees that your pages look consistent within the app. Only use Header styles for titles and headlines and avoid using different sized font within a paragraph of your page.
Heading 1
Heading 2
Heading 3
Normal paragraph text. 

 

 5. Apply Your Event Color to Highlight Text

Check your App Settings in the EventPilot CMS for your Primary Event Color. This color is used throughout different views within your custom app. You can take advantage of this color to create a page with a coherent visual appearance within your app.

In the visual HTML editor, select your text and click on the font color icon. Select More Colors … and enter your primary color in the empty field. Ensure to include the hashtag # e.g. #37B05F.

If you need additional yet complementary colors or the right shades or your primary color, try Adobe’s free Kuler tool to create your own palette.

6. Include Links for a Seamless Experience

If, for example, you have a page where you are listing award winners, you could link to the award ceremony in the conference agenda so attendees can easily add it to their schedule. Or you create a page with event hours, you can link directly to the exhibitor tab in the app. Contact your Client Relationship Manager at ATIV and we’ll provide you with the URL to insert.

If your attendees have Internet access, you can also add links to external web pages. One example is a “Concierge” page where you could list the different links to local information, local weather, or any other web links that could be useful for your attendees.

 

7. Control Images – File Size and Display Size

If your attendees have good internet access at your venue, you can include images in the content pages. If the image file however is too large, it will take a long time to load and if the image dimensions are too large, the page will not look good on small screens.

First, check the image size using any image editor including Paint on Windows or Preview on Mac. Using the image editor, resize the image to 300 pixels width.

If you don’t have a server from where you can host the image, simply save it in your public DropBox (free file storage and backup in the cloud) folder, right click on the file and select Copy Public Link or Share DropBox Link which creates a URL you can use within your page.

Selecting the little lock symbol and setting it to locked retains the image’s aspect ratio – ensure the display width is 300 pixels or smaller to accommodate the largest number of mobile devices.

Extra Tip: Compress HTML Code

Your HTML Code could take up many lines and pages. There are free tools available that compress the code and remove unnecessary spaces. Try TextFixer.com paste your HTML there first, hit Compress HTML and copy the resulting compressed HTML into the EventPilot CMS.