]
04-24-2021, 05:33 PM
So a while ago I was reading a thread on SL in which a user was asking about how to do responsive designs. Responsive design is a web design practice used to change specific elements based on the size of a screen. Maybe some elements should be changed if your user is a mobile or desktop user. Maybe you want to hide some information altogether from mobile users so as not to clutter their view. That's what this thread is all about.
First and foremost, contrary to what you may believe, responsiveness is NOT based in the backend. In theory, it could be. But there's a few flaws that immediately come to mind when putting backend responsive design in practice. Firstly, how do you tell what device the user is on? A user-agent header? Maybe, but user-agents can be changed on the fly, easily. There's no guarantee that a user-agent actually matches the device the user is browsing on. Then, what about bots? How should they view the site? What if it's a Google spider that takes a screenshot of your site? Those spiders take screenshots for both mobile and desktop views, but they share the same user-agent.
The common practice in creating responsive designs is to use what is called "media queries." The rendering engine can easily tell the size of the view port that is being rendered. That being the case, media queries only apply based on rules set by the designer, and are executed by the rendering engine at run-time.
Here's a simple example. Let's say that I have an element that I want to be a specific size for anyone using a display that is less than or equal to 1366 pixels in width. 1366, at least a few years ago, was the standard laptop screen size. If the display was smaller, you could probably bet that it was a mobile device. Even if that wasn't the case, you're just making it easier to view on small screens.
So here's the CSS I've got.
My class called "my_container" sets its width to 75%. This may be fine on screens larger than 1366px, but maybe for this size it looks a bit "floaty." Like, maybe the container looks small and just has large gutters on either size of the container that have no user. Media queries to the rescue!
The above media query matches devices that are equal to or less than 1366 pixels in width. So instead of my container taking up the previous 75% of the page, now it takes up 100% to accommodate for smaller displays.
The day has been saved. Media queries, however, are not just limited to screen resolution. You can match a whole lot of rendering engine attributes, including but not limited to height, resolution, orientation, aspect ratio, color, the list goes on.
On top of this, media queries can be chained using logical operators. You can use keywords such as and, or, not, only, or for more than two rules, commas between matching rules.
So if I wanted to match a screen larger than 1024px but smaller than 1366px in width, I could chain together the two attributes using a logical and.
And like that, my container is now black, but only if your view port is <=1366px and >=1024px. I don't need to have only one selector for a media query though. I can put as many as I need. Here's an example I'm using for a personal project right now, to illustrate this.
Media queries extend much further than CSS. You can match media using the "media" attribute tag in link elements in HTML. You can also call the .matchMedia() method in JavaScript if you're doing something that requires JS.
This, of course, was a very quick and simple thread about media queries and making responsive designs in CSS. For your convenience, here are two references you can use to learn more about media queries.
As a side note, this was in response to @"Malcom"'s thread
First and foremost, contrary to what you may believe, responsiveness is NOT based in the backend. In theory, it could be. But there's a few flaws that immediately come to mind when putting backend responsive design in practice. Firstly, how do you tell what device the user is on? A user-agent header? Maybe, but user-agents can be changed on the fly, easily. There's no guarantee that a user-agent actually matches the device the user is browsing on. Then, what about bots? How should they view the site? What if it's a Google spider that takes a screenshot of your site? Those spiders take screenshots for both mobile and desktop views, but they share the same user-agent.
The common practice in creating responsive designs is to use what is called "media queries." The rendering engine can easily tell the size of the view port that is being rendered. That being the case, media queries only apply based on rules set by the designer, and are executed by the rendering engine at run-time.
Here's a simple example. Let's say that I have an element that I want to be a specific size for anyone using a display that is less than or equal to 1366 pixels in width. 1366, at least a few years ago, was the standard laptop screen size. If the display was smaller, you could probably bet that it was a mobile device. Even if that wasn't the case, you're just making it easier to view on small screens.
So here's the CSS I've got.
Hidden Content
My class called "my_container" sets its width to 75%. This may be fine on screens larger than 1366px, but maybe for this size it looks a bit "floaty." Like, maybe the container looks small and just has large gutters on either size of the container that have no user. Media queries to the rescue!
Hidden Content
The above media query matches devices that are equal to or less than 1366 pixels in width. So instead of my container taking up the previous 75% of the page, now it takes up 100% to accommodate for smaller displays.
The day has been saved. Media queries, however, are not just limited to screen resolution. You can match a whole lot of rendering engine attributes, including but not limited to height, resolution, orientation, aspect ratio, color, the list goes on.
On top of this, media queries can be chained using logical operators. You can use keywords such as and, or, not, only, or for more than two rules, commas between matching rules.
So if I wanted to match a screen larger than 1024px but smaller than 1366px in width, I could chain together the two attributes using a logical and.
Hidden Content
And like that, my container is now black, but only if your view port is <=1366px and >=1024px. I don't need to have only one selector for a media query though. I can put as many as I need. Here's an example I'm using for a personal project right now, to illustrate this.
Hidden Content
Media queries extend much further than CSS. You can match media using the "media" attribute tag in link elements in HTML. You can also call the .matchMedia() method in JavaScript if you're doing something that requires JS.
This, of course, was a very quick and simple thread about media queries and making responsive designs in CSS. For your convenience, here are two references you can use to learn more about media queries.
[To see links please register here]
[To see links please register here]
As a side note, this was in response to @"Malcom"'s thread
[To see links please register here]
. So, here you go, Malcom.
