9

I am having a problem trying to find out how to display the page numbers on a forum in a pleasant way. Please look at the picture below:

the interface

As the picture shows, the page numbers appear to the right of the New Thread button. There will be a very variable number of page number items for every page displayed (ranging from about 12 to more than 20) and as you can see from the picture, a very low amount (14 in this case) already overflows a line and appears in a not so pleasant way.

I'm looking for a way to display these in a flexible, accessible and visually pleasant way without having to renounce to any of the items displayed.

In the development of this interface I am constrained by the fact that I may only edit the CSS of the original (desktop) interface to adapt it to a mobile environment. I may not add or remove any of the already present elements or alter their flow.

How can I improve this?

| improve this question | |
  • 1
    Your whole navigation is horrible - the items are too small for touch interface. I'll post a mock-up for the header shortly. – dnbrv Jan 4 '12 at 16:08
  • Are you talking about the Ticker - Event Log - Popular - ... part? To me it doesn't look very flawed seen on my iPhone, and I haven't heard anybody complain about it. I'd be very happy to use what you'll come up with if it works well, though. – Gabriele Cirulli Jan 4 '12 at 16:40
  • Try making the pages "swipe-able" like Google handles its image search pages on mobile. – Matt Rockwell Jan 4 '12 at 18:22
3

Looking at the screen shot above, it does seem too crowded for a mobile site. I would suggest reconsidering the UI. What is of most important? if it's not that important don't show it on the mobile or displace on to another screen. Make sure to make the clickable elements large enough to be pressed with the finger.

Have you considered a dynamically loading list that would continue to grow as the user scrolls?

Or consider removing the page navigation. Indicate to the user what page they are on, then at the bottom/top provide next page navigation?

The solution presented by Naoise seems to make sense, this would be familiar to people used to more traditional forum/threads navigation. Careful consideration would have to be given to implementation on small screen devices. As mentioned by using media queries you should have quite a lot of flexibility with the CSS.

| improve this answer | |
  • The problem with my work is that I have not a great amount of flexibility at my disposal. The page itself is already using media queries to display the mobile interface when the screen displaying it is less than 768px wide. The problem is that, due to the great amount of devices with different screen sizes, creating different media queries for each would be a disaster. I instead preferred to go for a flexible layout which adapts to the screen size. The problem with the pagination is that there are too many variables to account for when working with it: it can't be done using only CSS. – Gabriele Cirulli Jan 4 '12 at 17:44
3

What's wrong with:

[First] [Prev] ... [4] [5] ... [6] [Next] [Last]

It has been commonly used in little-space-for-paging situations.

As per:

I may only edit the CSS of the original (desktop) interface to adapt it to a mobile environment. I may not add or remove any of the already present elements

You can remove elements with css (display:none) and use media queries to do so depending on viewport size.

| improve this answer | |
  • As far as I know, there's not an arbitrary way for me to, say, hide and show a certain amount of elements using CSS only. In your example, I would have to hide away all numbers except 4, 5 and 6. This would generate two new practical problems: what if the user wants to access the numbers before and after the shown ones I would have to make them re-appear and the content would overflow again? The second problem is that I'm dealing with a variable number of pages and there's not a way to hide all but the center ones when the total number is not static. – Gabriele Cirulli Jan 4 '12 at 17:35
  • This method would definetly involve re-coding the desktop version a bit, but not much really. The arbitrary way to hide elements using CSS is by means of dynamic classes and css selectors. This can be achieved also with javascript. But how it is done is beyond the scope of this site. I am sure there are other better UI patters, I just think this "traditional" pattern should be taken into account. – Naoise Golden Jan 4 '12 at 18:11
  • This method is awful as far as the small surface area that you must hit with your finger (without zooming) – Matt Rockwell Jan 4 '12 at 18:20
  • @MattRockwell?? The above buttons are visual semantics (SE <kbd> code), not an exact recommendation. – Naoise Golden Jan 4 '12 at 18:26
  • @NaoiseGolden OK I see what you mean now. Well add that into the question so that is conveyed, or change their appearance. :) I had no idea – Matt Rockwell Jan 4 '12 at 18:29
1

The problem is a lot tougher than what it seemed at first. The makers of this forum clearly didn't understand that a mobile version of a site isn't just a smaller version of the desktop view.

Since you can modify only the CSS, you'll need to use display:none a lot to make the layout more user-friendly. My suggested changes (from top to bottom of the page):

  • Hide the wrench icon for settings (not too important in mobile).
  • Add padding around the envelope to increase its clickable area.
  • Move "General Discussion" to the left to align it with the rest of the content and increase margin on top of it to equalize spacing.
  • Hide some of the links in Ticker - Event Log - Popular ... as they may not be too important in mobile access.
  • Add clear:both to New Thread in order to move the pagination to the new line.
  • See whether each page number button has a special ID or different classes and hide some of them.
  • If thread OP has a special class, hide it - it adds an extra line and no value.

If you end up getting access to the DOM and the back-end code, you'll need to do a few more changes:

  • Replace pagination system with a drop-down as it is in the mock-up below.
  • Remove the header row above thread listings and change the listings so that they are more readable and take up just 2 lines like this:

    MS Paint Adventures v11 (167 new posts)
    Last post by for no reason (3 minutes ago)

mobile forum pagination

| improve this answer | |
  • Thank you very much for the suggestions on the header. I'll try to apply them and try to hide the unneeded stuff. About the part where you suggest to Add clear:both to New Thread..., I believe that doing so would only leave another half-empty row (with the small New Thread button now sitting on its own) and not solve the problem of the page numbers not entirely filling the horizontal space or overflowing (again, I'm dealing with a very variable number of items). Also, only the First, Last, Prev and Next buttons have special classes, and I have no access to the backend. – Gabriele Cirulli Jan 4 '12 at 17:52
  • Right now New Thread is visually grouped with navigation while it has no logical reason to be there. Thus, you need to separate it and clear:both is the one way I'm confident it'll work in any case. As for list of pages, since the back-end is serving them all at once and all of them have the same class, there's no way to fix it with only CSS (you need to be able to add some JS, at least). – dnbrv Jan 4 '12 at 18:08
1

For mobile, make the number of items displayed higher (assuming it is text not anything 'large') and dump the pagination. Just have next/previous buttons and have enough distance around them to reduce accidental clicking. Will your users really go past the first or second page, most don't. How are the items ordered?

| improve this answer | |
  • 1
    Thank you. Now that you made me think about it, I'm starting to believe that it's actually true that the users won't actually need anything more than the First, Last, Prev and Next buttons. I'll see if this solves the problem in a while. – Gabriele Cirulli Jan 4 '12 at 17:55
  • 1
    You still need to show the current page's number and preferably the total number of pages. – dnbrv Jan 5 '12 at 2:59
  • How about only Next and Prev and convert the pagination into a drop down list? Its possible with a little amount of javascript. – Tony Bolero Jan 13 '12 at 19:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.