Responsive Design without Media Queries

[rpeg]

This is maybe a ridiculous question and please understand I'm not asking it as a means of provoking weird comments. I'm actually thrust in a situation at my workplace where we have to start implementing responsive design without the use of media queries. This probably due to my own limitations or lack of imagination but I'm baffled by the idea.

Maybe it's a thought experiment: "What is responsive design without media queries?" or "Is there responsive design without media queries?" I've come to the conclusion that it's a spectrum of responsiveness, agnostic of technology... but maybe I'm wrong.

I'm actually just trying to figure out what to do, how to do it, and where I can I find tutorials and information regarding the subject. Creating divs that fall underneath each other when resizing the browser window, without media queries, is easy. Setting percentage widths to things is easy. Does fluid design fall under "responsive"? Maybe not.

Is there more I can learn? Is there more I can do create a feux-responsive experience for the user without media queries? And why can't I use media queries at my workplace? Because they're forcing their developers to use their consumer-grade tool. That's it. Help me.

[ralph.m]

And why can't I use media queries at my workplace? Because they're forcing their developers to use their consumer-grade tool.

What does that mean?

It may be a matter of opinion, but in mine, HTML itself is fully responsive, as it naturally responds to the width of the browser—unless you override that natural response with CSS (such as fixed widths etc.) So yes, I'd say you can certainly have a responsive website with out @media. Not as fancy, mind you, but certainly something that works nicely in all browsers. HTML on its own is like that. That's partly why there is enthusiasm for the "mobile first" approach to design, which firstly serves up basic styles for all devices and then adds in fancier rules for fancier devices.

Still confused about what a "consumer-grade tool" is. Sounds like a total croc to me, TBH.

[rpeg]

What does that mean?

It may be a matter of opinion, but in mine, HTML itself is fully responsive, as it naturally responds to the width of the browser—unless you override that natural response with CSS (such as fixed widths etc.) So yes, I'd say you can certainly have a responsive website with out @media. Not as fancy, mind you, but certainly something that works nicely in all browsers. HTML on its own is like that. That's partly why there is enthusiasm for the "mobile first" approach to design, which firstly serves up basic styles for all devices and then adds in fancier rules for fancier devices.

Still confused about what a "consumer-grade tool" is. Sounds like a total croc to me, TBH.

Then I may not know the scope of what is defined as "responsive" and it may not be entirely relevant for my questions. I suppose I'm trying to do research on alternative ways to recreate the features of media queries without the use of media queries. Regarding the consumer-grade tool - we have a custom, online HTML editor we have to use and it doesn't allow media queries.

[ralph.m]

a custom, online HTML editor we have to use and it doesn't allow media queries.

Media queries are CSS, though, not HTML. Surely you can write whatever CSS rules you like. A code editor that doesn't allow basic HTML and CSS is not a consumer-grade anything.

[rpeg]

Media queries are CSS, though, not HTML. Surely you can write whatever CSS rules you like. A code editor that doesn't allow basic HTML and CSS is not a consumer-grade anything.

I may not know how to describe it. Consider it similar to the HTML editor/WYSIWYG that you might find within Wordpress. The same way you can't enter PHP (without a plugin) in WP is the similar to how we can't use media queries. When I say HTML editor I actually mean HTML/CSS editor.

I know that sounds odd and I can't tell you what tool it is (because I could reprimanded). All I can say is trust me. I'm interested in tutorials and advice on how to tackle problems you might normally use a media query with but without actually using them.

[ralph.m]

Does the WYSIWYG editor have an option to switch to code view? Often they do, in which case you can just write the code you need. If this editor doesn't allow you to do that, it is simply not up to scratch. This issue you have is not a viable one to be dealing with. You can't even get to first base in web design if you can't write basic code.

Creating divs that fall underneath each other when resizing the browser window, without media queries, is easy. Setting percentage widths to things is easy.

Without media queries, this is pretty much what you have to work with; but as I say, it's ridiculous not to be able to use them, and that situation should not be tolerated. It's not viable for a web design employer to limit developers to the tools that clients get for editing content. A web dev needs access to the code behind the scenes. It's easy to add bits of PHP to WordPress without plugins, of course. I would go back to the employers and help them get in touch with reality.

[rpeg]

Does the WYSIWYG editor have an option to switch to code view? Often they do, in which case you can just write the code you need. If this editor doesn't allow you to do that, it is simply not up to scratch. This issue you have is not a viable one to be dealing with. You can't even get to first base in web design if you can't write basic code.



Without media queries, this is pretty much what you have to work with; but as I say, it's ridiculous not to be able to use them, and that situation should not be tolerated. It's not viable for a web design employer to limit developers to the tools that clients get for editing content. A web dev needs access to the code behind the scenes. It's easy to add bits of PHP to WordPress without plugins, of course. I would go back to the employers and help them get in touch with reality.

Well, regarding WP I was speaking strictly about it's admin. Last I used it, you needed a plugin to add PHP in the admin but that's not important. I think you understand what I'm describing and I'm getting the impression that you don't believe there are ways to achieve the ability of media queries without actually using media queries. I just thought I'd ask in case I was missing something. I think you've confirmed my impression.

Regarding the technology I'm using. I wish I could tell you more. I was actually warned heavily about it before I started working here. It's... weird.

[ralph.m]

Have you checked that the editor doesn't have a code view, though? Every online WYSIWYG editor I've seen has that option.

I'm sorry to see you in this situation, anyhow. It's a pity that bosses are so often this clueless and foolish. Really makes me wonder how the world surives.

[rpeg]

Have you checked that the editor doesn't have a code view, though? Every online WYSIWYG editor I've seen has that option.

I'm sorry to see you in this situation, anyhow. It's a pity that bosses are so often this clueless and foolish. Really makes me wonder how the world surives.

Yes, we (the front-end devs there) only use the code view. We understand the technology we're using. That's not necessarily the issue. I was just trying to find alternative solutions but maybe there aren't any.

[ralph.m]

we (the front-end devs there) only use the code view.

Then I don't see why you can't write @media rules. What happens if you do?

[rpeg]

Then I don't see why you can't write @media rules. What happens if you do?

As soon you hit save on this application, @media is ignored and removed.

[ralph.m]

As soon you hit save on this application, @media is ignored and removed.

O dear. Well, if you think there's a chance they'll listen, I'd point this out to the bosses. It's really a pretty poor situation. It's disallowing, basic, modern web development.