Hey- I'm working on this website, and I was wondering what you would change about it. I know it's not perfect at this point, and that's why I want your opinion on it.
If I build the entire website on a bad foundation, it will just end up being a bad website. So, I would rather get feedback now (no matter how harsh it will be) than building a ugly mess and not knowing until afterwards.
Top comments (40)
Overall aesthetic and execution is nice. I like just linking to a PDF to get the job done on "View Rules". Seems like that is a solid choice.
I think this section is a little clumsy:
I think you could match the other brand elements more concisely and get better spacing. Overall just staring at this area and making it a focus for improvement should do the trick since it definitely seems like you know what you're doing overall!
Counterpoint to "just link to a PDF": PDF: Still Unfit for Human Consumption, 20 Years Later (Nielsen Norman Group)
Its an interesting point- I will definitely add that to my reading list.
Yeah- we should definitely go over that area again. I took the icons from bootstrap, but I should probably go in and customize them to fit our brand like you said.
I like it! Here's some random suggestions:
main pa little, maybe to 1.7anonymize_ipoption for slightly more privacy-friendly version<tr>in the first table.features table h3titels, looks nicer with the iconsThose are great suggestions! Thank you so much!
A very simple and nice website :)
As for suggestions I have many:
Your initiative is really good though :)
Thanks- I will definitely add those! Also thank you for the compliment :)
No problem. Always there to help the community :)
My favorite thing is that I know immediately what FPA's goal is and that the front page basically says everything else I would want to know about it!
Three things I'd suggest that others haven't mentioned:
tableto lay out the elements! Tables are for data; CSS flexbox and grid are for layout and design.That last bullet is important for web semantics and accessibility. MDN has a good blurb on why not to use HTML tables.
We should definitely use the name "Fairfield Programming Association" instead of FPA more. And, we will work on switching from tables to flexbox :)
My two cents:
The photo of an expensive and well-manicured mansion feels like a potential misstep. Let's pretend I am a child from a lower socioeconomic background who happens to visit this site. You immediately lost me here. Maybe I don't want to join the "Fairfield Programming Association" if I assume from this photo that it's for a bunch of wealthy New England snobs. 🤣 It could be better to show a child excited at a computer? Particularly since the text at the bottom of the page makes it seem that you are sensitive to this issue ("...many underpriveliged districts cannot afford extra education...")
I agree with the others about clumsiness of the second section. It isn't immediately clear from a UX perspective if this is just informational, or if I am supposed to click these different boxes to go off to learn more?
The three sections all have different widths on my desktop. I feel these should share a left margin at least.
The login page is well-executed. It looks great, and I even was told a joke. Thanks!
Thanks for the compliment on the login page, but we can't really change the picture of the Vanderbilt mansion as it is our headquarters and the location that we will be hosting the competitions at. We also recieved feedback from many Bridgeport (a local city in the 'New England snob area') children who said that the photo attracted them because they wanted to check out the building as it has a rich history and is quite stunning.
It's looking cool, very clean and soft to the eye. I were to give any comment I would say to center the titles specially the ones in the table so it doesn't look disaligned.
Also for the button "View rules" I was surprised by the fact that it was a pdf and not another part of the web so maybe you could state like "View rules in pdf" or something like that or even add a target blank so the pdf opens in a new window and not take the user out of your website
Keep on the good work
Up for a friendly roast? You'll get one anyway 😂
Lots of thin text is hard to read (especially in mobile). There is no way of saying what the website is about from the first glance. I'd rethink the design and content formatting.
Start with explaining what is the website about, in one short powerful phrase that stands out. Hook the user to get more than 5 seconds of their attention.
Think in actions: what do you want the user to do and in how to make them want to do it?
And if so happens that a wall of text is unavoidable - make sure it's readable. Split it to smaller parts, add relevant illustrations (not the generic icons, they didn't help) and ditch the very thin font please.
We should definitely simplify the landing page- its a little clunky right now.
I would like to add some images to represent the categories and also make some colorful design for this website not just black n white.
Color would definitely be a good addition- thanks!
It bascially looks like that you are using bootstrap. It's a great resource to be used, but you are making it too predictable, that you are just putting the same button and hover effect of bootstrap, which actually takes off the vibe, because there are millions of websites, made using bootstrap. Use bootstrap, but try to change styles little bit, so that it should not be that predictable.
Website is Well Made But I have some suggestions, I Am Not Much of Expert Web designer but as Completely New Viewer's Perspective the Site Is Too Big In length.
You Can Try Using Slider With Help Of Javascript or Bootstrap for the Part Below The Word Our Programms.
:)
That sounds like a good suggestion- thanks!
Sweet, very clean minimalist site. It looks good. If I added/edited anything it would be:
The Features section seems a little awkward because the svg images are center-aligned, but the text is left-aligned. Design wise it would look more consistent if everything was center-aligned within that td element.
It would be cool to have a footer. Maybe add some socials or the logo in it?
Otherwise, it looks good. Nice work.
Yeah- I think those are great suggestions. Thanks!
The first thing I'd change is the I'd explain up front what the FPA is on one line. If there's one thing I hate surfing the web it's TLA's that are used without expansion, it just irks. I surf in and am wondering WTF is the FPA (one TLA begetting another).
To wit the title should clearly display "Fairfield Programming Association (FPA)" somewhere before the term FPA is used elsewhere. That is the custom with TLAs anyhow.
At the bottom of the page you have what's like a letter and signatures. Huh? I hope you're just being allegorical there, but it's just downright dangerous to be posting anyone's real signature or initials on-line let alone on the home page. Next thing someone is signing checks with WIlliam or Neil's signature ;-). If they're fake all the better you have in fact got a little honeypot for catching such scoundrels red handed but the point remains it's odd.
Finally if, as the name suggests you are geographically focussed, that is work in Fairfield, then, remember that you are on-line and people surf in from everywhere and if it's a global service say so up front. Don't even assume they are in the US. For example you could write the intro as:
Other than, looks fine. Not too cluttered, noisy or ugly, nice and plain and simple and (without having tested) probably renders fine on phones ...
Tex looks like it's rendering really low contrast on mobile chrome android, could be the font weight or perhaps it's supposed to use the system font, either way, Ben's font (screenshot in comments) looks a little different to this one.
Yeah- we should probably switch to google fonts :P
First I'd like to say this is a really cool initiative and I respect that you're reaching out to the community for feedback. Criticism may have a negative connotation but it can also have very positive outcomes if taken and given constructively. I try to aim for something like conventionalcomments.org/ when doing actual code reviews but I think a lot of the sentiments can be carried into feedback in general.
Lighthouse:
While you are scoring rather well on web.dev/measure/ there are some easy improvements you can make by combing through the listed "issues." For example, you can use squoosh.app/ to create webp variants of your png images to make a couple of those go away and improve your score further.
Security:
The results I got for the site on observatory.mozilla.org/analyze/fa... left a little to be desired but this could be out of your control. Not sure what/who you are using for hosting but you I like to create a lambda function to return security headers in front of my statically hosted S3 content to resolve some of these. For example, aws.amazon.com/blogs/networking-an...
Look and Feel:
I agree with some of the other feedback regarding FPA acronym explanation prominence. I think you could use the main hero headline to spell out the acronym then use the main CTA to drive the Join journey with something like "Join the FPA" for the button text. I think that would also set you up nicely for a secondary plain text link to link out to the PDF file. Also, I like to open any links to pages on a different domain and links to files in a new tab.
Semantic HTML is still useful and in my opinion improves developer experience if nothing else. As someone else stated using tables should be restricted to data. If you'd like examples for how you can achieve the layout alternatively I would start by taking a look at bootstrap snippets getbootstrap.com/docs/5.1/examples/
I think the icons could be updated to match your aesthetic as indicated by Ben Halpern. I also think they should be left aligned to follow the text alignment. Additionally, I would suggest changing the large body of text in "Our Programs" section to be left aligned instead of justified to improve readability.
Overall, awesome work. The site looks great, is live, and has living content. Hope this helps! :)
Thank you so much for your time in your feedback! I will work on getting a better lighthouse score, but the security is a little hard to fix because we are using github pages at the moment.
I also really like your idea with the CTA and hero headline. And we will make the new file open in a new tab in the future. Also, we might switch over to building our own custom bootstrap solution so that we don't run into these problems.
Thanks again for the help :)
Wow that simple change looks great- thanks for the help!