Category page layout rework in mobile


My forum uses the category + latest topics homepage by default.

On mobile, I find this page not very practical.

If a recent topic has a lot of replies, the topic line is larger than the screen (see the 1st screenshot, line “Quote of the day (from non-riders)”.
The different elements are all tall and I’d like to have them shorter.

Here is how my redesign currently looks. I also moved the number of topics next to the category name and the subcategory list under the main category instead of under the topic list:

I’m not a designer (at all) and I’d appreciate any feedback or advice.


I do like the totals on the topic line cc @awesomerobot


Since it seems that the mobile template for the category list was changed in an unidentified Discourse update and because I overrode the template (which used now outdated code), I ended with code that wasn’t parsed anymore, like {{i18n "reports.all_time"}} or {{18n "all_time"}}.
I couldn’t figure out how to fix that, so I ended up removing this information.

But I feel that my mobile template looks even nicer and this stats information (number of total posts, number of replies…) wasn’t needed in the mobile view of the category page.

Not much changes, but here’s how it looks now:

I’m pleased with it, and I hope it can inspire some other people to improve the category mobile page view (lots of Discourse pages display very nicely on mobile phones, but the default category one definitively feels off to me).


I agree that the mobile category page could use some work, but I also wonder if it’s worth having a special mobile category layout at all… should we use the same templates for desktop and mobile and make sure they’re responsive? that seems like more valuable work to me… but I’d be interested to hear how others feel about it.