DEV Community

Cover image for 7 design principles for developers
Ryland @ Stackbit for Stackbit

Posted on

7 design principles for developers

Ever said this? And then have that happen?

Meme of shit developers says

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 element's font-size.

Relative units and percentage widths for css

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

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

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

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

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

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

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. 💖🙏

Alt Text

Discussion (10)

Collapse
joelbonetr profile image
JoelBonetR • Edited on
  1. Relative units are fine till they are not. If you want something to display at 40px size, the client device will scale this depending on it's own ppi even setting the measurements in pixels and most of the time using relative units will enforce you to add extra media queries that wouldn't be needed if using pixels instead. It just depends on the place and the expected behavior you want to achieve so please, don't use the fallacy "use relative units" for all. As I need to remember most of the time in this platform, there are nice tech out there, but none of them are meant to rule them all.

  2. Is the default behavior of any text element, nothing to do here. For the layout it will be weird at the point of having more than a single block element, you can simply use flexbox to state something like flex-basis: 50%, max-width: 50%. The browser interpreter will do the rest.

  3. and 5. are for designers, not developers, while 6 is mixed. I've enough things to do as senior dev and tech lead, don't really want to get involved in a totally different job (in which you need to learn many things such color theory, form and composition, design meaningfulness and a big bunch of other things).

By the way, the design life-cycle, along with UX is:
UX: do low quality wireframes, test them, update them while ensuring the expected functionalities are covered,
Design: apply design to this wireframes according to the product.
UX + Design: test the whole and start again if needed.
This is done for EACH view or component in the application.

  1. needs analysis to really know if this is needed. Chrome console/dev tools is great for testing responsiveness as well without the need of a third party and also includes lighthouse.

That's my quick insight on this, hope it helps adding some criticism on what is told since 10 years ago like a mantra.

Collapse
rylandking profile image
Ryland @ Stackbit Author

Always good to have constructive criticism and multiple views. Thanks for sharing these!

Collapse
koas profile image
Koas

Hi, thanks for the article! I'm a bit confused about the third point:

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

Wouldn't that mean that the desktop styles would have the mobile styles mixed? Why is better for SEO to start from mobile and going up than the other way around?

Thanks! :)

Collapse
rylandking profile image
Ryland @ Stackbit Author

It has to do with with pagespeed. If you have content jumping around on a mobile screen as your max-width media queries load in, it could affect the score...

But tbh, it would have to be a massive file with all the media queries at the end for such a thing to be noticeable (or if the mobile-only CSS is loaded after page load).

Collapse
okbrown profile image
Orlando Brown

Some really good points. I especially like and agree with the natural thumb placement areas. I do have a question, which is probably not noticed but the first example that sets the baseline font to 10px. Are you sure you want to recommend this part in the example? And will new comers understand what the implications are?

Collapse
joseph_ogunsuyi profile image
OGUNSUYI JOSEPH OLUWASEUN

👌 making sense as a good remembrance

Collapse
rylandking profile image
Ryland @ Stackbit Author

Cheers, Ogunsuyi 👍

Collapse
woxyco profile image
WOXY

Cheers 🍹

Collapse
ghana7989 profile image
ghana

2nd point is too confusing what do you mean by it?
It would be great if you can provide a code sample