Is there a better way to present lists of bullet point links in responsive design?

Question

I'm being challenged by a concept on a website redesign. It's a technical/medical website and there are some category pages that list subcategories in giant, bulleted lists of links. There are no graphics, just text bullets. And some of the category titles are very long. Here's an example:

• 5-HT Receptors
• Acetylcholine Muscarinic Receptors
• Adenosine Receptors
• Adrenergic Receptors
• Calcium-Sensing Receptor
• Cannabinoid Receptors
• Chemokine Receptors
• Dopamine Receptors
• Estrogen (GPER) Receptors
• Free Fatty Acid Receptors updated
• GABAB Receptors
• Glutamate (Metabotropic) Receptors
• GPBA Receptors
• GPR119
• GPR35
• Histamine Receptors
• Hydroxycarboxylic Acid Receptors
• Leukotriene and Related Receptors
• Lysophosphatidic Acid Receptors
• Melatonin Receptors
• Opioid Receptors
• Orphan 7-TM Receptors
• Peptide Receptors
• Platelet-Activating Factor (PAF) Receptors
• Prostanoid Receptors
• Purinergic (P2Y) Receptors
• Smoothened Receptors
• Sphingosine-1-Phosphate Receptors
• Trace Amine 1 Receptor

Now imagine that spanning two columns in a fixed-width desktop layout. It's in really small type size, like 10px, to accommodate the longer titles.

I'm turning this antiquated desktop design into a modern, responsive design and I'm struggling with these category pages. I tried a tiled (card-like) layout -- basic, bordered buttons with multi-line text -- but they dismissed that based on the "ease" of finding something in the list right now. It's hard to argue that it's easy to find something in an alphabetical list. It just doesn't translate well to mobile unless you blow up the padding of each bullet to get a decently-sized touch target.

They're also very concerned about keeping as much content "above the fold" for SEO purposes. That's another reason they didn't like the card layout: too much whitespace, not enough content.

I've spent a fair amount of time looking around trying to find something that improves the design and user experience, but I'm not having any luck. I'm hoping someone here has found a solution. Please let me know if you have suggestions.

Answer 1

Since the items appear to be of equal weight (at least as a non-domain expert I can't tell if "Platelet-Activating Factor (PAF) Receptors" is more or less likely to be clicked than "GABAB Receptors") I would consider breaking up the list into subgroups. Wikipedia uses this technique often with whatever top-level categorization that makes sense for the given domain.

If a domain expert can't give you insight into the "correct" subcategories that the user of the site would be likely to use, initial letter is a good fallback.

If you stick with cards, perhaps allow each card to contain a section so that in your responsive design allows different cards to flow to the top based on the width of the viewport.