I designed, built, and launched my first major site!

Hey everyone! I finally launched a site that i’ve been working on for the past year.

The company is hoodiehut.co.uk and my favourite (and most challenging) page is the leavers hoodies section.

Designed in Figma, built with GatsbyJS and I also used NetlifyCMS to host some of the content.

I’d love some feedback and happy to answer any questions :slight_smile:

Looks professional.

Glad for you on finishing a project.

Thanks a lot, appreciate it! Yeah great to finally put it live. Still a few things to be worked on but quite happy with it at the moment. :sweat_smile:

The first two things I always test when evaluating a page:

  1. Responsiveness to both changes in view port width AND changes to text size.
  2. Keyboard only accessibility

For 1, overall this site handles both changes very nicely. Bravo on using em units for break points. I usually crank the text size up to 200% and narrow the browser in all the way to get an extreme example and for the most part the hoodies section handles it well. There are a few minor adjustments that could be made to alleviate the horizontal scroll bar if you are striving for perfection. I also noticed the following on the hoodies page:

  1. start with the font size at 100%
  2. increase font size to 200%
  3. most of the inputs are cut-off at the bottom of the page
  4. reload the page at 200% font increase
  5. inputs are all back
  6. decrease font size back to 100%
  7. lots of white space at the bottom of the page

Granted, maybe not a lot of people are going to be manually changing the text size like this but if you are a perfectionist like me you might want to look into methods for dynamically resizing iframes (or maybe just don’t use an iframe if feasible).

Also, on the home page, the review cards near the bottom don’t shift to a single column as the page narrows and instead produce a horizontal scroll bar. If this were a table I think that would be acceptable, but probably not for this situation.

For 2, you are using auto for the focus outline which relies on the browser to provide the outline style. It’s not terrible, but in my browser (FF on Linux) I still feel like it could be more prominent, especially on the form inputs at the bottom of the hoodies page. I know focus outlines are the bane of our existence, but I would suggest you customize it so it stands out a little more. And if you don’t like the boxy outline look you could always use box-shadow instead.

Also, we need to talk about your hamburger icon :slight_smile: First, you’ve got this for the focus state:

.gMVCsa:focus {
	outline: currentcolor none medium;
}

Naughty Naughty. The hamburger icon definitely needs a focus indicator.

After the hamburger is clicked and the menu pops open, I can Tab through all of the menu items, but once I’m at the last menu item and I hit Tab again, the focus moves on to the next focusable element on the page, which happens to be covered up by the menu and thus I can’t see what I’m focusing on. My suggestion would be to hide the menu when focus leaves it. I suppose you could also trap the focus in the menu but then I think you’d need to make it a full on modal dialog (which would be a lot more work).

Also, when the hamburger menu isn’t expanded I can still Tab through all of the items in the menu (so basically I’m Tabbing through an invisible page). If an item is not visible on the screen then you should not be able to interact with it. So you’ll need to figure out a way to prevent keyboard focus on the menu items when the menu is not showing. The obvious method would be to set display: none on the menu when it is hidden but if this messes up your slide in animation then you’ll have to find an alternative (probably using some JS magic in combination with tabindex).

Hamburger menus are a lot more complicated than they let on to be :slight_smile:

I don’t have time to go any deeper than this. Overall it looks very nice. Congratulations on your first site!

Hey! Thanks so much for the in-depth review. It’s been very helpful and you’ve brought up points that were previously in my blind spot.

The iframe form definitely needs resolving, it’s on my list.

Great points about the hamburger icon and tabbing through, i’ll look into those asap and find a fix.

Really appreciate the time you took out of your day to look at the site and write this. :pray:

Thanks
Dave