"responsiveness" of search results page sucks

[willkg]

If you view the search results page with a small screen, it sucks:

1. you have to scroll down through all the facet links
2. the thumbnail takes 3/4 of the width of the screen forcing the title and summary to be very very very thin

Best to look for a better layout for search results for small screens (e.g. 320x480).

[squiddy]

I'm suggesting two changes:

1. Move the facet links off screen or collapse them and have them show up when the user clicks a button. Off canvas example: http://getbootstrap.com/examples/offcanvas/
2. On small screens stack image, title and summary vertically.

I can write up a quick patch later, actually trying it out is better than looking at screenshots.

[willkg]

I like this.

I wonder if it's better to just skip the image altogether for small screen devices. Does the thumbnail provide so much value that it's worth keeping?

[squiddy]

I wonder if it's better to just skip the image altogether for small screen devices. Does the thumbnail provide so much value that it's worth keeping?

I picked a bad screenshot sample showing two identical thumbnails, but I tend to agree that it doesn't add much, other than some visual separation between talks (which we can do with some CSS anyway).

The description could become another issue. Just by looking at the desktop version, some descriptions seem rather long for mobile. Perhaps we could display only some portion of the text, and show the rest by click on a button. Just a thought for now, we can decide that once I have that example ready (sometime today).

[willkg]

It should be showing the summary and summaries should be short. We've definitely got a lot of data problems one of which is that some of the summaries are really descriptions and not actually "summarizing".

If we switch to Elasticsearch (and this might be true of other systems, too), we can show excerpts or even have it truncate the summary.

For now, I think putting a character limit on it sounds like a good idea. Plus we should probably remove all the HTML from it, too.

[codersquid]

Do you want to add truncatewords to {{ video.summary|md|safe }}

[squiddy]

Yeah, truncatewords is what I was thinking of, probably nicer than a hard character limit.

[squiddy]

I quickly hacked together something to try out: https://github.com/squiddy/richard/tree/responsive-search-results

In general, many parts of the page don't work well on small screens, e.g. the navigation completely disappears on small screens (probably some bootstrap magic missing) and the speaker page could use some cleanup as well. However, this is just a quick demo for the search results.

Here some screenshots (I worked from the smallest screen up):

Tiny screen < 500px

Small screen < 800px

Small screen < 800px - Sidebar shown

Medium < 1200px

It's best if you try it out yourself I think. :-)

[willkg]

I think that looks great.

To be honest, I threw together the filters on the left side because I wanted to filter down by category and because the category implies the year. It definitely doesn't work as well as I'd like partially because the underlying search system doesn't support facets. The reason I mention that is that I'd be ok with ditching it for now.

Also, I did some goofy stuff with lists of videos because I want to get to the point where we can do in-browser sorting and searching. Some folks want to sort by title alphabetically. Some folks want to sort by category. Some want to sort by recorded date. I switched things to be in a table figuring this would make it easier down the line to sort things. I don't know if that's true or not. But, that's why it is structured the way it's structured now. We can ditch that, too, especially if that's not helpful for solving the sorting problem.

[willkg]

Also, I haven't been thinking about richard on mobile devices because videos on mobile devices pretty much suck still for the majority of people. I'm not sure what the mobile story should be. It's possible it'll make more sense when we've added some code allowing people to add a video to their personal queue or something like that.

Anyhow, I'm definitely interested in figuring out "what should richard do on mobile devices?" We can toss that in a new bug, though. I mention it here because you've got mockups for < 500px.

[squiddy]

Thanks for the feedback! Sorry for getting back to you this late.

I have the impression that there still is lots of things to figure out / decide. Perhaps we should figure out how richard as a whole should work on other devices before going forward.

Bootstrap is mobile-ready, providing pre-classes to show/hide content on different devices/screenwidths and the grid can adapt as well. However, for my demonstration I had to adjust the breakpoints (I generated a custom bootstrap build) to use the classes - the default values from bootstrap just wouldn't fit.

If however the search result page should improve right now, I'd suggest to do it with custom media queries (thereby working around bootstrap for now) until we've figured out the whole.