Product Landing Page - Responsive Web design

Code Feedback
1

Hello,

Back after a long time. Please provide your inputs on my project :slightly_smiling_face:

https://the-moto-one-fusion-plus.netlify.app/

2

Hi there. It looks like you have the basics of web design working. That’s good.

You obviously know the buttons (Pay now / EMI / Wallets) don’t do anything. It would be a better demo if you opened up some sort of fake page for each button.

Design critique:

  • This demo’s responsive laying looks OK at mobile-device resolution, but not so much at laptop resolution. You might consider doing something about that. Limiting the maximum width would work.

  • At mobile-device resolution, a hamburger menu obscures the spoof Moto brand logo in the upper left corner. Don’t obscure the brand logo! Even if it’s a joke logo.

  • You’re pitching a product. How about putting the product’s name in a prominent place on the site? And its price?

  • As a potential customer your buttons look a little bit risky to me. Do I get charged immediately if I press the Buy button? Do I have to press the Buy button to find out how much this thing costs?

  • What’s “EMI”? (Electromagnetic Interference???) You may be using a locale-specific acronym. But with a web site you address a global audience. Spell out these acronyms.

  • Review your image carousel’s contents. Some of your images don’t look very graceful as you present them.

Keep going. You’re getting there!

1 Like
3

Your page looks good @anantakrroy. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Change the cursor to a pointer when hovering over submit buttons
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens. Looks as though the video is falling out of the container on smaller screens
1 Like
4

Thanks so much for such detailed feedback. I have made some changes to the points mentioned by you. Also, commented out the test bundle which showed the hamburger icon on top right. It was not intended to be included in final page. Also, added in product title and a price. On laptop, I have changed the resolution a bit and also added in tooltip above payment buttons. However, on mobile due to lack of hover , I will have to add a hover like tooltip which I am yet to implement.

5

Thanks for pointing me to the validator. I have addressed a few of them. Also, for some reason I need to refresh my browser for the site’s responsiveness to show correctly. It is responsive for mobile and tablet screen sizes too. I have adjusted the video width to a percentage based width rather than pixel based now.

6
  • The test script should be included, with all tests passing, when you submit your projects.