Product Update: Responsive Embedded Publications

Sep 8, 2015 by Joost Buijs

Publitas responsive online publication shown within reticles to indicate the size it could be.

Earlier this year we improved how you could embed your publications on your website. After hearing your feedback and seeing how your publications were embedded, we felt there was still room for improvement. Thanks to your feedback we've made it easier to obtain your embed code and have made sure that the embedded publications look great on all sizes.

Smooth first impression

The first impression your readers get when opening a publication is extremely important. Just a second of delay or a minor distraction could impact your reader's engagement. In line with that vision, we made sure that even the loading experience of embedded publications is as good as possible. Take a look at this example here:

Responsive embedded publications

Many users have a responsive website and want to display embedded publications on various sizes. It’s difficult to display embedded publications at exactly the right size and there is no 'one size fits all' solution. This is why we’ve created the responsive embed code.

If you use our responsive embed code, we will automatically display the embedded publication as large as possible within the available space of your website, while also taking the user’s browser size into account. This way the embedded publication will always fit nicely on the page, without becoming too big on smaller screens. Check an example here.

Opening the embedded publication in a lightbox

Previously, when opening an embedded publication, users would sometimes be unaware that they were still on your website. It wasn't always clear how to close the fullscreen view, leading users to either close the page or use the browser's 'back' button to leave the publication - effectively these users were leaving your site.

We now open your publication in a lightbox. While this does take away a few pixels of the available space for your publication, the user experience is much more intuitive and people will remain aware that they are still on your site. Feel free to click on the 'open' button in the embedded publication above to experience how this works.

Banner Mode: embedding publications on small sizes

Another thing we’ve noticed is that people love to use embedded publications on much smaller sizes than we expected. To improve how these publications are displayed, our embedded publications now automatically switch to Banner Mode once they become smaller than 800px wide or 500px high. At 400x400px or lower, we change the design to adjust for the small space the publication is embedded in. Check out a really small embedded publication here:

In Banner Mode we change a few things to make embedded publications work in small spaces:

  • Hotspots are disabled; There are several reasons why we've disabled the hotspots in Banner Mode. The first is because clicking on small hotspots at these resolutions can quickly become a frustrating task. Another reason is because the product overlay and the YouTube videos don't fit in small, embedded publications with these sizes. This would sometimes lead to users getting stuck on a product overlay with no way to close it.
  • An ‘open’ button on mouseover; When a user hovers over an embedded publication that’s in Banner mode, we display an ‘open’ button. Once the user clicks on any of the pages, the publication will open in a lightbox as described earlier.
  • Adjusted design at 400x400px; At this size embedded publications become so small that we decided to change the design by removing the bottom bar and scaling the size of the navigational elements. This way we make sure the embedded publication looks good even at smaller sizes.

You don’t have to manually activate Banner Mode. The viewer automatically switches to Banner Mode once your embedded publication drops below the 800px width or 500px height threshold.

Note: With the release of this feature we have removed our previous banner embed. The banner embed did not perform as good as we wished it would and you can now use the Banner Mode - which performs much better - instead. We will continue to improve the Banner Mode of embedded publications in the future to make sure you have an awesome banner for your site.

Obtaining and setting up the embed code

In your publication list, find the publication you wish to embed. Then click Share -> Embed. The following window will open:

New Publitas embed settings to get the code for responsive embedded publications.
New Publitas embed settings to get your responsive embed code.

We’ve made several improvements that will make embedding your publications much easier. The preview on the left represents what your embedded publication will look like. On the right you will find your embed code and a few settings to easily adjust the size of your embedded publication.

  • Responsive (default): This is the responsive setting as described earlier.
  • Small / Medium / Large: These are simple preset sizes which you can select if you wish to quickly and easily embed your publication.
  • Custom: Use the custom option if you want to set a custom height and width for your publication. This is especially useful if you know exactly how much space you have available and wish to control the size of the viewer yourself.

Please let us know what you think about these changes by leaving your comments below.

comments powered by Disqus