Mobile layout

[Sacred Jellybean]

Is there a way to make this ish more mobile friendly? Is it simply a matter of adding new CSS rules? If so, I'd be happy to take a stab at it. After all, it's my bread and butter

[Sacred Jellybean]

For serious, this could use some clean up. It offends my UX sensibilities. Look at the top status bar, and the address bar at the bottom, for scale. The logo is fine (but would probably look better if it was a bit bigger), but the forums names, descriptions, and moderator names are too tiny. There's too much padding in the thread and post count cells (those numbers should probably be a bit bigger, too). Much real estate is wasted by blank space in the Last Post cell. We could generally make all the fonts bigger; forcing the user to scroll down a bit more is a fine trade-off.



I would also encourage hiding the top menu links. The Search button is redundant if we already have that search box. I don't think anyone here cares about a Members List, User Map, Calendar, or Help. That's all good for a desktop format, but you must be frugal with the tiny space of a cell phone screen.

Onto a thread itself:



The text in the post is a sufficient size, though I suggest the next font size up. The avatar needs to be bigger, as does the user name, title, stars. We probably can scrap the post count, threads, etc. Again, imo the mobile layout should be bare bones, because there just isn't room for all the trimmings.

Let's look at Quick Reply, next. As a feature, it's very nice to hammer out a quick reply on the go. It has its problems, though, namely text size.



This is what it looks like, fully zoomed out. What is this, a reading and writing center for ants?!? Well, okay, to be fair, the first time you click into the textbox, the mobile browser helpfully enlarges the text area for you. But that also causes the text to overflow off the side of the screen:



So as you can probably guess, that's the same sentence typed 4 times, enumerated. Meaning the bolded text below is cut off at the end of the screen:

1) A quick brown fox jumps over the lazy dog. 2) A quick brown fox jumps over the lazy dog. 3) A
quick brown fox jumps over the lazy dog. 4) A quick brown fox jumps over the lazy dog.

That means when reviewing a post, for every line you typed, you have to continually back and forth across the screen, while reading it. Very un-user-friendly.

Also, you'll notice that the smile box extends into the text editor. Of course, that happens on the desktop version, too. All the same, it would be more appropriate to narrow it down, and probably make the smilies bigger.

SPEAKING OF THE SMILIE LIST!



While this is a very handy feature, it for sure needs some tweaking. You can only see what the accompanying text is by scrolling all the way to the right. Look at the size of that horizontal bar! That's a lot of scrolling in a teeny, tiny panel. To be clear, this is on the desktop site, the presumed default way to use this site, so it needs some TLC.

Know what the culprit is? These silly novelty images that we for some reason put in as smilies (and never actually use):



They're so large, that they stretch out the table and make it quite unwieldy to find what you're looking for. I mean, they're cute and fun, but not quite worth the trouble if we never use them. They are thus:






I say they oughtta take a hike.

Whatchoo think, Toven? Mind if I fiddle around with these styles a bit? Obviously CSS allows you to create rules that are only applied to a small screen size, so the desktop site would be untouched. Additionally, I'm confident that I can put together a prototype before deploying anything, so you can review and sign off, if you so desire.

[etoven]

For serious, this could use some clean up. It offends my UX sensibilities. Look at the top status bar, and the address bar at the bottom, for scale. The logo is fine (but would probably look better if it was a bit bigger), but the forums names, descriptions, and moderator names are too tiny. There's too much padding in the thread and post count cells (those numbers should probably be a bit bigger, too). Much real estate is wasted by blank space in the Last Post cell. We could generally make all the fonts bigger; forcing the user to scroll down a bit more is a fine trade-off.



I would also encourage hiding the top menu links. The Search button is redundant if we already have that search box. I don't think anyone here cares about a Members List, User Map, Calendar, or Help. That's all good for a desktop format, but you must be frugal with the tiny space of a cell phone screen.

Onto a thread itself:



The text in the post is a sufficient size, though I suggest the next font size up. The avatar needs to be bigger, as does the user name, title, stars. We probably can scrap the post count, threads, etc. Again, imo the mobile layout should be bare bones, because there just isn't room for all the trimmings.

Let's look at Quick Reply, next. As a feature, it's very nice to hammer out a quick reply on the go. It has its problems, though, namely text size.



This is what it looks like, fully zoomed out. What is this, a reading and writing center for ants?!? Well, okay, to be fair, the first time you click into the textbox, the mobile browser helpfully enlarges the text area for you. But that also causes the text to overflow off the side of the screen:



So as you can probably guess, that's the same sentence typed 4 times, enumerated. Meaning the bolded text below is cut off at the end of the screen:

1) A quick brown fox jumps over the lazy dog. 2) A quick brown fox jumps over the lazy dog. 3) A
quick brown fox jumps over the lazy dog. 4) A quick brown fox jumps over the lazy dog.

That means when reviewing a post, for every line you typed, you have to continually back and forth across the screen, while reading it. Very un-user-friendly.

Also, you'll notice that the smile box extends into the text editor. Of course, that happens on the desktop version, too. All the same, it would be more appropriate to narrow it down, and probably make the smilies bigger.

SPEAKING OF THE SMILIE LIST!



While this is a very handy feature, it for sure needs some tweaking. You can only see what the accompanying text is by scrolling all the way to the right. Look at the size of that horizontal bar! That's a lot of scrolling in a teeny, tiny panel. To be clear, this is on the desktop site, the presumed default way to use this site, so it needs some TLC.

Know what the culprit is? These silly novelty images that we for some reason put in as smilies (and never actually use):



They're so large, that they stretch out the table and make it quite unwieldy to find what you're looking for. I mean, they're cute and fun, but not quite worth the trouble if we never use them. They are thus:






I say they oughtta take a hike.

Whatchoo think, Toven? Mind if I fiddle around with these styles a bit? Obviously CSS allows you to create rules that are only applied to a small screen size, so the desktop site would be untouched. Additionally, I'm confident that I can put together a prototype before deploying anything, so you can review and sign off, if you so desire.

I'm working on a new responsive theme.

[etoven]

Still much a work in progress. But you can try it here.