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.




Tuesday, September 2, 2014

Get URL - A Tool for Enhancing Navigation Inside (and Outside) Your App

Ever thought about linking At The Event or a custom tab to a video or music album? What about creating a QR Code for a specific event to use in a marketing campaign?

The "Get URL" tool lets you quickly get an in-app or external URL to any tab or content that you've already added.

How Does It Work?



How Might You Use It?


Deep Linking for Custom Tabs 

A few months ago, we talked about how to make your app unique with custom tabs.  If you have quite a few custom tabs that are related to each other, then you may want to create a submenu tab with deeper links to those related custom tabs.  The submenu tab visually organizes information for the end user.


To create a submenu tab with deep linking:

  • Start by creating the custom tabs that will be featured on the submenu tab.
  • Go to Mobile >> Tabs in the control panel and disable the Display in App checkbox for each of those custom tabs.
  • Create the submenu tab.
  • Add a button, bullet, or text label for each custom tab to be featured.
  • Use the Get URL tool to find the In-App Link for each custom tab.
  • Connect the In-App Link to its respective item on the submenu page.

Creating Custom Actions for At The Event's Info Screen

As the video demonstrates, you can use the Get URL tool to add custom actions to the Info screen when you activate At The Event for a performance.


When you use the Get URL tool to add a custom action to At The Event, be sure to use the In-App Link to keep the navigation within your mobile app.

Linking to App Content from an External Source

The video also mentions using the Get URL tool to connect a QR code with content in your app.  (To learn more about QR codes, click here.)  You can also use the Get URL tool to share app content like streaming music via email and social media.

If you are going to link to in-app content from an outside source, be sure to use the External URL associated with your content.

Any questions?  Contact support@instantencore.com

Wednesday, August 6, 2014

Smart App Download URL: How to Connect Your Mobile Users Directly to the Correct App for Their Devices

Now that you've started using the new At-The-Event feature in your mobile apps, you will want to make sure that your audience has the Apple or Android app downloaded to their mobile device.

Including the Redirect Script on your standard website takes mobile users to the mobile website, which will display a banner link to the proper app store. Word of mouth also helps build app awareness, but nothing beats providing your patrons with direct links to the Apple App Store and Google Play pages for their specific devices.

To help you with this, we've created a Smart App Download URL (SmartURL) that will automatically detect the type of mobile device accessing it and redirect the user to the link on the appropriate app store for their device.  If the link is visited from a desktop or laptop computer, it will display a page with links to both app stores.

How the Smart App Download URL appears on a desktop computer.


Since At The Event is specifically available to your Apple and Android app subscribers, the Smart App Download URL guides users directly to those apps and bypasses the mobile website, which is not compatible with At The Event.

Building the URL

The first step is to build the SmartURL. This is comprised of three parts starting with the base URL. To begin, copy and paste this text:


http://services.instantencore.com/Util/Share/DownloadApp/

Next, you will need to include your Partner ID - a unique 7 digit number linked to your account which lets the URL know to connect to your specific apps.

  • Find this by logging in to your Control Panel
  • Click your Partner Name in the upper right corner to visit your Partner Page on InstantEncore
  • Copy the number at the end of the URL:

 

Lastly, you will need to provide a Qualifier. This can be anything, but for basic uses we suggest using the "Menu App Name" from the Mobile >> Basic Settings page in your Control Panel:


These elements are then combined into a single URL that looks like:
http://services.instantencore.com/Util/Share/DownloadApp/PartnerID/Qualifier

For example:
http://services.instantencore.com/Util/Share/DownloadApp/5109242/bcsd2go

Be sure to visit the URL in your web browser and make sure it is valid before publishing it anywhere!

Advanced Techniques

As we mentioned, this link can be used in a variety of different mediums.  If you want to keep track of how much the link is used in different ways, you can use anything you like as a qualifier such as:

http://services.instantencore.com/Util/Share/DownloadApp/5109242/qrcode
http://services.instantencore.com/Util/Share/DownloadApp/5109242/twitter
http://services.instantencore.com/Util/Share/DownloadApp/5109242/facebook
http://services.instantencore.com/Util/Share/DownloadApp/5109242/email



Short URL

Now these URLs are very useful, but they are not practical for social media.  To make them more manageable, we recommend Google's URL shortening service: Goo.gl


In additional to an easy-to-use shortened URL, this service provides some "Details"; basic analytics to help you keep track of exposure including the number of "clicks" and what Platform (iPhone, Linux - which includes Android, etc) visited the link. These analytics are important to have as they will not be recorded by your regular mobile app's Google Analytics.


QR Codes

Also available in the "Details" area of the Goo.gl short URL is a QR Code image.



You can save this image to your computer and then use it in your printed materials such as signage, flyers, and programs.  You could even go so far as to create different SmartURLs for different printed methods to get a fine-grained view of what methods work best:

http://services.instantencore.com/Util/Share/DownloadApp/5109242/qrBanner
http://services.instantencore.com/Util/Share/DownloadApp/5109242/qrPostcard
http://services.instantencore.com/Util/Share/DownloadApp/5109242/qrProgram


QR Codes are the ideal use for SmartURLs as you are guaranteed that your audience member is already using their mobile device and will be able to bring up the correct app with immediate access to your At-The-Event content.

Tip:  When adding a QR code to a postcard, program or other printed item, it is best to include a bit of text telling the mobile user exactly where that QR code will take them.  For example, "Scan this code with your smartphone to download our mobile app and access exclusive content for tonight's show."