How to manage font size/spaces if same layout of tablet design need for Phone
I have a PSD file for tablet design. The same design when I try to develop for mobile with less than 300px width view port , I am afraid that font size is too small.
Problem:
1. The font size got to small if make font size small using media query
2.UI breaks if keep the same font size as specified in photoshop template
3. Can some one help to achieve mobile UI for this image attached. The same ui should work in Tablet.
4. I used font size 6px for vw less than 300px. is it correct for this design?
3 Replies
this isn't something I'm terribly good at myself, but I can help you make it easier for others to help you. Share the code you have in some way that people can run it in their own browser by just clicking a link. Github pages works, or something like codepen or stackblitz, they're all free to use. Make sure to replace important images with placeholders if your hosting option doesn't let you upload images.
Right now you're effectively giving people a screenshot and almost asking, "Hey, make this for me." The chances of anyone doing that are slim to none.
To answer your actual question though, yeah, I think the font size is too small. The font is too small on a simulated galaxy S20, let alone something smaller with a lower res screen. No amount of media queries is going to let a larger font fit in the tiny space available. The designer would have to rethink either how much information they're presenting, or rethink the layout to be simpler so there's more room for the existing design elements
Consider "fluid typography" and "viewport units" (google those). There are a lot of really excellent techniques using both of those that will help you get things sized just right.
I briefly only did one project in college making a responsive website, but I remember to make it responsive, we literally had to go over almost every element in the html and query a different css property depending on whether or not it was a desktop, tablet or mobile. We even created a separate css file for printing that simplified all the designs and turned everything black and white.
For each html element you query the screen resolution to determine whether or not the device is a desktop, tablet or phone and then apply a completely different property for almost every attribute.
Think of it like perfecting the same webpage three times over. You can drag resize the browser window to test the responsiveness on desktop, so you can adjust your code on the fly.