Brainstorming a mobile Discourse design

(Rahil Sondhi) #1

Continuing the discussion from So, you want to help out with Discourse:

Just creating a separate thread here so we can discuss anything related to making Discourse work on mobile.

I’ll try working on some mobile wireframes this weekend using Omnigraffle or Balsamiq, probably the latter.

Has anybody created themes for Discourse?
Profile Page wastes a lot of Space on Mobile view
(Rahil Sondhi) #2

I got us myBalsamiq for free by applying for their open source license. Thanks Balsamiq!

@sam do you know who I should add to the list of myBalsamiq collaborators? I just need email addresses to add people.

1 Like
(Sam Saffron) #3

Is there any chance you can post the mocks here, even if you make them there. Also, idea, balsamic integration plugin for discourse :slight_smile:

1 Like
(Rahil Sondhi) #4

Yup I can post the mockups here one way or another.

Regarding balsamiq integration, lol might be a little early for that… Got some many things on our plate already

(Rahil Sondhi) #5

Okay here’s what I made today.

Included screens:

  • Topic view
  • List topics view
  • Home page
  • Menu open

After you guys give feedback, I’m not sure if I should move to the CSS or continue mocking up the rest of the screens:

  • New reply and topic
  • My Account area (Activity, Messages, Invites, Preferences)
  • Notifications
  • Search

I’m in Toronto so if you wanna meet up to collaborate, holla!

(Kris) #6

There’s some good initial thinking here - one initial concern I’d have is how ridiculously long the full Menu list is… it’d probably make sense to force people to click through to the category page rather than list out categories considering larger forums would probably have a lot of those. I’d also consider just linking straight to the topic list page and housing the links (to New, Unread, etc.) there and let that drop-down you laid out handle it.

(Patrick Westerhoff) #7

Maybe make the Popular/New/… thing a tabbed view where you can swipe to the side to get to the next one?

(Dan Neumann) #8

Good stuff.

I was playing with some simple mobile version ideas before I disappeared for the past month (work got in the way!)

I ran out of time, but I did get pretty far aesthetically doing nothing but converting Discourse topicview/topiclist to a 100% fluid width on the smallest media query.

I also ruthlessly hid most of the UI.

(Jared White) #9

I’m pretty new to Discourse and am very excited about its progress and I think this mobile layout work is super important. Good job! I’m curious how you will handle notifications and such.
Best -Jared

(Kiran Patil) #10

How about using enyojs framework for building mobile app?

(Sam Saffron) #11

Hi, what ever happened here, did you have a chance to make any more progress? Are you blocked? Out of time?

(Rahil Sondhi) #12

Sorry to drop the ball guys but I’m tied up with other commitments.

(Sam Saffron) #13

That’s fine, understood, hopefully someone picks up where you left.

(Agusti Pardo) #14

I’m interested on this, and might give it a try, I’ll watch the thread in the meantime.

1 Like
(Sam Bauch) #15

What would be the team’s preferred approach to mobile friendliness?

I’m no expert, but in my rails apps I usually set up 2 asset pipelines and layouts, determine which to render based on the user agent string, add a mobile mime type, and rewrite any views that are substantially different for mobile using that mime type. This avoids one of my pet peeves - the redirect/explicit mobile subdomain problem. I hate when I click on a link on twitter on my laptop and am taken to a mobile web layout.

I don’t think this approach would work here considering the ember aspect of Discourse.

So is the preferred approach more of a responsive design? I think there’s some bootstrap in the CSS. Making use of the classes like hidden-phone and visible-tablet might make sense?

Would love to get at least a little better on mobile. I think I could probably do some work against the wireframes @rahilsondhi drew up. I’m certainly not the right person to do this full-fledged, but maybe can get something going as a stopgap until someone more appropriate comes forward?

(Sam Saffron) #16

I would like our intial go to be a media query based solution. If we need to amend some of our ember handlebars templates to make them more friendly for mobile we are also open to that. Tables for one are a PITA to style, though we can do the naive drop a bunch of columns, or position stuff absolutely.

My current approach for this project, would be, add the media query based mobile css. Add a site setting to enable it (default disabled) then successive PRs can get us decent mobile support.

The “lets wait till we have a fully fledged design” does not seem to be working well for us.

(Sam Bauch) #18

The team seems pretty happy with how things are going on tablets, so should we only target screen sizes for mobile phones with media queries?

so something like:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* styles */


I think that’s right - catches most mobile with the first media query, and iphone5 and some other larger mobiles with the second. It won’t catch pre-retina ipads because of the min-device-pixel-ratio, and shouldn’t catch retina ipads either?


1 Like
(Lowell Heddings) #19

I think the very first thing that would be useful to work on for a mobile environment is making the reply editor design rock-solid.

Browsing around Discourse on a mobile device isn’t a good experience, but isn’t absolutely terrible either. The problem is when you try to reply to anything - the editor box jumps around the screen weirdly, and the toolbar is in the way so you can’t see anything. It’s pretty lousy on my Nexus 7 tablet, and I’ve had people tell me that it isn’t very solid on the iPad either, though that could be my custom theme also contributing.

Ironically I end up using my phone to reply when mobile instead of my tablet, because since @sam disabled the preview/toolbar on smartphones in the CSS, it is much easier to deal with.

The second thing that is very bad on mobile is the login screen, which is usually halfway off the display on my phone, and you can’t paste a password (bad for those of us who use LastPass).

I really think it would be a huge win.

1 Like
(Iszi) #20

When you guys have something ready for testing, let me know. I’d love to be able to use Discourse on my phone (Windows Phone 8 on Nokia Lumia 920 - 4.5" screen at 1280x768) and am happy to provide feedback.

I think this should be the first hurdle overcome. If you can’t login, you can’t use the site! See my post in the other thread for screenshots of the issue on WP8.

(Sam Saffron) #21

yeah something like that, keep in mind we already have mobile.scss that is pretty much structured like that, lets start getting some PRs for it.