I've been working with a page which has two layouts dependent upon the width of the device being used to view the page:
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
}
This approach essentially takes the various "web" and "mobile" divs throughout the page and displays, hides, or alters them as required for either layout; however, while the "web" divs are hidden, they are still loaded by the mobile device, potentially slowing down the page load.
My first thought was that if I could define only the "mobile" divs and not the "web" divs, then I could avoid loading all of these additional elements. Thus, does a method similar to the CSS media query exist for HTML? Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?
EDIT: A better approach, at least as far as images and graphics are concerned, is likely to use CSS to define the image rather than the HTML. Thus, instead of doing:
<div id="img"><img src="URL"></div>
...and trying to hide the div, you would instead take this approach:
<div id="img"></div>
and...
div#img {
background: none;
}
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
div#img {
background: url(URL);
height: 400px;
width: 600px;
}
}
Thus, the mobile version doesn't load the images and we're still only using CSS.
Or alternatively, is is there a way to define two different HTML
layouts based on the width of the device the page is displayed on?
Thats the route to take imho. HTML doesn't have a similar mechanism to define different rulesets for viewports.
I think there are some js options. Does this conversation help?
What is the best way to detect a mobile device in jQuery?
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Agreeing on terms
By responsive images I mean techniques for picking a source image with optimal file size for a given screen (viewport size and DPI).
By responsive context I mean RWD: page components changing their layout based on viewport width.
The problem
These two goals are fairly easy to achieve independenlty. For responsive images we have <img srcset sizes> and <picture>, for responsive context we have the min-width and max-width media queries.
But how do I use both at once?!
Problem example
Let's say I have a component displaying three images and responding to viewport width like this:
You can see that as viewport size growth, image size does not grow linearly. It varies back and forth.
Ideally, different file sizes should be picked should load depending on CSS dimensions of each image, not screen width.
Examples:
for the "tablet portrait" viewport, the first image should pick a larger source than the other two;
"tablet landscape" viewport should load smaller images than "large phone" viewport, despite having a larger width.
Since responsive images are an HTML technique and RWD is a CSS technique, I don't see a graceful way to make them work together.
Hypothetical solution 0
Ideally, in order to achieve that, the sizes HTML attribute should vary depending on each image element width. But RWD is not capable of that.
I could imagine something like this:
/* full-width image and single-column grid */
.responsive-image {
sizes: 100vw;
}
/* 1+2 column grid aka "tablet portrait" layout */
#media (min-width: 400px) and (max-width: 767px) {
.grid .responsive-image {
sizes: 50vw;
}
.grid .responsive-image:first-child {
sizes: 100vw;
}
}
/* 3 column grid */
#media (min-width: 768px) {
.grid .responsive-image {
sizes: 33vw;
}
}
Boy, would this be awesome! A fully responsive grid, fully responsive images aware of their own context, compact CSS.
Unfortunately, that does not work. It is not possible to manipulate sizes from CSS.
This example is here only to demonstrate the desired outcome.
Potential solution 1: JavaScript magic
An obvious solution would be to use a JavaScript library to make the decision based on image element's own width (similar to the element query approach).
Pros:
Once set up, it just works! Very easy to add new images.
This approach is fully dynamic. Components are aware of their own width and pick correct file size regardless of context (size of the parent component).
Cons:
The images will start loading too late.
I have a single-page app with server-side pre-rendering. The server must provide an src for each image without knowing the viewport size.
On the one hand, this resolves the previous problem.
On the other hand, this will result in loading two sets of images when JS takes over. :(
Potential solution 2: CSS custom properties aka var()
I came up with the following idea, and I doubt I'm the first one to think about it.
Put all available image sources into CSS custom properties.
Use CSS var() inside media queries to pick the right one.
Example:
<div
class="responsive-image"
style="
--image-250: url('http://exmaple.com/image-250.jpg');
--image-500: url('http://exmaple.com/image-500.jpg');
--image-1000: url('http://exmaple.com/image-1000.jpg');
--image-1500: url('http://exmaple.com/image-1500.jpg');
--image-2000: url('http://exmaple.com/image-2000.jpg');
--image-5000: url('http://exmaple.com/image-5000.jpg');
>
.responsive-image {
background-image: var(--image-250);
}
#media (min-device-pixel-ratio: 1.5) and (max-width: 399px) {
/* full-width image */
.responsive-image {
background-image: var(--image-500);
}
/* single column grid layout */
.grid .responsive-image {
background-image: var(--image-500);
}
}
#media (min-device-pixel-ratio: 1.5) and (min-width: 400px) and (max-width: 767px) {
.responsive-image {
background-image: var(--image-1000);
}
/* 1+2 column "tablet portrait" grid layout */
.grid .responsive-image:first-child{
background-image: var(--image-1000);
}
.grid .responsive-image:not(:first-child){
background-image: var(--image-500);
}
}
/* ... */
Pros:
Works with pure CSS, no JS required.
Works well with server pre-rendering.
Cons:
Using <div> to render all images.
Nested responsive contexts are a lot of trouble. Media query rules can only be applied based on viewport width, not element width, but responsive images should be picked based on child element widths. As a result, the complexity of CSS rules grows exponentially as the depth of nesting grows. With one level of nesting (as in the example above), it's already unreasonably complicated. I don't even want to think about two levels of nesting.
Question
What are available solutions to this problem?
Of course, I'm hoping for a well-established approach without sub-optimal drawbacks.
But I want to gather here all less optimal ways of solving this as well: best practices, JS libraries, CSS techniques, anything.
Bonus question
Is it even worth doing?
Have there been any tendencies lately, e. g. articles advocating for not using responsive images, e. g. to avoid overhead and build for modern retina screens and 4G internet? After all, it's only a question of extra (milli)seconds of loading time, not denial of service.
I have to superimpose a form over an image, and it's not a problem, since with some CSS instruction it is simple. The problem is that I must do it responsively, in a way that with every monitor and resolution the positioning doesn't change and adapt itself.
This is an example: http://www.gruppofas.eu/siti-web/
Positioning the form in the green-bordered box it isn't a problem, but doing it in a way that, when viewing it in different resolutions or devices, it remains inside it, how can it be done?
Thanks
You should use media queries in your CSS file.
Go to your CSS and add this:
#media (max-width: 600px) { - here you add the px**** and it will resize
.YourImage/BoxClassGoesHere* {
display: none;
}
}
You can also check in google for media queries.
I hope that helped you.
So I have a site, and I use developer tools. And view it as iPhone5s view and add media queries in:
#media (max-width: 640px) {
.example {
background: red;
}
}
But when I drag my browser I can see all the elements look normal/good. Then they all mess up and cross over one another. Then it hits the mobile view and goes normal again because of my media queries. How do I get the elements to keep in there positions. Like not lose the margins at the side and all that?
I've set alot of elements to
position: absolute;
And so I can freely move elements about the page is this why?
Thank you!
Because many times the actual elements are different between mobile friendly screen sizes and the full version of the site, I find myself wanting to just have two versions of the site in two separate divs. Once the two versions are set, I'd use CSS to show / hide the correct version. Is there anything wrong with this practice?
#media only screen and (max-width: 767px) { /* phones & small screens */
#desktop{
display:none;
}
#mobile{
display:block;
}
}
#media only screen and (min-width: 768px) { /* tablets, desktops, & larger screens */
#desktop{
display:block;
}
#mobile{
display:none;
}
}
<div id="desktop">
Desktop Site
</div>
<div id="mobile">
Mobile Site
</div>
The recommended way would be to reuse as much as possible, create one stylesheet for your preferred version and then hide/show and modify everything using media queries. This will prevent duplication and allows you to adhere to old adage: Don't Repeat Yourself. However, sometimes it's not necessarily bad to have two versions of some things, but again, you should do that with media queries for specific elements as you don't want to repeat yourself (ironically, I just did).
As mentioned in the comments, using stretchable layouts with percentages is pretty nice nowadays, and thanks to the box-sizing: border-box property, it's easier then ever to create a full-width site without sacrificing controls over the paddings that your boxes use, making it very easy to make everything look good and consistent.
If you mobile site is completely different from your main site, it might be better to separate them and put it on a different URL, this will reduce load for mobile browsers and desktop browsers alike, which is always a good thing.
To make this short and simple, I have a <div> in which I wish to be hidden if the user's resolution is 1024x768.
So if I have a separate CSS file for the css left_bar, then the template with <div id='left_bar'> how would I go about having the resolution check query?
#media all and (width:1024px) and (height:768px) {
/* CSS rules here */
}
Although, that's awfully specific. Usually you use media queries with min-width or similar.