ballp.it

Snakes In The Ball Pit => Announcements => Topic started by: Lemon on January 01, 2019, 12:17:36 pm

Title: thefpl.us v2.2 Redesign
Post by: Lemon on January 01, 2019, 12:17:36 pm
Your thoughts? (https://thefpl.us/wrote/about-version-2-2-redesign)
Title: thefpl.us v2.2 Redesign
Post by: Mique on January 01, 2019, 02:21:01 pm
Is the logo meant to be cut off on the bottom? Because I really, really don't like that.

There's also a lot of empty gray space above the sidebar, and that's kind of unpleasant too.

I'm also not a fan of the font used for the tags. It's kinda cramped.

Okay, I just checked it out on my phone, and it looks a lot better there aside from the background being a little drab, but I'm really not a fan of the desktop version.
I'm using Firefox on Windows 7 if that makes a difference.
Title: thefpl.us v2.2 Redesign
Post by: A Meat on January 01, 2019, 02:35:25 pm
I have similar desktop complaints as mique, also on firefox, but Windows 10, like, if the logo was in the top left instead of the large empty gray space it'd be fine by me, I don't mind the font.

the logo in the bottom left gets obstructed in firefox because that's where the hover-over URLs for links appear, so even hovering over the logo causes it to be partially blocked by the website's URL
Title: thefpl.us v2.2 Redesign
Post by: Ambious on January 01, 2019, 02:41:19 pm
This is a super fringe usecase nowadays, but there's a lot of wasted space in portrait mode (like in tablets):

(https://i.imgur.com/M3ofwf6.jpg)
Title: thefpl.us v2.2 Redesign
Post by: LowBatteryLife on January 01, 2019, 02:55:32 pm
Are the icons at the button left meant to cycle randomly? I didn't like how tiny and missable the ballpit icon was on the old design, and now it only appears on every third refresh of the page. I mean I guess it's a fun game yelling the name of the forums every podcast and then sending people on a scavenger hunt for the link...

Trying to /avoid/ clicking the screen lest I be sucked into a hyperlink is irritating, and the full-panel click area makes almost the entire screen a trap. I'd prefer just the title clickable, or a very obvious button area. Content text, even in a preview, shouldn't be a link.

Other than that, I like the content type tags and the bolded reading: for the short form tiles.

There's my usability notes. Everything else is personal preference.
Title: thefpl.us v2.2 Redesign
Post by: EYE OF ZA on January 01, 2019, 03:39:25 pm
Actual usability:
The date box significantly overlaps the title for a number of the episodes. See: Shorn Crecy, the episode about the English victory in the Hundred Years' War:
(https://i.imgur.com/HJwJWw8.png)
Or F Plus Live 6 Part 1, featuring Bread, S'Heelies, and an empty void in the shape of STOG.
(https://i.imgur.com/IFm2fyP.png)

My fucking web design opinions Lemon's really interested in hearing:
The random focus item makes me think it's a different kind of content from the surrounding, since the visual distinction between episode and "other" is pretty small.
With sixteen fifteen items with one of them double-width per page on a 1080px wide monitor, one item winds up all on its own on the bottom.
Title: thefpl.us v2.2 Redesign
Post by: Ambious on January 01, 2019, 04:26:41 pm
This is a super fringe usecase nowadays, but there's a lot of wasted space in landscape mode (like in tablets):

(https://i.imgur.com/M3ofwf6.jpg)
Ambious, January 01, 2019, 02:41:19 pm

I’m guessing you mean portrait? (What your screenshot shows) And I’m not sure how fringe it is. I personally browse a lot on a tablet and portrait is my preferred orientation.
Darkly, January 01, 2019, 04:16:33 pm

Yes, indeed  I do, thank you for the correction.
Also I think it's fringe in that most tablets that AREN'T a Microsoft Surface do the sensible thing of portraying websites in a mobile-friendly manner, but I could be wrong.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on January 01, 2019, 04:36:17 pm
Drinking this all in.

Some of these points I disagree with, but happy to hear them nonetheless. Keep going.
Title: thefpl.us v2.2 Redesign
Post by: Boots Raingear on January 01, 2019, 05:55:17 pm
I think the biggest problem I have is that I like it too much?
Title: thefpl.us v2.2 Redesign
Post by: cat_examiner on January 01, 2019, 06:15:25 pm
I DON'T HAVE ANY THOUGHTS, GOODBYE!

thanks to twitter, i discovered the tag explorer (and a nice number of fetish tags), but there's no obvious (to me) way to get to it from the homepage. The important things are straightforward to find, but now i wonder if there's other things i'm missing (i like a sitemap link for trying to find things like this)

echoing this:
Actual usability:
The date box significantly overlaps the title for a number of the episodes. See: Shorn Crecy, the episode about the English victory in the Hundred Years' War:
(https://i.imgur.com/HJwJWw8.png)
Or F Plus Live 6 Part 1, featuring Bread, S'Heelies, and an empty void in the shape of STOG.
(https://i.imgur.com/IFm2fyP.png)

My fucking web design opinions Lemon's really interested in hearing:
The random focus item makes me think it's a different kind of content from the surrounding, since the visual distinction between episode and "other" is pretty small.
With sixteen fifteen items with one of them double-width per page on a 1080px wide monitor, one item winds up all on its own on the bottom.
SATAN MILKSHAKE, January 01, 2019, 03:39:25 pm
Title: thefpl.us v2.2 Redesign
Post by: blunge on January 01, 2019, 11:16:00 pm
Ok it's not just me, whew! I felt I was being mr niggle about the navbar. It's not an important issue, but just a impressions thing.
Title: thefpl.us v2.2 Redesign
Post by: SHAMBA~1.SBB on January 02, 2019, 04:22:38 am
(http://i.imgur.com/PQwAAnH.png)

I just want to see the dang logo.  Aside from that, count me among the chorus that would prefer it back on top regardless.  It's weird and confusing for the logo and home link to be crammed down at the bottom of the page, and all that white space makes it feel like the menu came off its hook and fell down my screen.

(http://i.imgur.com/sQXebRO.png)
Title: thefpl.us v2.2 Redesign
Post by: Ambious on January 02, 2019, 07:04:11 am
There, you fucking nerds (http://www.thefpluslogo.club/)
Title: thefpl.us v2.2 Redesign
Post by: Sherman Tank on January 02, 2019, 08:00:06 am
The new layout makes it a lot harder to read the tags page because they aren't all in little bubbles like the old layout. To be perfectly honest this is probably the least pressing problem in the history of the world but you did ask for feedback.
Title: thefpl.us v2.2 Redesign
Post by: izzy on January 02, 2019, 08:05:15 am
I genuinely thought the website formatting was broken and it wasn't until I read this thread that I realized it looked like that on purpose. Probably not the impression you were going for.
Title: thefpl.us v2.2 Redesign
Post by: Shell Game on January 02, 2019, 09:48:24 am
So it looks like some entries show the body text and others don't. It throws off the balance a little on mobile. Screenshots below. I'm on my phone so I can't get a shot of this one but last night on my desktop I noticed title length seems to also affect how things are positioned.

(https://cdn.discordapp.com/attachments/417084818850054145/530045854565007370/Screenshot_20190102-073048_Samsung_Internet.jpg) (https://cdn.discordapp.com/attachments/417084818850054145/530045854128537610/Screenshot_20190102-073224_Samsung_Internet.jpg)

The result's a little messy when it feels like you were going for a cleaner, more modern feel.

On a personal note I can't really say how I feel. My gut says not to like it,  but my gut is a nostalgic fool that forgets really fast so don't listen to it (and no lie I think most negative reactions are probably that too. change, man...)

I appreciate all the work you put into it. Hope my nattering observations helped. Unless those were intentional. In that case I guess I didn't have much important to say.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on January 02, 2019, 11:17:01 am
Okay, some responses.

Is the logo meant to be cut off on the bottom? Because I really, really don't like that.

Well, clearly you're not alone, because there's a whole lot of that going around.

I'm also not a fan of the font used for the tags. It's kinda cramped.

I think I'm in agreement there.  With a bold serif, the point size of 12pixels is a little uncomfortable. That'll get changed.

[...] if the logo was in the top left instead of the large empty gray space it'd be fine by me

Alright, here's something I mocked up.

(https://i.imgur.com/RyeSGdw.jpg)

If you think that's better, then I just fundamentally disagree with you. Firstly because it's common and less interesting, but also because that logo, probably the least interesting thing on any given page, is then the focal point on every given page. No matter what you're looking at, a bright red circle in the top left is trying to steal your attention.

there's a lot of wasted space in portrait mode (like in tablets):

Yeah, this I definitely agree with. I kept the same breakpoints from the previous design where it made a little more sense, and I need to adjust that. My thought is that the mobile version of the sidebar will happen a lot sooner, absorbing resolutions up to like 800 pixels or so.

Are the icons at the button left meant to cycle randomly?

That was kind of a last minute change and sort of half-baked I'll confess. But you saying that made me realize I can change around that idea to something a little more useful. Here's what's happens now.
* The first icon is a subscription method (currently iTunes, Pocket Casts, or RSS)
* The second and third icons are two random "social" options (YouTube, Twitter, GitHub, etc)
* The last icon is ballp.it

Does that make more sense?

The date box significantly overlaps the title for a number of the episodes
more on this later

With sixteen fifteen items with one of them double-width per page on a 1080px wide monitor, one item winds up all on its own on the bottom.

Sure, that's how a grid works. It responds to your resolution, whatever it may be, and tries to do the best math depending. When you're designing responsively you can't fixate on orphans.

More logo things

Again, majority opinion here so I'm not gonna discount it completely, but I'm in disagreement here. The logo is everywhere on the site, I think tucking it in the corner makes it more interesting and less stock blog. I also don't think "home' needs more prominence because once you've come to the site, "home" isn't really the best way to navigate anyway, every other method is going to help you drill into what you're actually looking for.

As it happens, here was my first iteration (https://user-images.githubusercontent.com/3413200/49823908-68a54600-fd46-11e8-8470-197d3c846238.png), which I also still like.

The logo gets partially covered by URLs when you mouse-over links, including the link around the logo itself.

Here's the only piece of this I do agree with. I don't mind it being covered up when you hover over other stuff, I do mind the url inspector covering the link itself up.

Recognize that I'm not locking anything in forever. That's not how I make websites (obviously). What I'm saying is that I'm feeling good about that placement and while I'm considering what I'm reading about it, I'm not currently being convinced by any of it.

Also, not having the episode titles (or numbers) display in text form on the episode list seems problematic to me.

Assuming you mean the breifs pages because the episode list is pure-image, I hear you. More on this in a bit.

i discovered the tag explorer (and a nice number of fetish tags), but there's no obvious (to me) way to get to it from the homepage.

Yeah, that's alright, I wouldn't call that "primary discovery". Getting dumped into the tag page right away would be jarring, it's main use is to pivot from one episode to another of similar content, exploring all available tags is definitely something you should discover on your own.

i like a sitemap link for trying to find things like this

FWIW, thefpl.us actually does have a sitemap (https://thefpl.us/sitemap), but its primary purpose is to be consumed by search engines.

I just want to see the dang logo

You're in luck. The F+ logo currently exists 14 times on the home page. 25 times on the epsiodes page.

The new layout makes it a lot harder to read the tags page because they aren't all in little bubbles like the old layout.

Yeah, agreed, I think the design of that page can be improved, though I'm not yet sure how. I'm exploring this

I genuinely thought the website formatting was broken and it wasn't until I read this thread that I realized it looked like that on purpose.

I'm using this as a testimonial in my portfolio.

So it looks like some entries show the body text and others don't.

So what's happening here is that the double-size block is getting squished into a single box at significantly smaller displays, and I think I might agree that the rhythm change is a bit jarring. Gonna explore that.

Okay, so

One of many things I was hoping to get away with in this particular resign was to avoid a duplicate content issue with the title. Since (I think?) every single episode cover displays the title itself. It seemed better to me to not duplicate content right next to itself, let the image serve as the title and move forward from there.

The problem there is that the images themselves are inconsistent. With everything else having rules, every episode is allowed to determine where its own title goes, as well as the ep # if there is one. While I don't super duper love displaying the text "Problematic Sex Toys" underneath the text "Problematic Sex Toys", I think it solves more issues than it causes.

So I have a GitHub fork called rebrief set up to approach some of the stuff discussed here. But for the record, you remember the several times I asked for design opinions on the beta? None of you did that. So, a teeny tiny itsy bitsy ever-so-small fuck you to the lot of you. Y'know?
Title: thefpl.us v2.2 Redesign
Post by: bubbleuj on January 02, 2019, 11:50:26 am
On mobile I keep trying to move the logo around like Facebook messengers little pop ups.

But that's a me problem.
Title: thefpl.us v2.2 Redesign
Post by: SHAMBA~1.SBB on January 02, 2019, 12:00:23 pm
Alright, here's something I mocked up.

(https://i.imgur.com/RyeSGdw.jpg)

If you think that's better, then I just fundamentally disagree with you. Firstly because it's common and less interesting, but also because that logo, probably the least interesting thing on any given page, is then the focal point on every given page. No matter what you're looking at, a bright red circle in the top left is trying to steal your attention.Lemon, January 02, 2019, 11:17:01 am
If this is about attention and focus, having the logo at the bottom is actually more distracting to me.  A logo in a normal place is invisible.  A logo in a strange place where I have never seen one before is constantly itching at the corner of my eye.  Also, having it way up at the top as its own little thing gives it undue focus, but putting it in the same block of the screen as the menu doesn't have that effect:

(http://i.imgur.com/dLQqMpV.png)

But for the record, you remember the several times I asked for design opinions on the beta? None of you did that. So, a teeny tiny itsy bitsy ever-so-small fuck you to the lot of you. Y'know?Lemon, January 02, 2019, 11:17:01 am
This doesn't mean I'm interested in your Goddamn Design Opinions. In fact, assume I'm not.Lemon, December 18, 2018, 04:19:12 pm
Genuinely can't tell if you're joking.
Title: thefpl.us v2.2 Redesign
Post by: Blandest on January 02, 2019, 12:18:47 pm
I for one like the new design. It's interesting and minimal. And I really don't think having the logo at the bottom is going to be something anyone cares about after they've seen it for the hundredth time.
Title: thefpl.us v2.2 Redesign
Post by: Vinny Possum on January 02, 2019, 12:31:29 pm
Hi I'm basically Ralph Wiggum when it comes to visual art and design so I don't really have an opinion, goodbye!

I would totally cream for a web 1.0 looking version though. You know, as a joke.
Title: thefpl.us v2.2 Redesign
Post by: Sauce on January 02, 2019, 01:29:59 pm
Personally, I really do like the new design, but I have a slight usability concern. Maybe it's just me being dense but it took me a while looking at the mobile site to figure out that I needed to click the F Plus logo to get the menu up.
Title: thefpl.us v2.2 Redesign
Post by: izzy on January 02, 2019, 03:27:32 pm
I genuinely thought the website formatting was broken and it wasn't until I read this thread that I realized it looked like that on purpose.

I'm using this as a testimonial in my portfolio.Lemon, January 02, 2019, 11:17:01 am
Go right ahead, though I really wasn't trying to be an asshole. I think the combination of larger serif font, white background and cut off logo hit my brain as broken CSS instead of a redesign. Well, that and it was 5am.
Title: thefpl.us v2.2 Redesign
Post by: Blandest on January 02, 2019, 04:24:06 pm
It seems some people are being listed twice on the stats page. I assume this is due to minor variations in their names and I can't imagine it's worth fixing.
Title: thefpl.us v2.2 Redesign
Post by: Ambious on January 03, 2019, 04:59:21 am
But for the record, you remember the several times I asked for design opinions on the beta? None of you did that. So, a teeny tiny itsy bitsy ever-so-small fuck you to the lot of you. Y'know?
Lemon, January 02, 2019, 11:17:01 am

That's the kind of approach that got Microsoft to release the infamously buggy 2018 October Update for Windows 10, so at least you're in good company.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on January 04, 2019, 11:39:47 am
Updates made:


If you're interested, here's the merge (https://github.com/AhoyLemon/TheFPlus/pull/41).
Title: thefpl.us v2.2 Redesign
Post by: Ambious on January 05, 2019, 10:35:29 am
Tablet portrait view is perfect now, thanks!

(https://i.imgur.com/P4CxPsr.jpg)
Title: thefpl.us v2.2 Redesign
Post by: Shell Game on January 16, 2019, 09:39:30 am
(https://cdn.discordapp.com/attachments/455819328638681110/535120216234000385/Screenshot_20190116-073527_Samsung_Internet.jpg)

Hey borders! Don't leave me hangin'!!!Hopper Text
Title: thefpl.us v2.2 Redesign
Post by: Macho Masc Sangy Savage on January 16, 2019, 02:57:07 pm
I do appreciate the user names being in blue, it's easier to quickly distinguish it from the other links.
Title: thefpl.us v2.2 Redesign
Post by: chai tea latte on January 22, 2019, 08:19:00 am
Really liking the mobile dark theme. Thanks!
Title: thefpl.us v2.2 Redesign
Post by: Lemon on January 23, 2019, 07:29:39 pm
(https://cdn.discordapp.com/attachments/455819328638681110/535120216234000385/Screenshot_20190116-073527_Samsung_Internet.jpg)
Shell Game, January 16, 2019, 09:39:30 am

Just fixed mobile support for the hopper and dump pages.
Title: thefpl.us v2.2 Redesign
Post by: Emperor Jack Chick on February 06, 2019, 12:23:34 am
it took me a really long time to figure out where the RSS feed was.

the end.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on March 06, 2019, 10:28:58 am
it took me a really long time to figure out where the RSS feed was.
jack chick, February 06, 2019, 12:23:34 am

Switched the first sidebar icon to always be RSS (excluding all the other things). Letting the new Episode Feed page (https://thefpl.us/episode/feed) do the work of providing subscription options.
Title: thefpl.us v2.2 Redesign
Post by: SHAMBA~1.SBB on March 06, 2019, 12:37:35 pm
The enormous space after the "next" button when browsing episodes still bugs the shit out of me.  It should be at the end of the last line, not orphaned on its own.
Title: thefpl.us v2.2 Redesign
Post by: Dr. Buttplug on April 12, 2019, 05:38:39 pm
I was skeptical at first but i love how the menu looks on my phone.
(http://i.imgur.com/OVOjNsw.jpg)
Title: thefpl.us v2.2 Redesign
Post by: Lemon on April 18, 2019, 03:22:35 pm
/tags page (https://thefpl.us/tags) redesigned a bit.

I recently noticed that page was unusable on the phone, so edited some of the CSS, while I was at it I tried a new display idea. Works... fine, imo. Not the best, but okay.
Title: thefpl.us v2.2 Redesign
Post by: SHAMBA~1.SBB on July 26, 2019, 02:16:37 pm
I don't know when this happened, but I noticed that the F in the logo is fully visible above Firefox's tooltip when hovering now.  Made me unexpectedly happy to see.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on August 13, 2020, 09:50:41 pm
One of the least consequential changes I've made in a while, but this box always bugged me.

(https://i.imgur.com/W9z0vwk.png)

The meet page will now recognize the file type of each image and if it's a PNG, it will mark it as such, and not give that particular image a box-shadow.

(https://i.imgur.com/Heaad70.png)


Also while I was at it, I restyled the hover effect for fanart in episode summaries.

(https://i.imgur.com/FBh3Cpr.png)
Title: thefpl.us v2.2 Redesign
Post by: Lemon on August 15, 2020, 03:43:54 pm
Made another update to the /meet page. Here's the general idea.

There's three categories of people: Regular Cast, Guest Readers & Content Providers. You can toggle to show and hide each group. Two problems with that....


SO:

(https://user-images.githubusercontent.com/3413200/90320783-91151880-df09-11ea-952b-6f4f4199b4cb.gif)
Title: thefpl.us v2.2 Redesign
Post by: Ambious on August 16, 2020, 05:48:29 am
statistics is my favorite ridiculist

(https://i.imgur.com/vLXtgN1.png)
Title: thefpl.us v2.2 Redesign
Post by: Puppy Time on August 18, 2020, 05:43:05 pm
I don't know if this goes here but the new ballpit logo is boss.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on August 18, 2020, 08:56:41 pm
I don't know if this goes here but the new ballpit logo is boss.
Puppy Time, August 18, 2020, 05:43:05 pm

Credit to LINDA on that one.

And related to this thread (https://ballp.it/index.php?topic=3436.0), I'm still interested in randomizing the top logo, if I get enough options.
Title: thefpl.us v2.2 Redesign
Post by: Puppy Time on August 18, 2020, 09:16:00 pm
OMG that would be beautiful!
Title: thefpl.us v2.2 Redesign
Post by: KingKalamari on August 18, 2020, 10:26:53 pm
While that is an awesome drawing, the ancient F Plus honor code I just made up demands the old snake logo be given the chance to knife fight the new one to defend its status as Ballp.it mascot.
Title: thefpl.us v2.2 Redesign
Post by: Lemon on August 25, 2020, 11:44:45 am
Just made some adjustments to the "cover grid" layout (used when you click browse episodes (https://thefpl.us/episode) or other projects (https://thefpl.us/also-made))


Looks a little cleaner and more consistent, imo.

So, it looks like you finally won, Sham Bam Bamina.
Title: thefpl.us v2.2 Redesign
Post by: Shell Game on August 26, 2020, 09:34:33 am
While that is an awesome drawing, the ancient F Plus honor code I just made up demands the old snake logo be given the chance to knife fight the new one to defend its status as Ballp.it mascot.
KingKalamari, August 18, 2020, 10:26:53 pm
this sounds like a suggestion for a pretty cool alternate banner