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.
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. In order 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 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 in order to maintain aspect ratios for image tiles. This means 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 then 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 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 users 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 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 a majority do, you would see 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 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 doing it responsively so 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.
Smart phones 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 the JavaScript for maintaining the height of the package.
HTML Package sections on a desktop should be able to work at least between 1024-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 desktop should try 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 a experience which fits within the visitors 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.