Hi everyone, hope you are well. I am hoping to get project feedback on my landing page. I am sure there are many ways i can optimize it and maybe even reduce the styling. Any feedback or ideas on how i can improve is highly appreciated!
here is the link:
Thanks
Louisa
Wow, this looks great, very professional.
chrome inspect is lying about how it looks on mobile
This looks great! One suggestion though maybe add something so when a user hovers over the nav bar links they shade or something equal! just to give a bit of interactivity!
@ChrisCline1138 Thanks for the feedback! I noticed the same as well. For a while i thought the media queries were not working when i was checking in chrome inspect. I wonder what could be the reason?
@Steakfries Oh that is a good idea. I will definitely do that! thanks for the feedback.
Looking great so far:
Improvements:
User: imho the texts are hard to read, because the spacing (line height) is very low and the font size too
Technical: use * {...} sparingly, because this leads to a “polluted” DOM, where every node gets these css attributes, what can lead to major wasted hours of debugging
@miku86 Thanks for the feedback, i can imagine as css styling grows the debugging process grows as well, so makes sense to limit that. Will see how i can improve and remove the *{…} use. I am sure i can remove some of those style rules and redistribute them. Will check on the line height as suggested and see how i can make it more readable and user friendly.
From a professional standpoint, most debugging time with CSS goes into selector specificity,
meaning you have to find the rules, that lead to the unexpected behaviour.
With Dev Tools, it isn’t that hard, but it is wasted time.
You can read about it here: https://css-tricks.com/specifics-on-css-specificity/
Therefore it is best practice in 2019 to use class where ever you can use it.
In combination with Sass/Less and BEM this leads to very maintainable code.
It’s nice. I am not a fan of that emboss in the submit button, though. The overall design is minimalistic, so I guess the simple button with a soft box-shadow will look better.
Thanks for the article link! Its very insightful in specificity weight and values and how to factor this when styling your pages. I think i can agree its best to use class and class combinations in certain situations as its easiest to target changes without affecting other items. With that in mind, think i am going to try restyle the sheet and see areas i can clean it up.
Thanks for the suggestion! It does have a bit of a rough look to it that doesn’t fit in. I will see how to incorporate a minimalistic submit button
Hm, so is Firefox’s mobile view, and when I resize the browser window manually. Maybe codepen is doing something wonky.
One thing I noticed is that if you set the viewport to responsive rather than emulating a mobile device the page responds as expected
I’m just here to pay a compliment- this is a beautiful Product Landing page!
Well interesting enough, i tried it out again in chrome, and weird stuff happened.
The first time i selected the device Galaxy S5 i got the same exact behaviour as in the screenshot you sent. When i select a different device say Pixel2, it resizes properly. But here is the weird thing when i go back and re-select Galaxy S5, it resizes properly. And this happens again and again, on the first selection its all screwed up but on the second selection, it displays as expected.
I’ve also noticed this on other pages, chrome must have had a recent update that is still buggy.
Reloading the page while in inspect mode also fixes things.
