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 9 years ago.
Improve this question
I am always coming back to the same question when developing a website for all devices.
Does it make more sense to make everything full responsive by setting everthing in percentage values or to query a few max-width and min-width with css3 so you can have your normal website with 960px and size it down for the different devices..
For the css3 mediaqueries i would use something like this:
/* CSS */
/* Basic responsive */
#media screen and (max-width: 960px) {
/* ..custom CSS for viewports less than 960 here */
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* iPads (portrait) and similar tablets */
#media only screen
and (min-device-width : 768px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
/* Smartphones */
#media only screen and (max-device-width : 480px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}
thank you
You should do a bit of both. If you can write some CSS that works across all devices then that's great. For example if your header goes 100% of the width for every device there's no need to adjust it with media queries. In reality you'll find certain parts don't work and will need adjustment. This is where media queries come in.
You shouldn't treat each media query as a new stylesheet, instead it should just alter or build on the styles already defined in order to make the layout work.
Typically sites adopt a mobile-first approach. This means you start with the mobile layout and increase the complexity as the viewport width increases. The benefit of this is that older browsers will get the simplistic mobile version of the site (which at least should work, even if it isn't pretty on a desktop).
You can read more about responsive layouts here:
Build a Responsive, Mobile-Friendly Website From Scratch
Common Techniques in Responsive Web Design
If you fall in such confusions, i would suggest to opt for bootstrap
...otherwise, using media-queries is a better option as it gives you wider flexibility and freedom to set values both in pixels as well as percentages.
A combination of both, or media queries.
You have to remember that if you don't use Media Queries, on every device (smartphone, desktop, laptop, etc.) you are loading all data for the website.
And if you load all data it loads also, for ex. images and that can cost a lot of Kb sent to the client browser.
With Media Queries you can set display: none; to images on the page and less Kb will be send to the client.
So it is important to understand that form mobile devices you should send as small portion of data as possible.
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.
This question already has answers here:
Responsive css styles on mobile devices ONLY
(4 answers)
Closed 5 years ago.
I just finished creating my website but now I have found a failure. My problem is that my website looks totally nice on the PC. But if I go and look at it from my mobile phone, the spaces between certain images etc. are a great deal too much...
So my question is, how can I create some CSS codes who are only affecting the mobile devices and maybe tablets?
Is there a way?
CSS has feature called media queries.
From the MDN link:
Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself
For example:
div {
background: black;
}
#media (max-width: 1000px) {
div {
background: yellow;
}
}
The background color of this div will be yellow on screen under 1000px width like in the example provided.
You can use media-queries for different screen resolutions.
Example:
#image img {
width:375px;
}
#media screen and (min-width: 1366px) {
#image img {width:375px;}
}
Read and understand about Media Queries
You will be able to adjust the css of certain media sizes of your website.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to create a responsive webpage using bootstrap,but I'm confused on how to start.Can anyone help me to move into the right direction?
Here is my code
https://jsfiddle.net/c30a7bd2/It should be responsive for all the devices.
Despite the downvotes, here's some info to get you started.
Process:
Design from smallest viewport to biggest. i.e. design your responsive site first for mobile devices in portrait, then mobile landscape, then tablet portrait, then tablet landscape, then smallest desktop, then largest desktop. If you look at the Chrome dev tools, you will see an icon on the left-top to the right of the arrow icon. This puts the browser into responsive design mode that lists the most common devices. Very helpful.
Learn about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There is a lot of stupid confusion about how to use #media queries correctly. Let me set you straight right from the beginning.
You only need to worry about min-width. Don't think about ranges, don't use anything else other than min-width.
Here's why.
Since we're writing our css from the smallest device width first, as browser widths increase all we're doing is overriding earlier set styles. That's it. That literally is the secret to doing great, simple responsive css coding.
What breakpoints to use:
Again, lots of clever engineers try to be too clever. They introduce odd breakpoints, try to avoid pixel 'px' definitions, etc. Stop doing that.
Remember, since we're are writing our code mobile portrait first (the smallest device size), there is no media-query for this. Its just css.
Here's the breakpoints you should start with:
/* all mobile portrait coding goes first */
#media all and (min-width: 480px) {
/* this is the most common mobile landscape minimum width */
}
#media all and (min-width: 768px) {
/* this is the most common minimum tablet width */
}
#media all and (min-width: 1024px) {
/* this is the most common minimum desktop width. It also is the
most common minimum tablet landscape width. */
}
#media all and (min-width: 1300px) {
/* this is the most common minimum wide desktop width.
This is the only media query you might consider setting to 1200px
if your graphic design requires it. */
}
That's it. That is quite literally everything you know to get started writing great responsive css.
Just remember the key concept is utilizing inheritance. 80% of your css should probably be written for the mobile portrait size first. All of those styles get inherited into wider and wider screen widths. Then override them as necessary for the new wider screen. You will find that as your media queries increase, there is less and less css in them.
Have fun and write great code!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So my website is good on desktop, no problems. But when I look at it on my phone per say, the gallery page is very messed up. Now i haven't been able to figure out how to make it compatible! Help please, here is the website:
http://www.marbleddesigns.com/
Use mediaquery to make website display good on other devices, we call it responsive web design
#media (max-width: 767px) {
// Style for devices have width <= 767px;
}
#media (max-width: 1023px) and (min-width: 768px) {
// Style for devices have width >= 768px and <= 1023px;
}
#media (min-width: 1024px) {
// Style for devices have width >= 1024px;
}
You can add style for elements on your page.
I added simple responsive grid system here, you can copy my mediaquery css and add classes to your website to make it work well on other devices.
There is two main approach to make your website available and being responsive on multiple devices.
I/ when defining sizes of divs and more make sure to use percentage (%). This will make sure that the website adapts to the size of the screen and thus adapting to different resolutions. When thinking of creating a website always look on different browsers and devices to see if it looks good every where.
II/ The other option of course is using media queries. They are structure like this:
#media only screen and (max-width: 600px) {color:red;}
They basically apply a rule if a condition is met like the size of the screen usually in our example, the text would become red if the browser window is smaller than 600pw in width.
For some good tutorials i recommend those links:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have created my first website for an oil change business. 1stopexpresslube.com On the front page I have a banner in blue with the business name, hours of operation, phone and address. I removed the banner on all the subsequent pages, because when viewing on a mobile device you couldn't tell that you had switched pages because all you could see was the banner and the menu buttons on the mobile page which do not change. A quick solution I came up with was leaving banner on the initial index.html page, and then all other pages I removed the banner. I then got the idea to see if I could change my site, so that on the 2nd, 3rd, 4th etc pages I could have the banner that is in blue ONLY appear on larger devices. So on phones the banner would not be there, as it is right now, but when I view on a desktop, those 2nd, 3rd, 4th pages etc all show a banner. I tried the opacity element so it would show 0, but it just made the banner disappear but still take space. I would like the space to collapse. I also tried visibility: collapse; and hidden; and they both seemed to do the same as opacity: 0; Is there a way to make the banner remove itself from the document flow on mobile devices, and then reappear and take up space on larger screens?
As mentioned, you can use media queries in your CSS, which allows you set different styles for different size screens.
/* Large desktop */
#media (min-width: 1200px) {
.banner{ width:123px; display:block; }
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.banner{ display:none; }
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }