- Do Consider Your Content
- Don't Give Mobile Users the "Mobile Treatment"
- Do Serve Correct Assets
- Don't Serve Everything to Everyone
- Do Go Mobile First with CSS
- Don't Add Every Resolution as a Breakpoint
- Do Go Fluid, Fixed, or Mixed
- Don't Use a Framework if You Don't Need One
- Do Analyze and Optimize
- Don't Ignore Your Users
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Do Go Mobile First with CSS
You may have heard about the “mobile first” movement. This is the idea of starting with the smallest screen and working up, filling in the gaps or structure of your design as there’s room for it. Lately, there has been a new discussion of focusing less on the mobile-first and more on the content-first aspect. This is something you will need to decide for how you and your team work; however when it comes to your stylesheet and maintaining it, you should be creating a stylesheet that is mobile first.
To get started with a mobile-first stylesheet, I like to think of it like I do a JavaScript file. This means that I always put my global styles first. These will be the styles that every size of screen will use and it also means that when it comes time for me to overwrite them for a different size, I only need to change some of the styles instead of all of them.
This is especially important when you are working on debugging your styles. You can skip many breakpoint-specific style headaches altogether by just starting out by styling mobile first.