Please tell me, when receiving a design layout, for example, in Figma, how can you check the overall look of this design on screens with different resolutions before implementing it? Are there any ways?
I mean only viewing the graphic design layout of this page.
1 Like
Is this an answer to your question?
- Do your stuff on your local computer or upload to a test site.
- Use Chrome to test different sizes https://www.screencast.com/t/l3bBPPJyKaDe
1 Like
If you’ve received a design from someone who knows what they are doing then you should have also received suggested designs of what the design should look like at larger and smaller screen sizes. I say ‘suggested designs’ because any design that is produced in a paint package can only be a suggestion as the web is not a fixed sized piece of paper.
It would be your job as a developer to take the design and make it work across a range of sizes. I can usually look at most designs and just tell by the look of them whether they are viable for the web or not. Just because someone can draw it does not mean it can be coded!
The first thing (i used to do as I am retired now) was upon receiving a design (usually a photoshop) was to give feedback on what was and wasn’t possible and what needed to change in order to make it responsive and adapt to various screen widths.
You can’t just stretch a design and make it larger or smaller for the screen (you could but it would look bad) so there’s no easy way to show how a design will actually look once coded. Otherwise you could just make one image of the site and scale it to fit the width of the viewport (and believe me I have met design studios that do just that and then get annoyed when the client says the real site doesn’t look like the image they posted).
If a client does want some representation of the site you can create a basic wireframe with dummy content in a few hours to show them it’s rough behaviour (before you do your real slicing and dicing).
These are old articles but still relevant.
Lastly don’t fall into the trap of coding for specific devices or screen sizes as there are no constants. Be device agnostic and make sure the design is flexible and responsive and adapts to all screen sizes (e.g. Open your desktop browser one pixel at a time and make sure nothing breaks or looks odd. If It looks wrong then that’s the point you should change the design so it fits better. With a few well chosen media queries and a flexible design you can cater for all devices now and in the future without ever knowing about them.)
2 Likes
It may be, thank you!
Thanks a lot for the links and your detailed answer!