Calling All Permies!! We Need Input/Advice for a new "Adaptive" View

Calling all Permies!!

Permies.com needs some tweaks to its format due to some back-end inefficiencies and resources.  Specifically, the mobile view needs help.  At present Permies.com is set up so that there are two distinct views, one for a desktop/laptop and one for a phone/mobile device.  We are thinking about adapting Permies.com so that there is only one "view", but one that is responsive--that is larger screens will allow more buttons and other information to be displayed.  This adaptive display should be less resource intensive than having two separate views.

For starters, we are focusing on the https://permies.com/forums page as the landing page and thinking about features are essential for the mobile view.  One suggestion that has already been mentioned is to change the default view to list only the most recent topics (this can already be changed manually in desktop mode).  This is only one suggestion, is not set in stone and others are of course welcome.

Others suggestions we are looking for are short term/simple fixes that improve the mobile view.  

Given the scope of the project, we are also looking for suggestions for longer term changes for the joint view/responsive design.


I will summarize these as

1)  Changes to the mobile view forums page

2)  Other changes to improve the mobile view

3)  Changes that will improve the overall responsive design


I know that this is a whole lot to ask in one post.  Your suggestions don't have to be earth shattering to be useful--we are really just looking for feedback to see what would work best with Permies.com users.  

So please feel free to offer comments or suggestions, we can use all the input we can get!

Just for clarity, I wanted to add that anyone can add to this thread.  It absolutely does not matter how much time or experience you may or may not have had here at Permies.

Hi Eric,

I think if Recent Topics was the default or even just an option that would be awesome. I try and access it on my phone and it says it's PIE only, which I think is different from the desktop (correct me if I'm wrong). Usually when I'm on Permies on my phone it's just to browse around and see what's up in the community so an accessible recent topics section would be real nice. That's just me though.

Good point Cam.  I am not certain how Recent Topics got tied to Pie, but that is definitely something that we are looking at.

Also, slightly more than 50% of our users are using their phones, so I am kinda thinking that the phone view should be the “base” view and a desktop view has expanded features?  This is very much up for debate and at the moment we are trying to decide what a “base” feature would be.

But your Pie observation is spot-on.

Eric

I'm on my phone all the time and the site is a kind of a pain in the ass. I have to be in desktop view to do anything which means scrolling around and/or reading super tiny text.

Like Cam said, some recent topics-like main page would be good. As it is, mobile view just gets a list of all the different forums, so you have to choose one at a time to look at. If I was a new user, I probably wouldn't bother with the site at all after encountering that.

When making a post in mobile it would be nice to be able to see the thread the way you can in desktop under the "review message" section at the bottom.

Also linking to websites, videos, photos, and quotes would be nice. Not sure how complicated that is...

Profile information is hard to view and limited compared to desktop.

"Recent Topics
Flagged Topics
Best Topics
Hot Topics"

That's a lot of types of topics!

How do you bookmark topics in mobile view? This is possibly more important on mobile than desktop.

Can we have the option of going straight to the last post in the thread? The tiny down button forces you to scroll up almost as much as if you'd just scrolled down in the first place, plus it's inside the thread not visible from the forum.

I find the blue "Reply to this post" button jarring but that's just me.

Thanks for working on this!

I will say right now that as this has been discussed in the past, having some sort of recent topics landing page has always been at the top of the list.

I also like the idea of a review post feature.

I will add these two features as numbers 1 and 2.

Suggestion List
1) Recent Topics like landing page
   *This is already a priority but I will keep it here

2) Review Post feature

I am adding out a thought here

We still want as much functionality as possible but in a streamlined format.  What if we put the main content up top and other menus at the bottom of the thread?  Would this be practical?  Even desirable?  How might it affect search engine functionality?

Just thoughts, fire away

Even on my phone or tablet, I use landscape mode and the desktop version of sites. I hate being shown a stripped down version, being locked out of info or features. How do you feel about colapsable menus? (What wordpress calls accordians.)

T,

I will add collapsible menus as #3 to the list.

Suggestion List

1) Recent Topics like landing page
  *This is already a priority but I will keep it here

2) Review Post feature

3) Some type of collapsible menus

I am quite SKIP/PEP focused with my use of Permies at the moment and I find not being able to the view the merit badges/BBs on a profile, when on mobile, really annoying. It would be good if they could be available in the new world order

Also, what exactly is causing the issue? Is it database requests/server load? If bandwidth is an issue then using a CDN or a caching provider such as Cloudflare would help. In fact, a tech change to cache common queries (such as replies to often-visited threads) would really help both load and bandwidth.

I often hit the +1/-1 buttons accidentally while scrolling on mobile (thankful for the “are you sure?” dialog). Maybe moving those buttons to the top left corner of comments would help avoid that issue

Suggestion List

1) Recent Topics like landing page
 *This is already a priority but I will keep it here

2) Review Post feature

3) Some type of collapsible menus

4)  Some type of space efficient Skip/Pep indicator (maybe a color banding?)

5)  An "are you sure" dialog box for down thumbs for those of us with clumsy thumbs.

I'd like to request that signatures (and PEP Badges) be shown in mobile view.

T Melville wrote:Even on my phone or tablet, I use landscape mode and the desktop version of sites. I hate being shown a stripped down version, being locked out of info or features. How do you feel about colapsable menus? (What wordpress calls accordians.)

THIS!!

I tried to post my proofs for a BB (textile toolbox) from my cell phone on 2 separate occasions, and neither actually posted. I've no clue if this is due to some change implemented recently because I have posted other photos from my phone. Still trying to get the bad taste out of my proverbial mouth.

This is coming to you from my tablet. I have a desktop as well, but for those who have smaller devices know it's often convenient to be in bed, at an office visit, or many other situations to have that portable device to access internet sites. Creating something as close to the full desktop/laptop experience will always get my vote.

I like the idea of the recent topics coming up as a default. When I get on my phone to kill time, I always change to the desktop mode because I like the general layout and know where everything is

any mockups?

Not sure if I'm using the term correctly, but seems like 'appropriate technology' to have a more powerful/informative interface when at home on a PC or wherever on a laptop with an actual keyboard and pointer, and a streamlined viewer-oriented interface in a more mobile setting with crude touchscreen inputs.

The 'adaptive' approach sounds good in theory, but I'm guessing this is why I've been having trouble on my laptops with various websites lately. I tend to set the browser at 125 or 133% to emphasize text for readability, but have noticed the screen looks like my phone, missing many options I see on my PC. I'm not sure how long I've spent on some of these sites looking for settings to restore the full interface, but it is enough to make me sad about the site(s).

I read stuff here on my phone all the time, but it doesn't seem like a big deal to wait for a better interface to be more interactive. I hope site functionality doesn't go down trying to keep up with the rat racers like so many other forums have.

That said, the main implementation here is far superior to any other forum I've been on, so I trust whatever you come up with will likewise be stellar...

Some important points to consider when designing the new "adaptive" view:

1) To make development easier, our end goal should be to have one unified view. So instead of having a two separate views, there will be just one view, which perfectly scales across all sorts of devices and screen sizes (responsive design).

2) For technical reasons, it is easier to improve the current mobile view into a responsive design, instead of trying to make the current desktop view responsive.

3) Because of the above two reasons, we need to start adding ALL the features that currently exist only in the desktop view, into the mobile view.

4) Because of some gray areas in the SEO world, I might be safer to avoid collapsing menus as much as possible.


In order to make a responsive design, the first thing we need to do is implement a responsive layout - the basic structure that takes place on all pages.

I would suggest something like this:
(note that this is a very abstract mockup created from a simple tool. This is only to show the placement of elements. Don't focus on colors or anything for now)


Click on the above image for a full-size view.

OR....

We can make things look more green, similar to the permies home page:



Note that what you are seeing above is NOT just a mobile view. It's just what the unified view would look like on a narrow mobile screen. When the same view is opened in a wider desktop-size screen, the same page would look similar to the current desktop view.

The menu bar needs to be perfectly responsive. Depending on the size of the screen, it can show more or less icons on it. The icons that are hidden will be placed under the hamburger menu at the left.

The "main space" in the above mockup is where the primary content of the page would go in. For instance, on a forums page, it would show a list of recent threads. On a thread page, it would be a list of posts (a full thread view). This is also the page where things like user profiles, purple mooseages, pie, and other stuff would show up.

For example, here is what recent threads would look like:


Click on the above image for a full-size view.


What do folks think? Suggestions for improvement? Maybe better mockups?

I like the idea of evolving the mobile view until we can get it close enough to the desktop view that we can make a big switch.

I also like evolutionary (iterative) design better than revolutionary (huge changes).

The changes to the mobile view needs to be evolutionary too.

Regardless of the design, a plan of implementation might be like this:

1) Clean up the existing view (for better maintainability and bandwidth reduction)

2) Improve the header part (i.e. add menu bar)

3) Start adding essential components that are currently missing in the mobile view

4) Revamp the home page and category pages

5) Make these pages responsive all the way to full-sized desktop screens

6) Create a responsive view of pages that currently don't have a mobile view.

It can take a long time to get past the 5th stage, but when we get their we will have a pretty neat design, which is also easier to work with.

I'm familiar with the "overflow" hamburger menu. In my mind, it serves the same purpose as colapsable menu: items can get moved out of sight for tidiness, without having an attitude of "If you wanna see the rest, get a PC." I like it. I also like the green mock-up.

I like the last mockup picture. I usually switch to the desktop mode and zoom in to the recent topics and it looks very much like this mockup. I like having the thumbnail pictures next to the topic, this often gets me to click where I might not have with just the text titles.

As a laptop user I'd like to echo a couple of folks above that a lot of the responsive designs can significantly diminish the functionality of websites for desktop/laptop users. In particular, the collapsible menu (=) icon is the bane of my existence, as it requires many more clicks to then navigate anywhere, with formerly easily accessible options hidden in submenus of submenus or removed altogether.

I have appreciated Permies relatively light oldschool web design. It works ok with javascript disabled (though this makes posting more difficult), which is a big plus for folks that have older devices or limited bandwidth. There are reactive designs that still have this lightweight character, but I'd definitely urge you to steer away from the more complex reactive designs which really eat up resources. This is actually a significant sustainability issue, as CPU- and bandwith-heavy web design (particularly streaming video) have a truly colossal energy cost at the global scale.

On mobile, having the menus below as you've done is great--your mockup (brown or green) looks good. However, this sort of tab system basically necessitates javascript, which is not ideal. Hopefully the desktop version can be tab-free, with the navigation moving to a sidebar at a large enough screen resolution.

I don't like the brown mobile mock up. If Paul decides on brown, please find a way to incorporate the wood grain into it.

Overall I think the desktop view is very well designed. I use permies on my phone mostly, and always switch to desktop view. I agree with the above post that the mobile forum menu is much less user friendly for me, and this would likely hurt retention of first time visitors. Making desktop view standard/default for my account hasn’t seemed to work (maybe due to my cookie settings?). I really know very little about how much work all this is for the tech folks at permies,  so I hesitate to suggest changes, but my chubby calloused thumbs do have a hard time hitting the apple button in mobile-desktop view.