Why do you think everyone tends towards really small text and hiding almost everything on their profiles?

I've noticed that extremely small and skinny scrollable DIVs are still in vogue on petsites. Why is that? Not to be a grouch critiquing everyone, but it's not very user-friendly and doesn't translate well to people will different sized screens and monitors. And if you have a screen reader or a large text turned on? Good luck.

Just wondering! Do you see any modernization of design trends around these parts?

I feel that many profiles are made to look pretty and appealing to the eye so they are more likely to get nominated. If if makes you feel better, many of my pet profiles have the story text inside of a color box to make it easier for users to read the story. Some good examples of this are Delf, Chubberwubz, and HarmonyCharm.

I guess it makes the page look more sleek and... minimalist? Tidy? Something like that; I can't think of the word right now. :'0 From a purely aesthetic standpoint, I think it looks cool, but it can be kind of user-unfriendly.

Those hover/dropdown things seem to be really popular, and while they lend themselves to some awesome-looking profiles, it's impossible to get those sections to stay open on mobile, lol. ;___; Especially if it also has a scrollbar-- trying to scroll down in a hover-only div keeps hiding it.

Yeah, definitely trying to be pretty and vote-worthy. I bet there's a way to do both modern design and something that fits into the current trends of the site.

Goodness, I can hardly imagine. haha The site isn't very mobile friendly overall, but i completely avoid profiles on mobile.

That's similar to what I stated; users want to appeal to the eye so that they can get nominated. I, on the other hand, have just learned a bit of coding. My pet profiles don't have too much difference from the default one Subeta gives us.... All I do is change the background, put the pet-info in a color that's bright enough for users to easily read the text, and put borders around the pet image, minion, and TC. The only exception to this is my pet SonataMoon. She has the minion moved to the right I believe.

To be honest I hate profiles with tiny font. If they're smaller than 10pt I just won't bother reading it. I actually have a lot of pet peeves with fonts, haha. Fonts nearly the same color as the background, everything being in lowercase, and so forth are really off-putting to me. I feel this sort of web design bleeds over from tumblr nowadays because aesthetic, but all functionality and user friendliness goes out the window.

As far as hiding stuff, for me it depends on the character! For some of my pets it just doesn't matter to have the battle stats showing because they don't fight. Some have the minion hidden because they really wouldn't take care of a pet, character wise (but I want my pet to stay happy). I tend to recode my own pet friends sections because what subeta offers really isn't efficient at the moment, as far as reordering pets.

Agreed x 1,000. Fonts on modern monitors should be at least 12pt for body copy, in my opinion. Subeta uses 14pt default, it seems, which is a great starting spot. Coding your own pet friends seems like a smart solution!

Yeah, definitely. Your stuff is all readable, so that's a huge plus. Keep up the good work.

People have been using tiny text sizes on petsites for years n years. I used to do it a lot more for aesthetic (it looks so sleek) but I'm trying to take accessibility into consideration more now.

A lot of pet spotlight winners come off more like "look at my rad coding skills" than actually showcasing the pet, their treasure, and whatever else lol. They make me feel like a 2000000 year old grandma trying to read the 8pt font in a 300x300 box.

I fix the text at 12 so that when site changes happen that affect fonts my profile doesn't end up broken or unreadable for however long it would take me to go back to fix it. It's a good balance between smallish and being so large that I need to increase the text box size so reading the story doesn't require way too much scrolling. My focus is the pet art and story, with a treasure somewhere in there shoved off to the side, and less important info like stats, minion, and spotlight stuffed into mouse overs or hidden. There's a lot of information pet profiles can show that just may not be important to the character or story, so people hiding things like friends, creation dates, or even their treasure doesn't bug me.

Quote by stocking

A lot of pet spotlight winners come off more like "look at my rad coding skills" than actually showcasing the pet, their treasure, and whatever else lol.

I actually disagree here! A lot of spotlight winners' profiles aren't coded by the owner afterall. P: But as someone who codes a lot of profiles, I do usually do what the owner asks for, haha. Sometimes that can be pretty vague or they commission the profile early on in their development, so it's hard to showcase these things when I don't know what they are. P: I also think there's a way to showcase both, which is what I try to do with my pets. :D

I think it's important to remember that not everyone who makes profiles is someone who is super integrated with web design, UI/UX, graphic design, etc. So I think that leads to some general web/ui/graphic design 'no-nos' with how things are coded or presented. Hovers are really popular in general for profiles, and I guess it's because people think they're cool? I tend to shove certain things (minion mostly) in hovers these days because it's easy and adds something nice for the people looking for that kinda thing when they commission me. Minion is kinda standard so I think it helps to customize it. As an artist though, I 100% lean more towards aesthetics so I tend to sacrifice some functionality (scrollbar overlays, cough) for that. Until firefox lets me codes custom scrollbars I'll use scrollbar overlays until I die. I know people hate them, but I hate the basic scrollbars more. :'(

I tend to use an 11pt font on my profiles, which I know is on the small side. But even on my 4k monitor I can read it easily, so I guess it's okay? ?___?

Oh of course I realize that- that's why I think a lot of winning pet profile designs look similar LOL

That style just isn't my thing right now! Totally makes sense why it's popular- they're very fancy especially if you've got no graphic or code know-how. Other people are able to supply that so why not!

I think the problem is that nowadays people have a lot of different screen resolutions. I'd love to make a profile that looks good on new computers but I know a lot of people still use older ones so the layout will scroll for them if it is more than 1200x700. And there's also the fact that people like art being used in the profile so the profile becomes a lot less flexible so people tend to go for something that works in a smaller size to include everybody.

I think part of the psychology behind this trend is that our idea of a modern, user-friendly site tends to look and feel really... corporate haha. Think big bold sans-serif on white, like a Medium article. It looks professional. Whereas pets are a very personal and customized thing, so people tend to the other side of the spectrum. This is why I think a lot of tumblr layouts also have tiny text in tiny boxes which is sorta similar. We've come to associate the first aesthetic with more professional feelings, and the second with more personal sites. The aesthetic you describe is basically the polar opposite of a business-y website's aesthetic if you think about it (big text/whitespace -> small text/small boxes). That's my theory to explain the trends you describe.

I agree, small text can look really sleek, but I think that's truer now for printed materials. Since you're able to get really close to a page without it hurting your eyes if it's not a backlight screen burning into your retinas. I've noticed that I sit further away from my screen than I used to, so small text is a problem.

Yeah, hiding things that aren't relevant to the context of the pet definitely makes sense to me. hiding literally everything on your profile, while allowed, seems silly to me. A lot of my pride on Neopets back in the day was shown on my profile. My avatar count, my cool shield, my trophies, and my pets. It's interesting to me that so many people here choose to not let visitors see that info. Since it's clearly not against the rules, I don't have a real problem with it. It's just interesting. And can make giving them gifts hard... haha

I think this is probably the most accurate perspective. I for SURE used to participate in the no-no's before becoming a full-fledged UX nerd. I do think, however, there's an opportunity to teach everyone about UX / UI and general web design best practices on platforms like this. I learned HTML and CSS by playing Neopets, Gaiaonline, and Subeta. I fell in love with it because of these silly games. I think there's a HUGE opportunity (one that Neopets missed) for people to learn those skills form these games. And in the end, that will only make everyone's experiences better, right?

11pt isn't bad. It is on the small side, but it's not bad.

And I agree that scroll bars are pretty ugly. That's why I don't use overflow-auto divs anymore!

Yes, exactly. That's kinda the problem. Anyone using an HD monitor is kinda left in the dust with tiny fonts and boxes. I think subeta allows queries in CSS, so it's possible to make a "responsive" profile design. Let me know if thats inaccurate. I know that Flexbox works, at least.

That may be true. There are ways to be user-friendly and not corporate, however. That may just be my deeply-embedded-in-ux perspective though. I'd rather have my profile look like Netflix than to look like a book cover, but that's my bias. Does that make sense?

Also, not everyone who codes their profiles actually wants to learn from it. Sometimes they just want to customize a profile, but aren't interested in learning UX principles (or coding in general) in an in-depth way, and that's fine for things like this. It's just a for-fun thing, and it's great if some use it as a learning opportunity, but not everyone is into that. So as an analogy: I could draw little doodles and write stories for my pets, but it doesn't mean I want anyone to critique my art and writing, or even that I care about working towards mastery in those skills, sometimes it really is just for fun and that's fine :)

I also wouldn't say there was a missed opportunity with Neopets, I guess you can always say they could've done it better, but at the college I went to I actually met a lot of comp sci majors who say they started because Neopets got them into it!

That makes sense.

and yes, I know that not everyone wants to learn when they approach it, but I do think that it could be used to teach people willing to learn. For me, I make things for people to use and experience whether it's my art, music, or design work. I like getting feedback and critique and growing and learning. I'm sure some people don't, which is fine, but I like it. haha

I would say it was a missed opportunity to capitalize on the special spot Neopets sat in. And yes, I hear all the time from people saying they got into dev or design because of Neopets. That says to me that they should have been making more learning tools for code. They could have been a real force in educational games. I think jumpstart sees that, thus the acquisition. But that's all kinda beside the point! haha

Subeta does allow media queries. Or at least it does in custom css. Getting it to work on mobile without the viewport-tag can be achieved by adding a zoom factor. For example I use this code in my custom css as the basis for my mobile layout:

(max-device-width: 600px) { body { zoom: 300%; } } Also, I agree with Treggify. There are enough ways to make things user-friendly, but not corporate. For example, modifying code to also show hover-effects on:focus or on:active instead of only on:hover. That way you can at least see the effects on mobile and it's not that much of a hassle to add those extra lines.

Like mentioned, a lot of users like using art in their profiles. It's do-able to make that responsive as well, but it's a lot more fiddly than sticking with less flexible layouts. You'd have to use retina-friendly images and percentages/ems for spacing and positioning, instead of pixels. If you're an amateur coder, it can get a bit daunting to have to figure all that out. Though if you're really interested in coding, that's of course no excuse not to look for the information.

Personally, I used to like those profiles with their hover-effects and tiny text boxes, but that was before I got a giant monitor and before I started using a smartphone. Nowadays, I prefer making clean and readable layouts. Again, that doesn't mean they have to look corporate.

And now I feel like I must do a corporate style infographic/glorified sales brochure pet. On the upside, this style is neither graphic nor informational so I won't need to actually produce much content for it?

That could be a really interesting pet for the spotlight. SubetaData the Common Kumos. haha

That's actually a really cool trick that I didn't think of for those hover effects. Thanks for the tips! Agreed on the monitor thing. Having a "retina" screen on a MacBook makes some profiles so TINY.

You're welcome :) I only recently came back from hiatus, so I'm still catching up, but once I'm up to date on all the new changes I'm planning on knocking out some new profiles and remaking my CSS compendium. Quick question though, I know that a retina screen makes non-retina images either blurry or tiny (depending on what the coder did exactly), but what does it do to fonts? Like do you see all fonts as smaller as well, or are those OK? Could you maybe send a few screenshots of profiles? I have 2 large monitors, but they're not 4K or retina so I don't know what to exactly look out for (for Subeta, that is).