Are you writing responsive CSS the wrong way?

[@joeldcanfield_spinhead]

Love the margin-left on one item, margin-right on the other to center. Had no idea.

[@daleryanaldover6545]

me too, never heard about that or maybe it never worked before until some time

[@joeldcanfield_spinhead]

@@daleryanaldover6545 @kevin powell Good thought. Kevin, is this new?

[@paritoshbatish9984]

ikr !

[@lordneojacks]

Mind blowing

[@mudyeet_]

same

[@ourcore]

The layout example you gave is when I always feel like mobile-first would be less work. However, in the websites I've built in recent years, there are often more components that are displayed on desktop than mobile, or they look different, so I'd still need to write more media queries to hide and adjust these components, so I don't end up feeling like mobile-first would save me much time in the end. Additionally, where I work, I often get desktop mock-ups first or only. As a front-end dev, I often decide the mobile layout myself after building for desktop. Our clients are also mostly reviewing the sites on desktop first or only. I feel like as long as both layouts get the designer and developer's full attention and the developer feels productive, it shouldn't be such a divisive or single-answer topic.

[@ContinuumGaming]

Exactly right.

[@HunterBBQ]

Totally agreed, due to client need and have 1 desktop design only and so they will ask you for mobile view after. So it's unable to use talk to tell which view or components need to be scroll or redesign or etc.

[@skkkkkkkkkkkkkkkkkkkkkk]

I think people do desktop first because most of the time they dont have design for mobile at all and its easy to build something to look at in front of you and then make it smaller. Got into that trap myself, that cause so much trouble i never wanna do desktop first again

[@dmeredith77]

That has always been my experience and also old habits are hard to break.

[@HarpreetSingh-cz2zh]

SAME! And its 100% because of what you mentioned.. no mobile design given. What should we do then? Not build until we get mobile design?

[@evanlken]

Yes, this was my thought and has been my experience as well. It's just cheaper and faster for graphics design to create only a desktop version.

[@cssmonkey6193]

I do proto them first in XD (Desktop and Mobile to present to the client), then build it from Desktop to Mobile. I don't understand why start at mobile, its so damn easy, from little to less challenge than the desktop. So, I build from desktop down to mobile. Call it preference but, IMHO, desktop-first should go first. I'm dev a theme from scratch and that's my routine.

[@hadisergan1]

if Allah wills me too.

[@KevinPowell]

Second time is a charm! Sorry if you have notifications on and it popped up twice, but I uploaded the first time without any video and didn't realize until after I published it!

[@ghasemabd5595]

:X

[@alisonfool]

New to coding, taking a college course, stressed about my final project, and this made the style sheet portion of my site feel much more approachable. Thank you!

[@theblue882]

This video is golden, I've gone through a lot of tutorials and it never clicked to me that by default the design is so responsive!

[@CarAudioInc]

You're absolutely correct. I can only speak from my experience but by the time I learned my website was worthless without a mobile layout, it was too late. I had already spent months making this non-responsive desktop view. It took me twice as long to figure out how to make it responsive with all these media queries. I think going forward people will learn this way from the get-go. I only work on my personal site, so I put up with my bad habits, but if I was making this into a career I would have to relearn the right way.

[@goldenekpendu]

I just started HTML and CSS and I am so grateful for this video

[@parrot785]

I like to do desktop first because desktop is more complex and I have to consider different ways to build it. It just gives me a sense of control. It's easier to simplify the design for mobile later. I also usually make only desktop design in figma.

[@reganshepherd5650]

"Create responsive columns without media queries" - your last 5 mins would be a great standalone video.

[@8ack2Lobby]

People do desktop first mostly cause when they start learning css they learn and practice it for the desktop so they keep it going!!!!

[@bibekgamebox1083]

I also agree this idea

[@mrrobot7564]

yeah me too, I still do it because I'm used to it but after this vid I'm gonna try mobile first in the coming project.

[@kyleklaiber]

Yep...that is me lol. But gonna try to make the switch!!

[@Dead_Goat]

no. people do desktop first because it makes more sense to do desktop first than develop for an inferior experience that no one actually uses despite what metrics claim due to bots masquerading as mobile devices.

[@patroclusTractors]

Kevin thank you ! you have saved me I almost gave up. I didn't know how simple it was. may all the good doors open your way :)!

[@asadmoosvi]

I just got into improving my front end skills and this channel has really helped out a lot. So thanks for all the great content!

[@lidiakrajewska1677]

I'm just starting with web dev and I'm capable of creating a responsive layout but it's such a looooong process. Starting from mobile layout might save me a ton of time and simplify it. Thanks for this video!

[@DaveCollison]

I'm going to start designing and coding using Powell Power.

[@walkingin6375]

I just started learning all of this coding stuff a little bit ago. I'm about a month in or so currently, and I have to say that it's just how I learned from the coursework / flow. Sites and courses / people are all teaching for desktop, and then showing how to make things responsive after you have made what you have. This is the first I even knew that you could do stuff with mobile in mind first and just use min-width, instead. Makes so much more sense, definitely breaking this bad-habit before it begins. Glad I found your channel, thanks man.

[@JohnCamacho]

Forget CSS for a bit....when doing a layout I actually do it in XD first because I want my client to sign off on the design before I get into the html/css. I want to see how the desktop version looks...Then I can visually scale back to how it looks on a phone. Now if I design for mobile first, I have a one column design...so then how does the desktop version look? You have to add new things on to the desktop. Now for the CSS, I do it for mobile first. It takes getting used to, but not hard to do when writing media queries. If you're not using a desktop mockup to start with, this would get harder I think.

[@whyking0815]

I agree a 100%. We do the same!

[@jenninexus]

Those are some good points.

[@sirprize2524]

That's exaclty what I think

[@LusidDreaming]

I'm the same way. I design desktop first because what it looks like on the desktop is really where UI design happens (there's not much space to do anything on mobile). Now I think this is a bit subjective, but the idea that you should code mobile first is objectively the right choice. If you code desktop first, you will almost invariably be overwriting formatting, which means that you have to be much more careful about specificity and such. When you start with mobile, there's typically much less CSS because most everything is stacked vertically. Then, when adding media queries for desktop, you're adding things instead of overwriting, which is much easier to do and less error prone. You will also typically have to code less because, in a sense, most desktop layouts simply inherit formatting from the mobile layout and then add on top of it. I'm glad I'm not the only one who designs in one direction and then codes in the other. It seems weird, but like you said it's not too bad once you get used to it.

[@FirAnto]

Agree. I do design desktop first, but build mobile first.

[@marcalbert1579]

You've convinced me. Wow, I just realized how you're approach is much simpler especially that I do basic websites all the time. This will save me hours, thank you. Very much appreciated.

[@joeldcanfield_spinhead]

Perhaps the question could have been, "SHOULD you do mobile first or desktop first?" I do desktop first because I've been doing web dev for 25 years, and only designing for mobile for the past 7 or 8. The habit is hard to break. But mobile first is much much better. Every time I build a site desktop first, it's such a pain to go back. But when I do mobile first, going to desktop is easier.

[@tachnicalboss3536]

kzbin.info/www/bejne/Y3fZe3eNaZeie9k

[@alextheblockchaindev]

I wholeheartedly agree Joel! Cheers!

[@mohiuddinhasan8154]

I learned CSS while working with a page builder app of the Shopify CMS, and it always builds pages desktop first. Thus, I also got into the habit of desktop first. And I absolutely love the fact that there's always something new to learn from your videos. Thank you so much!

[@Mello-yt3oh]

Hey there bud may I ask what app is that?

[@mohiuddinhasan8154]

@@Mello-yt3oh PageFly

[@shadowsir]

Well, it really depends on if you're developing something a B2C or a B2B application. B2B applications usually requires the code to run 100% properly on desktop (they're usually large scale applications that just happened use the browser as UI), while B2C applications usually requires the code to run 100% properly on mobile.

[@daniamsalem]

As soon as I saw the `margin-left: auto` and `margin-right: auto` trick for two adjacent divs, I liked this video. That's a handy trick!

[@finessing2473]

This man is literally a blessing. I never thought I’d join someones Patreon but this man deserves it

[@GlueTubber]

best explanation yet for mobile first. The demonstration was the key. Thanks for that!

[@Danachew]

To me at least, it kinda doesn't matter whether I go desktop first or mobile (I'm a desktop first btw, because as you mentioned, that's just the way I learned). Either way I'm still making media queries to tweak the layout. Maybe it's a little easier for me to think about a layout shrinking and moving verses growing. When I'm coding, I'm thinking about those things anyway as I'm creating elements. "How is this part going to condense?" "Can I get away with fluid responsiveness here? Do I need break points?" etc. I do definitely see where you're going with this Kevin, and I'd like to try doing a mobile first layout just for kicks. But as for my experience so far, I'm not completely on board with the concept. But again, that's just me.

[@erichobbs4042]

I've always found that it's easier to just make something work on a small screen size, and then scale it up. It's always fewer media queries to write, since the main thing that changes is usually just going from a single column layout to a multi column layout.

[@xstrafez_c2017]

I think the reason why ppl do desktop first is cuz most tutorials on media queries start with adjusting the layout for a mobile device. Also, ppl don't have the habit to design mobile first and start designing a desktop layout which can sometimes make it harder to rearrange so it fits in a mobile device. I personally first heard about mobile-first when doing your responsive web design bootcamp on scrimba and I definitely agree with you. It makes it so much easier!

[@blonduose]

since I started Kevin's course when I start practicing I open my firefox inspector set it to a mobile screen size and start working like that. then I start expanding the screen size to see where it breaks and it's a lot easier

[@wordonice4457]

Designing for mobile first and then scaling up seems pretty easy. I do desktop first and scale down, and I haven't had any problems doing that. The reason I do this is I mostly work on enterprise applications that are used on desktops more often than they are used on mobile. Plus, when giving presentations to clients / managements, I do that on a desktop, so initial development is focused solely on desktop. Once that is done. I scale down to mobile. But I'm definitely going to start doing this more often. Always great learning new things from people.

[@BenjaminKeller]

You don't need to convince me, you just need to remind me next time I start a project (I forget every time, I jsut cant get my brain to work the other way around)

[@deivchoi]

I knew mobile-first was the right way to style but I never knew why. This video helped me switch more confidently to mobile-first.

[@karinarodriguez2055]

Wow so cool, thank you! I’m starting out and have learnt static websites. My next lesson is responsive layout and your video made complete sense. Now I know what to do moving forward and learning correctly. 😃

[@peynao]

Very useful information. I just joined the course. I can already see that it's going to clean many doubts. It's many times showing concepts in a basic with and having strong fundamentals what make things easy. Great job!

[@Narkoleptika]

I do mobile first backwards. I start with desktop, but I write my styles as if I started with mobile.

[@_tanzil_]

I think that's a good idea

[@UmrenTV]

I do desktop first backwars on reverse. I start with desktop, but I write the styles as If I started with mobile, while watching the desktop version design live server, on a mobile.

[@stanmuller2870]

Wow, that's how I do it too.

[@princewal]

Thats what I do as well. Style are written mobile first but my design is desktop first. Especially when using SCSS. The fact that webpages are more complex than the examples given and for mobile all you have to do is make things 100% width mostly and make it one long page, desktop is where the actual design and beauty of the site comes. If you have handle desktop, mobile falls into place. Worrying about scrolling not the design isn't the best way to approach things. And i have tried both ways desktop first and mobile the amount of code needed at the end of the day is same

[@LilRealism]

Whoa, I have never heard of the CSS columns property, so I thought that little bonus tutorial was super cool!

[@abhayganti8662]

I feel like I wanna try at least one design mobile-first. I've never considered it before but this video had me moved. Thanks, Kevin !!!

[@christian.arts.13]

I started to do desktop first because the first course I took was kind of old. I know now that I need to start thinking about mobile-first designs first. Cheers for all the good videos.

[@andyhudsonsynthpop]

I work through each element going from mobile through to desktop, so I'm building the page in blocks, well rows to be precise, but often the only design i'm given is for the desktop and I'm magically supposed to come up with all the variations. Sometimes this is fairly obvious, but there are always bits where you are thinking that I wish whoever designed this had actually bothered to do their job properly and think about all the consequences. All too often the designer doesn't understand what responsive is, far happier when I doing the design too. The big plus side that I have is that besides the design I am doing everything else and can have far more control of the code needed for the design.

[@arpitlal3]

Woah thank you so much, I'm glad I came across this video. I started learning 2 months back and been making desktop version first and I gets so difficult and complex to make mobile version, now I know why.

[@BlueTreeCode]

I really like how you mentioned using Figma and XD for designing. I always chose a desktop first approach when designing (Set up the structure using Grid, and then position content within each grid item with flexbox). This usually helps me with the layout and then I would just scale down from there. However, what you said makes a lot of sense. The two reasons I do desktop first is because I feel more creative on a larger screen size and secondly I've already written up the structure. Now, when you mentioned using a design tool with a desktop first approach, that's great advice. That's because I'll no longer be coding up a structure and then feel obligated to scale down. I can design the desktop and mobile layout and start coding with a mobile first approach. I'm definitely going to start learning one of those tools. Thanks for the advice, Kevin!

[@theshelbypalace]

You're wonderful! Can't wait to take your course in the future!!!

[@gwemula]

You’re reasoning is undeniable which is why I can’t disagree. However I feel it is always not a one size fits all situation - sometimes when the client says they want a “unique” look to their website where you have the creative freedom, you kinda want to explore options on a larger canvas, ie., a desktop. I feel like you kind of have the ability to show the full picture on desktops and then readjust and rearrange, pick and choose what you want for the mobile version. This is my sentiment. Am I thinking the wrong way? Please feel free to comment. I’d be more than happy to do things in a way that makes more sense in my situation.

[@idwph611]

Hugh said it correct. Not to mention the fact that at times you are messing with JS and trying to animations just right. On mobile you normally disable all animations or have to minize them, change z-index of items, etc. In cases like that, which are most of the time for a lot of developers, I'm not sure if the approach of mobile first would work. I might have to give that a shot and see how it works out. Start from the basics and end up with the advanced. I haven't thought about it that way before but it might work. I have only seen mobile first design a few times, but I enjoy watching others code. It's a great way to take other concepts and add it to your arsenal.

[@patmarcoux2880]

I think the right question to ask ourselves when designing is "what version of the site people will most likely see?". And, nowadays, it's likely to be the mobile version and the numbers keep going that way even more as time go by. I thought it was frustrating to design for mobile at first because I saw the mobile version as a "side-version" and that the real work of art was the desktop version. Since a year or two, I now admit to myself that the mobile version is the "real version" of the site and that some people, likely at the office or wherever there's still desktop computers these days, will see the desktop version. I dont think screen space should be seen as a canvas because I dont think websites should be seen as paintings. We should see them as beautifully organized information and it's possible to make content breathtakingly beautiful without extra effects or animations. Also, I think it's way easier to add than to subtract!

[@alextheblockchaindev]

That's a good point!

[@stephanpelletier]

@@patmarcoux2880 I dont agree. I can positively say that's way easier to substract than to add

[@patmarcoux2880]

@@stephanpelletier I am 100% convinced that you are right to think that, according to your own experience, it is. Given all the different possible ways a brain can wire itself, it would be totally surprising if everyone of us would end up having the very same experiences. That being said, there is no way, in my own experience of things, that deciding to remove anything while building the most used version of your product equals easier decisions than choosing how your content would grow with more screen space! Still, I wanna be clear, I'm not talking about adding as in displaying new content for wider versions -- I meant giving more room to what's already there. Responsiveness shouldn't be about switching on and off display: none.

[@jw_023]

New developer here still working on projects for my portfolio and whatnot. I didn’t even realize that responsiveness was already built in! Definitely gonna start doing things mobile first from now on. Thanks! Oh and that margin-left margin-right thing is brilliant too!

[@loydcose2780]

I tried making a website in mobile first, but it turned out to be difficult and time-consuming. I used to develop websites in desktop first, and I believe that will work for me.

[@basheerkattan9333]

Thanks man. pls keep creating this videos cause you are a great developer and I am learning alot from your lessons

[@maasnicolas]

I honestly still believe in developing desktop first. The reason for me is simple. If you have a complex desktop site. It's just way easier to remove stuff afterwards with perhaps a few utility classes to go to a mobile version. If you develop the site desktop first, your client can see the most complex version of the site already. They also mostly care about the most complex version anyway. So if you're "ready" with the desktop version, you can show it to the client already and "wow" them. It's like not that much work afterwards to make responsive decisions (if you're CSS from the desktop version is well written ofcourse)

[@maasnicolas]

Mario let’s agree to disagree then 😉 I find a lot easier to add a query inside my class and just put display none then have a query with more styling in it from a certain width. It’s fine for simple websites but when you an inconventional layout, it’s by far easier to start on desktop first. At least that’s how it works for me.

[@flannelbeard4621]

@@maasnicolas I agree with you. Been a dev for 16 years. Desktop to mobile is easier especially for designer devs who can do both jobs. Being a dev and working with a designer who never (no matter what I say) does mobile design for clients it helps that I already know layout and can mentally transfer her designs to mobile first. I hate bosses that tell me to only do something cause they heard it was best in several blogs. Sorry, fire me then, I use what tool the job calls for. If you can't give me mobile layout, but you design a 10,000 website and sell it for 5,000 then sorry I'm not doing mobile first. I'll use utilities to hide what I need more easily. Besides, using postcss I can mitigate this easily: .subheading { font-size: 1rem @414 1.4rem @768 2rem; display: none @375 block; } 👌

[@zlackbiro]

You gave the most logical answer here on the entire youtube! We building complex grid and flex layout first to tuch the roof of that project. Then mobile where half of your css doesnt make a sence for mobile because it have one fucking column and hidden menu with half your icons, headings, images and graphics striped away... Desktop has 10 rows and 6 colums of articles inside grid, its pure mess with graphics and data, margins, paddings, effects, animations, and ist pure time wasting thinking on how will stupid one column layout will look like on mobile! Its bullshit...

[@vripiatbuzoi9188]

@Mario No way. Customers usually want to see a full featured desktop web app that has all the complexity they need to get the job done efficiently. Then much later they worry about the luxury of doing a small subset of that on the go. So much easier to remove features once you have the hard stuff done and fully understand the large scope.

[@vripiatbuzoi9188]

@Mario Not in enterprise. Simple public facing web sites like Facebook, Twitter, KZbin, I might agree but I'm talking about complex productivity web apps where people actually do their daily job on. The kind that companies run on. Mobile barely appears on the radar there. So it depend what world you're in.

[@kvncnls]

Holy cow, that columns bit at the end of your video is awesome! Thanks so much!

[@siddhaartha3858]

I do desktop first, the reason being the HTML. If I have to remove some html elements like some graphics or maybe change those graphics for different viewports, I have to write HTML for including that graphic. Other thing is Its much easier to remove elements and visualize them for mobile. It help to give the same feel to mobile as well desktop. I guess, If I am making a desktop centric design where, my clients are prone to use the website more on big screens, I would start with desktop and vice versa. It's just a matter of personal preference, anyways we are writing the media queries to support responsiveness. And Instead of flex use grid. that makes the visualization so and easy and the control is in our hand always. What do u think Kevin?

[@TheElkster]

Great video and so glad you posted it! I have always done 'desktop first' even after hearing that mobile first is easier etc, because that's how I started back in 2006 and I've been stuck in that rut ever since! I've only really 'got' the whole web design stuff once flexbox was introduced and made positioning so much easier that I actually started to learn coding more seriously! Another issue I have is that I am too impatient and I don't do enough planning..and usually dive straight into coding for the big screen as my head is constantly at war with "what will work on Chrome and what won't work on IE" and that way of thinking ALWAYS hijacks my thinking process. I am now going to seriously have a go at building something 'Mobile first ' as I am really intrigued to see how I get on! Thanks again, Kevin!

[@lukaswalser1550]

Another argument why doing mobile first makes a lot more sense to me is the fact that you are concentrating more on the important content because of the smaller display size and limited space you have. So I always end up with a simpler layout and design on bigger screens in the end, which behaves like it should (keep things simple)!

[@meepk633]

I do desktop first for three reasons. 1) I can see more of the content while it's being styled. I don't have to keep clicking the hamburger to see results. I don't have to scroll as far. 2) I get a better overview of how styles play together. There's just no way to get there when you're scrolling through one giant column. 3) Mobile layouts are just easier. If I'm making page-wide decisions based on the easier layout, there's a chance I'm excluding strategies for the more difficult layout. For example, if I have a paragraph with a picture underneath on my mobile view, I can just use plain old blocks. Their responsiveness is handled with their individual sizes. But if those elements need to be side-by-side on desktop, I now have more considerations. It's easier to put them in a responsive container than it is to coax them into behaving responsively as individuals. It's fixable, but it's also unnecessary work.

[@FatRogSlim]

everytime the subject is on the table, it's a debate. But it not should be that way. Mobile first is for ui that is mainly made for blogging, fun stuff and ultimately nomad aplications. And desktop first goes for EVERYTHING else. literaly. You create a game, you will not do low poly shitty ps1 graphics just because you want every womputer to run it, you start to feed the best computers then you offer adaptative stuff for the others. Because the problem with that whole debate mobile first vs desktop first, is that I start to see some beginners doing whole e-business/retail websites mobile first, and this is the best example to reveal that it's the debate THE mistake?

[@vripiatbuzoi9188]

Very well said.

[@Morrile1]

I always did desktop first because I didn't know any better, also, I had zero ideas on how to change the view for mobiles. Eventually I did learn something and got it to work by hashing it together. Then Kevin came along, and I have learned how various things should be done, and still learning; thank you very much Kevin 😁

[@CanRau]

Also, mobile first, the site design would even work in browsers without media-query support plus in your example you ship less css 🚀

[@WyzrdCat]

Lol browser without media query should be burned

[@CanRau]

@@WyzrdCat True 🔥And hopefully they don't even exist anymore. Still it feels better and more progressively enhanced to me 😉

[@ekeneidiagbor4678]

Thanks for doing this. I have been doing desktop regardless of mobile first been everywhere. This video is enlightening on something so important and i really didn't much thought too.

[@mattbrewerton6884]

Honestly - it depends what I'm doing. At work, I take a desktop-first approach for one client because we have minimal need (right now) for mobile usage. It works, but it's not pretty due to some content bleeding, but there's no need (or budget) yet) for us to worry about that. However for another client, they get a lot of mobile revenue, so it's important that I go mobile-first. Either way, mobile-first is easier because I find it easier to add than it is to take-away.

[@kickflipz]

Wow amazing website, thank you for all your hard work and dedication towards giving people free quality content to learn from, much love from Oregon!

[@nicklasbryntesson1789]

I recently tried the ”generic first” approach, Where i first do all generic rules first, then do encapsulated styles for the different sizes.

[@racker9999]

Brilliant discussion. Simplicity is the cardinal design goal. Your wisdom is beautiful to behold.

[@aram5642]

I would be curious to hear from you how many screens/breakpoints would you say is necessary for a good responsive design. I usually receive 2 psd files per view (desktop and mobile), but, from my experience, this usually renders tablets unaddressed. What breakpoints do you use?

[@nerdophile6945]

Yes that's a good question. Waiting for a reply.

[@ronidey380]

Good question 👍

[@andyhudsonsynthpop]

Typically about 4 main breakpoints, mobile, tablet, small desktop, large desktop, but frequently there are a bunch of in between breakpoints. One tactic that's good at minimising the number is to effectively jump between a set of fixed widths say from around 600px upwards, except for the mobile which has to be flexible. One of my client prefers this approach and to be honest it works really well and its no extra coding, all you are doing is fixing the width of the container div.

[@garbagemunki4365]

www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/ You're very welcome :)

[@ZackPyle]

922 and 767. So desktop, tablet, mobile

[@thuytienlives8487]

Fantastic advice on how to write responsive CSS! Thank you so much for making this video! :) Hope you're safe and well.

[@MarisaClardy]

I use TailwindCSS for the most part, and that is mobile first. I find it really easy to make sites be responsive with TailwindCSS.

[@AhmadFIksan]

bulma is also a great css framework and very easy to use.

[@lemos51]

I like your content and your passion. I really appreciate what developers like you are doing for the community with all these tutorials, I really do. You don't need that title to get viewed.

[@NerdX151]

I have come to learn that it is also a cultural thing. I have been doing web design in Japan for a few years now, and only around 10% of my customers wanted a mobile layout, which is mostly due to the fact that many Japanese use flip-phones instead of smartphones. It was also a requirement that every page had to work on Internet Explorer, as only a few people actually use Chrome or Firefox. One thing that surprised me the most was the large amount of websites that were built with Tables. We are not talking about old sites from the 90's. Many were built in the last 5 years by senior designers.

[@J90JAM]

Huh and I thought Japan was a modern country!? IE and flip phones, seriously? Why do they hate nice things?

[@Will762]

@@J90JAM common misconception. Japan is very "high tech" in industry and consumer product design, but regular people use a lot of old tech, especially in offices. Fax machines are still used in places!

[@J90JAM]

@@Will762 huh crazy, their Internet is pretty fast still isn't it?

[@degagnemarc]

I am a newby of now two years in web dev. and most of the design I got to do came from agencies. In their world mobile as no real challenges in design. Most of the work comes from the desktop. The mobile is the simplyied version. So the work load is concentrated for the desktop. On the other hand, most sites are made of WP and other CMS, witch in the industry uses templates or builder's that have already the adaptive structure done. Very minor changes to do when it comes to the mobile, so again the main work starts with the desktop. Keep on going your great tuts, thanks!

[@SlobodanKovacevicDaddy]

Layout are the least of my problems with responsive design, either way (mobile or desktop first) doesn't make a difference. Details are the problem when I'm scaling up from mobile, search, navigation, forms. That's why it's much easier for me to go desktop first but still having mobile in mind while I'm working on desktop sizes.

[@alenanik]

I really liked the video! Actually I've heard about mobile first from your Scrimba course and now can't imagine doing it different way :)

[@ShawnRitch]

Desktop first or mobile first - your talking semantics - either is absolutely appropriate as long as your developing condensed and reusable CSS elements and taking consideration for mobile and desktop UX. Simply () {Mobile first = Mobile compatible}

[@neilhughes3823]

Shawn Ritch ffs your and you’re have two completely different meanings. If you are smart enough to count to 21 without taking your pants off, then this should be obvious.

[@henkmeerhof8647]

As an old school graphic designer that had really much to do with typesetting books, I dropped following coding for the web to a low priority. I'm not longer in design and at my age, some jobs are for the young and on coming... You saw the BUT coming I guess. Once infected with the design bug and specially a typography-virus you can't let go completely. Recently I was working on some private homepages that needed an upgrade and I had some difficulty as my css knowledge was lacking behind. Then I found your very clear and instructive video's here on KZbin, thanks for that. Back to your main question of this video: Mobile first or not, what do you (I) do? Well I would forget all about mobile AND large screens. I would fall back to basic general design, focused on typography in this case as that is the main topic. Right so as images are easy to add later anyway. Design always seeks to the most easy form, hence the 'Keep it simple' and 'Less is more' statements of many great designers. The best quote that still applies - also in this case - is from Paul Rand: "Design is simple, that's why it's so complicated!". And the most simple way of typography is always one column of text. The only thing you need to limit here is, if you go really 'minimal', the line length (or better how many characters or words there are on one single line). There is not one simple answer to that because without knowing the typeface, the carrier of the message (paper, smartphone, tablet, magazine, poster or bill board) and if the targeted audience will be stationary and close up or traveling at high speed past it at an angle, even that one line will have different limits (and should maybe be responsive). In fact if you go back to typesetting papers, before computers, the typesetter produced nothing else than an endless roll of content in one column with (for this example I just jump the added elements of headings that span more than one column. A lay-outer would glue this endless column into place on sheets with a grid of non-repro blue lines... What I'm telling here is understandable, even for those that never saw a newspaper be made that way, as we still use the same names for the same things. IN the early days of html/css I could often get mad at coders, as they acted if they had invented something unique... well not so unique as people in graphic design and typesetting already where using styles from the early beginnings of machine typesetting. As a designer I would draw and write what i wanted the typography to look, the typesetter translated that to control coding for the typesetting machine. And with improvement of those, new things became possible. In fact what we do now with html/css is just a continuation of using those codes. Yes they are adapted to new machines. And yes they got many new instructions added to them as well. There was simply no way of integrating an TV-screen into a newspaper in the 1960s. Today we can. When I was at the Academy of arts learning to become a graphic designer, one of our teachers speculated about the future, it was in the 1980s. he imagined placing a pallet of paper into a room, and the machine would beam the print onto it... On which we as students reacted with, how troublesome! Is it not more easy to have a small device or piece of special paper with you on which you can receive your paper and television and when at it, we can make it play radio or other audio while we draw on the paper... Still we thought about a design as targeting one goal on one specific medium of fixed specifications. And I don't object to responsive tech, as there are situations where this is really an advantage. But I object to those many homepages that for whatever reason cannot be read as the line length exceeds what human physics is capable of decoding. so it has to be optimized for and best also respond to the reading distance. If this is not possible the designers need to do their best guess about the audience. Will it be read on a mobile device or on a stationary screen. And if stationary screen, do we allow text to get a line length longer than is around optimal at that 'letter hight-line distance-line length' ratio? Now I throw in something to cloud our thoughts a bit. Because when we talk design, the medium being some screen, and the target audience people the want to look at large high res pictures with excellent sound... do you still think 'mobile first' or do you think, where is the nearest Imax theater? The other question in return is, how much should we invest in these methods and techniques, when we know we will be working towards a world with VR, the kind without the special glasses... Keep those nice video's coming!

[@emotran]

Hey, my background comes from design, and branding. The reason I like desk first, is because you have more tools to tell you story there, more complexity, more interactions. It really depends of the market, but mobile is pretty straight forward, there is nothing going on, is going to be a flow of boxes any way.. also, what happens with all the screens size in between.. I feel like your focus is on complexity and speed, not design and experience.. I see your point, tho

[@fleexie]

"also, what happens with all the screens size in between" You add more than one media querry. You code the site with for example percentage instead of pixel widths. All in all, there are lots of ways to code a site so it has a pretty good flow between devices. Coding the site the right ways usually end up with better ux.

[@genec9560]

As an engineering manager, and previous full stack developer, I've gotten a little soft on modern front-end techniques. Great, quick explanation of mobile first. Makes sense. Thanks!

[@c__beck]

I 100% agree: mobile-first is less work. And I'm lazy :p

[@alextheblockchaindev]

Haha, yeah, that makes two of us!

[@abhayganti8662]

Literally, everyone is lazy nowadays lmao. I'm coming from the mobile view lol

[@hardik.satasiya]

Yeah, the same responsive word says that make me for mobile

[@69elchupacabra69]

It's only less work because you approach it in a two step process.

[@c__beck]

@@69elchupacabra69 it’s also less work because I find it easier to _add_ things to the site when expanding from smaller to larger screen sizes. Going from larger to smaller I have to _remove_ functionality. I prefer to add more things than remove them.

[@sirius8ly]

Yes. It makes a lot of sense. I agree. I also believe it's a hard habbit to break as I too started designing for desktop first. I fight it when I have to go mobile because a lot of stuff breaks in the process. I'm going to give this a try. Thank you for your video.

[@DerSolinski]

I actually always start with blank HTML and try to reduce my elements to just what is essential. Once all information has its place and order I start to style it. (Simple stuff naturally falls into something usable on mobile) I hate bloated stuff, frame works etc. in 90% of the time it is not necessary. I think there is no choice between loading times for fancy CSS or a instant display of your information. If your site is unusable without loaded CSS you should rethink your priorities. I guess you could call that data first...

[@pixchcn3773]

Same here, I always write all the bare html first, from A to Z, and then style it. Though I usually go desktop first, especially if the design is very complex.

[@macman90]

When I was creating pages 5 years ago, I went Desktop first so we can show the client that version first as a preview and then creating the mobile version, showing it and polishing it with the client (ideally). And not all clients wanted a mobile version which the company sold as a separate option at that time, so I was used to starting at desktop first. And new people are comming to the industry every year so if they start doing Desktop first, then mentoring other juniors in time, it escalates ergo one posibility for your results from the poll. As a bonus, some users (and the client requiring the website) in some countries do still use IE

[@de132]

I tend to write desktop first. It's a bad habit in my opinion, it's limiting when you design for mobile. It feels "natural" to write desktop first. Also, I work primarily with web applications for "power users", and in a lot of those cases, the primary use case is desktop.

[@pixelum2023]

Really ineresting! I have a section of a page that refuses to behave properly at small screen sizes. Now you've given me the way to approach the issue from the other end, so to speak, and get the mobile size working first, and then style it properly for the desktop. Thanks! I've also joined your course. 🙂

[@jimdart8219]

I thought you went bashful on us. Most of the time it's mobile first. But for me it depends on the larger part of the target audience. It took a while but I pulled myself out of the mobile first madness and started looking at who the heck is going to use this more. People with laptops and desktops or people with tablets and phones. The last thing I would like to say is stay safe stay healthy, and stay home!!

[@Michael_Kove]

That's amazing way to explain "mobile first". :) Thank you for that.

[@RameenFallschirmjager]

I did live the wrong way, so ended up with web development as my career. I should have gone to law school!

[@An-yh2bl]

Thank you very much, I have just started responsive webdesign I have had some difficulties but this video has helped a lot! :)

[@tomslaterdesignillustratio4391]

Always learn at least 3 new things when I watch your videos! Thanks Kevin!

[@rickfearn3663]

Excellent question, Kevin. My feeling is that there is a HUGE amount of inertia in every industry. If you look at the construction industry, there is a massive amount of 'stickiness' to doing things the way they have always been done. For example, drywall was invented in Rochester, Kent in 1888. However it was only at the end of the second WW, with all the soldiers returning home and wanting to buy a new home, that the transition from lath and plaster was effected. The soldiers did not want to wait an extra three weeks for the plastering. Website design has a similar legacy. Most of us grew up designing for the desktop - and that has a powerful effect on the design direction that we choose. For example our website is now 25 years old and is not responsive (see www.fab-form.com). We have 400 pages - would it make more sense to reformat the HTML and then make the CSS simple for the mobile design. These conceptual questions are so interesting. All the best, Kevin! Sincerely Rick

[@alister_]

So funny and great to see a website like that in 2020!

[@xldoesit]

you know, you actually helped me see the light on the mobile first development. Idk why i have been making it harder on myself.

Mobile first! And thanks for all the amazing videos...as a new developer you are making responsive design so much easier to implement! I am looking forward to when the 21-day challenge is open for enrolment again :)

[@marymaundu1702]

This has to be the biggest revelation I've heard in my learning CSS... ''An HTML document is responsive by default''. Now I'm working on mastering responsiveness for bigger screens...I'm actually beginning to love CSS. Your tutorials are priceless and greatly appreciated. Thank you Kevin Powell.

[@bien_venu]

Same here!

[@PaulMcCannWebBuilder]

I got used to doing desktop first because it was also the only way to do it back in the dark times when certain browsers didn't do media queries. Desktop had to be the default, so that's where we started first. So for a long time it was easier to get my head around responsive design by shoving all the mobile styles into a max-width media query. It was just easier to figure out 'if it's smaller than this pixel width, do this stuff'. The other way around, for some reason confused me, even though it usually took less code. Then I started doing it exactly as you did in the video - write the max width to design it, but then refactor all the desktop styles into a min-width to make the mobile the default. It took a while before I evolved to do it the right way first.

[@ViorelMocanu]

I rode the initial wave started by Ethan Marcotte and made it an absolute point in all the teams I've worked in or led that everyone writes mobile-first. And people found it really hard at first but learned to love it over time. It works GREAT in correlation to CSS preprocessors being able to embed media queries in the initial selectors, that made it much easier to do the transition to mobile-first and only using MIN-width in media queries for real progressive enhancement.

[@artemd3291]

that's a great piece of advice, thanks a lot! I think that the argument that "every website is responsive by default" is a huge one, I'll definitely use that in future to convince people to do mobile first.

[@burmesepotato447]

I was one of those who voted Desktop-first on Kevin's tweet. I guess it grew on me because all tutorials/courses I watched to learn webdev always start with Desktop. I never paid any thoughts about it till I watched this vid. Kevin has really made a good point. I think I will try to do mobile-first the next time.

[@tedfitzpatrickyt]

Usually I design for a 992px screen first, but my actual CSS starts with default styles then uses @media breakpoints matching Twitter’s (mobile first). Sometimes additional breakpoints needed. I use SASS mixins because I find that some UI widgets can need to appear differently given screen width and user-controlled font size. For example, if the user enlarges the font size 200% then the “mobile” design of a widget looks best even if the screen is >=768

[@bCool-sl5cy]

With immediate effect, I will always style mobile first. Thank you so much!

[@PatrikRasch]

Very interesting take on responsive design that I haven't heard yet. Thank you.

[@TheHermitHacker]

I wrote a Content Management System that let you optionally have mobile.html, desktip.html and tablet.html separated layouts. I use ID's in the HTML to find and place with output from scripts for dynamic content. I all this "dynamics" (think, widgets in WordPress, etc). It was way easier since I wasn't well versed in CSS by the time I started building the CMS. My next project will be to use a single template with a mobile-first approach. I certainly do remember the push for mobile first, but it was a radical concept for people. This is a great topic for web developers at most every level. Thanks!

[@AmitKumar-xx7zj]

at this moment my mind was blown how much over writing I was doing

[@kavryo-8871]

I had an assignment that my interviewer gave me and I was struggling with responsiveness coz I went desktop first!!!! I feel like doing the whole assignment again after this video !!! This is such good content 👏

[@rohailtaha9518]

Looking forward for your course. It's going to be awesome. I must learn responsive design. And I do agree that mobile first is the better option.

[@EpistemicFomo]

This was life changing. :D Thank you so much!

[@Michael-ls7lu]

I used to start desktop first because before I knew much about design for the web it was always desktop sites that I wanted to design first.. they seemed so much more interesting because of the real estate on the screen allowing for more creativity. But as time went on I grew to learn more about performance and how much easier it is to start with mobile first and add on. Now that I've got a proper workflow I can't ever see myself going back.

[@nikolaypanayotov6941]

I agree that mobile-first is the way to go in most cases. However, a lot of people (including me) are still coding desktop first since it's a bit easier if you're not used to following the mobile-first approach. As other people commented below, sometimes clients don't provide mobile designs. Also for people who've been doing this dance for a while, it became a habit. There is a reason why most front-end frameworks are coded mobile-first. The approach is useful to manage hovers, and you're adding to your styles rather than overwriting them. I came across your channel yesterday and I like your content. Keep up the good work. Cheers.

[@kidbrave_7673]

I love making my website responsive looking at the mobile side of things first because it lays the ground work for what it is also I can see what I want my website to look like for tablet and I feel it simplifies things for me throughout the design of a site.