CSS gets a bad wrap for a number of reasons. Based on polls and surveys that I've done, one of the things people are most frustrated with is making websites responsive.

Some of the most common issues I hear are:

• Media queries are a nightmare
• It's difficult to find what's causing the problems
• Too many breakpoints to worry about
• There are too many moving parts

I recently put up a YouTube video looking at why I think many people could simplify their life by changing their approach to mobile-first, because much to my surprise, it seems like most people still do things desktop-first. A switch to a mobile-first approach would solve many of the above issues.

It's the designer's fault

In the comments section, I asked people if they prefer desktop first to tell me why they do.

The most common justification I got was:

Our designer only supplies us with desktop mockups

I understand why they start with writing their CSS to match the mocks in that situation, but I honestly don't think it's a good enough excuse.

the one good reason I did get was that they were creating web apps and admin dashboards that were only intended to be used on desktop computers, which, well, fair enough!

The reason that people starting with the desktop layout bugs me so much is that I honestly think people would have a much easier time with responsive websites if they would start mobile-first, even if they only had a desktop comp to start from.

As I talked about in my above video, we are the reasons a website is not responsive. Turn off all the CSS, and you have a responsive layout. We cause issues when we write our CSS.

Why mobile-first is a simpler approach

When I write my CSS, I don't worry about the layout at all to start. I always start with my typography.

• font-family
• font-sizes
• margins on my text

With that done, you probably have a decent looking mobile website already.

Next up, you can have a large majority of your mobile site done simply by adding two more properties:

• padding
• background-images / background-colors

Once you've knocked that out, most of the time the mobile version of the website is pretty far along. Some components might need some detailing and some tweaking, but the majority of the work is done.

There are parts/sections/components that are more complicated on mobile

Yes, it is true that some things, such as navigation, can seem more complex. We often hide them away and have to add some JavaScript to get them to appear.

But from a layout perspective, are they more complex? Most navigation on mobile are just a <ul> with the bullets turned off and some extra spacing.

There is added complexity in how the user might interact with it, but from a layout perspective, it's very simple.

Changing your mindset

One of the hardest things to do is break out of what you are used to doing.

I really think a lot of people stick with desktop-first because we learn to create desktop sites first as static sites.

Because of that, it's just the natural starting place any time we start creating a website. But I really believe it leads to many of the issues people have with making sites responsive in the first place.

We have to override so many of the styles we already applied when we start desktop-first, rather than letting the site be naturally responsive. By changing our mindset and by starting mobile-first and adding complexity, we can:

• simplify the process
• write less code
• run into less issues

Overcoming the challenges of responsive layouts

I want to show people how, if they simplify their approach, responsive layouts aren't that difficult.

To help do that, I'm launching a free course called Conquering Responsive Layouts. It's not a deep dive into anything except for responsive layouts. I've set it up as a 21-day challenge.

If you'd like to join up, the challenge is starting on April 13th. After that, the doors will be closed for a few months. So if you struggle with responsive layouts, take the challenge and learn to conquer them.

If you missed out on this round, I'll be opening the course again every few months, and it'll always be free. You can still head over to the page and sign up, and I'll notify you when it's going to relaunch