🤔 What Would You Change About this Website?

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.

You can check it out here.

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.

You can also check out our discord server here!

Comments

[Ben Halpern]

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!

[William McGonagle]

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.

[lionel-rowe]

Counterpoint to "just link to a PDF": PDF: Still Unfit for Human Consumption, 20 Years Later (Nielsen Norman Group)

[William McGonagle]

Its an interesting point- I will definitely add that to my reading list.

[Martijn Oud]

I like it! Here's some random suggestions:

• I'd personally bump the line-height for main p a little, maybe to 1.7
• Your images don't have alt tags, you could also give them more descriptive filenames
• You can place the Google Analytics tag in the footer and use the anonymize_ip option for slightly more privacy-friendly version
• You've used tables for styling, I'd avoid that and use flexbox. You're missing a <tr> in the first table
• When linking to PDFs it's nice to have a visual indicator so users don't get surprised by PDF downloads
• The copy & main title "Join the FPA." isn't very strong. I don't know what the FPA is, you could switch it around with paragraph below it
• I would center the .features table h3 titels, looks nicer with the icons
• The site doesn't have a /robots.txt file, you're going to end up with a lot of 404s in your server log files.

[William McGonagle]

Those are great suggestions! Thank you so much!

[Liftoff Studios]

A very simple and nice website :)
As for suggestions I have many:

• Add a better footer with resources and navigation links
• Add a better font to the text "Our programs". Increase the size too
• Instead of telling things to do in order to join the FPA under competition part, create a separate section with the title "How do I help" or something like that

Your initiative is really good though :)

[William McGonagle]

Thanks- I will definitely add those! Also thank you for the compliment :)

[Liftoff Studios]

No problem. Always there to help the community :)

[scottshipp]

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!

[William McGonagle]

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.

[Timothy Foster]

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:

• I had to dig a little to find out what FPA stood for! I feel like the expansion to this acronym should be prominent above the fold somewhere.
• Generally increase the font size; it makes it easier to read and makes the sections feel more important.
• Took a look at the HTML and I'd say definitely avoid using table to 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.

[William McGonagle]

We should definitely use the name "Fairfield Programming Association" instead of FPA more. And, we will work on switching from tables to flexbox :)

[Valeria]

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.

[William McGonagle]

We should definitely simplify the landing page- its a little clunky right now.

[Adam Crockett 🌀]

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.

[William McGonagle]

Yeah- we should probably switch to google fonts :P

[Shrikant Dhayje]

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.

:)

[William McGonagle]

That sounds like a good suggestion- thanks!

[Brittany]

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.

[William McGonagle]

Yeah- I think those are great suggestions. Thanks!

[Bernd Wechner]

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:

Join the Fairfield Programming Association (FPA).

An open-source, non-profit dedicated to the education of children in the world of computer science around Westport and surrounds in Connecticut, USA.

Other than, looks fine. Not too cluttered, noisy or ugly, nice and plain and simple and (without having tested) probably renders fine on phones ...