screenshot of top of home page of 04 variants (Atmosfear Destroyed) album NFT

[publishing] just minted a 4-page HTML album. Now what?

Since I successfully minted an article as HTML, I’ve been working on list of formats I want to test. Thursday I minted my first “album” of 04 variants from my Atmofear Destroyed collection on Tezos. A four-page website with a home page, two gallery pages, and an About page.

This is web design, but it’s not like designing a normal website. All the files are stored on IPFS and being served from a p2p network. HTTPS protocol serves content from a central source, and browsers are built on HTTPS. The two protocols don’t always play nicely together.

For example, a page will “break” if there are more than five images on it. The page will load, but most of the images won’t. This week I tested a page with six images with file sizes lower than 600kb. I thought it would be okay because the file sizes were pretty small. But it wasn’t.

The next page I tested had five images, and all of them had file sizes greater than 1MB. They loaded pretty fast, especially on my phone.

I don’t have the technical background or knowledge to know what’s going on there, but as long as I know not to put more than five images on a page, I can work with that.

screenshot of top of home page of 04 variants (Atmosfear Destroyed) album NFT
home page with banner image and links to gallery pages (desktop version)
screenshot: First gallery page with slideshow
first gallery page with slideshow (desktop)
screenshot of about page
about page (desktop)

switching to mobile-first design

The reason I wanted to do albums this way instead of making PDFs is because PDFs are not ideal to display on a mobile screen. I’m old school and use a laptop, but half the people on the web are using their phones. The W3C recommends designing for mobile devices first with larger screens as a secondary consideration.

It’s a good thing you can do that without building two different pages, or this would quickly become a pain in the ass.

Using media queries, I was able to set up two types of image displays for the gallery in the same document. I built a slideshow for screen widths above 600px. It uses the thumbnails underneath as manual navigation. The thumbnails are displayed with reduced opacity, but appear at full opacity on hover.

The images for the mobile version are displayed in a responsive grid. When you tap an image, it comes up full sized in a modal. (I love that I was able to turn the “close” button pink.)

screenshot: mobile version of 04 variants home page (Atmosfear Destroyed)screenshot: mobile version of 04 variants gallery pagescreenshot: mobile version of 04 variants gallery pagescreenshot: image opened full size in modal

The About page has an artist bio and the same Other Work section that I used in the article.

screenshot: mobile version of 04 variants about page (artist bio) screenshot: mobile version of 04 variants about page (other work)

This is exactly the kind of rich content, design flexibility, and responsiveness I was looking for to build the Shorts albums or any other kind I can think of. If I can only do five images per page, it’s not so limiting as it sounds because all the pages can be linked together.

The JavaScript is pretty light in this one. There’s a short script in the body that lets the user open and close the modals and operate the slideshow. Just enough to bring a bit of familiar interactivity to the NFT. So not only do I need to acquire much better JavaScript skills, I must up the ante and test pages with longer scripts.

After I finish the larger album, I want to test a blog page layout to see if it’s a viable format for an ‘zine NFT. Currently, these are also being created as PDFs. As are the few book NFTs we have available. So, after that, I’d love to find out if a full-length manuscript could be minted this way.

Nobody wants to scroll horizontally and vertically. I know it seems almost scandalous that people can’t be bothered with it, but most of us probably feel that way.

And I’d love to see writers publishing this way on Cardano. It would add a useful, fun new feature to the NFT landscape.

the challenge in minting a full-length manuscript

I want to test a manuscript of at least 80k words with a cover and an illustration for each chapter. But I don’t have an 80k-word manuscript.

Luckily, there is an online Lorem Ipsum generator, one of the many handy tools available to page layout designers  in need of placeholder text. And if regular Lorem Ipsum is too boring for you, it comes in a few other flavors you might enjoy. Such as Zombie IpsumHipster Ipsum, and Sagan Ipsum.

Birth courage of our questions not a sunrise but a galaxyrise kindling the energy hidden in matter preserve and cherish that pale blue dot rogue. Of brilliant syntheses invent the universe vastness is bearable only through love with pretty stories for which there’s little good evidence dispassionate extraterrestrial observer Orion’s sword?

— Sagan Ipsum

Thinking about doing each chapter in a different style of Lorem Ipsum and writing an introduction. This is one instance I’ll have to use a page builder. Otherwise I’d have to copy and paste each paragraph between two HTML tags and that would take longer than it would take you to read 80k words of Lorem Ipsum.

That would also give me a chance to find out whether or not the superfluous code created by web page builders would have a noticeable impact on load speed.

Unfortunately, I don’t know of a way to do this on Tezos unless I find a minting service that lets you mint an HTML document as an NFT. But I can do it on Cardano using Cardano Tools.

There is seriously a ton of potential here to create so many different kinds of NFTs, and I’d love to see more people start to make use of this format. If anyone else is doing this, or wants to do it, I’d love to hear from you. It’s a little tricky and it would help to have people to share tips with.

If you don’t know how to build websites but would like to learn, the best tutorials I know of are created by W3Schools. Especially:

  • HTML – to build pages
  • CSS – to style pages
  • JavaScript – to program pages
  • W3.CSS or Bootstrap – or some other CSS framework (not required, but saves a lot of time)

The lessons are broken down in depth, explained in simple terms, and there’s lots of example code to play with.

I hope this has been helpful to anyone who may be interested in making NFTs on Cardano this way. If you are, let’s chat.

Leave a Reply