I recently put up a website I designed for my mother’s business. Looking for feedback on it! Specifically, I’m not satisfied with the front page before the Contact Us Today section. Too much white space or something. The bigger you make the screen the worse it looks. Looks fine on mobile though. I’d appreciate any suggestions.
Be happy to take a look but I’ll need a link to it.
1 Like
I suggest moving the text to the top and not overlaying the image. And choose a better font – the sans-serif one used below is fine, but you could probably find something a little more unique. I suggest moving the blurb to be visible on the first page too, perhaps putting the image between the two.
A background that isn’t pure white would add to the artistic flair of the image and make the whole page feel less “cold”. A complementary color to blue would do well here. Just a smidgen of color though, don’t overdo it.
The text is overflowing the box here.
I also suggest not using the fade-in-on-scroll effect. It’s overused in general, and actually detracts from the page in this case.
For the main page:
- You’ve got a few minor font sizing issues. As I increase the font size the text in the three boxes above her image break out of the boxes. Also, the logo in the upper left gets smaller. You can’t assume the font size the viewer will be using.
- You cannot let the text at the top overlap with the background image of the city. The text becomes unreadable if it does.
- Going to second what chuck said above about the fade in effect. If I scroll down about halfway and then click reload, when the page reloads I get a completely white page (except for the menu at the top). I have to actually scroll a little before content shows up.
- It seems a little inconsistent that some of the content is centered and some is left justified. I would pick one and stick with it.
- There are some color contrast accessibility issues. Run a contrast checker on the site.
- The headings are not quite right. The first heading on the page should always be h1. And you should not skip heading levels. You should not have an h4 directly underneath and h1.
- When I narrow the browser width and the top menu turns into a hamburger, I cannot use the keyboard to expand it. Use a button for this and you will get the keyboard accessibility automatically.
- The keyboard focus indicator around the ‘Learn more’ link is non-existent because it is white and thus disappears. Try using only the keyboard to navigate around the site and verify that you can activate everything and that you can see the keyboard focus at all times.
- The three boxes in the middle should probably not be wrapped in <a> tags. When you use a screen reader it will read all of the information in that box at once as the link text. Link text should be much more concise. You can make just the header a link.
Contact page;
- The red ‘This is a required field’ is not readable on the blue background.
- Your handling of the required field alerts does not go over well using a screen reader. I suggest you try it for yourself. Don’t enter any information, just tab through the input boxes. Basically, you should not be causing alerts when someone doesn’t enter information in one of the boxes. The only time you should create alerts is when the user clicks the submit button. I understand why you are doing what you are doing, but until you listen to it with a screen reader I don’t think you’ll understand just how bad it is.
Thanks for the great feedback! Both of you.