Responsive landing page. Tried to make it pixel perfect
Design comparison
Solution retrospective
What I learn :
- Fixing the differences between breaking point were fastidious but helped me to read better the style tab in the devtool.
- CSS files can become very long and even naming our selector correctly, it can be tough finding things.
- To avoid Float properties.
- How to manage within the Chrome screen resolution tab.
- Pixel perfect is not the good mindset to have as a designer.
I Never thought I would say that but coding for pixel perfect is extremely time consuming and I question the benefits for the user.
Searching for media query on how to target different browser size, I stumble on a Stackoverflow answer that took my attention. The user Dave Everitt suggest to avoid targeting specific devices or sizes. But rather doing the following :
- develop the site for mobile first using percentages or ems, not pixels,
- then try it in a larger viewport and note where it begins to fail,
- redesign the layout and add a CSS media query just to handle the broken parts,
- repeat the process until you reach the next breakpoint.
As a designer I like to know that my design will be seen as I designed it. But in the end, what for ? Isn't it better to give the user the best possible experience no matter what screen they are using? Let's get it right, I'm not saying design and precision are not important, I'm just saying we should just put the user's best interests first. The purpose of our design isn’t to help the users to achieve their goals ?
Community feedback
- @Kamasah-DicksonPosted almost 3 years ago
I really like all what you shared in the "community question" I think what you shared will be really helpful to me. Like the use of em units for media breakpoints
Also your design looks great...its pixel perfect I will say:)
0 - @MojtabaMosaviPosted almost 3 years ago
Congrats on learning a bunch of useful insights and taking the time to reflect, here are some sggustion that came to mind reading you reflection.
1-Learning about BEM is great way to midigate the issue with naming, specificity, reusability and structure.
2- BEM works incredably well in conjunction with a 7-1 architeture which helps you take a modular approach to writing styles and breaking them down into logical chuncks that once put togather in a main file build the UI, it's like playing lego, the lego parts being your logic chuncks and once you put them togather you've the UI.
Regarding you toughts about pixel perfect solution being time consuming, my rule thumb when for this is that often time a accuracy rate of 80-90% is enough but sometimes you've to weigh in if it's worth it to for 100%.
Keep coding :=)
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord