I remember my first encounter with responsive design. Before any investigation, it seemed incredibly complex.
The same app runs and behaves differ...
For further actions, you may consider blocking this person and/or reporting abuse
You're literally defining media queries, where's the ridiculously simple responsive design part? This is bs, stop clickbaiting on DEV
Your first sentence might have been the springboard to some constructive criticism; but you had to follow it with an insult that produces heat without light. (Reminds me of Iron Mike's popular quote about social media.)
That's just the effects of using a clickbait title.
If you're intentionally misleading and tricking people, expect them to be annoyed which in this case is reflected in the comments.
One should be nice to their fellow man, but also can't let people do annoying stuff without some sort of consequences.
Then focus on the first part? 😂 The first part was the criticism, the second part was the aftermath of me wasting 4 minutes on this article hoping for gaining at least something useful out of it when the title promises something extraordinary. Clearly a clickbait article, called it for what it is. Reminds me of people with unnecessary superiority complex.
Give the guy a break, GunsyX.
Simple applies to the author, not the technology
The title says "Creating Responsive Web Apps"; those responsive apps are created with media queries.
What did you expect?
The title says "A Ridiculously Simple Way For Creating Responsive Web Apps"
Responsive Web Apps in general are only created with media queries, but you mentioned a 'ridiculously simple way' to achieve that instead, but wheres that? You literally just defined media queries, like no sh*t, that's not what anyone's here for.
While media queries are incredibly simple, people think that they as well as responsive apps are something complex.
I introduced a mindset that media queries are nothing more than a bunch of
ifstatements - something most people find simple.This article won't magically create responsive apps.
You keep saying "if" statements....yet I see no "if" statements in the code.
I understand where GunsyX is coming from but I'll take a different approach than he. The title "A Ridiculously Simple Way For Creating Responsive Web Apps" implies that there is some sort of new WAY that is ridiculously simple, compared to the normal way of creating responsive web apps. A title more like "Creating Responsive Web Apps is ridiculously Simple: here's how" might be a little less misleading. I as well read the article thinking that I was going to read a new way. A ridiculously simple way. But instead just read about the normal way. Which is, yes, ridiculously simple. :-)
I believe the future is without media queries at all. Today we can make responsive layouts with grid using minmax in grid-template-columns.
Example
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
I'm agree for the title was a bit misleading, was thinking if there are something out of the box aside from media queries.
Perhaps you could look at the new way of CSS function instead.
Something like:
That will simply clamp the
.containerwith desire width together with its minimum400pxand maximum1140pxvalues. And the best part here is you can get rid of media queries, of course this is just a simple example.Reference: clamp() CSS function
Very nice article. I discovered this same thing. Nowadays I only use the Grid, Viewport configuration, and media queries as shown here. It took me a long time as a newbie to dial-in the three parts. Tx.
"According to this research, 68.9% of websites visit came from mobile devices." - I'm really tired of people quoting this. Just because everyone spends the majority of their web time on a few social sites does not mean that 68.9% of your traffic will come from mobile. If you're building a SAAS business or anything not specifically targeting a mobile audience then just start with the desktop, then @media for mobile as needed for every single pixel width until things are comfortable.
As a Web Apps developer, I completely agree with the author's take on responsive design. At first, it may seem like a daunting task to cover all screen sizes and device types, but with the right approach, it can be easily achieved. The author's suggestion of Mobile-First Design is spot on, as it ensures that the core functionality of an app or website is available on mobile devices, which are increasingly becoming the primary mode of accessing the internet.
You can also check at Autodesk AutoCAD 2022
Well, at the very least this article will inspire some good conversation in the comments below! That has to be worth something. Way to get yourself noticed Domagoj Vidovic. Good article in my opinion.
Thanks
No no, thank you for reading!
Thanks
Next time too!
great post keep up the good work
Thanks mate! I definitely will 💪
Awesome post, thank you!
So glad to hear that it's helpful! 🚀
I am wondering is there a nice way to set font-size for various size of screen in addition to this post. Thank you for the nice post!
Nice Article Bro
Visit Best to get images dp and others.
Awesome Post. Thanks for sharing.
Clickbait
Great article
Small note
About the grid per device
You can use this one line css
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
This will change the grid by itself without media