Creating a HTML5 interactive downloadable product catalog

Community resources General
1

HI there

I’m working on creating an interactive and responsive e-catalog for a door handles company. Historically, they’ve relied on downloadable PDFs, which mirrored their printed catalogs. While these PDFs have served their purpose, they lack the dynamic interactivity and responsive design we’re aiming for. As a result, I’m considering transitioning to an HTML-based catalog.

Here’s what I envision:

  1. The catalog should be a blend of a traditional PDF and a responsive webpage, complete with embedded animations, pop-ups, and other interactive elements.
  2. The final product should be a single downloadable HTML5 file, akin to a .PDF icon, rather than a folder with multiple files. This ensures ease of distribution and download for users.
  3. It’s crucial that the catalog is universally accessible, opening seamlessly in any browser on both desktop and mobile devices without requiring any additional plugins.

Given these requirements, is Webflow the right platform for this project? Additionally, how can I ensure that the export results in a single file rather than a folder with multiple components?

Thanks for your answers.

Best
Gasper Premoze

2

Why not just do a standard website?

  • It keeps it updatable
  • It gives you SEO benefits
  • It gives you analytics benefits
  • It eliminates the technical hurdles you’re considering.

I have not seen any good website-as-a-file solutions. There are single-page-as-a-file solution like the .mht bundled format you can save from some browsers, or monolith which encodes everything into the HTML directly.

Most site-as-a-file solution render PDFs.

3

Thank you Michael
The crome extensions SINGLE FILE does the part of job. But the “save as single file” saves just the current page and not the entire website. You can’t open any popup, or see videos.

We want to have a html file catalog to send it as an attachment to the customer (per e-mail). We want customers to see html file with all images videos and popup interactions, but we do not want to send them all files with folders or zip archive, but rather just one single file that would open in any browser on the phone tablet or desktop.

What we need, in short, is: An entire website for offline usage, packed into a single HTML file.

4

@Gasper_Premoze - What are you basing your requirements on?

1 Like
5

Yes I understand, you want to use web technologies without using the web.

That works in some places like app development where there is a software piece that can play the role that the server provides, support browser navigation, etc. I just don’t think it will work well for you here.

Consider - even if your videos are few, your combined single-file website would likely be in the range of 50MB to 100MB minimum. Send that by email, and that size increases 33% with Base64 encoding. How is someone meant to download that on a phone?

A link would work 100x better for what your client is wanting to do, plus you will be able to send links to individual products after you have a sales conversation with them.

If you really need to give it offline support, you could look at taking a live site and building it as a PWA. That way it can be accessed online and delivered as a link, but then offer a native-app experience including offline access.

If you really want to deliver your site as a self-contained file, you’ll probably have to find a website to EXE solution that solves issues such as compression and navigation- but that means platform-specific build for Windows and Mac users, zero phone support, email filter problems, etc.

I think this is a rabbit hole you won’t enjoy, and that even if you make it though- your client won’t find any joy on the other side.

Webflow is a pretty good tool for creating the HTML you want. I use it for a few external UX’s such as chrome extensions. Note however that you cannot use the CMS for your catalog, because none of that will export. Static pages only.

In your case since file size will be a major issue, you’d need to sort out JS and CSS minification, asset optimization, etc. a lot of post-processing to get it in a reasonable form for whatever website-as-a-file tool you find.

1 Like