Image Guidelines

Images can either be added within modular pages, or as ‘Featured Images’ to go along with a content item, to be displayed within a list alongside the title of the item.

An image on a modular page:

A Featured Image within a list:

 

Guidelines – Images within pages

Any images you upload to a modular page will display exactly ‘as-is’ without any cropping. You therefore don’t really need to worry about about the aspect ratio of these images too much, as anything goes!

Please consider the size of your images before uploading. Remember that your users may be using their own data connection to view your content. They’re going to have a smoother experience and it will be lighter on their data allowance if you choose images that can maintain quality in a lower file size. Try to keep your images below 1MB in size.

Guidelines – Featured images

When you set a featured image for a content item or list, that image will get cropped to an approximate 4:3 aspect ratio.

Examples of a 4:3 aspect ratio:

800x600px
960x720px
1400x1050px
1440x1080px

As we don’t currently have a cropping tool within the CMS, you’ll need to crop your featured image as appropriate, before uploading it.

For example, if we were to try setting this 300x148px image as a featured image for a page:

 

 

Then it’s going to be cropped to a 4:3 ratio, and we’ll lose some of the text. It would look like this:

 

 

However, were we to crop the image to a 4:3 aspect ratio by adding some whitespace around it:

 

 

Now that’s it’s close to a 4:3 aspect ratio, it’s not going to get cropped:

 

 

The same goes for an image that you can’t add whitespace to. If you have a wide image to use for a featured image, then crop it to 4:3 ratio before uploading it, so that you can choose which part of the image is featured:

 

Create your app structure with lists

In TheAppBuilder CMS, a list is kind of like a category or a section. If you’re adding a list, you’re saying “this is a place I’m going to add things in to”. For example, if you wanted to have a section for latest news in your app, you would add a ‘List’ called latest news, and inside that list you would add each individual news story. Or cat meme… whatever you find newsworthy, we’re not here to judge.

Whatever you add to the ‘Main Menu’ in the CMS, is what appears in the sidebar menu in the app:

 

 

You can see in the CMS, each of these main menu items has been added as a ‘list’.

Before you start adding content to the CMS, take some time to plan out the structure of your app. What are your top level (main menu) sections (lists) and what kind of content do you want to put in each of those lists?

Of course, not everything in the main menu needs to be a list if it’s not appropriate, but creating your lists and the general outline of your app structure before adding content, helps to make a more streamlined and focused experience for your users.

A handy tip:

Don’t throw the kitchen sink at it!

It’s tempting to create loads of top-level sections with sub-lists ten levels deep for every possible area of your business, but remember that the more sections and lists you create, the more content that you’ll need to fill them up, and to keep them up to date. Start relatively small, build up some content, get user feedback, and add more depending on what your users and business need. Keep it as lean and sleek as possible.

You can always add more content at any time, but there’s nothing as sad as a forgotten old section of your app containing outdated information that hasn’t been updated in months. It breaks our hearts ūüôĀ

Speaking of sub-lists (a list within a list), don’t forget that instead of sub-sections for different departments, you can use our content segmentation feature¬†to publish content visible to different groups of people, but in the same list!

 

 

 

Text, Images, Videos, Downloads and Links on a Page

Whereas a ‘list’ is a section where you want to put individual pieces of content, the ‘Page’ is a single post that you can add within a list.

The page widget is made up of easy to use modules, allowing you full flexibility to add text, images, videos and other web content, and to attach files. Each module on a page is edited independently, and the order of modules can easily be changed.

To add a Page, begin by selecting the + icon within your list, and choosing the Page widget:

 

Now that you have added your page widget, you should enter the page title, then select the + icon to add your first module on the page:

 

 

OK! Now you have created the page and given it a title. Select one of the module types to begin adding content on the page. We’ll start with text, seeing as you’ll probably have some text on your page.


Adding a Text Module

When adding a text module, you will be presented with some editing tools, allowing you to change the format of the text, bullet lists and insert links. While the text box initially looks small, fret not… it will automatically re-size as you type or copy text in to it.

 

 

 

Easy! Now, you’ll notice that above and below the module that you have added on the page, there are more green + symbols. Pressing one of these will allow you to add your next module, either above or below the current one. The red X will delete the module that you currently have selected. So don’t press that unless you definitely want all of your hard work obliterated.

If you press ‘Save and Publish Now’ at this stage, your new page will appear (in whichever list you’re publishing to) with the text you have just added:

 

 

 

Adding an Image Module

Now lets add an image to go along with the text. Click the green + symbol either above or below the text module and choose ‘image’. You’ll be directed to open the media library, where you can select a previously uploaded image, or add a new one.

To add a new one, either drag and drop and image from your PC, or press Choose File to allow to allow you to upload:

 

 

 

There’s a separate guide for¬† deleting and searching in the media library – so if that’s what you’re looking for, then go ahead and click here.¬† As you can see below, we have now added an image module below our text module:

 

 

 

Re-Ordering Modules on the Page

You’ll also notice now that we have two modules, another icon has appeared to the right – green ‘up and down’ arrows. These allow you to easily re-order the modules on the page. For example, below you can see that we have clicked the ‘up arrow’ to move the image module to the top of the page.

 

Adding a Video Module

Adding a video module works in the same way as the image module, where you’ll have to ope the media library, where you can choose a previously uploaded video, or upload a new one.

Videos added directly to the CMS using the video module will stream on the user’s device. We currently support mp4 videos, up to a maximum of 50MB. If your video is larger than this, you can compress it, or embed it from a third party service like YouTube or Vimeo.

 

 

When you add a video directly from your PC, on the app it will show a grey box with a play button. If you want to set a featured (thumbnail) image for the video, you can do that by pressing the blue, ‘Set Featured Image’ button:

 

Adding a Download Module

The download module allows you to present a file on the page for your users to download. You can upload any type of file, but we recommend PDFs because your app has a PDF reader built-in.

 

 

 

 

 

 

 

 

 

 

A download widget is added in the same way as an image or video module, where you’ll open the media library and then either choose a file, or select one from your PC.

 

Adding an HTML Module

You can embed third party content in your app using the HTML module. You’ll need the correct embed code to do so. Here, you can embed things like videos from YouTube or Vimeo, animated GIFs, polls and quizzes from Playbuzz or Apester, or Maps from Google Maps.

 

Adding an ‘Existing’ Module

The ‘existing’ module allows you to link to other in-app content from within your page. For example, if you added a new item to your main menu, and you wanted to make a news story about your new section in the app, you can link straight to it from within your story.

If you select the¬† + icon in our modular page and choose ‘existing’, you are presented with a list of all content in your app, which is also sortable and searchable, to make it easier to find what you’re looking for:

    

 

Simply select the app content that you wish to link to by clicking on it, and it will be added to the module. In the example above, we have added an ‘existing’ module below a news story, to link the user to the news feed. Removing an ‘existing’ module only removes it from this location. Only when all instances of linked content are removed, will the item be deleted.

 

Deleting a Module

To delete a module from your page, simply click the red X icon to the right of the module. You will be presented with a verification message asking if you are sure that you wish to delete that content:

Understanding Publishing Statuses

Our publishing method allows you to have control and flexibility over your content.

This allows many different CMS users to work on and publish content independently, without publishing others’ unfinished work.

When you’re in the process of creating a new content item, the status of that content will be ‘draft’:

 

 

It will then remain in the ‘draft’ state until published. You can choose to either publish immediately, or to schedule publication a the date and time of your choosing.

If you click ‘Save & Publish Now’ you’ll see the content status change to ‘Published’, and your content will be available for app users.

 

However, if you instead choose to schedule the publication, you must first click ‘Save’, and then upon clicking on ‘Schedule Publish’, you’ll be asked to choose a date and time. At this date and time, the content will become available in the app, and status will change from ‘draft’ to ‘published’:

 

 

Making a change to an already published content item

If you make a change to a piece of content that has already been published, but click ‘Save’ to save changes without publishing them, you’ll see a different status – Published with changes drafted. This is letting you know that there’s an older version of this page published in the app, but your most recent changes have not yet been published. When you’re ready to publish your recent changes to the app, you click on Save & Publish Now, or schedule the update for a time and date of your choosing.

 

You’ll also be able to see the publication status of items when looking the them from the list view in the CMS, allowing you to quickly identify any pieces of content that are still being worked on:

 

However, please note that when you’re looking at the top-level of a list – although it may show the status of the list as ‘Published’ – it’s still possible that there might be draft content items within that list.

 

 

Publishing in Bulk

It’s possible to publish all draft items at the same time using the ‘publish’ menu item on the left of the CMS. Using this function will however, publish all draft content across all of your app – so if using this, be sure that everything is actually ready to be published. If you have been working on only one item, you should simply publish it using the options above.

 

 

Adding Web, Email and Telephone links in Text

In this section:

  • Adding Web Links in Text
  • Adding Email Links in Text
  • Adding Telephone Links in Text

Adding Web links in Text

To add a web link, simply type the URL then press the space bar. This will automatically create a link. You will know that it has been successful as the text will change to blue after you press space. For example:

Should you wish to change your link to display some custom text instead of the URL, highlight the URL and click the ‘Insert / Edit Link’ button

In the pop up, you can enter the text that you wish to display for the user to tap to open the link, then click OK:


The link will now be updated to the text that you have set:

Adding Email Links in Text

As above with web links, pressing the space bar after entering an email address will also create a link which will open your user’s default email client when tapped, with the email address in the ‘to’ field.

If you wish to change the email address to display some custom text instead of the email address, click the ‘Insert/Edit Link’ button as before, and set the custom text before clicking OK:

 

 

You will notice that the URL field contains ‘mailto:’ before the email address. Please leave this in place to allow the link to open your user’s email client.

Once you click OK, the email link will be changed to the custom text:

When a user taps on this text, it will open their smartphone’s default email client, with the email address populated in the ‘to’ field:

Adding Telephone Links in Text

If you wish to add tappable telephone links to allow your users to dial a number directly from the app, you should enter your text as normal, highlight the number, then click on the ‘Insert/Edit Link’ button:

In the URL field, type tel: followed by your number, without spaces. In the ‘text to display field’, you can leave spaces in the number should you wish:

 

Press OK, and your number will become a link. When a user taps on the number, it will open their smartphone’s default dialler:

 

 

Choosing a Layout

Our new system offers you much more control over how your content looks. You can now choose from eight layouts, with our without a hero image, allowing you sixteen different layout options. In addition, you can choose to display an icon indicating the type of media, and the date of publication.

Choosing a layout type

Choose the Layout tab to change your content’s layout

 Each layout displays your content in a different way:

Small List without Hero
Small List with Hero

 

 

 

 

 

 

Medium without Hero
Medium with Hero

 

 

 

 

 

 

2 Column without Hero
2 Column with Hero

 

 

 

 

 

 

Small magazine without hero
Small magazine with hero

 

 

 

 

 

 

Large Magazine
Feed list

 

 

 

 

 

 

Circles List
Gallery List

 

 

 

 

 

In addition, you can choose to include icons showing the media type, date of publication, or time since publication, using these controls on the layout screen

Use your sandbox app to experiment and find out which layout best suits the type of content you are adding. If you have a list of documents with no imagery, then you might find that the feed list compensates by automatically including colourful icons.¬†However if you have lots of beautiful images to go along with your content, the large magazine list will allow it to catch your user’s eye.