Material Design + Breadcrumbs + Mobile

Question

Long time lurker, first time poster.

The org Im with is pushing towards Material based design (polymer etc) and we're developing a new app for mobile and desktop.

The UX issue Im hitting is the use of breadcrumbs. Its only a 3 tier deep site (home > list of events > event detail) but the labels are sadly long, and Im being asked not to abbreviate (especially for screen readers).

So I'd love to ask this UX brains trust their thoughts on 2 solutions Im aiming at:

1. Just a back button - Its not deep - its not easy to get lost - and when you go to an events detail, youd only ever want to go back (or register for it, which flicks off elsehwhere).

2. Left hand side ellipsis responsive breadcrumbs (prototype: http://jsfiddle.net/ZfbaD/529/). I see this is elegant (as the event names are potentially long) but has the issue of ellipsis'ing the nav back off the screen (unlikely... but...).

Any input would be appreciated!

Answer 1

Merge the use of a back button with a very clear title (centred) providing current context. This is what iOS does for most everything with a depth of less than 5, and it works well. Pinterest is another high profile example of this approach, with an endless depth.