The Good, the Bad, and the Ugly: Pt. 2
The Bad: Encyclopædia Metallum 🔗
URL: https://metal-archives.com
ENCYCLOPÆDIA METALLUM: THE METAL ARCHIVES (hereinafter “EM”) first sullied the world on July 14, 2002 as a contributor-driven database and website devoted to documenting heavy metal bands and their music. The site offers a robust search engine (with both simple and advanced search options) that can accept queries by band name, music (sub)genre, lyrical themes, album or song title, record label, individual artist, and user/contributor profile. Visitors to the site may also browse bands alphabetically, by country of origin, or by (sub)genre; record labels alphabetically or by country of origin; or reviews. If users are feeling adventurous, they may also choose to enter the site by having it serve them a random band drawn from its database. Alternatively, site visitors may navigate directly to the “Forum” link to join ongoing community discussions.
Once users arrive at their desired destination, e.g., a band entry, they may read the brief band biography posted there and/or navigate the rest of the entry using a series of tabbed links labeled “Discography,” “Members,” “Similar Artists,” and “Related Links” (which typically delivers a list of the band’s social media pages and online music/merchandise stores). More granular information is available as “Main,” “Lives,” “Demos,” and “Misc.” under “Discography”, as well as “Current Lineup” and “Past Members” under ”Members.” EM album entries feature a table of song titles, song durations, and links to song lyrics. These entries also offer similarly tabbed links labeled “Songs,” “Lineup,” “Other Versions” (where applicable), “Reviews,” and “Additional Notes.” Accordingly, EM offers visitors the capability to drill down into all of its database’s richness either by direct query or manual hyperlink traversal (or, typically, some combination of both).
EM employs a minimalist color scheme that accentuates the subject matter: typically white font against a black background (because black is METAL!!! 🤘) ornamented by a handful of JPEGs in the style of antique books and bookends that help to compartmentalize various parts of the page. Each artist/band and album page typically features artist photographs and digitized album artwork (with variable resolution and file format: since EM is a contributor-driven site, uniformity of dimensions and format is not always possible).
So what seems to be the problem? Why did I classify EM as a bad website? Does including EM on my blog help to rehabilitate my reputation as a hopeless geek? What’s that you say? I am irredeemable? Thanks a lot...
The major problem with EM, in my opinion, is epitomized by a small-type comment from the site administrator—located in the bottom right corner of each page—that has remained in that spot since the site’s inception: “Best viewed without Internet Explorer, in 1280 x 960 resolution or higher.” As tests will demonstrate below, EM appears to make no effort to cater to people browsing the site on devices with smaller screens. Moreover, as that administrator’s comment suggests, no one involved in the site’s maintenance appears bothered by the website’s unresponsive design. This apathy appears to extend to aspects of the website’s accessibility, for EM makes use of various small, text-based, transparent PNGs essential to navigation whose color contrast ratio with the black background poses a challenge. According to my readings, the base color used by these PNGs is #704c4c ; against a background with color #000000 , these graphics achieve a contrast ratio of 2.83, which is poor at any font size. Many text labels, e.g., “Release Date,” make use of the same font color, so the contrast ratio issue extends to more than just navigational elements.
One factor fostering the site administrator’s apparent apathy toward responsiveness and accessibility could be the existence of an EM mobile application on various platforms. However, as I am certain any reasonable individual will agree, a mobile application alternative does not excuse a site for its lack of responsive design and problematic accessibility. Passing the buck to an application designer is, quite simply, incredibly irresponsible, especially when improving some aspects of the website could be accomplished through minor revisions.
Let’s take a closer look at some of these shortcomings through test results from WebSpeed Insights and lamdatest.com.
WebSpeed Insights Analysis:
Test Conditions:
OS: Android 12
Cellular Network: Boost Mobile 5G
As discussed above, both the desktop and mobile browsing experiences on the EM website lose points on accessibility due to color contrast ratio problems; additionally, the site administrators neglected to set the <html lang="en"> attribute, many images do not have <img alt="???"> attributes, and form elements do not have associated labels. EM also falls short on best practices by using insecure and outdated jQuery code, serving images with low resolution, and omitting the HTML doctype (thus triggering quirks-mode in modern browsers). Where the two experiences depart dramatically is in terms of performance, and the clear culprit there is handling of images. Failed rubrics include the following:
- First Contentful Paint: 2.3 s
- Time to Interactive: 8.9s
- Speed Index: 7.0
- Proper Image Sizing: potential reduction of 1,644 KB
- Efficient Image Encoding: potential reduction of 320 KB (typically indicates reliance on images with poor compression ratios like JPEG)
- Serving Images in Next-Gen Formats: potential reduction of 1,258 KB
- Serving Static Assets with an Efficient Cache Policy (typically indicates the site does not set a long cache lifetime, which could speed up return visits)
Items 1-3 above likely represent the upshot of imprudent decisions leading to Items 4-7.
lambdatest.com Results (a sample)
Google Chrome
-768x1024.png "metal-archives.com on the Apple iPad 6th Generation")
Mozilla Firefox
-firefox-768x1024.png "metal-archives.com on the Apple iPad 6th Generation")
While lambdatest.com test results demonstrate some clear variation in how Google Chrome and Mozilla Firefox render EM on mobile devices, it is fair to say that none of these renderings is ideal (although, some tablets come close to satisfactory).
The Bottom Line:
EM maintains an extremely useful and rich database of heavy metal bands and their albums, so I would highly recommend it for the purposes of research. However, the site administrators desperately need to rescue EM from its early 2000s design. Responsive web design is no longer a practice that any self-respecting developer can afford to ignore. Deferring that practice to mobile application developers strikes me as lazy and in violation of the implicit contract between web developer and site visitor: namely, that the developer is responsible for publishing a site accessible by the greatest possible number of users. In 2022, with the World Wide Web flush with new browsers and mobile devices, website administrators can no longer prescribe a precise manner in which to browse their sites, and the onus lies with web developers to publish a website that serves itself in a manner consistent with user expectations.