First Tribute Page (Feedback)

Code Feedback
1

Here’s my tribute project, let me know what you guys think, especially on the hamburger nav. Not too sure about that contrast with the header. And also have no idea why the video banner won’t play on mobile, so I had to add a static image as a fallback. So if anyone has an idea on how to get videos to work on mobile, that would be awesome!

http://scandaltribute.updog.co/

2

Hi @s0ukke05, your page looks good. Clearly not your first foray into HTML and CSS. Just a couple of minor things I noticed;

  • your nav-bar, either large screen or small, is no longer visible after the user clicks a link. They have to scroll up to see it again.
  • Haruna’s photo is offset from the other three (only noticeable on medium and large screens)
  • Medium and small screens don’t have anything they can use to hover so maybe put a carrot or something on the pics at those sizes so there’s an indication to the user that they can click on the pic and get additional info.
1 Like
3

Thanks! My CSS / HTML skills were very lacking, as I always relied on bootstrap, but decided to actually learn CSS without any frameworks, and is my second project just using css, and still kind of have a hard time trying to figure out the responsiveness of some things, so definitely still a learning process for myself.

As for the navigation link when they clicked, I really didn’t want the navbar to be stickied, but instead do you think having a fixed scroll to top button on the right hand bottom would be good? That was something I was looking into.

As for the picture offset I’m going to have to look more into it, I really hate dealing with pictures haha.

Good idea for an icon for smaller screens, I think I have an onclick on each of those pictures for smaller screens.

4

Thanks for your suggestion and pointing out the image, I went back and added a scroll to top button and fixed the offest image, it seemed that the onlick was causing it. And for the mobile card view, added an eye icon too, so users know that it’s clickable. Let me know if there’s any other suggestions that I should do!

5

Hi s0ukke05,
I like the style and look for this page. One thing I might change though, is the placement of the back to top button. I would put it toward the top of the screen in place of the menu when that disappears. This is because one some of the pages you have significant whitespace toward the right of your headings making the space ideal, and also I was not looking at the bottom of the screen for a navigational link and think keeping a link at the top would be more intuitive.

That said, avoiding unnecessary clicks is usually the goal when designing any user interface. You could alternatively use the 3 line menu icon instead of a back to top button, and have the menu expand as and when people need to use it. This will avoid the extra moving around the site.

6

Thanks snowy! For the nav not being fixed, I figured with having a short page I could just not have it not stick to the top when a user scroll. With having the scroll to top button on the top right instead of the bottom, I could just always end up having the navigation stick instead if that makes it looks better? Plus it can address those issues that you pointed out earlier. I just always have seen a scroll to top button on the far bottom right of a page, so figured I would follow their lead haha.

I’m going to have to experiment more with the placement of it, to see what really fits. Thanks for the feedback!