Now testing: mobile (small screen) layouts on key pages

(Jeff Atwood) #1

We just pushed a change to allow mobile layouts, on the topic page only, for devices with screens under 7" in size:

(iPhone 5 and Nexus 4 shown above)

It is mostly the hard work of @awesomerobot and @Neil to get this working. This is just an initial pass, we will be improving it greatly over the next week or two.

Remember that Discourse only supports very modern mobile devices running iOS 6+, Android 4.1+, or Windows Phone 8 (the IE10 version).

That said, try the topic page on your mobile device and feel free to report issues here or, even better, submit PRs for fixes!

Brainstorming a mobile Discourse design
Loading more topics on Mobile devices in portrait orientation
Why is Discourse so slow on Android?
(F. Randall Farmer) #2

I guess it’s finally time to upgrade my 4s…

(Brentley Jones) #3

I have some feedback. Sorry if it’s simply a stream, want to get it all out there :smile:. iOS 7 iPhone 4S.

  • I don’t see a login button, and tapping on the “profile” button didn’t do anything.
  • I have to zoom out to see the topic list, and when I do I get weird background color issues. Also, once zooming out all the buttons (navigation menu, create topic) are still right aligned to the initial width… which is probably correct but looks weird with such a large table. Categories page has the same issue.
  • I have to zoom out to read the profile page. Even so, things are overlapping.
  • The login dialog (which appeared after coming back to Safari after multitasking… dunno, still no login button) initial size requires me to zoom out, when I tap on a field it zooms me in, but it doesn’t resize the login dialog so I again have to zoom out to see the whole thing.
  • In topic view the “in reply to” isn’t showing up anymore.
  • Scrolling doesn’t work while replying. The reply window stays in one place. Only happens when text field has focus (so maybe not an issue?)
  • No preview for reply or new topic? Should still have a button so we can preview what the post will look like.
  • Create topic view has some overlapping issues (“Create new Topic:” is on top of the title textbox). Also just seems hard to use on the small screen still. Same for creating a private message.
  • Zooming in can cause the header to wrap to 2 lines, overlapping the title a bit (because the buttons and the logo fight it out for the same line)
  • Edit history is unreadable. I can’t zoom out to see what is going off the right hand of the screen. I can’t close it, since the close button is off the screen as well. Tapping in the faded part at the top doesn’t dismiss it.
  • Can’t scroll the search results when clicking “show more”
  • Landscape does some very weird stuff. Here is the profile page, after I zoomed out:

But, even with all of that, awesome work! I’m thinking it’s going to be a great way to use discourse. I’ll be sure to have it as my main method for a while to help uncover more issues for you guys.

(mfeckie) #4

Working beautifully on Android JellyBean (Xperia Z)

(Ronteras) #5

exactly the same issues on my iPhone 5, iOS 6.1.3 - Safari.

(Neil Lalonde) #6

The focus so far has been on the topic page. We want the experience of reading a topic to be much better first, and then we’ll improve everything else.

It pops up for me on my iPhone 5 when I tap any of the buttons in the header. I’m on iOS 6.1.4, if that matters.

We haven’t done anything to improve the profile page on mobile yet. The topic lists are probably the next priority.

Yeah, we need to fix that. The login modal is too wide. All modals probably have this problem.

We decided to remove that on mobile in our first pass. It should return as we iterate on the mobile design.

The composer fills my screen when the text field has focus, so I don’t know how you’re even trying to scroll! When it doesn’t have focus, scrolling works fine. I don’t think it’s an issue.

This is something we need to add for mobile. It will need to be implemented differently for a small screen.

Yuck. We’ll fix that.

Zooming in shouldn’t destroy the layout. Another thing to fix.

The last few problems you found are because we haven’t done any work on those views.

Thanks for reporting those problems. Still lots of work to do!

(Brentley Jones) #7

You can still drag the “handle bar” to make it smaller. Plus you can zoom out, which gives you white space. I agree though, when you don’t have text focus, you can scroll just fine, so I think it’s good.

(Admir Hodzic) #8

Ping from HTC one X looks amazing

(Jeff Atwood) #10

We view the mobile topic page as almost complete now.

We just deployed a mobile view for

  • topic lists (all)
  • category page

If you have not looked recently on your mobile device, please look again!

I have Lumia 920, Nexus 4, and iPhone 5 in-hand for testing. One known minor issue, we do not navigate to last read post properly on WP8.

(Lowell Heddings) #11

This is looking really great on my Android phone with the stock browser (not Chrome).

The only little issue is that the Home button / image doesn’t go back to the home page for me.

(Jeff Atwood) #12

I think stock browser is really out of date at this point. Any reason not to use Chrome? That’s the default in Android 4.1+ which is all we technically support…

(Lowell Heddings) #13

Chrome on my original RAZR Maxx is really really slow. Painfully so.

It’s not a big deal for me, I’m upgrading the phone in a few weeks anyway,
just figured I’d report.

(Jeff Atwood) #14

Well, we have seen that Android is 3x-4x slower than iOS in Discourse despite our best efforts. Is stock browser, even though it is very old, somehow immune to that perf issue?

(Lowell Heddings) #15

There aren’t a ton of mobile javascript-only applications out there to
compare against. I mostly use it for quick reading and such, and the stock
browser is a lot better for me since it opens quickly. Chrome always lags
when I open it, and then lags whenever I do anything else.

Discourse mobile isn’t too bad on this phone, performance-wise. Certainly
not fast, but I haven’t had a reason to complain.

(Jeff Atwood) #16

We thought about that, but the current version of Android Firefox also shows the same 3x-4x worse than iOS perf. It’s not technically specific to Google Chrome, but I wondered if there was something magical about the old default browser.

If you have an iOS device, try it side by side on Discourse. The difference is really stark. It ain’t subtle.

(Ronteras) #17

This happens when you copy the text for quoting:

If quote text banner could be placed below the selected text, would be great.

(Bill Ayakatubby) #18

Oh no, not this again.

(Lowell Heddings) #19

On my iPad 3 (Retina), Discourse is blazing fast. Definitely a huge

(Jeff Atwood) #20

You should try it on the iPad 4, which is 2x as fast as the iPad 3. Can’t wait for the iPad 5…

On the other hand, even brand new Android devices with the lastest CPUs are still very slow in Discourse. It’s perplexing.

(Lowell Heddings) #21

Yeah, I really want to upgrade my iPad, but I’m waiting for the iPad 5.

Discourse is somewhat slow on my original Nexus 7 as well. Definitely a
difference… I’d guess it’s a memory usage problem, which seems to be the
problem with everything on Android.