Thank's for this topic! Very interesting. Would u kindly to talk about rem/em vs px or orthers. I don't understand. If i've got a figma layout with px, but i want to use em/rem/etc. How to start do it? Do i need to calc in my head every px to rem or what do i nedd to do? I know, it's simple question, but i don't get it Btw, thank's alot for BEM video
Thanks Dmitry. May I ask? In your illustration with the .grid style, you had a rule for gap in the initial style and repeated it in the media query override. Was it deliberate?
Thanks for another informative video. I am not a professional website designer, but I have been working on personal projects for a long time using Adobe Dreamweaver, which, unfortunately, is on its way out. Adobe is no longer developing the software. With so many people viewing the web on mobile devices, my focus has always been on navigation, content, and image quality. Too much emphasis is placed on design. I stay away from hover effects, aside from page links. How on earth do you arrive at those clamp values? Thanks, Mark
Thank you, Mark! Yeah, Dreamweaver is for sure a tool of the past now. But it’s great that you are moving on. What software are you using these days instead? Have you tried Webflow? Getting navigation, content, and images into good shape seems like a great foundation for a solid website to me! You can build upon that! I will make a video about clamp! It took me some time to understand it. Let me know if there is anything else you’d like me to cover.
@@dmtrmrv Hi Dimitri, I'm married to Dreamweaver forever because I purchased a slew of widgets/plugins from Project Seven, which are designed exclusively for Dreamweaver. As a result, I haven't tried any other editing program. Furthermore, the combination works wonderfully for me. I doubt I'll be migrating to another program. So many designers are moving towards WP, Figma, Framer, Squarespace, social media, etc., which are either code-less block editors or CMS. They bore me to death, though I do admit that they offer select features that would be costly, if no impossible, to incorporate into a website built from the ground up. Despite the dramatic improvements in CSS and HTML, I find that these cookie-cutter programs have lead to a thoughtlessness design, if you will. Anyway, I very much enjoy watching your videos and wish you the best with your channel. My father, who was a Canadian citizen, lived north of Toronto in Collingwood. It's a beautiful area. Kind regards.
There is the problem, I don't want to say you are wrong but you are not completely right. First of all, clamping is not gonna work because of varied viewport. Yes, you can't set media query for each type of screen size but that's fine. You can just target few key sizes and keep the font size static for those key sizes. Clamping sounds like it solves the problem but it makes text looks really ugly when fonts don't resize properly w.r.t to other texts such as heading , sub heading, label, body etc. The harmony breaks. I have tried to implement this and it looked really really really ugly. One last thing, You mentioned font size will jump when screen size changes when media queries are used. This assumption is completely wrong. why ? Because most of the users wont be resizing their window, they would be accessing the website/app from a fixed screen size device.
// Older approach - mobile first h1 { color: blue; font-size: 1.5rem; @media (min-width: 700px) { font-size: 2rem; } } // Improved approach - any-device first // 1 - Only shared (in every screen width) are left outside the media query // 2 - If property is used in media query, do not use it outside the media query! h1 { color: blue; // 1 @media (max-width: 699px) { font-size: 1.5rem; // 2 } @media (min-width: 700px) { font-size: 2rem; } } // The general rule is to avoid override yourself. // font-size property is used as an example, clamp() function, without media query, is better solution.
Thank you for your comment; I completely agree. I also view "mobile-first" as an umbrella term for various approaches and techniques in building websites, not limited to just min-width media queries.
You look at this problem as engineer. But mobile screen is just a hollow tube, which you such the info through. You don't need the dsign at all because nodody sees any design elements on a small screen. Design dies and good taste dies and humanity dies because mobile screen makes the "food" into the "space mixture" - no taset, no color... just an info!.. If you need just info, make just Contact page adaptive and make all other pages fun and gorgeous, forget about nuts looking in therif phones allaround!..
You are right, I did focus on the engineering aspect in this video, but I think I see where you are coming from. Small screens provide less real estate to work with, but that doesn't mean design dies on small screens; it's just a creative constraint forcing designers to be more creative in ways to present information. Perhaps we see design differently. Contact forms that work well and do not annoy the user require design, structuring information in a way that makes sense on small screens is design, same goes for picking the correct font sizes and spacing. Like Steve Jobs said: "Design is how it works."
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
Thank you, Henry! Glad the video was helpful!
Thanks for taking the time to make this video and for info on what mobile first means to you! I’m just north of Toronto myself 🇨🇦
Nice! I like to get out there whenever I can for hikes and other nature adventures!
Sorry about your bars! 😉
Great video. I recently discovered your channel and I hope it continues to grow.
Thank you!
Thank's for this topic! Very interesting.
Would u kindly to talk about rem/em vs px or orthers. I don't understand. If i've got a figma layout with px, but i want to use em/rem/etc.
How to start do it? Do i need to calc in my head every px to rem or what do i nedd to do?
I know, it's simple question, but i don't get it
Btw, thank's alot for BEM video
Thank you for the kind words! I'll def make a video about that, it's an important topic. Stay tuned!
Thanks Dmitry.
May I ask?
In your illustration with the .grid style, you had a rule for gap in the initial style and repeated it in the media query override. Was it deliberate?
Thank you for pointing that out, Nedum! Definitely do not need gap inside the media query. Typo on my part. I’ll add a note to the description.
thanks for sharing you point of view. you way of explaining about max-width for me . that add new point about CSS in my knowledge .
Thank you!
Nicely explained 🤗 Thank you
Thank you for asking the question!
I saw clamp function in CSS and looks so interesting. May you explain all about how works this CSS function?
Yeah, it’s a bit tricky to understand at first! I’ll make a video about it!
Clamp is awesome. I'm using it on my new projects but I'm constantly fighting with my boss for buy-in due to the difficulty of understanding it.
Def very high on my list for next videos!
Thanks for another informative video.
I am not a professional website designer, but I have been working on personal projects for a long time using Adobe Dreamweaver, which, unfortunately, is on its way out. Adobe is no longer developing the software.
With so many people viewing the web on mobile devices, my focus has always been on navigation, content, and image quality. Too much emphasis is placed on design. I stay away from hover effects, aside from page links.
How on earth do you arrive at those clamp values?
Thanks, Mark
Thank you, Mark! Yeah, Dreamweaver is for sure a tool of the past now. But it’s great that you are moving on. What software are you using these days instead? Have you tried Webflow?
Getting navigation, content, and images into good shape seems like a great foundation for a solid website to me! You can build upon that!
I will make a video about clamp! It took me some time to understand it. Let me know if there is anything else you’d like me to cover.
@@dmtrmrv
Hi Dimitri,
I'm married to Dreamweaver forever because I purchased a slew of widgets/plugins from Project Seven, which are designed exclusively for Dreamweaver. As a result, I haven't tried any other editing program. Furthermore, the combination works wonderfully for me. I doubt I'll be migrating to another program.
So many designers are moving towards WP, Figma, Framer, Squarespace, social media, etc., which are either code-less block editors or CMS. They bore me to death, though I do admit that they offer select features that would be costly, if no impossible, to incorporate into a website built from the ground up.
Despite the dramatic improvements in CSS and HTML, I find that these cookie-cutter programs have lead to a thoughtlessness design, if you will.
Anyway, I very much enjoy watching your videos and wish you the best with your channel. My father, who was a Canadian citizen, lived north of Toronto in Collingwood. It's a beautiful area.
Kind regards.
There is the problem, I don't want to say you are wrong but you are not completely right. First of all, clamping is not gonna work because of varied viewport. Yes, you can't set media query for each type of screen size but that's fine. You can just target few key sizes and keep the font size static for those key sizes.
Clamping sounds like it solves the problem but it makes text looks really ugly when fonts don't resize properly w.r.t to other texts such as heading , sub heading, label, body etc. The harmony breaks.
I have tried to implement this and it looked really really really ugly.
One last thing, You mentioned font size will jump when screen size changes when media queries are used. This assumption is completely wrong. why ? Because most of the users wont be resizing their window, they would be accessing the website/app from a fixed screen size device.
// Older approach - mobile first
h1 {
color: blue;
font-size: 1.5rem;
@media (min-width: 700px) {
font-size: 2rem;
}
}
// Improved approach - any-device first
// 1 - Only shared (in every screen width) are left outside the media query
// 2 - If property is used in media query, do not use it outside the media query!
h1 {
color: blue; // 1
@media (max-width: 699px) {
font-size: 1.5rem; // 2
}
@media (min-width: 700px) {
font-size: 2rem;
}
}
// The general rule is to avoid override yourself.
// font-size property is used as an example, clamp() function, without media query, is better solution.
Thank you for your comment; I completely agree. I also view "mobile-first" as an umbrella term for various approaches and techniques in building websites, not limited to just min-width media queries.
You look at this problem as engineer. But mobile screen is just a hollow tube, which you such the info through. You don't need the dsign at all because nodody sees any design elements on a small screen. Design dies and good taste dies and humanity dies because mobile screen makes the "food" into the "space mixture" - no taset, no color... just an info!.. If you need just info, make just Contact page adaptive and make all other pages fun and gorgeous, forget about nuts looking in therif phones allaround!..
You are right, I did focus on the engineering aspect in this video, but I think I see where you are coming from. Small screens provide less real estate to work with, but that doesn't mean design dies on small screens; it's just a creative constraint forcing designers to be more creative in ways to present information. Perhaps we see design differently. Contact forms that work well and do not annoy the user require design, structuring information in a way that makes sense on small screens is design, same goes for picking the correct font sizes and spacing. Like Steve Jobs said: "Design is how it works."