On Genres Page, render text on top rather than pre-baked



  • Something that's bugged me is how the text for the genre lables of each tile on this page: Genres page, has the text in the actual image file of the background. It's bad practice for several reasons:

    1. People with slower broadband will have limited accessibility while the page loads, as they cant see the titles of the genres until the images have loaded.
    2. The text looks a bit and unprofessional because it is affected by JPEG compression artifacts.
    3. If you have zoomed the page in on your browser, or increase the sizes of elements for people with poor eyesight, the text will also become blurry.

    Here's my suggestion for super easy changes made to the HTML document of the page and to the common.css styling sheet to resolve this. But first, here's a picture of my results from making these changes:

    Screenshot comparison of  the changes.

    HTML:

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 collection-item actionadventure">
    	<a data-id="34" href="https://www.funimation.com/genre/actionadventure" style="background-image: url('testImage.jpg'); background-size: cover;" alt="Stream actionadventure Anime Here">
    		<h2>Action/Adventure</h2>
    		<!-- <div class="genre">Action/Adventure</div> -->
    	</a>
    </div>
    

    For each of the genre items, just the Heading- Level 2 tag would be added, as it happens to be the exact same size of the text that was originally pre-baked into the images. So now, the text can be seen before the background image has loaded.

    CSS:

    .genre-list .collection-item h2 {
    text-align: center;
    vertical-align: middle;
    line-height: 304px;
    opacity: 0.90;
    text-shadow: 0px 0px 8px #000000; }

    It adds the shadowing and made slightly transparent in the same way the pre-baked text does.

    I think this would good for the look and feel of the website.


Log in to reply