Recently I’ve been trying to figure out the best mobile layouts for some of the hyperkitty pages. The challenge has been that there is often a lot of content on these pages, so figuring out a clean way to display that on a small screen can be tricky. The screenshots below give you a sense of what I’ve been playing around with. These are for 3 different screen widths of the overview page:
320px screen width:
640px screen width:
768px screen width:
The 320px is for the smallest Android screens, 640px is a typical iPhone screen size, and 768px is the smallest tablet screen size. Here’s a screenshot of the original (desktop) version of the same page, so you can get a sense of the comparison.
One of the design choices I made was to emphasize the threads over the stats, since the thread sections (recently active, most active, etc) are placed above the stats (activity summary, most active posters, etc). Second is to pull out the search box from the navbar and place it at the top of the screen, making it more prominent. My intention is that a hyperkitty user would value finding content over summary stats (which is still there, users just have to scroll farther down to find that information).