I know that width & height in HTML are presentational attributes, getting overrode by any other styling declaration. Still, they help browsers to reserve some space during image loading phase, and thus prevent layout shift.
<img src="kitten.jpg" width="XXX" height="YYY">
But... what exactly should I put there, in fluid layouts? Let's say I have an image, that is 100% wide on mobile resolutions. Then, on small tablets it gets fixed width 200x400px. On normal tablets and small desktops it has 800x400px, and on desktops and up it gets fixed dimensions of 1000x500px.
Which should I pick, so it works as intended and indeed prevents layout shifting - instead of, perhaps, creating new shifting problems?
Using a relative size will change its size based on screen resolution, so it would be best to use percentages. You can also use the max-width property to make it so it can't go over a maximum size.
Related
I understand that currently we are supposed to use width and height attributes on <img> elements again, mostly to avoid or minimize layout shift. And this works OK when I have images with the same set dimensions across all screen sizes.
But what do I do in the following situations:
fluid width/height, possibly simply 100%, so full container width, and the container changes its dimensions based on screen size basic responsiveness)
same, but with image itself having set dimensions but differing on breakpoints?
I tried searching for answers online, obviously, but in most cases I can only find articles convincing me how important it is to use these attributes, or, that this is a hassle now, but will be much easier once aspect-ratio is introduced and implemented in the browsers. So, not very useful so far.
In other words, let's say I have an image that is:
100% wide, height: auto on mobile breakpoint,
20rem x 12rem for medium resolutions,
40rem x 24rem for large resolutions,
60rem x 36rem for xlarge ones.
What would I put in the width="X" height="X" attributes?
Ok, so after quite extensive research and experimentation I've found out that, in truth, it doesn't really matter as long as the aspect ratio is preserved. So the best bet would probably be to use image's original dimensions.
This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)