HOTGLUE, a Content Manipulation System


Introduction

HOTGLUE is a visual online tool that allows the construction of websites directly in a web-browser. Multiple pages can be easily created and images and other elements can be placed anywhere on the page by using drag and drop. Although HOTGLUE has its advantages, some limitations can also be found.

An introduction to this tool was made and this portfolio is built using it with the purpose of documenting my learning experience throughout the Web Design Studio module.

HOTGLUE content manipulation system from hotglue on Vimeo.

First Steps

A first attempt of placing elements and linking to pages.

After creating an account the user is left with a blank canvas, to place elements in. With a single click opens a set of creation tools while a double click gives access to page specific features and the possibility to edit overall settings of the website.

Set of tools that can be accessed by a single click on the canvas.

Pros ans Cons

Proved to be a great tool to quickly create visual compositions:

  • Visual tool, elements can be easily placed anywhere on the canvas.

  • Free server space, multiple pages can be created and are automatically published on the internet.

  • Can be enhanced with code. Includes a tool that parses HTML, CSS and JavaScript but scripts need to be used with caution.

  • Good for sketching layouts and study a web space structure.

Although it has it's benefits, after creating a few pages with HOTGLUE significant limitations where noted as well:



  • Limited element styling. Unless tags with CSS classes or id's are wrapped around the text when creating text elements, it's not possible to style the elements with advanced styling options.

  • Cannot access created files. There is no way to access the files for the created pages or uploaded resources such as images which can cause issues when creating a website of larger complexity.

  • Non-responsive. The content does not adapt in any way, as it seems the elements are using position: absolute and don't respect the size of the browser window.

Creating a Portfolio

The main goal of learning HOTGLUE was to create a portfolio. In order to get to know this tool in depth, experiments were made and questions regarding its development were raised: Is there a way to make HOTGLUE responsive? Does it break if scripts are used?

Previous experiments performed by multiple year one Digital Media students showed misplaced content on pages across different resolutions, displaying properly only on the one it was initially built in. Resulting in having to scroll in a panning way to view the content. Including mostly text, it was decided that the content should be visible and accessible in multiple devices, making sure that at least it would show properly on different desktop screens.

After understanding how HOTGLUE works, the next step was to think thoroughly on what kind of content this web space would be built for and which piece of content has more importance over the other, in order to wire frame the website and also be able to build a page structure.

The top sketch is defining a sitemap while the bottom one is an attempt to wireframe the different pages.

At this point, cheices were made about how the content would look on the page and it was decided that it would be striped from unnecessary elements, opting for a minimal layout. Also the content would be visualy responsive, but since writing custom media queries would take a significant amount of time, using the Twitter Bootstrap framework was the best option.

However, some Bootstrap features use JavaScript files and libraries such as jQuery. This can override HOTGLUE's scripts and completely break the tool with no easy fix but to e-mail the support team. With this in mind, nothing more than the twelve column grid was used from the framework, leaving additional features powered by scripts behind.

Screenshot taken from the homepage of the already assembled online portfolio.

Conclusion

Overall, HOTGLUE is a great tool to quickly sketch a layout and create web content without knowing any markup or programming language. The tools are no more than two clicks away and there are many useful tutorial videos to get users started. However, it is not a friendly tool for creating web content that is semantic, responsive and user-friendly, definitely raises questions about whether using visual web tools or custom code is best when creating good quality web documents.