Are you writing responsive CSS the wrong way?
HTML-код
- Опубликовано: 31 мар 2020
- New free course! Conquer Responsive Layouts: A 21-day challenge: courses.kevinpowell.co/conque...
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/mobil...
CSS Zen Garden: csszengarden.com/
#responsive #css
--
Come hang out with other dev's in my Discord Community
/ discord
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / 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!
Love the margin-left on one item, margin-right on the other to center. Had no idea.
me too, never heard about that or maybe it never worked before until some time
@@daleryanaldover6545 @kevin powell Good thought. Kevin, is this new?
ikr !
Mind blowing
same
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.
Exactly right.
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.
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
That has always been my experience and also old habits are hard to break.
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?
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.
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.
if Allah wills me too.
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!
:X
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!
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!
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.
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!
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.
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. 😃
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.
You're wonderful! Can't wait to take your course in the future!!!
People do desktop first mostly cause when they start learning css they learn and practice it for the desktop so they keep it going!!!!
I also agree this idea
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.
Yep...that is me lol. But gonna try to make the switch!!
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.
I just started HTML and CSS and I am so grateful for this video
Holy cow, that columns bit at the end of your video is awesome! Thanks so much!
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 :)!
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 !!!
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!
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!
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.
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.
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.
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!
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!
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.
"Create responsive columns without media queries" - your last 5 mins would be a great standalone video.
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 :)
Always learn at least 3 new things when I watch your videos! Thanks Kevin!
I'm going to start designing and coding using Powell Power.
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.
ruclips.net/video/-FvJDW42oEw/видео.html
I wholeheartedly agree Joel! Cheers!
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.
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!
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.
I agree a 100%. We do the same!
Those are some good points.
That's exaclty what I think
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.
Agree. I do design desktop first, but build mobile first.
This man is literally a blessing. I never thought I’d join someones Patreon but this man deserves it
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.
Thanks man. pls keep creating this videos cause you are a great developer and I am learning alot from your lessons
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.
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!
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
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.
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!
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?
I do mobile first backwards. I start with desktop, but I write my styles as if I started with mobile.
I think that's a good idea
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.
Wow, that's how I do it too.
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
Fantastic advice on how to write responsive CSS! Thank you so much for making this video! :) Hope you're safe and well.
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!
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.
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)
Thanks a lot man. I appreciate the knowledge you keep impacting.
Whoa, I have never heard of the CSS columns property, so I thought that little bonus tutorial was super cool!
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.
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)!
best explanation yet for mobile first. The demonstration was the key. Thanks for that!
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 😁
Also, mobile first, the site design would even work in browsers without media-query support plus in your example you ship less css 🚀
Lol browser without media query should be burned
@@WyzrdCat True 🔥And hopefully they don't even exist anymore. Still it feels better and more progressively enhanced to me 😉
I always do desktop first on complex websites where the desktop view would show more components, complex design, and animations. For a simple straightforward website, I'd do mobile-first :)
Brilliant discussion. Simplicity is the cardinal design goal. Your wisdom is beautiful to behold.
Well, I've been doing the desktop layout first but this seems to be pretty neat and could save you a lot of time. In a new project, I sure will design a mobile layout first. Thanks!
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?
Very well said.
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.
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.
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!
That's a good point!
@@patmarcoux2880 I dont agree. I can positively say that's way easier to substract than to add
@@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.
Really good explaining and argumentation. Thank you!
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!
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?
Yes that's a good question. Waiting for a reply.
Good question 👍
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.
www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/ You're very welcome :)
922 and 767. So desktop, tablet, mobile
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)
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.
@@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;
}
👌
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...
@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.
@Mario Not in enterprise. Simple public facing web sites like Facebook, Twitter, RUclips, 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.
Thank you very much, I have just started responsive webdesign I have had some difficulties but this video has helped a lot! :)
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.
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.
I recently tried the ”generic first” approach,
Where i first do all generic rules first, then do encapsulated styles for the different sizes.
This was life changing. :D Thank you so much!
Thanks a lot for the explaination and bonus tip, subscribed ❤️
I use TailwindCSS for the most part, and that is mobile first. I find it really easy to make sites be responsive with TailwindCSS.
bulma is also a great css framework and very easy to use.
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}
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.
Great content man. You describe most things in a way I can understand! Cheers
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.
I 100% agree: mobile-first is less work. And I'm lazy :p
Haha, yeah, that makes two of us!
Literally, everyone is lazy nowadays lmao. I'm coming from the mobile view lol
Yeah, the same responsive word says that make me for mobile
It's only less work because you approach it in a two step process.
@@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.
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.
Huh and I thought Japan was a modern country!? IE and flip phones, seriously? Why do they hate nice things?
@@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!
@@Will762 huh crazy, their Internet is pretty fast still isn't it?
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!
Hey there bud may I ask what app is that?
@@Mello-yt3oh PageFly
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.
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
"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.
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...
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.
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 :)
Great content! You should have way more subscribers. Thank you for this content.
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.
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!!
Awesome video! Thank you for helping us. Hope you and everyone reading this is safe.
As a total beginner I agree that the story holds about going desktop first to learn stuff since you're more used to large screens (in my case), but after hearing your thoughts I think mobile first is really the way to go, since you don't have to have unnecessary code. I think that if you have anything to learn about css, whether it's mobile or desktop first really doesn't matter, but then again I'm just a beginner. Thanks for the great video!
I did live the wrong way, so ended up with web development as my career. I should have gone to law school!
Awesome man, awesome. You changed my mind completely. Brilliant idea
Wish, I could like more than just once, ya know
That's amazing way to explain "mobile first". :) Thank you for that.
Did not know that columns trick. Thanks for sharing! :)
I agree with you after your demonstration Kevin :) It's just convenient and I understand the benefits.
Thanks !
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. 🙂
Kevin, another excellent video. Very thought provoking, but to be honest, I noticed most training videos on web design seem to focus only on the desktop. Very few actually start with mobile layout. I would love to see more videos going forward utilize a mobile design. Keep up the outstanding work.
Gave myself an overdose of your videos because they're neat, useful, and on point. Jesus' you're good.
Hi Kevin I love your videos, I am learning about media query and have to admit I find it much easier to do desktop first then mobile.
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.
Very interesting. Thanks Kevin.
Really nice video. As a person who writes responsive bcs I just like my sites be responsive ( altoght no one probably will use them on mobile) I find the tips in the video really helpful and I totally agree with you
These 'have to do it' vids are really good 👌🏻
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.
love your presentation style man...
That was really informative, thanks c: