7 design principles for developers
Tags: css, webdev, beginners, tutorial
Published: 2021-10-13 15:01:21

Ever said this? And then have that happen?

![Meme of shit developers says](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocy60cn1i67ywxj4z6g2.png)

Yeah, me too. lol

Here are 7 tips to help.

## 1/ Use Relative Units & Percentage Widths

Using em, rem, and percentages helps your CSS styles flow across screen sizes.

ex: If you need to change a breakpoint, your widths work across the board. And your font-sizes can change by simply changing the <html> element's font-size.

![Relative units and percentage widths for css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyvsdaii02jllzg4duvd.png)

## 2/ Content (not device width) determines breakpoints

You don't want to end up in this loop: New device, new media queries, new device, new media query...

To keep that from happening, here's what you do:

Base your breakpoints on the natural qualities of your content. As screen size increases, pick where it’d be better in a new formation

Boom! Breakpoint.

![Best way to determine breakpoints in css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kxdk8doymf3l7iaxmje.png)

## 3/ Use min-width media queries

Using min-width ensures that mobile styles get loaded without desktop styles mixed in. 

This can significantly improve the mobile experience and your site's SEO.

![Why you should use min-width queries in css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeh8du6z7l9op7m4t21b.png)

## 4/ Start by listing features, not designing layout.

If you’re building a cheap flights site don’t ask: “Should this item be on the left or right?”

Instead ask: “What will our users need?”

Write out items like a datepicker, input field, search button, etc. Then piece them together.

![How to start designing a website page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftsxgx0ux9gfbqcfzqqe.png)

## 5/ Follow the thumb rule

75% of people use their thumb to operate their mobile device. Place key actions where it's easily accessible.

💚: Easy access = Most important elements
💛: A small reach = Secondary elements
🧡: Takes effort = User always notices

![How to design a website page for mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xyiog54mu72oxkykqdz.png)

## 6/ Sketch, Design, Code.

Sketch first, always. Notice how the sketch is rough and details are left out. It gives room for interpretation on a design tool.

But it’s also specific. It’s very clear how it works, what needs to be built, and what doesn’t need to be built.

![Process for building a website page by Basecamp's Shape Up book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ediasgpepwofurcv7j3g.png)

## 7/ LT Browser

The LT Browser was made specifically for testing website responsiveness.

✅ +45 screen sizes to test on
✅ Built-in dev tools for debugging
✅ Network throttling testing
✅ Local testing
✅ Google Lighthouse performance reports

How am I hearing about this now!?

![LT Browser overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i78jpo8bnyx780wifz2x.png)

## Big thank you to the folks quoted here. 

Luke Wroblewski: Mobile First Book
@adamwathan Steve Schoger: RefactoringUI
@chriscoyier: CSS Tricks
@dhh, @jasonfried: Shape Up Book

And that's it!

--

If you found this helpful, let me know by liking the [tweet thread on Twitter](https://twitter.com/stackbit/status/1448291138218065927?s=20). 💖🙏

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htu7ym5iqfm6kdpx8d2t.png)