HTML Packages allow you to add custom-developed experiences to your Zoomforth sites. When designing these experiences, it's very important that you consider how they should appear to users on different devices. For example, if the majority of users will be accessing your Zoomforth site on a mobile device, it will be crucial that you have optimized that HTML Package for those users.
HTML packages work alongside other embed options. For context on the full embed ecosystem, see adding custom embeds to your Zoomforth site.
These days, people view sites on all types of devices, though, and ensuring that your custom package works everywhere can be challenging. Some of the common ways people will do this are:
Designing the HTML Package to use different responsive breakpoints.
Designing the HTML Package to use percentage-based layouts so it scales based on the size of the browser window.
Both approaches have their trade-offs and different considerations. To help make that decision, it's often best to consult how the world intakes their media.
Desktop visitors
For desktops, some of the most common screen resolutions can be seen below:
Some things we can note are:
The most common screen resolution is 1366x768px
About 75% of desktop visitors use a screen height of less than 1000px.
These numbers don't take into account the bookmarks bar, URL bar, and other parts of the screen before the website itself.
When designing for the desktop, we have to remember that most users are used to scrolling vertically. Scrolling horizontally is an issue, though. We can then conclude that HTML Packages should fit within a 1024px width at a minimum. Height will depend on the experience you are trying to deliver and the context in which you are embedding the HTML Package.
Embedding as a section
HTML Packages will normally have vertical scrollbars on them since they are directly embedded inside iframes in the site. HTML Package sections have an advantage when it comes to height, as you can add JavaScript code (provided by Zoomforth) to ensure the section shows the full package contents without vertical scrollbars.
You should remember that as a user scrolls through your site, they will want to see as much of the HTML Package as possible. If you were embedding a chart, for example, it would make the most sense for the user to be able to see the whole chart in their viewport. It would make sense to ensure the height of your HTML Package is on the smaller size. I would recommend about 500-900px for the best results.
Embedding as a tile
HTML Packages can be displayed directly in grid sections as a tile. This is a great solution for custom experiences where you want to display other Zoomforth content and media next to your HTML Package.
The downside is that your HTML Package must fit within the tile. Tiles are sized according to the visitor's screen size and based on the number of tiles in each row. They also change size as the browser window is resized.
It's very important that your HTML Packages can adapt to different screen sizes. Here's some math to help understand the sizing of tiles:
A standard, non-full-bleed grid will have a maximum section width of 1200px.
You can determine the size of each tile based on how many tiles are in the grid section.
3 Column grid sections will have 1200 / 3 (tiles per row) = 400px per tile
4 Column grid sections will have 1200 / 4 (tiles per row) = 300px per tile
5 Column grid sections will have 1200 / 5 (tiles per row) = 240px per tile
Each tile has built-in padding and margins to maintain aspect ratios for image tiles. This means that to determine the actual size of the tile, we need to calculate the size with the padding and margin in mind.
This formula would be (size per tile) - ((size per tile * 0.019) * 2) - ((size per tile * 0.018) * 2). Notice we multiply the margin factor and padding factor by 2 in order to account for both the left and right sides.
As an example, let's look at a 4-column grid tile. We would see 300px - ((300px * 0.019) * 2) - ((300px * 0.018) * 2) = 277.8px.
Since tiles are square, we know that the viewport for a 1x1 tile in a 4-column grid would be about 278x278px.
You can use the formulas above to calculate the dimensions of your tile and then ensure that your HTML Package works under that sizing. One thing to keep in mind is that tiles are not just 1x1 tiles. They can be wider or taller, and you will need to take those considerations into account in your calculations in order to approximate the sizing of the HTML Package.
Another thing to remember is that tiles can be full-bleed. This means that the grid section is not 1200px, but it extends the full width of the user's window. Full-bleed tiles also do not have the margin and padding factor I mentioned above. You would find the size of the tile by doing something like (size of target viewport) / (tiles per row). This calculation is certainly simpler, but it will require you to design the experience based on a browser width that you pick from the table above.
Embedding as a tile overlay
HTML Packages can also be displayed in an overlay when you click on a tile. By default, Zoomforth overlays use a percentage sizing to determine how big the overlay itself is. You will see that the overlay is set to be 10% of the browser height and width from each side.
For example, if the user has a screen size of 1366x768px, as the majority do, you would see that the overlay view will be 1092x615px in size.
You can adjust the size of the overlay in custom CSS via the theme by targeting the .overlay-asset-viewport. For example:
.overlay-asset-viewport {
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
}This will change the viewport to be 5% on each side, making the new overlay about 1230x690px.
For packages in overlays on a desktop display, we would recommend you keep the size to about 850x650px. This will ensure it works well on almost all browser sizes if you are setting a distinct height and width in the HTML Package.
With that in mind, the best way to design these experiences is to do it responsively so that as the width gets smaller, the height stays proportional. When you have a set height, you will run into issues with scrolling in an overlay, which is not a clean experience for users.
Mobile and tablet visitors
It is usually best practice to define your responsive breakpoints for mobile first. Mobile is incredibly important in our society today, and designing your HTML Packages to work on mobile can make your visitors' experience better. Please note that you can turn HTML Package sections off on mobile if you are worried about the display or they will not add value to the site in a mobile context.
Tablets are generally considered to be about 768x1024px in portrait mode (reverse those for landscape). Designing breakpoints that work at this size would be ideal for HTML Package sections.
Smartphones are all very different. In fact, here is a table showing common screen sizes in 2016:
Phones are getting larger as time goes on, but it is always best to design your experience for smaller screen sizes to ensure all devices will work as expected. We would suggest you use a breakpoint with a maximum width of 480px and ensure that smaller viewports work within that framework.
One thing to remember about tiles on mobile is that they will stretch the entire width of the phone, so if you use an HTML Package embedded directly in a tile, it will display the same as an HTML Package section might appear.
Overlays on mobile use the same 10% from each side of the screen sizing that browsers do. This means that you should expect the HTML Package to be a bit smaller than the actual mobile viewport to display well for visitors.
Conclusion
Designing for the web today certainly comes with its own set of challenges. HTML Packages are no exception. We recommend you treat designing an HTML Package with the same considerations as you would your Zoomforth site. We have outlined some of the common screen sizes and things to know about how Zoomforth sizes different content, and it's important to keep those sizes in mind to deliver the best experience from your HTML Package.
As a general set of recommendations:
HTML Package sections on a desktop should consider their height. We recommend about 500-900px in height for an optimal experience for visitors if you are using JavaScript for maintaining the height of the package.
HTML Package sections on a desktop should be able to work at least between 1024 and 1200px in width to fill the whole screen. If they are less than that, then you can center-add code to your HTML Package to center the content for a better visual experience.
HTML Package embedded tiles on the desktop should try to work at a calculated tile size. Depending on how you want to display it, you can determine the size of the tiles so you can make the best estimation of the size needed.
HTML Package overlays on desktop, tablet, and mobile will show the package within a 10% frame in the center of the site. On desktops, this means designing an experience that fits within the visitor's browser window. For mobile users, it means ensuring that a smaller-sized HTML Package will still work for you.
If you need further instructions or you need someone to evaluate your HTML Package, please reach out to support for help.