Is Mobile-First Design Still Relevant in 2024?
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2024
- Is a mobile-first approach still important in 2024? Let's break it down. In this video, I discuss what mobile-first means and whether following this approach is worthwhile. We explore mobile-first through the lenses of content, visual design, accessibility, and engineering, including tips on HTML and CSS.
Chapters:
00:00 - Introduction
00:25 - Mobile-First Is Not Just About Min-Width Media Queries
00:44 - Broader Meaning of the Term
00:55 - Why Bother with This Approach?
01:18 - What It Means in Practice to Make a Website Mobile-First
01:45 - Mobile-First Through a Content Lens
02:04 - Mobile-First Design
02:34 - Mobile-First Engineering
03:07 - Touching on Accessibility
03:24 - Principles of HTML
04:34 - Principles of CSS
06:33 - Mobile-First as a Mindset
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!
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!
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.
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!
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 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.
// 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."
Humanity doesn't die you fool.