Adventure Projects is hiring an Android engineer to join us in Boulder, CO
Mountain Project Logo

Route and Area page redesign - preview and give feedback!


Original Post
Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,406

In our process of rebuilding MP from the ground up, we're getting ready to release new Area and Route pages. It's the same content but it's on our new codebase which has a lot of benefits (much faster loading, modern standards, better on phones, adaptable to future, etc).

AREA page, OLD: https://www.mountainproject.com/v/105731965

AREA page, NEW: https://www.mountainproject.com/area/105731965

ROUTE page, OLD: https://www.mountainproject.com/v/105798994

ROUTE page, NEW: https://www.mountainproject.com/route/105798994

(you can look at any area/route page if you follow the url pattern above)

There are two small new features in addition to the redesign: users can mark comments with a "Beta" check.  As we get data over time, it will be a nice feature to have comments sorted by most useful.  Also clicking on photos opens them "in-page" allowing you to view them faster without losing your place (they also have a normal full page).

Feedback, suggestions, and bug reports are welcome!

Jared M · · Oakland, CA · Joined Sep 2015 · Points: 80

-In-page photo viewing is great!

-The photo carousel is missing on mobile (Chrome on Galaxy S7) for both the new route and area pages

-Letterboxing the photos looks dated. Suggest keeping the original aspect ratio like on the old pages

-Good job reducing wasted space in the comments section for mobile (below username). Would be cool to see the same on desktop, especially for the whitespace below the route list divider on the left side of the page

-I prefer the wider container on the old pages on desktop. Narrower container = more scrolling

grog m aka Greg McKee · · Unknown Hometown · Joined Aug 2012 · Points: 70

Question - how are classics determined? I notice that the listed classics for each area have changed. Where it was 50 before, it is now a bit longer and seems to include a location component. 

Ken Noyce · · Layton, UT · Joined Aug 2010 · Points: 2,104

I certainly like the changes to the photos!

Seth Monteleone · · Charlotte, NC · Joined Dec 2016 · Points: 46

The precipitation graph and the average temp graph no longer have a key for what each color line/bar represent.

Eric and Lucie · · Boulder, CO · Joined Oct 2004 · Points: 140
Jared Murray wrote:

-Letterboxing the photos looks dated. Suggest keeping the original aspect ratio like on the old pages

Dated or not, the main issue is that it can remove the very reason for the photo being there.  Example below from your sample route page.  Why would I click on the new preview?  Just shows trees...

Old Preview:

 

New preview: (same photo)

Mark Says · · Aspen, CO · Joined Jul 2017 · Points: 395

Looking good, gentlemen!

Area Page

  • The text is wrapping super tight with the image carousel, at least when viewing on my macbook, I'll have to look at this again tomorrow when I'm in the office to see how it appears on larger displays. It's pretty clean, but I wonder if it wouldn't be a little more user friendly and readable if you put the carousel in a second column beside the meta data and had the Description in a single width column below both, the way it appears on the route page.
  • Really like that you've pulled the Route Finder out and put it in its own area, I was oblivious to that feature for the first few months I used MP.
  • This is super nitpicky, but I don't mind the star ratings being right aligned on the route pages, it doesn't read well on the route pages in the Classic Climbs table. I turned off the text-align: right!important; rule and that looks way better and is easier to visually scan.

Route Page

  • Not a lot to complain about here at all, looks nice and clean! Also super nitpicky because that's really all I could find, I noticed the X icon to close the image gallery was overlapping the thumbnail which looks a little strange. If you move both the top/right positioning to -7px on .modal-dialog button.ap-close it sticks out in the other direction but looks a little less accidental, or just remove the circle from behind the X in the svg?

I see what Seth is saying about the graphs too, I noticed they correlate with the dialog in the top left but that takes a second to kick in.


Sirius · · Oakland, CA · Joined Nov 2003 · Points: 600

-Letterboxing the photos looks dated. Suggest keeping the original aspect ratio like on the old pages

Jared is spot on in his comments, particularly on letterboxing - strong negative reaction to the letterboxes. Worse than the dropshadows that you nixed. Eric and Lucie also right on thumbnails. The change to the photos is not good.

Opinion: no need to show a pics vote/star count on the page view. It takes up more space, or in your beta layout, forces a fatter letterbox.. Let that star rating show up when pic is opened to carousel view.

Rest looks good.

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,406

Thanks for the feedback so far!

  • The photo thumbs have been updated to do much less cropping (on the photos below the text, not the carousel at top)
  • I wanted to really keep the precip charts small and uncluttered.  They key is in the top-left graph, where the colors match the stats.  Not ideal, but I don't think critical either.
  • Good call on star alignment on route tables.  Removed the right-alignment.

Getting highly variable user-generated content to work on all screen sizes is quite a challenge...

bus driver · · Unknown Hometown · Joined Aug 2009 · Points: 1,075

I can’t seem to edit an area I submitted. I get a 404 error. Is this permanent? 

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,406
bus driver wrote:

I can’t seem to edit an area I submitted. I get a 404 error. Is this permanent? 

Getting that fixed now - thanks for the report!

Nate Tastic · · 88,4,108,50, 80 · Joined Feb 2016 · Points: 10

I'd suggest removing the photo carousel automation. Add some left/right navigation arrows instead. Clicking on dots sucks, by the way, and autoplay isn't cool. Have the arrows show up on hover and hide off hover. I won't go as far as saying it's obnoxious but, it's definitely a distraction while reading the description.

Speaking of dot nav, maybe pull those down and off the images; if you keep them, that is. You're limited to how many images you can put there because, well, dots need space. I realize the need for more images in that spot might not be necessary, however.

The variable width there is odd. Looks like you're trying to add a grey background to account for that but, it looks "off." Honestly, I hate to complain about it without offering you a better solution but, I don't have anything...other than possibly having the previous and next image hugging the current image. Still not ideal but, maybe better than seeing such sporadic shifts in image sizes. Keep the heights all consistent then go from there? I don't know.

One idea -- and I'd have to see it first, is making the sidebar a second-class citizen by moving it to the right side of the page. If I'm forced to read content that isn't centered I think I rather it be on the left side of center versus the right. You have the breadcrumbs right up top so I can find my way home or, if I want to go directly to another route in the area, I can use the sidebar navigation on the right. The photo carousel being that close to the map might be odd, however, maybe it could be adjusted accordingly. One more thing I'll say about this idea is that it will actually be more in line with the layout of the forums. Title and Breadcrumbs being up top, to the left, and under the logo etc; bringing consistency across the site.

On that note, I realize it depends on how far the sidebar and initial content go down the page but, you don't have to do a sidebar/main (2 column) only layout. You could swing areas back under the sidebar and maybe even center them (or grow them horizontally.) I'd have to play with it a bit more myself to say if it is actually a good idea or not and what the best flow is, however, at the very least, it might be better for tablets (before everything goes one column either way for mobile.)

You're already hiding some important details (yellow triangle) with a toggle, why then make the text tiny too? Surely if it's an important note I should be able to read it without having to zoom in on it. Font-size on a desktop, at least, is already small as it is. Consider bumping that up and I'd suggest a sitewide desktop bump of ~2px (or .2 more em or whatever.)

Roboto...

Gold Plated Rocket Pony · · Boulder, CO · Joined Jul 2007 · Points: 91

I like the auto-play carousel for the MP.com home page but not so much on the route page since it's distracting while trying to read. Oh and for some reason the width on the route page is smaller than the mp.com home page. On my monitor route page width is 1170px while flipping back to the home page it's 1340px.

bus driver · · Unknown Hometown · Joined Aug 2009 · Points: 1,075

My issue has been resolved.  Thanks.  

eli poss · · Durango, Co · Joined May 2014 · Points: 442
Nick Wilder wrote:
  • Good call on star alignment on route tables.  Removed the right-alignment.

About this one, it would be nice if it maintained the same layout left to right, even if you update or change fonts, etc. So like:

Route, grade, star rating, type of climb and length, area with breadcrumbs

I do like how they are now in distinct columns, which makes it easier to read, but just retaining the original order would make it easier

eli poss · · Durango, Co · Joined May 2014 · Points: 442

Also, the whole ordeal of adding sub-areas to areas with routes is really annoying, but I'm guessing this is probably a much more difficult fix than the current graphics/UI update. 

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,406
eli poss wrote:

Also, the whole ordeal of adding sub-areas to areas with routes is really annoying, but I'm guessing this is probably a much more difficult fix than the current graphics/UI update. 

I hope to address this some day (I agree it is a total PITA), but not really related to these pages (it's part of the edit system, which I haven't remotely started to convert to new code).

David Tennant · · Denver, CO · Joined Feb 2013 · Points: 2,041

I did notice that my photos are not showing the topo information on the route and area pages smaller version of the photo. Can it be default to use the topo verison? I don't want that info to be missed because it's not default shown. Squirming Coil Area Link

Jared M · · Oakland, CA · Joined Sep 2015 · Points: 80

The " Show More" button appears a second time on long comments and descriptions, but clicking it does nothing. Full text is not visible

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,406

David - thanks for pointing that out.  An update is going out now that corrects this.

Jared - I can't reproduce this (though I believe it).  Does it happen every time a page loads (if you press "refresh", are their two buttons right as the page loads)?  Is it after re-sorting comments?

David Tennant · · Denver, CO · Joined Feb 2013 · Points: 2,041

Thanks so much Nick! Looking good now!

Guideline #1: Don't be a jerk.

Post a Reply to "Route and Area page redesign - preview and give…"
in the Discuss MountainProject.com

Log In to Reply