One aspect of designing for the web that can easily get overlooked is proportions and scaling.
Whether you design first for desktop or mobile, you must consider both viewports and how your design and layout translates across both.
This, as you know, is known as responsive design.
Now, besides the traditional concept of how items on desktop will stack on mobile, you must also consider a few other design elements and how they’ll scale, too.
Here’s a few design aspects I always double check to ensure they scale well:
Padding & Margin
With every section of a page that you build, you have (or should) padding and margins — dictating how much space is around your content on the top, right, bottom and left.
Now, let’s look at a section on my own website’s homepage:
With this particular layout, there is a set padding of 40px on the top, left, and bottom around the copy.
As we then translate this design to mobile, 40px padding within that card layout is going to just cram the copy a little bit too tight.
This is why we then need to scale that padding according to the width of the mobile viewport.
As a result, I narrowed down the padding to 20px instead:
The idea here is to always pay attention to how your padding and margin’s scale across devices. More times than not, you’ll want to adjust at least the top and bottom margins in main sections so that it doesn’t take up too much real estate on a mobile device.
Radiuses
Now, an additional design aspect that I always pay attention to the scale of is border radius.
The amount of border radius you utilize on desktop may appear too strong on mobile, and can easily end up misconstruing your intention for how you wish your design to look like.
In addition to just scaling border radiuses across devices, you should also consider scaling border radius sizes according to the element to which you’re applying it to.
For example, if you are applying a border radius to a box or card that spans 1200px wide, but you then have a smaller box of only 300px wide, they are going to appear quite different.
It’s one of those “mind tricks” that makes you look at it a few times to really see if they are different, because your smaller box will always appear to have a much larger radius — just because of proportions.
A 10px border radius on a 300px element is a much larger proportion compared to a 10px border radius on a 1200px element.
So remember — scale border radiuses based on scale AND device.
Font Sizes
The final piece that I pay most attention to as I translate designs from desktop to mobile is sizing of fonts.
Now, this can all depend on the typeface you may be using, however, majority of the time, your fonts will need to be scaled down for mobile.
Keep in mind, mobile is a much smaller screen, so we don’t want to scale it down so much that it becomes unreadable.
For the most part, your body copy should remain close to the same across desktop and mobile, but your headings (H1, H2, H3, etc) will definitely need to be scaled down.
The best method for scaling your fonts is to size them using clamp. I mentioned this in a previous newsletter — it’s a method that allows you to set font sizes based on minimum and maximum sizes.
With clamp, you can set the sizes up once, and know that it’s always going to be perfect across all devices.
Again, you will have to setup clamp for every type of heading, and this will vary site to site depending on your font of choice, but clamp allows you to just set those sizes and forget them.
Those are just three main elements that I pay close attention to for responsive scaling — what others could you add I didn’t mention here?
As always, thanks for reading — and if you have any questions, just hit reply and I’ll get back to you!
