DEV Community

Cover image for πŸ€” What Would You Change About this Website?

πŸ€” What Would You Change About this Website?

William McGonagle on January 06, 2022

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 ...
Collapse
 
ben profile image
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:

website preview

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!

Collapse
 
lionelrowe profile image
lionel-rowe
Collapse
 
williammcgonagle profile image
William McGonagle

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

Collapse
 
williammcgonagle profile image
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.

Collapse
 
martijnoud profile image
Martijn Oud • Edited

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.
Collapse
 
williammcgonagle profile image
William McGonagle

Those are great suggestions! Thank you so much!

Collapse
 
liftoffstudios profile image
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 :)

Collapse
 
williammcgonagle profile image
William McGonagle

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

Collapse
 
liftoffstudios profile image
Liftoff Studios

No problem. Always there to help the community :)

Collapse
 
auroratide profile image
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.

Collapse
 
williammcgonagle profile image
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 :)

Collapse
 
scottshipp profile image
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!

Collapse
 
williammcgonagle profile image
William McGonagle • Edited

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.

Collapse
 
silviaespanagil profile image
Silvia EspaΓ±a Gil

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

Collapse
 
valeriavg profile image
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.

Collapse
 
williammcgonagle profile image
William McGonagle

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

Collapse
 
garrysmithers profile image
garrysmithers

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.

Collapse
 
williammcgonagle profile image
William McGonagle

Color would definitely be a good addition- thanks!

Collapse
 
manas_dev profile image
Manas Mishra

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.

Collapse
 
shriekdj profile image
Shrikant Dhayje • Edited

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.

:)

Collapse
 
williammcgonagle profile image
William McGonagle

That sounds like a good suggestion- thanks!

Collapse
 
nuka_coder profile image
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.

Collapse
 
williammcgonagle profile image
William McGonagle

Yeah- I think those are great suggestions. Thanks!

Collapse
 
thumbone profile image
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 ...

Collapse
 
adam_cyclones profile image
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.

example

Collapse
 
williammcgonagle profile image
William McGonagle

Yeah- we should probably switch to google fonts :P

Collapse
 
warrendugan profile image
Warren Dugan

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

Collapse
 
williammcgonagle profile image
William McGonagle

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

Collapse
 
ra1nbow1 profile image
Matvey Romanov
text-align: center;
Enter fullscreen mode Exit fullscreen mode

123

Collapse
 
williammcgonagle profile image
William McGonagle

Wow that simple change looks great- thanks for the help!

Collapse
 
williammcgonagle profile image
William McGonagle • Edited

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?

Collapse
 
irreligious86 profile image
Aleksander Voronov

Too interesting πŸ‘! Thank you, David N. !

Collapse
 
unlucky profile image
UnLucky

In mobile the body weight is too thin not easy to read and next add some colors

Collapse
 
punisher49 profile image
punisher49

Add colours

Collapse
 
azlan_syed profile image
Azlan-Syed

i will make the rules in a webpage

Collapse
 
williammcgonagle profile image
William McGonagle

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

Collapse
 
bowiechang profile image
bowiechang

Quick glance, I think the spacing and space rhythm needs to be looked into. These can help you pace and direct user where you want them to read.

Collapse
 
williammcgonagle profile image
William McGonagle

We should definitely make the spacing consistent.

Collapse
 
veerasrivastava profile image
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

Collapse
 
williammcgonagle profile image
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.