Product landing page: Liverpool Runs

Hi everyone. Thanks again to everyone who fed back on my tribute page and survey.

I now ask for feedback on my landing page. Any pointers will be much appreciated.

:v:

Great job! Much of the below is just my personal opinion (and i’m not the best with visual design :stuck_out_tongue_winking_eye: so i could be way wrong)

First thing i notice on PC:

  1. The upper corner radius for the banner. They leave a little white space.
  2. Links in the banner are underlined, Maybe off-color and add a hover-over?
  3. The Upcoming races header seems extreme (width-wise) and lots of empty space, maybe 50% width?
  4. Similar to #2 with the links underlined. Maybe a button for each with Hover-over?
  5. Other tiny thing, you have too little to nick-pick so I had to suggest a 5th, The stop watches are all the same, maybe a different color/image for 2k/5k/10k races? (i know with stock images this it’s hard/impossible, but i had to find a 5th)

Overall the PC site looks great! I had to search for visual things (that i’m not great with)

The mobile/responsive version does struggle in my opinion. I few notes:

  1. Header: becomes pretty large and the icon shrinks instead of the text
  2. Video breaks the website width (adds a side scroll)
  3. About Us & Why should stack. They become very tall paragraphs in mobile
  4. Same with Upcoming Races. And they also break the view width. Maybe a flexbox 2/1 stack or stack all 3 vertically?

Here is what i see in the Chrome mobile inspector:

Overall great job!!! And congratulations on a building a great project!

2 Likes

Huge thanks for your feedback. You’re absolutely right about the responsiveness, particularly with the upcoming races section which I need to fix. I’m going to read up on stacking with flexbox and I’ll probably need to add a media query to the text in those elements too.

I need to make a habit of using the Chrome developer tools to test responsiveness!

1 Like