Padding Saves the Day

The idea behind this post is so small that I almost didn't write the article. But after seeing this slight design overlook for the umpteenth time, I decided, what the hell.

Breathing Room

As an application's UI is designed and built out, we are often in our own special little silo. Whether that silo is designing an app within the forgiving boundaries of a design document or developing within a fixed container centered gently within the viewport.

Thought and effort go into designing the UI and then that beautiful UI is jammed inside a frame with no room to breathe inside smaller viewports.

A website without padding

Simply adding padding to the primary container does the trick. In small websites I may use the <body> element, but applications I ususally have an app contianer element. Depending on the existing design I have found that between 6px and 12px works the best.

.window {
  padding: 8px;
}

An incredibly easy fix to get your design looking streets ahead in smaller viewports.

A website with padding

Tags :

Benjamin Charity

Self-motivated UXE technical lead focused on building highly scalable systems for both the web and mobile platforms. Currently focused on Design Language Systems and Component Libraries.