I'm pretty sure it depends on if they used pixels or points? I'm not 100% sure. Here's a few examples. 12px get's pretty small, but i can still read it. anything smaller get's difficult.

And, for what it's worth, I used to do all of this myself! See? haha 9px fonts. Goodness, gracious.

all this talk about accessibility and tiny text has me rethinking the pet i put up for spotlight consideration, haha. though, i guess it doesn't matter too much since really the only person looking at my profiles is me 8) this has been good food for thought though, i'm still very stuck in that minimalist, compact tumblr aesthetic and it's about time i branched out and used bigger fonts.

as for hiding things in general, though -- i wipe most everything off my own profile because it's not relevant for me. there's a link back to the site, and a comment box and whatnot, but i keep options off so i don't have a tree during luminaire, and i don't care about trophies or my collections being visible so i take all that stuff off too. that translates to how i deal with pet profiles as well, i guess? i'm training all of my pets but it's not relevant for most of them so i hide that column, they all have minions but it doesn't fit each character to have it visible, etc.

ah, i'm so glad to see your guide is visible again! it's a great resource, esp for someone like me who has a very basic understanding of coding ^^;

i actually feel like i've seen a lot of variety among pet profiles, even among spotlight winners - there's no cookie cutter mold they all fit into that anyone who hopes to win should strive to replicate. some people go for something more artsy and aesthetic, others more utilitarian, and some just like to show off the cool unique things they can do with code (looking at you, ... those css animations are everything).

that said, i have definitely seen trends come and go in my time. (yikes i sound old, i swear i've only been on this site for... almost 9 years... wtf...) like the solid-colored centered block containing everything (likely popularized by template profiles); or the horizontal layout, usually with a couple blocks for the various sections, pet artwork to the left or right, often with a wide horizontal stripe and/or a patterned background. that's one i like to play with variants of the most, i think, but unless coded to be responsive, it has the most potential for spilling off screens.

As far as I understand it, if they use pixels it's absolute. If they use em's or rem's it depends on the base font-size. I'm not sure either on what happens if they use points though. I try to use 14px as a minimum when making websites, so that it's readable on smaller devices as well.

Ah, Neopets, brings back memories! I just tried to logon again on my old account, to see if any of my old pet profiles were still up, but apparently my account's been frozen T_T There goes that idea.

Wiping irrelevant things doesn't seem weird to me. It cleans up the clutter and enables you to focus on what's important. I think what was mentioned before in regards to hiding was maybe more the fact that a lot of profiles hide stuff behind hovers? So you don't see it at first glance, but if you hover over it something happens. The annoying thing is that hovers obviously don't work on mobile devices...

Oh, I just saw that apparently my guide is still in the useful topics thread? But it hasn't been updated since I went on hiatus xD I'm afraid I'll have to make a new thread though, because otherwise I'd be necro'ing + it's easier to start all over again. It's going to take me some time to get to it though ^_^;;

I remember the solid-coloured centred block and the horizontal layout! You also had an accordion-variation on the latter, where you had to hover over a block to get it to expand horizontally. Or something, my memory's a bit fuzzy on how that worked exactly xD And yeah, it does but then again so do most layouts. Like those layouts where they put the profile in a fixed position. That looks OK on a monitor, but most of it's invisible on a mobile device, sadly enough.

Accessibility is a real concern nowadays, what with smart phones taking over... According to caniuse.com, 27.40% of users use Chrome for Android. That means that more than a quarter of people use their mobile device (either their smartphone or their tablet) to browse the internet.

Your profiles are great. I don't have a major problem with any of them! And I think it's probably fair to say that most traffic to profiles on Subeta is from desktop, so them not being responsive isn't the worst sin in the world. But they're readable and simple!

Bios by is amazing. Super cool stuff! Kinda like a mini-game.

Yeah, that sounds about right. I'm not super knowledgeable about that type of stuff... I should take the time to learn! I just recently learned about VH and VW and fell in love. I recently started using Webflow for speeding up front-end dev and I'm all for it. Helped me understand flexbox and other modern CSS stuff in a more visual way.

I think some of the trends on here also have to do with how easily the profile is able to be made or if it's a premade, and how customizable it is for the average user. Most people don't know how to code and it's easier to just use what's available. which is also why we still see newer pets with older style/ dated templates, (I'm def. guilty of that) and with sites getting more and more advanced I think it is more daunting to learn it rather than just use what's already there.

I saw someone mention messy coding, like it still works but from a professional standpoint it's like..what? I'm sure my profiles are like that lol. Because I never went to school for it. I am like a frankenstein doctor... taking bits and peices and putting it all together haha. I read about it and it kind of makes sense but when i'm on subeta sometimes the stuff doesn't work the way it might on a 'normal' site. I find myself looking in different places for code that will get me the results I"m seeking. And without someone telling me how/if to nest things I end up with lots of divs and randomness. BUT it works? xD

mentioned a way to use the hover effects that is easier for mobile.. that's incredible! and i've never heard of it! but i wish i had and now that i know about it i'm going to look into it. I'm not a developer or anything in real life (and I know a lot of people on here only do css for this site) and it's easy for me to not be up to the latest trends or ways of doing things if it isn't on w3schools or a similar css site.

I also think some of it is the limitations of the css we can use. We can't make multiple pages on different pages, we have to layer all our pages into the same page.. At least for me, I find that it can limit the way I want to present the profile.

Personally I really like hovers and images. I think making web pages is amazing because with the right programs you can do almost anything. Not that I know how lol! But it does push me to do more, do better, and find new ways to present the same info. :)

I fell in love with VH and VW as well. It makes sizing things (especially fullscreen stuff) so much easier! "calc()" is also a favourite of mine, not sure if you've heard of that? For example if your nav is 70px, you can make your content fullscreen by using calc(100vh - 70px). The only downside to VH is that it doesn't work 100%, in that you have a top navbar in the browser on mobile devices (ie in Chrome and Safari), and it doesn't detract that height from the VH. I understand why, because the navbar disappears when you scroll up, but it's still kind of annoying since that means you can't have a perfect full-height element... What's Webflow though? I haven't heard of that yet. Flexbox sounds cool in theory, but i haven't used it at work yet because we need to offer IE9 support for some of our websites.

I get that coding can be rather daunting at first (it was that way for me as well, coming from the Neopets-era) and my coding was definitely messy as well in the beginning. However, tidy coding only makes things easier for yourself, especially so you don't have to wonder why stuff doesn't work and so you don't have to add !important to everything (which makes me cringe). The hover effects thing is something I discovered here at work, because responsiveness and mobile devices became a rising concern. It's really easy, because you only have to add 2 extra selectors for it! Plus side is, that this also enables your hovers to work when you use your keyboard and the tab-key to select things (so that means that accessibility for people without a mouse is also improved). I'm definitely planning on making a new in-depth CSS guide, so that all users can get these latest trends/methods, without having to delve too deep into theory!

Webflow is a "website builder" of sorts. But the code it outputs is actually really clean code, unlike others. It may not be of interest to you cause you sound a lot more knowledgeable about dev and it's definitely geared towards designers. I tell other designers that it's like InDesign but for the web. Also, flexbox is great. It's the easiest centering I've ever experienced on the web. Definitely makes sense that you can't use it yet, though.

Also, I would LOVE to see an indepth code guide for Subeta users! I would even offer my design expertise, but I'm not sure it's as easy as telling people what is "good" and what isn't. At the very least, it could be cool to make an accessibility guide... I'd like to get better at that myself!

Also, that tab use case for the hover selector is a great point.

You learn how to clean up your code as you go, I've found. Looking at advanced dev's files helps with that, as well. And yes, much like everyone, I got my start with premade layouts and learned how to customize them. I think that's a fine place to start. I think, then, that the premades need to try to modernize! Teach people the new ways of doing things.

Oh I see! I just Google'd it and it looks a bit like a mix of Muse, Dreamweaver and the new XD beta. There is actually an in-depth code guide for Subeta users, but I made it before my hiatus so it's rather out-dated =P And I would love your design-expertise, user-input is always valued! I'm not sure how I'll split it up this time, last time I did it in sections such as General, Pet Profiles, User Profiles and Custom CSS; with subsections for specific tips and tricks at basic and advanced levels. I'll probably do it that way again, but maybe I should make separate posts for each section instead?

About the premades, I was planning on getting back into coding for Subeta by making a few premades. I'm working on a Custom CSS and a user profile first. Pet profiles will come after that! I'm stuck on a colour scheme for the Custom CSS though... Do you have any good ideas? The user profile will be simple white (or black) with a customiseable accent colour =)

(and if I sound more knowledgeable about dev, it's because I'm actually a graphic designer, but I have a bachelor's in application development so I do front-end web development as well =P)

Awesome! You're one of those "unicorns" then. Haha that's awesome! I recently picked this up: Design + Code In hopes of learning more dev skills, specifically for building native apps.

Here's the weird thing about me: I'm a colorblind designer. lol. So, when picking colors it usually depends on the use case what I end up doing. If it's a branding piece, I try to have as much explanation behind my choices as possible, and if it's for something interactive I usually base it on usability first. Simpler answer: I most often pull my color schemes from Material Design. :)

Haha, that's one way of putting it =P I got my degree while the whole app thing wasn't something they taught in school yet (they started introducing it while I was in my 2nd year). I still learned the old stuff, like Java, ASP.NET, C#, SQL and all that crap. So native apps isn't really my thing either, lol. Tbh, I haven't really done anything with my degree specifically. All that I do at my job, are things that use skills I already had prior to my bachelor, or things that I learned on the job (like design).

Well, it's not THAT weird. I'm a myopic designer, which is far from uncommon I'm told and which isn't as "bad" as being colourblind, but I'm pretty blind without my glasses. I've got like -8.25 on my left eye and -7.75 on my right eye; and staring at a screen all day is NOT improving things =( I read the whole guide on Material Design (including the boring stuff on margins and paddings), but the colours aren't really my thing. At least not for a Custom CSS. They're a bit too bright to be used as anything but accent-colours, imo. I think I'll go look around on ColourLovers again or something.

Out of curiosity, which colours are you blind to?

First off, did you catch my embarrassing [/a] tag? lol.

Yeah, I've heard that. Things started moving too quick for degrees to keep up. I've been lucky enough to have professors gettings us AHEAD of the curve. Mostly because they actually have jobs in the field, which is great!

I understand that! Subeta by nature asks the user to spend a lot of time on the site, so less intense colors make sense. I tend to use Black, White, and an accent for everything I do anyway.

I'm severe deuteranopia colorblind. So, red green. But that is far less simple than they taught in school! Turns out if you're deficient in a color, that affects every other color that contains those color wavelengths. If that makes sense. So purple is affected cause it has red in it.

I did see that =P

Sadly enough, our teachers weren't able to do this for us, most likely because most of them hadn't had a non-teaching job for the past 20 years and because they didn't "go out in the field" anymore. I think one of them even used to teach COBOL O_O

Yeah, that does make sense. One of my friends is also colourblind to red green, so if we play boardgames he brings his own sets (when needed) because he marks the pieces if they're the wrong colours. Like this one game he likes, there are little boats that are either red, green, brown, yellow or black. So he was pretty much buggered every time he needed a piece that wasn't yellow or black. And even the black gave him problems sometimes.

BUT! To stay on topic: For petsites and userprofiles, I haven't seen any modern trends surfacing yet (except maybe CSS animation, but that's a method that's being used in non-modern layouts). As for Subeta itself, the base-layout is outdated but the newer features seem more modern. If you look at the code, you can see a mix of bootstrap and other frameworks, though sadly enough they're not using bootstrap the responsive way (or at least not fully responsive).

Puzzle games and board games are my mortal enemy. Makes you feel like a little kid asking for assistance picking the right color. Uhg.

Yes, I've noticed that! I think they're moving towards some big changes on the layout if I've read correctly? That sort of change is hard when a site has so much content.

And yes, lots of CSS animations. Which definitely makes sense. Since people here generally want their profiles to scream their character/personality, animations lend themselves well to that.

I thought it was just that they were updating to Bootstrap 4? Because they use v3 a lot throughout the site and they probably prefer to use flexbox because it's easier, and v4 uses flexbox :)

It does, but that doesn't mean that it's always executed properly =P

Oh interesting! I used to be big on bootstrap, but I'm in a "try all the new things" stage when it comes to CSS Grids. haha

That's so true.

What, generally speaking, would you say is the biggest code sin you see on profiles?

Which other CSS Grids do you recommend? I tried the semantic grid once, but it was too much of a hassle to switch around.

The biggest code sin, as in actual code? I would say overwriting the same selector or property in different places (ie call a certain selector in one space and then later call the same one again to overwrite it or expand on it) and using !important where it's not needed or where they can avoid it by detailing the selector more. Other pet-peeves of mine are unnecessary scrollbars and fixed layouts (like where the whole profile is fixed to the bottom right or so).

You?

IMO you've answered your own questions. Not friendly to different devices or people because this stuff is usually made for+by the same person for their own enjoyment. 1 user, 1 browser, 1 machine.

We actually do have a major redesign in the works! We're not just moving from BS3 to BS4 though - We are trying to move from prototype+semantic to jquery+bootstrap, a much more... daunting... task. And yes, our codebase is like frankenstein's monster sometimes... xD

Anyway you both sound so cool. - I didn't realize until now that you were behind the old CSS guide topic in these forums, that's awesome. You should definitely make a new one if you have the time. You have such a friendly, encouraging and clear way of explaining topics.

- You should make a design and accessibility guide! I would read it, I'm one of those devs to whom design does not come naturally. I think an accessibility guide would be super helpful as well and I agree it seems like it would be easier to write since it's more straightforward.

Now I want to ask more questions about your work, but I don't want to take this off topic. Maybe we could chat together in the small talk forums or something?

To stay on topic - I'm afraid my last post probably wasn't worded clearly. To clarify, I never meant that you can't be both user-friendly and not-corporate. I only meant to share my own speculations to answer the question in the OP - basically, what I thought might be the psychology behind it. It was just a speculation, I'm no psychologist :)

Hey thanks, I think you're cool too! I have a friend who's thesis project is going to be about accessibility, and how to teach it to young designers. Pretty neat stuff. It'd be interesting to get a collaboration going between some people who know their stuff. And, if you wanna see my work, check it out here: https://tre.gg/ :)

You're probably right, just opening up the dialogue. If I could affect change or inspire a conversation that could teach me something, or maybe even teach others, I'm fine with that. Ya know?

I don't honestly know enough about code to be able to identify really bad coding practice, per se. Except for the lack of indentation (mostly due to the limitations of the text fields on these sorts of sites, which is understandable) and weird casing issues. Like starting a tag in all caps <STRONG> and ending lowercase lol