Skip to content
Hallway
0:00 / 0:00

#responsivedesign#mobile-first#cssmediaqueries

Are you writing responsive CSS the wrong way?

Kevin Powell

1M subscribers • 13 videos on Hallway

YouTube
  • Recommended by 3 people: 3 in engineering communities.
  • Presented by Kevin Powell
  • Linked in the descriptionkevin-powell/mobile-first-for-the-win
  • May be out of date. Uploaded 6 years ago, in an area where tools change fast.
  • An opinion. It argues one side of a question engineers disagree on.

Beginner. No background in the topic needed.

437K views6 years ago3 recommendations

Web developmentCSS and layout

Kevin Powell explains why writing mobile-first CSS is easier and results in cleaner, less complex code than desktop-first approaches.

New free course! Conquer Responsive Layouts: A 21-day challenge: courses.kevinpowell.co/conquering-responsive-layouts I know sometimes it's because we have a design file that's only a layout as a desktop layout, or because it's just how we're used to working since we're on a desktop, but I writing mobile-first CSS not only results in less code, I also think it's a lot easier. GitHub for this project: github.com/kevin-powell/mobile-first-for-the-win/ CSS Zen Garden: csszengarden.com/ #responsive #css -- Come hang out with other dev's in my Discord Community discord.gg/nTYCvrK --- Keep up to date with everything I'm up to kevinpowell.co/newsletter --- Help support my channel Get a course: kevinpowell.co/courses Buy the t-shirt: teespring.com/stores/making-the-internet-awesome Support me on Patreon: patreon.com/kevinpowell --- My editor: VS Code - code.visualstudio.com/ How my browser refreshes when I save: youtu.be/h24noHYsuGc --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: instagram.com/kevinpowell.co/ Twitter: twitter.com/KevinJPowell Codepen: codepen.io/kevinpowell/ Github: github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Why it's here

3 people recommend this

What people say. Recommended as a highly helpful explanation of the mobile-first CSS approach and its advantages over desktop-first.

Moments people linked to

u/BuildingArmorin r/Frontend • Recommends

On “Can anyone explain mobile-first approach?”

Here's a video that I found to be really helpful with this: link to this video If I was to summarise it badly, I'd say it generally comes down using min-width media queries to add the complexity rather than max-width to take it away. If you get the content and the colours, fonts, etc. in the page, you've almost got the (or at least a very suitable) mobile version of your site anyway.
15View on Reddit

u/BuildingArmorin r/Frontend • Recommends

On “Should you design your website mobile first or desktop first ?”

I've found this video quite helpful in getting the concept clear in my mind: [video But basically, mobile first because it's the most simple. And then add complexity to your layout as your width allows.
4View on Reddit

u/jaysnelin r/Frontend • Recommends

On “Just can't figure out responsiveness”

If you’re building while looking at desktop fist and then mobile you’ll end up with way more headaches in my experience. By default the browser is naturally responsive, we as developers make it unresponsive. Try building it out by looking at mobile first and go from there. But, here are 2 good resources for you, the first is the reason I now write for mobile first personally and the second is just a really good article in flex, grid, and media queries link to this video https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/
2View on Reddit

u/_marine7in r/Frontend • Recommends

On “is making 1rem equal to 10px is considered bad practise?”

I would recommend you to watch this video: [video It was really useful for me.
1View on Reddit

u/BuildingArmorin r/Frontend • Recommends

On “What’s the difference between implementing mobile-first vs. desktop-first website?”

I learn best by seeing things in action, so this video from Kevin Powell really helped me. It's such a simple concept when you see it in action, really. He shows you the difference between desktop-first and mobile-first. link to this video
1View on Reddit

u/zeldanerd123in r/Frontend • Mentions

On “Is this a little heavy on the divs?”

It's honestly fine to use divs. One of the issues when using too many divs is readability. You'll be more prone to accidents do the deeper you get with divs especially if you forget to close one or two. I think you had a good level of nesting with your divs so the code is readable. I still recommend you use semantic HTML tags as it's much better for SEO, accessibility, and readability. MDN goes a little more in-depth about the topic. Semantics - MDN Web Docs Glossary. For responsive you'd probably want to go mobile-first. It'll allow you to write the base styles for each component on your page and then for the larger devices you can add overrides for the layout. I used to do desktop firs…
3View on Reddit

u/MXMLNDML_in r/Frontend • Mentions

On “Is mobile-first design a lie?”

I think you should design your apps/sites desktop first, but code them mobile first. This assures you can build a fancy, outstanding design on desktop (if that’s what you care about) while the layout of the mobile view is more restricted in comparison. But in development I think mobile first has its advantages because the desktop version has more features most of the time. And it’s way easier to add them (in a media query for layout or hover/focus states or a separate js file for logic) than to take them. Kevin Powell made a great video about that.
1View on Reddit