Ever said this? And then have that happen?
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.
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.
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.
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.
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
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.
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!?
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. 💖🙏
Top comments (9)
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.
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.
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.
That's my quick insight on this, hope it helps adding some criticism on what is told since 10 years ago like a mantra.
Always good to have constructive criticism and multiple views. Thanks for sharing these!
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! :)
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).
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?
👌 making sense as a good remembrance
Cheers, Ogunsuyi 👍
Cheers 🍹
2nd point is too confusing what do you mean by it?
It would be great if you can provide a code sample