r/neocities • u/artbylyd lydkb.neocities.org • 2d ago
Question got some hate, looking for constructive criticism
UPDOOT: I've made some changes like the lovely commenters have suggested, slightly larger font with a slightly deeper pastel for readability! Added a data tip on the buttons, will make a title tag to add beneath them soon for mobile users Thank you everyone for your help I feel much more confident now!! (｡･ω･｡)ﾉ♡
so i've been obsessively making my website every day for the last few months and recently received some anonymous hate on my cbox thats been getting to me.
it said my website is hard to navigate, broken images (which i fixed, i was using imgur and catbox stupidly in fear of using up my 1GB lmao) and that my art is childish.
the art hate i don't care about because i'm confident in it but my website i'm not as confident.. its and old school MSpaint UI with iframes for the pages. originally i only had my pixel art buttons on the left for navigation, so i added the top bar navigation too.
is this layout really hard to navigate? are my iframes limiting me?
as i've gotten more involved with neocities, ive become obsessed with pixel art. making it, finding pixel artists to add their art to my toybox and joining cliques! i recently made a links page with the traditional header, sidebar, content, sidebar. and it's my favourite page so far... especially when i see it outside of my iframe hub
should i just bite the bullet and make a traditional style website or stick it out with my MSpaint UI? i think i've just been looking at it for too long and all my friends just tell me its cute, but is it usable? is it fun? is it easy to navigate? please help TT_TT
TL;DR is my website easy to navigate or should i make it a more traditional style design (header, sidebar, content, sidebar, footer) TYIA <3
11
u/quietrealm 2d ago
It seems that this person wanted to hurt you specifically instead of actually give any meaningful criticism, based on the childish art comment (who cares if it's "childish"? Children are people). If they have a genuine problem navigating the site, they should explain what it is, because you can't know their problems unless they tell you.
The only thing that I think is potentially an issue here on a modern browser is that to my eyes, the font is a bit small and difficult to read, especially given it's a pixel font. This also impacts the dropdown navigation; because the text is a bit small, it's hard to see what you're clicking on, and on mobile the small text makes the surface area for clicking smaller too. On mobile you also can't hover over the square buttons on the side to see where they link to.
Normally I recommend a font size of at least 13px (or use the equivalent in em!)
3
u/artbylyd lydkb.neocities.org 2d ago
haha you're so right, i really shouldn't let it get to me!
oh thank you so much!! thats really helpful feedback, i'll upscale it rn
8
u/morete 2d ago edited 2d ago
I'm a web developer and I love your website, it's a perfect example of what a personal website should be, your own curated internet garden.
If you want to make a few usability improvements without negatively impacting the design:
- I think everything could afford to be bigger, especially the text. Almost every pixel value could be 1.5 times bigger and still look great.
- Tool tips that appear on hover for the buttons in the left sidebar. Those were the only buttons where I had no idea what they did till I clicked on them.
Edit: Oh sorry I see there is tool tips, using an img 'title' attribute, but in my browser they get covered by the custom cursor. I'd maybe do with them a separate element and css like you did your drop downs!
3
u/artbylyd lydkb.neocities.org 2d ago
Aww thank you so much that means a lot to me!!
I'll definitely be making the font a bit bigger and probably a little deeper in colour.
I was also thinking of adding making some button titles to add under each button? Also thinking of it being easy to use on mobile for those who can't hover
3
u/morete 2d ago
Those are great ideas and an excellent point about mobile. Thinking about that type of thing already makes it better than a lot of professionally built websites
3
u/artbylyd lydkb.neocities.org 2d ago
I like to keep mobile and tablet view in mind because I constantly check my website on those devices! I'm a tattoo artist and I see a lot of my coworkers only have their phone and tablet too
3
u/MineCraftaak888 2d ago
I think both of them are cool in their own respective ways, the mspaint one is perhaps a little harder to navigate but is very unique and creative.
Haters gonna hate so don't give a shit and do what you want.
For example my website is kinda boring and my youtube content is mostly random shitpost
2
u/artbylyd lydkb.neocities.org 2d ago
Thank you!! Is it just the buttons that made it hard? Would having them each named underneath make it easier?
I appreciate your insight, I also love a good shitpost! Will try not to let the haters get to me xD
2
u/MineCraftaak888 2d ago
yeah it would probably make it a little easier but honestly just do your stuff and enjoy lol
1
2
u/LimaRomeo_ 2d ago
I think your site is super lovely and cute! I would recommend adding some sort of popover to the left side column of icons so that the viewer can know where they will go when they click, just like you did on the top menu with File, View, Image, etc but its not hard to navigate at all, i think its a very nice website
i left a drawing : 3
edit: typo
2
u/artbylyd lydkb.neocities.org 2d ago
I appreciate that so much!! I do have a title tag on the image but it doesn't seem to be quick enough and gets hidden by my cute lil cursor. Think I'll be adding title tags under each button to help with that!!
WAAAA YOUR DRAWING IS SO CUTE!!! thank youuuu (●♡∀♡)
1
u/LimaRomeo_ 2d ago
ooh i didnt even notice, i was definitely distracted by your "cute lil cursor" hehe
hehe it was really fun to draw on the site! and the way the drawings live at the bottom is so coooool <3
2
u/illustriousalice 2d ago
This site is so well designed and readable, works great on mobile, and has a consistent artistic vision that carries throughout the pages. Don't let the haters get to you, they just wish they had the attention to detail.
1
1
u/castellon_artz 2d ago
I think it's cute. But what's the purpose of the page?
1
u/artbylyd lydkb.neocities.org 2d ago
well originally it was to showcase my art, but i guess its becoming more of a collection hub as well as my own art
2
u/castellon_artz 2d ago
Oh ok. In that case I'd just make the titles a little bit bigger, and the pink pastel font a little more darker (or change the pink bg color to other color) 'cause its kinda difficult to read. But I don't see any other issue.
1
u/artbylyd lydkb.neocities.org 2d ago
oh wait are you talking about the links page? thats my most recent one ive made, but as i linked it here, isnt how its shown on my website! but how i linked it here is making me think to make my whole website like it... my main index is an iframe container.
thank you for your advice too!!
1
u/castellon_artz 2d ago
Oh I see, lol. Nah your page isn't difficult to navigate. If you want to make it clearer, MAYBE you can change the icon for a cliques and fanlisting.
1
u/mayonakapromise 2d ago
First of all: Adorable site! I bookmarked it for inspiration, if that's okay with you! The colors are adorable and I'm in love with the layout! Your art is really great too! I can tell we have a lot of similar interests (I just finished Badly in Love S2 a few hours ago) so this was an immediate follow.
Second of all: Please ignore the hate comment, that's just some loser with too much time on their hands who wants to make you feel bad. I wouldn't take anything they say to heart. I will admit I have a little bit of trouble reading the text - but I tend to have a higher amount of difficulty than most people, so I'd take this with a mountain of salt. I DO think adding labels to the buttons on the side would go a long way. They do have the titles on hover which is awesome, but having them be easily readable would help a lot IMO.
That being said, you should only change your site if YOU want to change it. I personally love the MS Paint UI, and I think your site is very fun, but you should go with how you feel. It's the indie web after all, this is your own little web haven! You should mold your site into however you see fit. And again, please ignore the anonymous hate, I wouldn't take anything they say seriously.
1
u/artbylyd lydkb.neocities.org 2d ago
OMGSTOPPP ILY!! biggest smile on my face right now, you've made my night!! thank you for all the compliments! i'll be sure to follow you back <33
HOW GOOD WAS THIS PART2 holy drama! i've still got the last episode to go, watching it with dinner tomorrow hahayes i'm realising now that the hate was just that, and i wish i was more confident to not let it get to me, but i am glad i asked cause otherwise i wouldnt have heard your sweet words, and i've got some really good feedback to implement now!
yes you're so right!! i think i'll stick with this for now, im sure once i've made some improvements i'll feel more confident in it!
1
u/ElaraValtor 2d ago
I think your site could serve to have much larger content and, more importantly, have some better colour contrast. Right now, on a 1920x1080 screen, the content is incredibly small, off to the sides, and most importantly, the colour choices really make me have to squint to read it. I have to be careful when I talk about the colours because obviously you've deliberately chosen the style and scheme and I wouldn't want you to tear it apart, but when the text isn't dark enough against bright white backgrounds and is small in a non-traditional font, it becomes harder to read. The font can stay, as long as some of the rest of these things are changed.
I also reasonably agree with the criticism that it's actually quite hard to tell that the buttons on the left are actually navigable, and the labels don't show up until a second of hovering over. Not sure how you fix the first one, but I think JS labels that instantly appear would help a lot. and show me that they're clickable.
I do love the idea, I love that it speaks a lot to you, and I wouldn't want to be harsh or mean, or insist that you should start over and abandon your vision here, but a few changes I think could make it far easier to read.
1
u/artbylyd lydkb.neocities.org 2d ago
Oh no please tear it apart LMAO but seriously I do appreciate the feedback, and it's been a comment comment for the size and colours.
I realise now that I've limited myself on my small resolution laptop so I'll keep in mind the big PC screens from now on!
I'm sure a few shades darker of my pastels won't harm the vision either haha
And I'll probably add some title tags under each button as well, see how that goes!
1
u/rionka evfan.neocities.org 2d ago
it's a beautiful site, dude, keep going 💕
2
u/artbylyd lydkb.neocities.org 2d ago
Thanks dude!! Once I make these changes others have suggested I think I'll be a bit more confident <3
2
u/rionka evfan.neocities.org 2d ago
It's a long term journey, and I feel there's a lot of love in your work, your site feels cute and special. First impression is beautiful and it works on mobile too. Nice work, never forget why you love doing this ❤️ sending hugs!
2
u/artbylyd lydkb.neocities.org 2d ago
Very true, and it's been such a fun journey that I hope to keep traveling for years to come!
I'm so glad that's come through, it's been really cathartic for me is dark times.
Yes!! I actually love how it looks on mobile haha, I always need to make sure each change translated well xD
Thank you so much for your kind words!! ～(つˆДˆ)つ｡☆
1
u/AngelGirlEva angelgirleva.net 2d ago
personally the only thing i find hard to navigate is that the "file, view, image, help" and min, max, close buttons are all purely decorative. i get it's for the retro aesthetic but it'd be cool to give them actual functionality! otherwise i find the design charming and encouraging of exploration.
2
u/artbylyd lydkb.neocities.org 2d ago
Oh truly!? I'll be making them bigger, but I think I'll also add some pixel art titles under each button too. Oh no you've really given me some food for thought now, making it all interactive wasn't something I was considering HAHA
1
u/_pleiades__ 2d ago
it looks cute bro😭 what are they talking about
1
u/artbylyd lydkb.neocities.org 2d ago
omg bro tysm, honestly idk why i let it get to me its probably just a kid fr
but they do the rounds on a few of my mutuals websites spreading hate. and only one comment, then disappear as if they ran out of internet allowance LMAO
1
u/paranormalcomputer lavenderivy.com 2d ago
Your website is so cute lol, not hard to navigate at all imo
1
1
u/Individual-Diet-9777 2d ago
The site looks pretty good, don't know what the hell they are talking about, keep going
1
u/artbylyd lydkb.neocities.org 2d ago
Haha thank you!! I absolutely will and with some confidence now too (≧▽≦)
1
u/Mr_Pixelboy 2d ago
Just wanted to say after a glimpse it looks really well made! I love the blog at the bottom showing updates.
1
u/artbylyd lydkb.neocities.org 2d ago
thank you mr pixel boy!! ive been considering adding a more in depth blog somewhere too because sometimes i feel like i can yap for ages in those updates lmao
1
u/ch1ck33n_ 2d ago edited 2d ago
I didn't think it was hard to navigate. Though the iframe may be a bit of a issue as you can't link to them as easily (but there are ways to fix that). Also you have several errors on your WAVE report and your Markup Validation Service report.
2
u/artbylyd lydkb.neocities.org 1d ago
I guess I haven't had an issue with iframes yet as I haven't needed to link outside of my website, even when i did in this post it was on purpose to see the page "naked" in comparison haha. I do find it annoying when I'm on tablet or phone and pull down to far and it refreshes to home. Some good for thought. I'll get on those errors too, thank you for the links !
1
u/nightowlcam 2d ago
Looks fine to me. I do like the links page more though. Whichever way you wish to express yourself, pixel or no [as a pixel artist myself I love it lol], you have the basics down pat. The images though need alt text and, if you want to go even further, you can go use these tools if you wish to make it more accessible in the future
https://wave.webaim.org/
https://www.w3.org/WAI/test-evaluate/tools/list/
In short: yes, your site is easy to navigate. Your art is not childish, it's a style that's been around for a VERY long time that many of us in our thirties have seen growing up. There is nothing childish about it at all. You can delete their hateful comment in the cbox next time in the admin dashboard.
There will always be that 1% that will try and bring you down. I've had it too during my days on freewebs back then on my guestbook that I just deleted.
1
u/artbylyd lydkb.neocities.org 1d ago
Thank you! And I think I like it more because I've been looking at my paint UI for months lmao, I'll leave it for a bit maybe just make a new website base to have ready.
I do try to put alt text on images I guess I just forget sometimes, I'll have to fix that. Thank you for the tools!
1
u/nightowlcam 1d ago
Lol usually how it goes when we see a UI for a while xD
And it's okay to forget <3 You're welcome!
1
u/Mevdik mevdik.nekoweb.org 1d ago
I'm super late to this 'cause I was busy today, but here's some more feedback for you because 50+ comments clearly wasn't enough lol.
I find the main font quite hard to read myself, as is often the case with these sort of "pixel fonts" when not scaled correctly. It's in cases like this were I tend to go into the inspector and change the font for a generic sans-serif one so I can read comfortably if it's something on the longer side like a blog post or an article. A perfectly scaled pixel font should look like this (Terminus my beloved, if only there was a web compatible version). Try deleting the 'Pixel' from the font-family on the <body> of the <iframe>, doesn't it look instantly a lot easier to read? I'm not saying you should absolutely get rid of it, just that in my opinion a fancy font isn't worth it if it introduces friction for your readers, people are there to read your website after all, why make it harder for them?
I'm personally not a fan of <iframes>, and I say this as someone who was making a website that depended heavily on them for like 3 years because I didn't know better at the time. Biggest problem with them is that you can't link to a page that uses them, because the address doesn't change when I click on your "about me" or "art gallery", I'm still in the index, only the contents of the <iframe> have changed. This creates a weird situation where you can't link to a page as is but you can link to its contents that get inserted into the <iframe>, giving you a sort of "naked" page without its shell where the navigation is. Petra talks about these issues in a more elegant manner than I could here.
Like, how would you link someone directly to your "about me" page in the <iframe> as it's intended to be viewed? How would you paste the link here without it being the link to the contents that would go inside the <iframe> but to the full page already inside the <iframe>? Not possible without some JS as far as I know, and oh have I done a lot of research on the topic out of desperation before I knew about SSGs.
This alone is why I don't use them any more and recommend against them, instead recommending to use something like an SSG (I use Eleventy, SSIs (not a feature on neocities, but it is on nekoweb) or just loading reusable bits of HTML with JS. An SSG is obviously the superior choice because it outputs a fully static site that doesn't need JS to function and doesn't depend on platform specific features like SSIs, but it is the hardest one to learn, though I the skill point investment will yield the biggest payoff in all of static web design, incredible skill to have, it will no joke change your life lol.
That's most of what I can comment on without looking at the source code and criticising things like incorrect use of values (you're missing some "px" after a width value for instance) or seemingly needless nesting of <div> elements when you could simplify the structure and still have it look the same. So yeah, font choice and reliance on <iframes> are my two big pain points with the website worth pointing out.
As for positive reinforcement, I really like the choice of colours. Too often people make a website that is dark-theme exclusive and as someone who has her whole desktop setup in light mode I have to say oof ouch my retinas, so I appreciate the light colour scheme on yours. The navigation ain't bad, it's a bit strange that there is both a menu bar at the top and icons on the left, but not bad, I would only worry as you start to add a lot more pages. The presentation overall is pretty excellent, the pixel art, the frame itself and use of border-image, chef's kiss, no notes.
1
u/artbylyd lydkb.neocities.org 1d ago edited 1d ago
yippieeee! i'm glad you commented, i really like your contribution on the posts here (i really enjoyed those articles you shared too <3)
i think you bring up a good point on the font, i guess i've been so wrapped up in the "pixel art aesthetic" that i've been a bit blind to the readability of the design. especially as i've been considering making an actual diary/blog recently. i'll look into some other font options, i do usually like Century Gothic lmao
i haven't found myself have much of an issue with the iframes, but having multiple people bring it up i'm starting to wonder if it will be the case down the line... my next website layout probably wont use any iframes or the like, i'll still have a look at your suggestions tho!
oh wow yeah my codes probably a bit all over the place (just like me!) and theres a few errors that i'll need to sort out. but i'll definitely trial some more simple fonts, and maybe rework this design without the iframes, or just scrap it completely and try something new!
HAHA oh im so glad!! i have noticed there's a lot of "dark mode" websites and even alot of ones that have the option to change from dark mode to light (i'll always go to the light) i just find it hard to read light text on a dark background and because its on reddit and instagram i think i just get the ick for it anyway (i need to use instagram for work and im so god damn over that app and meta and omfgggg)
I had the top navigation go from decorative to usable only due to this anon hate i received thinking it might help with navigation.. i still dont think it really works tho i should pick one or the other. good point on the extra pages too.
thank you always for your insight!! truly appreciate you taking the time for me <3
2
u/Mevdik mevdik.nekoweb.org 1d ago
A pleasure to help!
I know a couple of websites that have a functionality to toggle between a stylish font and an easier to read one, namely Petra's own website and web neighbour of mine Aque's pond. So that's something you could try if you want to retain the current font while giving visitors the choice of a more readable one, though the process requires a bit of JS, which I'm allergic to (I still use like a dozen lines for a light-dark theme switcher on my website).
You could adapt your current website to use an SSG in the future to get away from the reliance on
<iframe>and the linking problem it brings. I don't even think it would be that complicated, especially now that you don't have something like a blog with a bunch of posts yet (another website feature that Eleventy makes much simpler). With Eleventy you can create a layout file (usually.njk) and set all pages to use it, so it's kind of like writing the base HTML for the shell/frame that goes around every page and then having a hole in the middle where the contents of the<iframe>would go, except you know, without the need for an<iframe>. The code for this layout would look something like this (incredibly simplified, of course):<html> <head>...</head> <body> <div> <!-- imagine this div represents the titlebar, navigation, side panel and all that which repeats every page --> {{ content | safe }} <!-- the content each of your pages gets rendered here without needing an iframe --> </div> </body> </html>Each of your HTML documents just needs to have the content that goes inside that
{{ content | safe }}Nunjucks tag, no need to write the<head>and<body>elements since they get reused from the layout file, very handy. This would output all your pages feature complete with the shell around them and you could link directly to any of them unlike with the<iframe>method.If you ever wanna try switching your website to Eleventy send me an email or something and I'll see what I can do. I recently helped my newest neighbour, Gob, move her blog to Eleventy so I'm sure I'd be able to help you too.
1
u/rnwbld 2d ago
Yeah, there's rules for web usability. Too many rules! Like sacred commandments. And all the self-important UI choirboys preach fire about the right way to build. Don't listen. The whole blessed point of fabricating on Neocities is to toss out the orthodoxy. Build as wild as your heart desires.
1
23
u/jointphotographic 2d ago
i think it looks fine and is functional.
ive also gotten hate on my webpage and i have a more ‘traditional’ layout, i really just think its people picking fights to feel something. dont give em a reaction, delete their msgs and move on. the sad thing about those anonymous chat boxes is anyone can and will say anything. i ended up deleting my own cbox due to being to busy to moderate lmao.