A Happy New Year to all Sociamind readers and welcome to the first post of 2017.
What is HTML 5 export and what does it do?
While MindManager 2017 (MM 2017) did not give users everything they wanted, it did deliver a number of unexpected but mostly pleasant surprises. In this occasional series I’ll explore some of these new features, both major and minor, and provide examples of how to use them in interesting ways.
My first example is the HTML 5 export facility which allows users to export a mindmap as a web page. These maps do not require MM and in fact can be accessed by anyone with a browser. With the latest 17.1.167 update they can also use a number of layouts and are fully interactive, allowing users to expand and collapse branches and click on hyperlinks and attachments. Most aspects of mind maps including features such as topic notes are also retained in the export process. The HTML 5 export also replaces the previous somewhat unreliable interactive PDF export feature.
There is clearly a great range of potential uses for this facility. In effect, read-only but highly interactive maps can accessed easily, both by the wider community (for example, maps showing council and community facilities with expandable links to further information) and within organisations (for example project management maps, or maps of organisation policies) – and only the people directly responsible for creating and editing the maps require MM licences to use them.
In this post I’ll describe how the export facility works. I will also demonstrate a map I created for a simple purpose – the creation of a table of posts I write in 2016 for one of my blogs. Other examples where such a map could be used include as a menu for website navigation or a table of contents for an online publication.
First, a few caveats. This is a new feature and it still under development, so there are a few rough edges. While many MM features are available, not all of them are; similarly, not all the layout options work effectively and sometimes things can get messed around a little in the export process. The exported pages work better with some browsers than others and there is limited customisation of the non-map elements which include some mandatory elements such as the MM logo. These issues are relatively minor however and the exported maps are more than useable.
Setting up and exporting a map
The export process is very easy, especially if you are using a fairly straight-forward map. In fact, the export process is so quick you can repeat it and view the results multiple times, making it easy to experiment with different options.
First of course you have to make your map. The first time you create a map for export I suggest using something simple like a radial layout. Also bear in mind that when you export the map it will be the original map file name that is displayed, not the name of the HTML file generated, unless you remove the name entirely.
If you are setting up a table of contents or directory involving web content and you don’t already have a listing of the sites involved you will of course have to create or import these, along with the hyperlinks. You can do this manually or, to speed up the process, use the Google Search plus facility available from Olympic Limited as a stand-alone add-in or as part of their multi-functional MAP add-in.
You have two choices about how to handle the linked sites in MM for the purpose of export. The first, which I’ll use in the following example, is to create a topic for each site with the link attached. While you can export topics with multiple links it’s probably safer to stick to one link per topic.
The second is to paste the link into the topic notes. It’s easier to have multiple links in a single topic but note you will need to consider whether the resulting layout will look good on a web page, particularly if you have a large map.
Once the map is created and saved, all you need to do to is click on the File tab, select Export and then select HTML 5 Interactive Map. You will be prompted for a file name for the HTML file (note as I said earlier that the export will display the original map name, not that of the HTML file, unless bar with the name is removed). Then press enter and the HTML 5 export file will be created.
At this point you will be given the option to view the map in your default browser. This will give you the opportunity to review the map’s appearance as a web page. Inevitably the export process will introduce some changes which will be more noticeable with some layouts and templates than others.
Uploading the HTML page to a website
Creating the HTML 5 version of the map is only half the story – you will now need to upload it to a website. How you do this depends of course on your website hosting arrangements and the applications and templates you are using. The uploaded map may look somewhat different to the preview in your default browser and you may also need to adjust settings in MM and export again to achieve the results you want.
There are other issues to consider. For example, if your website is hosted at WordPress.com you cannot upload an HTML page at all. On the other hand if you use the WordPress application on a site hosted by you or a third party you can upload an HTML file but you will need to use a plug-in to install it successfully. Andrew Wilcox’s Applications of MindManager describes the process, which requires the use of the iframe plug-in.
Another issue is that the exported HTML file contains the Mindjet logo and a toolbar with a Help button that somewhat confusingly links to the online help file for MM 2017. When this question was raised on the Mindjet community forum Mathieu van der Wal identified how the file can be edited to remove these features.
Based on the solutions provided by Andrew and Mathieu I have developed the following process to uploading an HTML map and if desired removing any Mindjet additions:
- Create a map and then export the HTML 5 version as described in the previous section.
- If you don’t want the Mindjet logo and toolbar to be displayed, open the HTML exported file in Notepad or another plain text editor. Find the line containing “toolbar-container” and delete the entire line, then do the same to the line containing the phrase “mj-logo-link” (it’s difficult to show the lines in full as they interfere with the code for this page). Make sure the lines are completely deleted, then resave the file.
- Install the iframe plug-in on your WordPress site.
- Create a new page, add an appropriate heading and introductory text and switch to Text edit mode.
- Go to the iframe plug-in on the Plugins page and click on View Details. Click on the Installation tab and follow the instructions there to insert some shortcode on the page you have created. This is the line beginning [iframe src” followed by a URL link name and ending with width=”100%” height=”500″] – the actual address doesn’t matter as for our purposes this is a dummy name which will be replaced in step 7 below. Save the page as a draft.
- Upload your exported HTML 5 file to the media library in your WordPress installation. Copy the resulting URL address in full.
- Switch back to the draft page then carefully highlight the dummy URL address within the quotation marks in the iframe shortcode you pasted in step 5. Replace this with the URL address of the file you uploaded.
- Save the page and review its appearance – the uploaded map should be visible on the page in a window. If the window appears but you can’t see the map, you may need to scroll vertically or horizontally within the window to find it.
- You can also experiment with both the width and height of the map window and with the controls that form part of the uploaded file. To play with the window parameters, go back to the page editor and adjust the width and height parameters in the iframe shortcode you pasted in step 5. For example the window may be a bit narrow at 100%, even if the map is resized, but you can increase the width over 100% – though this may affect the page sidebar if it has one.
Customising the map – an example
For many purposes the standard map layouts will be fine but in some cases the appearance can be, well, a bit too “mappy”. If you want something a bit different you will need to choose a more appropriate layout and undertake more sophisticated formatting, but the more complex these both become the more likely the resulting export will not reflect what you want, at least initially.
Therefore there could be a fair degree of trial and error involved getting the exported map to look the way you want. As noted before, however, the HTML export process does make it very easy to trial different approaches, refining them until you get the desired result – or at least something close to it, given that there are some limitations. The following example, showing how I published an HTML 5 map of posts made in 2016 to this website, demonstrates some of the formatting options and how to implement them.
The first step was to create a fairly standard map of the posts. There were only nine of them (I’ll concede a pathetically low number!) which I organised into four groupings, as follows:
I then collapsed the map to the four main topics and exported it to an HTML 5 file. While the resulting map was functional its appearance was not what I had in mind:
I then experimented with a conventional tree layout and even a vertical timeline, but neither gave me the look I wanted, particularly when exported. Eventually I decided on a right-sided map:
This was closer to the mark, but I wanted the map title to be at the top. First I made the central topic “disappear” by selecting “no line” in Topic Shape in the Design tab on the ribbon and also making the topic fill colour the same as the background. Then I inserted a floating topic containing the map title above the main topics:
This was almost right but I went one step further. I uploaded the image header from the Sociamind blog page to Photoshop, added the title and saved the result as a new JPG file. Then returning to the map I deleted the floating topic with the title and in its place inserted the edited JPG file as a picture, taking care to remove its topic line and to ensure that the fill matched the background colour, which I changed to blue.
I also used the MAP add-in’s facility to apply a fixed topic width to the main topics and added a simple instruction as a fifth main topic, but again formatted the topic with no line and a fill colour matching the background.
Finally I went to the Show/Hide drop-down menu (in the detail section of the View tab) and unticked Revision Number and Modification date along with Main Topic Handles. I then re-exported the map. The final result (which can be accessed here) looked like this when exported:
How could the HTML 5 export be improved?
There is no doubt that this is a great feature which has the potential to substantially increase exposure to mind maps and encourage their use. As I said at the beginning however, the export process has a few rough edges which need to be ironed out. These are some areas of potential improvement:
- The range of layouts that work with HTML 5 export need to be expanded, possibly with some added specifically for this purpose. The degree to which the export process correctly reproduces these layouts also needs improvement.
- The ability to navigate a web map should be made easier. Windows in many website templates are often much more constrained than the map canvas. This means that maps, particularly smaller ones, may not always be immediately visible in the windows containing them.
- The ability to access links also needs to be improved. At the moment there appears to be a bug which removes favicons and replaces then with the generic link icon. This problem should be fixed.
- Going further there should be recognition that clicking on a small icon to access links may be counterintuitive for people who have limited experience of mindmaps. To make exported maps more user-friendly Mindjet should look at adding the ability to customise the size and appearance of the link and attachment icons.
- Ideally, there should also be an option to make either topics themselves, and/or images or text inside topics, directly clickable as links to web pages or attachments.
- Finally there should be greater opportunities to customise the appearance of the exported files, for example, the ability to add custom headers. As a start Mindjet should make it easier to remove their own default logo and help elements from the HTML 5 maps.
Edited to remove typos and clarify some of the instructions.