🤔 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

[William McGonagle]

Please let me know what you think about it in the comments 📝.

What would you add?

What would you change?

Do you think the style is bad?

What would you get rid of?

[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 :)

[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.

[B]

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!

[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 :)

[Azlan-Syed]

i will make the rules in a webpage

[William McGonagle]

It is- but I get that we should link that page instead of the PDF directly.

[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.

[Veera Srivastava]

prolly add a font from google fonts for headings and something sans-serify for body text(roboto/ poppins)...
also spacing between the two columns could account for better readability

[William McGonagle]

Yeah- it seems like the font was a big problem for a lot of the people. And you are right that we should fix the spacing.

[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!