Sega Genesis Product Landing Page feedback welcome!

Project Feedback
#1

I’ve just finished my product landing page - it’s 1989 (if we pretend that product landing pages were a thing back then) and there’s a brand new console in town. https://codepen.io/zara-knox/pen/jOqZxJq

I’d love some feedback! I will say that this is the first project where I felt I was having a lot of fun and more inclined to experiment/let loose. I also found I was a lot more confident in solving issues as I went , and my googling has DEFINITELY improved. I lost a lot of the fear I had in the other projects thus far, in other words. That has to count for something, at least. That said, there’s probably a lot of room for improvement.

There’s a screenshot from Streets of Rage 2 in there, which was a 1992 release. I’ve kept other liberties to a minimum and only used ad copy from the actual time.

EDIT: There’s a hidden Sonic sprite to spot.

Thank you!

Zara

#2

Really cool. Love the scrolling effect with the gameplay scenes in the back.

1 Like
#3

Very creative, brings back lots of memories :slight_smile:

As I start my browser very wide and then gradually start narrowing it, the links at the top start to fall off the right side of the page. There is a constant horizontal scroll bar but I can’t scroll far enough to get the links back. As I continue narrowing, at some point the links come back.

As I increase the font size the links at the top again fall off the right side of the page. Also, some of the content breaks out of its container (i.e. the three boxes at the bottom of the page).

Consider using em units for your CSS break points. Just divide the current pixel values you have in there by 16 to ballpark the em value and then adjust as needed. Using em will make you page responsive to both changes in view port width and changes in text size.

1 Like
#4

Thank you! I love sites with that effect, so glad I was able to mock up something similar!

1 Like
#5

Thank you bbsmooth, that’s great feedback. I’ll admit that I haven’t come across the concept of break points much yet, so I will do some delving to get more of an understanding. Of course, any tips are welcome.

Thanks for the in-depth look at this!

Zara

#6

Your page looks good @ZaraK. Looks like you had fun with it. (I spotted the hidden sprite.)
In addition to the the feedback you’ve already received here are some other things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like
#7

Ahh, thanks Roma. I’ve spent the evening on the W3C validator - first time using it and very enlightening. I’ve gone through all of errors etc and made corrections. I did leave these two:

Error : Element [ img ] not allowed as child of element [ ul ] in this context.

and:

Error : The frameborder attribute on the iframe element is obsolete. [Use CSS instead].

It’s interesting - I guess it’s poor form to use an image as part of a ul? I’ve also left the frameborder on video issue as is for now, as I’m sure it’s something I can fiddle around with later.

And yes, I didn’t feel happy with wedging a br in there, so I’ve removed it now!

I did notice the navbar was dropping off depending on how much the browser narrowed. I experimented with changing the media query breakpoints to em, to little effect (37.5em instead of 600px, etc.). I’m having a bit of trouble fixing the issues bbsmooth pointed out. Would you mind taking a look and giving a pointer?

Thanks as ever, Roma!

#8

The validator has links in the error message that take you to the specs to explain the error messages.

I just did a quick look. Try adjusting margin-left in this declaration;

#nav-bar {
  width: 50%;
  margin-left: 40em;
}
#9

Thanks Roma,

Do you mean reducing it so it is more centred and less off to the side? I gave that a go and it squishes the navlinks together as I reduce the page. I also tried switching to 45% instead of em as a centering method. A bit better as it stops the links falling off, perhaps.

1 Like
#10