Thoughts on Product landing page (Game Store)?

Code Feedback
1

So, what y’all think about my product landing page?

Thanks! :smiley:

P.S. I haven’t tested it in Safari, but I am pretty sure it’s not gonna work well on it.

Edit: Ideal resolution for this page is 1376 x 768. Works on mobile devices as well. However, it doesn’t look good on higher resolution screens. Any idea on how do I make it responsive wrt higher resolution screens (1920 x 1080)?

2

Nice job with all the effects, FuriousJK.

Recommendations:

  1. The top navbar disappears half way down the screen- assuming you should always see it.
  2. Can have a hover effect over the buy button to let users know to click on it (along with the cursor change). Would be easier to let the user also be able to click on the whole picture to buy instead of needing to target exactly the button in the middle as I was confused at first what these pictures do when they turn yellow.
  3. Links in footer- can change cursor style to let users know the icons are links.
3

Thanks for the recommendations @rrogerthat!

  1. Tbh, I didn’t like the idea of having stickey nav bar on the top as it wouldn’t look good I guess.
  2. Done
  3. I thought about this too and changed the cursor to a pointer but it didn’t work. Then I realized I set the z-index of the parent element to -1 and that’s why it wouldn’t work. I can’t think of any other way to change the cursor without changing the z-index.
4

I really love the design, however it’s not responsive whatsoever. In fact it doesn’t even fit on my laptop screen.

5

That’s strange :confused: Could you post a screenshot? What’s your laptop’s screen resolution?

6

Man, that’s a lot of lines of code for a project like this. Wonder if it could be trimmed down a bit, but too lazy to get into it - sorry! :stuck_out_tongue:

Now, the page itself looks pretty cool, lots of effects and I don’t think you overused them that much, but there are two things that could make it a little bit better:

  1. When you hover over the game and the slide in effect starts, the “buy” is visible from the beginning, I’d make it smoother by making the animation a bit shorter (by about a half or 1/3) and showing the “Buy” at the end of the animation.
  2. I don’t like the “Launch… coming soon” at all. There isn’t really much reason to keep it at all but it’s also not a very compelling place to hover and wait for the user. Instead, I’d create a headline of “Launch” and a bigger subheadline of “Coming Soon” and try to position it somewhere where it’d fit.

I do like the email form effect though, looks very neat!

Now, besides animations, there are some other problems with layout and positioning.

  • The subscribe area, that list doesn’t look great, and then you have the second call-to-action (join the newsletter). I’d scrap that up and have only one cta and the form right below it, all placed in the center of the div.
  • The navbar and the text in Life is Strange section, add some more room on the sides, right now the content is sitting very close to the borders.
    Also, I didn’t even notice the price and “windows” icon before I started looking at this section. “Now available” could become "Now available on " and you could more icons there, since LiS is available on many other platforms. The price should also IMO make it to the top instead of sitting at the bottom, but I do get the idea of why you chose to have it there.

One other thing you could do is add scroll-behavior: smooth to your CSS. It’s not going to target every browser (need javascript for that) but a good deal of users is going to notice the change.

7

@Gigusek Thank you so much for the feedback! I will try to implement all of that soon, but right now, I am facing another important issue.

After @omisoul pointed out that the page is not responsive, I checked it on higher resolution screens (1920 x 1080) and it looked really bad. Ideal resolution for this page is 1376 x 768. So, any idea how do I make it responsive?

I tried the following code, but it didn’t work.

@media (min-width: 1920px) {
  body{
    width: 1376px;
  }
}

@media (min-height: 1080px) {
  body{
    height: 768px;
  }
}
8

I’m actually also on a 1920x1080 laptop and it doesn’t look that bad, just lots of empty space in some areas. Here’s how it shows for me:



9

Well, that’s not how I want it to look. Everything looks so stretchy. I want the similar results like what I am able to see on 1376 x 768 resolution. You can check it out on chrome’s web console. Change the screen resolution there to 1376 x 768.