Monday, November 17, 2014

Promoting Your Mobile Apps - Partner Spotlight: Dallas Summer Musicals

Today we have the pleasure of highlighting one of our newest partners, Dallas Summer Musicals.  This is a well establish theatre organization with 75 years of experience which produces performances throughout the year.

They are also one of our newer partners, with their Apps being published just one month ago.  In this short time, they have seen an App adoption rate for both iOS and Android that is a factor of 10 higher than some other similar sized arts organizations, and even higher than some larger organizations. What is their secret?

Example: Android downloads over a one month period


The key is simple: Communication.

I reached out to them to find out what specific steps they have taken in promoting their app to their audience:

  • Promoted the App on Facebook, Twitter, and other social platforms.
  • Included links on the footer of their website and marketing emails.
  • Advertised along side of their Season Tickets.
  • Updated their previous App to promote the new App with download links.
  • Sent special email announcement to one of their audience lists with over 50,000 contacts.

They were also gracious enough to let us in on some of their plans for the future:

  • Remind patrons to download the app, emphasizing the At-The-Event content, when sending out performance reminder emails.
  • Planning to produce a one minute (or less) introduction video about the App that will play in the lobby and in the theater before performances
  • Offer business cards in the venue to further promote the app

Dallas Summer Musicals App Promotion Card


What we see is a comprehensive campaign to make sure that their audience is not just told, but informed about the App at every opportunity both at home and at their events.

When thinking about how to promote your own App, keep in mind that simply advertising that you have an App isn't necessarily sufficient.  Letting your audience know what the App can do for them will give them a reason to check it out.  A Mobile App can be an extremely valuable tool, but if you don't let your audience know all about it, they won't use it!

Friday, October 31, 2014

Tips for Promoting Your Mobile App, Part 1: Encouraging Downloads When Patrons Are Off-Site

One of the questions our partners frequently ask is, "How should we promote our app?"  To help you answer that question, we decided to provide you with some tips.  However, there is so much information that we had to break it into two separate posts.

We'll start with tips for how to promote your app when the patrons are not at one of your events.

8 Tips for promoting downloads when the audience is not at your event or performance


1.  Encourage mobile users who visit your website to download your app.  Makes sense right?  They are already on their mobile devices, so you should take the opportunity to direct them to your app.  Here are two ways you can do this:
Silk Road Rising uses the
mobile redirect script to
send mobile users visiting
their website to the mobile
web version of their app.

  • If you do not have a mobile responsive website or separate mobile site, be sure to use InstantEncore's mobile redirect script. (click here for how-to video)
    • This will redirect mobile users from your standard website to the mobile web version of your app.
    • It will also detect if the mobile user is on an Apple or Android device and present them with a prompt at the top of the screen to download your app on their device.
  • If you do have a mobile responsive site or separate mobile site, feature a notice for your mobile app on the home screen.
    • Provide a short message highlighting what additional features they will have access to by downloading the app.
    • Add the icon for your app to the screen.
    • Link the icon to your app's Smart App Download URL.
    • Instruct the user to tap on the icon to download the app.

2.  Encourage desktop/laptop users who visit your website to download your app.  This one might not be as obvious as the first one.  With the rapid rise of smartphone and tablet users, the probability is strong that people who visit your website on their desktop and laptop computers are also mobile users.  So why not encourage them to download your app? Here are two suggestions:
  • Add mobile app download buttons to your home screen.  
  • Austin Symphony Orchestra uses buttons on their website to
    encourage visitors to download their mobile app.
    • Add a button for both your Apple mobile app and your Android app.
    • Buttons for:  Android  |  Apple
    • Link the button to its appropriate URL.
    • To find the web link for each of your apps:
      • Go to www.instantencore.com
      • At the top where it says "Search or Redeem," enter the name for you or your organization.
      • "Search or Redeem" field on the InstantEncore site.
      • Find and click on your account name to go to your InstantEncore profile.
      • Clicking on the image for your mobile app gives you a drop-down menu with links to your Android and Apple URLs.
Links to Seattle Shakespeare Company's Android and Apple
apps in their InstantEncore profile.

3.  Create a video to spotlight your app.  While this may sound difficult, it really isn't.
  • Decide which features you want to mention and which ones you want to show in use.
  • Write out a script for the video.
  • Consider recruiting one of your artists to be video spokesperson for the app.
  • Practice going through the script while interacting with your device.  
  • Get a sense of how long it takes you to go through the script.  You should be able to highlight the more exciting features in a 1 to 2 minute video.
  • For example: here's an informative and funny video for the 2011 YouTube Symphony mobile app featuring flutist Nina Perlove:

  • At the end of your video, include the Smart App Download URL as the closing image.
  • Upload the video to YouTube - be sure to put the Smart App Download URL in the video's description.
  • Post it everywhere -- embed the video on your website or blog; share it on social media; link to it in email newsletters; etc.

4.  Feature the app prominently in your email communications.  
  • Spotlight your app in e-newsletters, subscriber emails, pre-show emails to ticket holders, etc.

    Email example from Curtis Institute of Music.
  • Be sure to mention your mobile app in confirmation emails for online ticket sales and/or reservations.
  • Include a brief description of your app's features as well as a link to the Smart App Download URL.

5.  Spotlight your app on the back of printed tickets and/or ticket envelopes.
  • Include the app logo and a brief description of the app's value.
  • Highlight the Smart App Download URL.
  • Add a QR Code linked to the Smart App Download URL. (click here for how-to video)

6.  Highlight your app on printed promotional pieces for your events and season.
  • Feature your mobile app and its features in your season brochure.
  • Mention your mobile app and its value in your event postcards, posters, and flyers.
  • Include the app logo, the Smart App Download URL, and/or QR Code.

7.  Alert your social media followers to your app.
  • On a regular basis, post screenshots from your app to highlight new content available in your app.
  • Include a link to the Smart App Download URL. 

8.  Use your App Store Description to highlight its features.  It's not enough to simply send patrons to your app's URL on iTunes or Google Play.  Once they are there, you need to communicate why they should download the app.


In Part 2 of this blog series, we will focus on tips for encouraging app downloads when your patrons are attending your event or performance.

Questions?  Contact us at support@instantencore.com

Thursday, October 16, 2014

Best Practices for Adding Images in Custom Tabs

As you customize your mobile app with unique content via custom tabs, adding images is a great way enhance the content so that your users have a more visually dynamic experience beyond reading a block of text.
An example from Silk Road Rising of how adding an image can enhance a custom tab.
Lets take a look at some best practices for embedding images effectively in custom tabs.

Where to Host Images

First, you need to decide where to host the images. There are a few options available to you.

Your Own Server: If you already have a dedicated server for your main website that you have easy access to, this would be a convenient place to host the images.

Third Party Server: Services like Photobucket and ImageShack offer reliable alternatives.

InstantEncore File Storage: However, we highly recommend hosting images directly on InstantEncore. Under the "Extras" menu in the Control Panel you will find a "File Storage" tool that gives you a quick and easy way to upload images you wish to embed.


Just select the desired file from your computer, provide a simple description and click "Upload".


We provide you with a convenient link to your image which you can copy and use to embed that image in your custom tab.


The major advantage of hosting your images directly on InstantEncore is that, if your website or third party server were to ever experience downtime, those image links would be broken in the App until that server came back online. Hosting your images in our File Storage area ensures that the images in your Custom Tabs will be visible whenever someone is using your App.

How to Embed Images

You can embed images in either the Design or HTML modes of the custom content editor.

Design Mode: The "Design" mode is the default mode when editing a custom tab, and a common way to make quick and easy edits to your custom content. Embedding an image is easy! First copy the URL of your image from our File Storage area (or from your own server or a third party service).

In the custom tab editor, click the icon in the toolbar that looks like a small picture.


Then paste the URL where it asks for the "Image Source". Click on "OK" and your Image will show up in the editor.


Some helpful tips for formatting images with this tool:
  • Depending on the background of your app, you may wish to set a Border Thickness of 2 to 3 pixels to provide some contrast between it and the embedded image.
  • Adding 5 to 10 pixels of Spacing keeps text from pressing right up against the image.
  • While you can set a specific width and height for your image here, with a mobile design in mind you may want to consider using HTML mode and CSS to achieve the most power and control over your custom content with percentage based sizing.

HTML Mode: Working in the "HTML" mode gives you much finer control over your custom content. To add an image in this mode, type <img src="IMAGE URL"> and paste the URL between the quotes.


Our example image is fairly large to accommodate larger screen sizes. This is important as we want to use large images that we can scale down, instead of small images that would look bad when scaled up. So in the preview it will look like this:



Using CSS to Fit Images

By itself, the image is very wide and goes beyond the viewing area of the app, causing the tab to do what we call "free-scrolling" where the user can scroll up, down, left, and right with their finger in order to see all of the content. You'll notice I've also added some sample text at this point to make this feel like a real custom tab.


For usability, in most cases we want to limit scrolling to just up and down, but as your app will be used on devices with different sized screens, we also want to make sure that this content will scale to those different sizes.

Lets explore what CSS can do for us and also take a look at another feature, the "Custom CSS" tool in the "Styles" area of the Mobile App Control Panel.


This tool lets you set custom styles that will be applied to the app. Because we don't want these styles to be applied to everything in the app, just our images, we first need to use a class selector when adding images to the custom tabs. This lets us set CSS for several images without having to type out the code over and over, which makes changes and updates effortless. If you want to have some images take on one style and other images take on a different style, just create a different class for each set.

The HTML for the images in the custom tabs will look something like:

<img class="custom_class" src="IMAGE URL">


And the CSS in the Custom CSS tool will look like:

img.custom_class {
CSS CODE;
}


The .custom_class can be any unique keyword you like and should reflect what the class is being used for. Examples might be .banner, .mapImage, .artist_photos, etc. Specifying img will make sure that other elements that might be assigned the same class aren't affected as well. This may not be needed in your case, but it is a good practice to observe.

height: In all cases, we want to set the height property to height: auto; to make sure that the image will scale with the width and preserve the aspect ratio of the image.

width: Setting the width property to 100% means that the image will take up 100% of the width of its container (not including other margins or padding that may be set by the app). This is good if you want an image to act as a banner that always stretches across the entire screen.

img.custom_class {
height: auto;
width: 100%;
}



One thing to be mindful of is that this can cause an image to scale beyond its original size and lead to reduced image quality, which is why I prefer to use the next option, max-width.

max-width: The max-width property will define the maximum width the image can be. When set as a percentage, this will cause it to scale with its container until it reaches the actual size of the image.

img.custom_class {
height: auto;
max-width: 100%;
}



You'll notice that in this example, the first image looks the same as before, however in the wider example, the image does not continue to grow with the app as it has reached its actual size. This makes the property useful for photos or other situations where strict formatting is not important, but you still want it to scale within reason and without sacrificing quality.

min-width: Very rarely will you want to use the min-width property, but there are occasions. If you find yourself in a position where you need to embed an image with small text or a map with detailed information, you may wish to prevent the image from becoming too small, but still have it scale at larger sizes.

The image will display at normal size unless the container becomes wider than the actual image size, in which case it will start to scale according to what percentage is set.

img.custom_class {
height: auto;
min-width: 100%;
}



Notice that I have included some "fine print" in our example image to help illustrate this point. While we want to avoid "free-scrolling" when possible, ensuring that text content in the image is readable is also a valid concern, and min-width can be used for these instances.


What Else Can We Do?

Play around with the percentages. Set the max-width at 80% instead of 100% to include more white space or a width of 50% to leave room for text next to the image. You might need some other CSS and HTML tools to help get the formatting just right though.

I've linked several times already to w3schools - an outstanding resource for HTML, CSS, and more. It lets you experiment directly on their website before bringing what you've learned into your mobile app.

If you have any questions or run into challenges, email us at support@instantencore.com.

Wednesday, September 24, 2014

Enhance Your App's Events with Things To Know

Every day, new audiences attend performing arts events.  And many of them open their programs only to find program notes written for patrons with a much deeper understanding of the art form, the work, its context, etc.

If you knew that a new patron was attending your event, what would you tell them to guide them toward a positive experience? 

This is the thought that prompted us to develop Things To Know - a new feature in the At The Event module for the mobile suite.

What Is It?

Things to Know is a list of short, interesting, and useful facts related to the event.  These can range from trivia about the programming or people involved with the production to parking information to social media campaigns.  Perhaps you want to let patrons know about near by food options or pre-concert activities? Things to Know can be used for anything that improves your audience's experience.

How Are Arts Organizations Using It?




How Does It Work? 


Step 1: Once you've created an At The Event instance, you will be greeted with a checklist showing you what features are available to you.  Click on "Things to know" to get started adding your first item.


Step 2: The next screen will eventually show you a list of all Things to Know added for the ATE, but to get started, click on "Create your first Thing to Know."


Step 3: Here is where you add the important details. Be sure to include....
  • A Name to help you identify it later (this will not be shown to the public)
  • A relevant image
    • 500px wide by 250px tall is recommended
    • Do not number the images, InstantEncore will do that for you
  •  The text information (HTML is allowed in case you wish to link out to more details)


Once you have everything filled out, click "Add" and your first Thing to Know is done!  You will be able to repeat steps 2 and 3 using the "Add Thing to Know" link until you have added everything you wish to include.


You can manage your existing Things to Know by clicking the Name and making any needed edits.  Re-ordering them can be done using a simple drag-and-drop method. To remove one completely, just click on the trashcan icon to the right.

Monday, September 8, 2014

Adding Auto-Dial Links to Phone Numbers in Your Mobile App

As you've added custom information to your app - such as Accessibility, Parking or Contact information - you may have also included phone numbers that your patrons can call to get further assistance.

Using the instructions in the how-to video below, you can easily turn those phone numbers into links that can be tapped to automatically open the smartphone's call app and dial the number directly with just one tap.