March 08, 2025 • By KWD

Listen to this article

Design is intelligence made visible. - Alina Wheeler, Author.
Designers' primary role is to design the front-end visual components of an app/website. They job affects the usability and user experience of the app/website.

First solve the problem. Then, write the code. - John Johnson
Developers on the other hand focus on coding the ideas and concepts in developing functionalities of the app/website.

Designers are a different breed than developers. In small firms, their responsibilities overlap and sometimes in larger companies as well. There are couple of principles which the developers might keep in mind to get the product rolling into production.

Relativity in CSS

Utilizing em, rem, and percentages aids in the fluidity of your CSS styles across screen sizes.

Instead of using pixels as units use rem. For e.g. section.hero {width: 90%; font-size: 1.5rem;} rather than section.hero {width: 900px; font-size: 16px;}

For instance, if you need to change a breakpoint, your widths remain consistent. And you can change the font size of any element simply by changing the font size of the element.

Media Queries and Content

Content determines the break-points for any device and not device width.

If you were to consider device-width, the devices are evolving at an exponential rate with which as developers we can never be able to catch up to.

We need to find an intelligent solution for this problem and content provides us with an opportunity to solve this issue.

@zomigi the first media query is actually the absence of support for media queries. — Bryan Rieger (@bryanrieger) December 1, 2011

If you feel a bit lost, use the Golden Ratio Typography Calculator when deciding the line lengths.

Another important aspect of having the content breakpoints is performance improvement because everything just seems to work just alright without much to debug.

Brevity is the soul of wit. - Polonius

Keep it short, keep it simple.

List Features First

As developers, we start first by listing the features which need to be developed.

Most of the time, when our work overlaps with the designers we get lost in the visual aspects than focusing on the job at hand, which is to list the features first and then get on with the other aspects.

The questions you ask yourself are an indicator of type of output you will be producing.

Lets say, you ask yourself a question, "Should this be floated to the left or to the right?" instead of "What are the ways in which I can make the user feel comfortable using the app?"

List features first, then design.