Layout on mobile phones

The latest update I’ve uploaded yesterday changes the layout of the list of stories shown on mobile phones when they’re used in a portrait (upright) position. The goal was to reduce the necessity to scroll too much, especially on the “endless” scrolling lists (but the new layout is used everywhere on the site, including the conventional paged lists).

It’s looking like this now (of course a real phone wouldn’t be that high, this screenshot is supposed to illustrate the layout by showing a bigger part of the scrolling list):

I’m not perfectly happy with the result and I want you to discuss how to improve it. The most notable change is that the layout now uses the whole width of the display to show the story details where the previous layout wasted loads of space on the left. To remind you, this was the old layout:

But while this wasted loads of space, it was also airier, less packed with text and - at least to my eye - more pleasant to look at. But you had to scroll a lot more of course.

The other change is that you now have to click an “unfold” button to see the series info (including the series rating badges!) and all the tags.

I want some input on these changes, to work into the right direction. Let me know what you think. I’ll copy a posting from @NZcontroller into this thread, where he suggested to get rid of the labels “Author”, “Title” and “Published” altogether. Please comment on that and whatever else ideas you have!

Thanks

1 Like

Not sure if it’s on purpose, but the “author, title and published” being there seems redundant.

2 Likes

This is a very tacky photoshop edit.
I think if there’s a clearer way to separate the Author, Title and tags
from the story description it’ll be a lot better.

Like either bigger/bolder letters and what not. At the moment they look like one whole paragraph and it’s hard to look at.

Thanks so much for making this site awesome guys ! <3

6 Likes

Appreciate the effort to make things easier. The new layout feels a bit cluttered and it’s somewhat hard to distinguish separate stories. I agree with @NZcontroller about making the title bold/larger and the redundancy of having the words “title” “author” etc.

Perhaps the title in larger font, the author below, and then the description, tags, series info, etc.

I like the hanging indent in @NZcontroller’s example as well. Or even if there’s just a bit more space between stories so you can distinguish them easier

I get what you’re trying to achieve, Martin. However, it feels a bit cluttered now and I also feel like it requires more scrolling for me, but that may be just getting used to it.

I agree with previous comments on some changes to make it clearer.

Thanks for your neverending efforts to improve GSS!

What about something like this?
Don’t have much time so I can only show 1 story.

But the idea is,
-all the logos are the at the bottom,
-the published time is simplified (from minutes, hours, days and weeks maximum), but if people want to know the exact date maybe they can find it some other way like double clicking it or something. tho I’m not sure if that’s important for some people. Easier to look at as well.
-the number of words are simplified too.
-hashtags has a number of limit showing by default.
the most important ones showing up first.
if people want to see all the other hashtags they can click the drop down arrow?

Hopefully this helps in some way. xx

2 Likes

Not sure if it’s just my phone, but the font has gone incredibly small. I can change the settings in my browser, but this is the only site where the font is so tiny for me.

I generally like the new look, but I’d agree with some of the comments about things feeling cluttered

I think (for me, at least) that’s down to change in the colour of the border that surrounds each story. The old format had a clear contrast to indicate “what’s coming next relates to a new story”. Without that contrast it’s easier for everything to blend together, which is what’s then making it feel cluttered. Maybe start by bringing back the old border colour before you look at any more big overhauls?

And yeah, I totally agree that Author / Title / Published are probably somewhat redundant as headings

The font shouldn’t be any smaller than before. What phone do you have? Can you post a screenshot of how it looks on your phone now perhaps?

Yeah, having a bit of whitespace between individual stories would help to prevent them all running into one big wall of text. But I like the full-width approach as a start!

1 Like

I agree that is does look a bit cluttered. I think it might help with some spacing between the stories, but also if possible, it might be useful to have the name of the story series above, with the most recent chapter name just below, or vice versa. The drop down menu of the chapter/looking at the parent series is a bit cluttered and a bit confusing.

Thank you all for your suggestions and comments!

First of all: There are some technical restrictions. Both the desktop layout and the mobile layout are created out of the same HTML code - all the differences have to be doable using CSS tricks (for those technical savvies reading this). This makes it difficult to change the order of things for the mobile layout only, as @Tsubakaki87 suggested. If I change that, I’d have to change it for both the desktop AND the mobile layout (which is possible of course).

There is a reason that the series is BELOW the latest chapter details. Most users are simply more interested in the latest addition to a series, that’s why it’s on top. It has been different in older versions of the site. But of course, please let me know if you have a different opinion on this.


Back to the layout: I’ve tweaked the mobile layout a bit using your input. Is it better now? Again: Let me know what you think!

2 Likes

Big thumbs up from me when it comes to this second edit, Martin. Thanks for taking some of our suggestions on board :smiley:

1 Like

Looks a lot better now.
Just 1 minor change. Atm the profile pics are on the left side and the author name is in the middle. Not sure if that’s on purpose but it would be good if the profile pic is with the name.
Not sure if either left side or middle will look better tho.

Thanks Martin !!

1 Like

Hey, I’ve been reading stuff here since NCMC lol haven’t interacted much. Is there a way to change the scrolling just for myself like in settings? I like going thru all the stories and it doesn’t keep my place which frustrates me. The numbered pages helped.

Sorry that this isn’t exactly about the new layout.

A tip on the scrollable lists: If you use browser back to return to the list, it will jump to the exact place you left the list. This only works if you use “back”, not if you return to the homepage manually. And you might have to wait a bit until the handy recovers the old position (depending on the speed of your mobile phone).

Having said that: The old paged version is still available. Just click the “More Stories” button right of the “Latest Story” headline. Or use the menu Stories → All Series & Stories.

I’ve just uploaded a new update which tweaks the display for mobile phones even further. Most notable change is that the ratings icons for series are now always visible, even before the details have been revealed by pressing the unfold button.

1 Like

Yes this looks a lot better :+1:

The new layout is awesome. Great job Martin! I love the subtle glow around the sponsored story box (which has prob been there for awhile but I just noticed). I love that depending on the stories, I can see 3 entries at a time now. I love that the series details are hidden by default (which works because usually I already know what story a series is if I’m interested, and if I’m not interested, don’t care). I also love the subtleties with the colors of everything. It all fits together very nicely.

Seriously, you’ve done an absolutely fantastic job. And! It all still looks good when I rotate my phone to landscape mode, meaning the desktop version still looks great. I speak from experience: that is hard to do and takes a lot of fiddling with css and JavaScript to get right. Thank you tons and congratulations on doing such an amazing job.

Small callout #1: I can’t see any ratings icons on non-series entries. Is that intentional? Probably a trade-off between space and necessary data.

Small callout #2: I can’t figure out what is the cause, but the title often wraps, and the comment count and the word count badge end up stacking instead of all being on the same line, when they appear to not need to. I can send you a picture if you don’t know what I’m talking about.

But you could also ignore my small callouts entirely, or get to them later (…never).

The home page and the new layout on mobile are amazing and you definitely deserve a break :slight_smile:

2 Likes

Thank you a lot Hugh :slight_smile: You know, it always means a lot to me if you’re happy with what I do. You’re my GSS daddy, even though I think I’m actually a bit older than you :wink:

Callout 1): The ratings for stories are hidden for 20 days after they’ve been published. I’ve added that a while ago, instead this little “Brandnew and desperate to be rated” icon is shown (you can’t see its tool tip on a phone unfortunately) which looks like a hand presenting a story.
This has been done because people started to only read the stories which got good ratings and all the others were neglected. I thought that this is unfair. I like the rating system, but every story should get an equal chance to shine.

Callout 2): Yeah, please send me a picture, but I’m pretty sure in these cases the whole title together with the badges wouldn’t fit into one line next to each other. I’m pretty confident that the “flex” logic of the browser is doing its work correctly, but of course, there’s always the chance that there’s a weird bug. So please send me an example.

I’ll never have a break, every once in a while my coding kink kicks in and I have to start to work on GSS again. My husband keeps complaining that I sit on my computer doing nasty stuff with a wet spot on my pants, even though I’m just writing code :slight_smile:

2 Likes