Does this "work"?

[littlelum]

Hi, a while back, I tried to make a design for a section of my website. It starts off with a menu full of gifs, and clicking on one will take you to its related page. I based it loosely off of the Wii menu. I am aware of the ambiguous nature of having url links be images instead of descriptive text, but I wanted to recreate that feeling of dreams I had as a kid where I would turn on my Wii and find a bunch of weird channels that I was really curious to find out what they were for.

Anyways, my first question is, how scalable is this? It works fine when there's just one or two, but in the long term, when there's a lot of pages, how far can I push it before loading becomes super slow? I guess lazy loading will help, but I'm wondering if I should figure out a more efficient solution before it becomes too late and redoing the page becomes a major hassle.

The second question I have is how I make use of images on the pages themselves. It's kinda hard to describe, but I tried to find a way to have the images and text overlap each other while both being readable. Sure, it's really good at hiding the image's compression artifacts, but can both the images and text be read clearly? More importantly, does it look ok? I'd just like some feedback before I make any decisions.

You can find it here.

Thanks!

[rolypolyphonic]

Maybe you could try having the images static and to only become GIFs on hover? (You could do this with just CSS or with JS, although the CSS-only option might become cumbersome the more images you add). Here is a tutorial I found that uses freezeframe.js and also suggests another method where instead of 'freezing' the GIF, you just have a static thumbnail in the first place and swap it for the GIF later.

If you properly compress your GIFs so that each individual GIF doesn't have a huge file size, it shouldn't be significantly slower than a page full of static images of the same total file size, though.

As for the pages themselves, I do find them readable as is, but if you're worried about that, maybe instead of having them behind the images, you could have them in the empty space around the main context box? I find the saturated glow inside each box a little harder to look at but I don't do well with bright gradients personally; can't say most people will have trouble with it. At most I think just making them less saturated even without removing them completely would be an option, but it's up to you.

Good luck with your website. 

[Dan Q]

Maybe you could try having the images static and to only become GIFs on hover? (You could do this with just CSS or with JS, although the CSS-only option might become cumbersome the more images you add).

CSS-only is definitely feasible. Here's how I'd do it:

It's a list of links. Each link contains two images. The first image is the static one, the second one is the (larger) animated one, and is lazy-loaded. Then we add some CSS to hide "last images in links in the menu", showing only the first one. When the link is hovered, we swap them.

Here, I made a CodePen to demonstrate. The CodePen uses static images for both the static and animated ones, but you'll get the idea.

Here's the code, for completeness' sake:

Code: html

<ul role="nav">

  <li>
    <a href="#first-link">
      <img alt="First Link" src="https://placehold.co/200x100/orange/white?text=static%201">
      <img alt="First Link" src="https://placehold.co/200x100/white/orange?text=animated%201" loading="lazy">
    </a>
  </li>

    <li>
    <a href="#second-link">
      <img alt="Second Link" src="https://placehold.co/200x100/blue/white?text=static%202">
      <img alt="Second Link" src="https://placehold.co/200x100/white/blue?text=animated%202" loading="lazy">
    </a>
  </li>

    <li>
    <a href="#third-link">
      <img alt="Third Link" src="https://placehold.co/200x100/darkgreen/white?text=static%203">
      <img alt="Third Link" src="https://placehold.co/200x100/white/darkgreen?text=animated%203" loading="lazy">
    </a>
  </li>

    <li>
    <a href="#fourth-link">
      <img alt="Fourth Link" src="https://placehold.co/200x100/pink/white?text=static%204">
      <img alt="Fourth Link" src="https://placehold.co/200x100/white/pink?text=animated%204" loading="lazy">
    </a>
  </li>

</ul>

Code: css

ul[role="nav"] {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 5px;
  
  a {
    display: block;
    border: 4px solid black;
    text-decoration: none;
    padding: 3px;
    width: 200px;
    height: 100px;
    
    img:last-child {
      display: none; /* hide the second image in each link */
    }
    
    &:hover {
      /* when we hover over a link: */
      
      img:first-child {
        display: none; /* hide the first image */
      }
      
      img:last-child {
        display: block; /* and show the second */
      }
    }
  }
}

[stephan_e_perez]

I agree that rolypolyphonic's eyes seem to be more sensitive than mine- the gradients don't bother me.

I think it's probably more attention-grabbing for the gifs to always be active and not just on hover. So I would prefer the approach of loading static images first and then replacing them with the GIF as soon as its loaded, then doing something else on hover (as you already are).

(though with more images, it might be a bit overwhelming for them all to be moving, though overwhelming is not necessarily bad: ultimately up to you which you prefer)

As for the pages, they are readable. And I agree with rolypolyphonic that adding more padding in the boxes would help the visibility of the images (it would also make the boxes feel less cramped). You could also increase the line height of the text a bit to help image visibility.