How to create mobile optimised versions

Would it surprise you to know that there’s currently almost 2 billion smartphone users all over the globe? Well, it’s true. And with the steady spread of internet availability and hundreds of new apps and services being launched every day, more content is being consumed on mobile devices now that ever before and it doesn’t look this wave is stopping any time soon. Quite the opposite! The rapid growth of smartphones in use is changing the way we understand and experience content, which is something that you as content creators need take into account otherwise you might miss the opportunity to attract and retain readers who are using mobile devices exclusively. Thus, preparing your content and displaying it in a way that suites mobile users best is almost a necessity and lucky for you, Edition Digital has just the thing.

Edition Digital enables you to create mobile versions of individual pages or sets of pages of your digital edition. When mobile optimised pages are present, the system will automatically determine when the fixed page proportions wouldn’t provide a satisfactory experience on the user’s device and will therefore display the mobile version instead. The user interface where the digital edition is then displayed to the end user will always offer the option the to switch back to the default page display.

To begin creating a mobile version of a page, you need to open that page in the Design tool. There’s more than one way of doing that, but the one we suggest in this situation is from the Workflow, because it enables you to quickly locate the page and open it in the design tool directly from the Pages tab.

After the Design tool opens, have a look at the right-hand Page properties panel, which is slightly different from the rest because it displays properties that are specific to the selected element type. However, when no elements are selected, this panel will display properties of the page you are working on and that’s also where you will find the “Create mobile page” button that will open the mobile editor when clicked.

The mobile editor’s user interface is very simple and easy to use. The left-hand panel contains a collection of all available elements starting with Mobile elements. You can look at these as empty building blocks, each with a specific look, which is defined by the template and theme, and with a specific purpose which is reflected by the element’s name. In addition, you can also reuse elements that you’ve already added to the page layout. These are made available in the Page elements section underneath the Mobile elements.

The purpose of this tool is to facilitate a quick process of creating a vertical structure of elements, which is displayed in the centre work area. To add an element to your structure first grab it from the elements panel and drag it over the work area. If you drag the element up and down the structure you will notice a dotted line that indicates where it is going to be placed so when you find a good spot, go ahead and release your mouse button. If that element is one of the mobile bunch, it will expand automatically so you can immediately add and style text content using the text editor.

The text editor is fairly straightforward, but it’s important to note the difference between a paragraph (press ENTER or RETURN) and a simple line break (press SHIFT+ENTER). Creating a line break means jumping to a new line, whereas creating a paragraph means jumping to a new line while adding additional blank space for separation. When you’re done editing, click the checkmark icon on the left to save your work and close the editor. Adding a page element works the same way, the only difference is that page elements can’t be edited within the mobile editor. For example, to change an image, you’ll need to go back to the Design tool and do it there. When using page elements in your mobile version, you can also utilise the additional properties, which are located within the  the right-hand Additional properties panes, to change the way it is presented.

The work area also enables you to change the structure at any time by dragging the element up or down, remove any element by clicking the trash bin icon in the grey column left of each element, or edit mobile elements by clicking the pencil icon in the grey column left of each element.

When you want to preview what you have created, and you can do that at any time, click the Preview button underneath the work area. This will open a new browser tab where the mobile version will be displayed in a simulated environment. You can select which mobile device will be simulated by using the drop-down menu in the upper left corner of the mobile editor before clicking the Preview button. Previewing will save your work because it needs to reflect all changes you’ve made up until that point. We suggest that you occasionally also use the dedicated Save button to protect your work.  

When the mobile version you are creating does not perfectly reflect the already established page structure of the digital edition and its Landing pages, you can provide separate information that is pertinent just to this mobile version, which is why the right-hand Mobile Version Properties panel contains a Custom landing page option, which, when selected, enables you to provide a title, description and custom URL segment.

The Mobile Version Properties panel also contains a section called Page range that enables you to observe the established page structure and/or define which pages correlate with the mobile version being created,  by clicking the Edit button, which will open a new window, where the mobile version will be represented with a mobile device icon and a white indicator line that stretches across the correlating pages. Both ends of the indicator line provide a square handle that you can grab and drag left or right to add or remove pages and effectively change the page range.

The same option will become available in the Workflow’s Pages tab after you create the first mobile version. This enables you to quickly change the mobile versions’ page ranges without needing to go into the mobile version editor.

Lastly, the Mobile Version Properties panel also enables you to change the visual appearance of your mobile version by setting a background colour, selecting one of the available templates, and selecting one of the available themes.

Once mobile versions are in place, you can jump to the Workflow’s Appearance tab and enable the Reader friendly icon, which will appear in the user interface that readers use to view your digital magazines, and allows them to switch to the mobile version when viewing this edition on larger screens - smaller screens will automatically display the mobile version.

And conversely, readers can switch (back) to the digital edition format from the mobile version, when the Reader friendly icon is enabled. Practically this means that you can give readers the ability to choose the way they prefer to experience content, which significantly raises the user experience.

Have fun creating your mobile versions.