This new mobile layout is outstanding, Martin. Very good tips and feedback provided here as well. Until now I’d been using ublock on Firefox mobile to remove elements from the mobile page I didn’t care for, but with this new design, nearly everything I had an issue with has been addressed.
Here’s my tips on improving it from here:
Create a visual distinction between the title of the story/chapter and the title of a series it’s a part of. Right now the only distinction is their location, but both titles have the same font so for the scrolling eye, you catch both even if you’re not looking for the series title. I’d add something to the series titles like maybe an underline or something, or reduce their size slightly. Maybe a series icon, like a book or something that sits slightly to the left.
All of the information on the right side doesn’t need to be sharing the same lines as the titles and description. There’s no real need to worry about flexboxes and word wrapping just so both things can exist on the same level when users are going to be scrolling down anyway. I’d personally take the box at the bottom where you currently have the time stamp and move comment count, word count, and possibly the badges down to combine them into a single statistics box. Then I’d move that box up so it’s directly beneath the description but above the series box.
I’d hide the badges for series, or at least, I’d make the series box expandable so you can see the badges if you like. This gets into my feelings on hiding badges for new stories in general which I’m not a fan of, but regardless, on mobile when you’re scrolling sometimes you’re seeing the same series with the same badges multiple times and that’s kind of unnecessary.
I’d consider either slightly reducing the badge sizes or designing new, smaller ones for mobile all together. They take up a bit more space than absolutely necessary.
I don’t think I’ve ever been called a daddy by anyone before lol. At this point, GSS has probably been yours longer than mine now too. (I’m so glad you took it over, with what a great job you’ve done on it).
I won’t bother sending you the screen shot. What was tripping me up was that the comment badge and the word count badge split lines when the title was too long, but I just realized that that’s fine since the title has already increased the div to multiple lines, so you’re not losing any real estate with the badges wrapping anyways.
Thanks for the explanation about the ratings. That makes perfect sense. I didn’t do ratings at all way back when for the exact reason you hide them for a period of time. That’s a very simple solution which works.
Again, my main problem is that I don’t want to create a totally separate design for the mobile version. It still is basically the same layout as the desktop version, just “slightly” adapted by CSS.
The three parts every story is created of (author, title, publishing date) is the same as the three columns in the desktop version’s table. Their content is identical with only slight adjustments (like the new folding mechanism) which is totally controlled through CSS (and some JS routines of course).
That approach enforces some restrictions on what I can do with reasonable effort.
Still:
1.) That’s a good idea. I’ll look what I can do there to make it visually more distinctive.
2.) The current design, again, is born out of the table in the desktop version. I consciously didn’t want to create additional columns for all this additional info, so it’s all put into the title column. Using flex boxes to create a reasonable layout for all those elements.
The table columns are dictated by what you can sort the table for: You can sort by Author, Title or Publishing date. That’s a logic I don’t want to change.
3.) I just made the badges visible again (in the first version of the new layout with the collapsed series details, the badges were also hidden).
The thing is: Most new chapters of a series usually have way less hits than stand-alone stories. Probably because most users just want to have a quick wank and short stories are better suited for that. Showing the badges on the series titles might help a bit that people get interested in reading those series.
4.) I like my badges… They don’t take much space right now. But I’ll consider reducing their size, but only slightly.
I had to get used to being called “Daddy” for a while now… Owning this site might have had something to do with that as well
If I’m not mistaken, you started to work on GSS in early 2016, right? I took over end of 2017. So I’ve been doing this for more than 3 years already now. Time flies, doesn’t it?
My one nit-picky suggestion would be to slightly indent the story a bit more than the series, this way it’d kinda convey which one is part of which. (This’d also be helpful on the desktop site as well.)
Tweaked a little bit more as suggested. The series title is now italic and the whole series block indented a bit to separate it better from the story part.
I do kind of wish the page view was able to be remembered as I prefer that option.
My issue is making it so tags need to be expanded. I use tags to see if I want to read a story and so having to click the arrow, not always easy on my phone, adds to the frustration.
The indents and slight modifications you have already made make it 10x better.
You can always save the classic “page view” as a bookmark (All Series - Gay Spiral Stories) if you prefer to use GSS with that interface. Only disadvantage is (right now) that the newsflash doesn’t appear there yet. If enough people ask me for it, I might add it though.
As for auto-expanding the tags… I didn’t think people would ask for this, but I could create an option for that. I’d like to ask you to add that as a Feature Request here, so I have that on my radar.
Interesting on the bookmark, and yeah I could and I might, though I gotta how things go as they are.
On the tags, could you maybe add one more line before the requirement to be expanded is needed. Right now its three but if it was four I think that might cover almost all situations.
Because, as a note, there are times on say AO3 where someone tags like 100 pages worth of them and so in that cases having those super long tag lines being hidden is perfect.
But this site seems nice on the tag amount, so I think four (or five, but that is almost not used) would cover all most all situations.
By the way, if you did add a line or two before the need to expand then I wouldn’t even use the auto-expanding tag option.
I kind of have a problem with having to tap to see more info on the keyword tags and stuff. It’s just really unnecessary a step, and is better to be able to see all the tags all at once rather than hiding them for… no reason.
The reason was/is that it became a nuisance to scroll through a long list of stories if each story entry takes a lot of vertical space in the list. I got complaints about that.
Three lines of tags are always visible, there are only a few stories that have more than that. I could add an option to unfold it by default, but again, another gadget people probably don’t even understand and ever use…
An improvement to this that I’ve thought of:
There are times I’ll expand a description in the listing, only to have to turn around and expand the tags as well. I kinda think that if you expanded one, you’ve shown some interest in the story and having all the details on that page might be helpful.
Oh, and Martin you’re awesome. GSS is such a wonderfully put together site!
They don’t take much space right now. But I’ll consider reducing their size, but only slightly.