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:

overview.320width

640px screen width:

overview.640width

768px screen width:

overview.768width

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.

overview.desktop

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).

This article has 2 comments

  1. Adam Williamson Reply

    ‘px’ has become kind of a fuzzy logical unit at this point, right, and isn’t really just a pixel any more?

    assuming that, these look pretty good, I just wonder if there’s maybe not quite enough space devoted to the meat – the actual messages? i’m not sure I really want to have the activity summary and ‘most active posters’ lists that prominent if this is something I’m using on a regular basis to actually read and post messages…they just don’t seem like things which will be heavily used in a typical rapid mobile workflow. for me the most successful mobile designs seem to be the ones with a really intense focus on foregrounding the most essential and heavily-used elements.

    “start a new thread” is an important function, but does it need to be that big? it seems to suck up a lot of screen space for what’s basically a button.

    thanks for the work!

    • Adam Williamson Reply

      oh, just saw the text at the bottom, so that’s something you already considered – I guess I’m just wondering if maybe you could go even further down that road 🙂

Leave a Reply to Adam Williamson Cancel reply

Your email address will not be published. Required fields are marked *