Learning about rem and try to make whole website responsive.
According to the value of 1rem, should I be scaling:
Font sizes and margins/paddings around text
margins/paddings/size of elements that do not directly contain text like components and images
Does this depend on the layout?
For example, I have an image in a card component. As user increases the font size, image or space around it might stay small next to a larger font.
Should I let this happen or scale image with the font size? I know the setting in the browser only changes font size. On Facebook, for instance, font size from browser settings does not affect the images or component sizes.
Should I then only worry about text?
I think this is entirely based on context/preference but,
Generally yes, if you are using 'em' for padding/margin (which you should be) this will scale automatically however to the font-size of its element.
Depends on the element, text is hard to read for some people as its small lines in unique shapes so this makes the most sense to scale however images and other elements are generally a lot easier to look at. - if the content of the element is something like an icon for button I would probably scale it with text as it is likely to be adjacent to some text so would look weird if the text scaled but the element didn't. Otherwise I would just use responsive web design such as flex/grid to fill the space of a page, this is "scaling" however less for accessibility and more for design.
Related
I'm working on a website over here:
venuslabs.org
Some of the tabs, such as "Technology Details (pdf)" and "Venus Needs Advocates (Take Part!)" create a number of subwindows in the middle. Their sizes are based on em, so that they scale properly if the user changes their font size / zoom level (as I understand is "best practices" today).
The way they are looks fine... most of the time. But when viewed on a cell phone in horizontal (not vertical) layout, they're just too big and overlap the top bar. So it appears that the current layout is fine down to a certain height, but below that height I need to have the font size scale linearly with page height (with the subwindows scaling along with the font size).
Obviously I could do that with javascript, but I know you're supposed to do things in pure CSS where possible. What would be the recommended approach? I've been trying a number of things and none have really played out.
While learning how to use css sprites, I quickly noticed and/or read that it is best to have 1 or 2 empty pixel space between all images inside a sprite to avoid other images bleeding through when the user zooms in or out.
While looking at the apple homepage, I noticed that they don't do this, without suffering from bleeding images. I did not find any reason in their css that would explain this.
How is that possible? ;)
There's no need for padding between sprites if you know exactly what size the containing element is going to be. The problem comes from when something inside the element causes it to grow. For example, if the text inside that element has to use a fall-back font it may end up causing the container to grow.
The reason padding between sprites is recommended is that there's no real downside to it. It doesn't increase the file size by any meaningful amount and it gives you a bit of a safety margin when a browser does something slightly different than you expect.
It seems like it is indeed necessary, because when the browser deems it necessary to scale the cropped areas (for example, if one zooms in or out or if an animation temporarily changes the size) the browser will use anti aliasing to smoothen the scaled image. Since anti aliasing uses surrounding pixels, the most outer pixels of a crop will be influenced by those that lie outside of the cropped area.
The transparent padding ensures that this doesn't happen since the transparent padding wouldn't affect the resulting color. Without padding, the cropped pictures would affect each other.
This can easily be tested by filling the (theoretically invisible) padding area with a color like magenta and then zoom in or out in one's page, all crops will have a bit of magenta on their edges.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
what is the difference px,em and ex?
I have a question for all the coding geniuses on StackOverflow.
I am a newbie, and I am about to start building my third website. Being that I had some problems with the layouts of my first two websites, I am asking this question before I start on my third:
What measurement is it best to use for
the css elements? Percents,EM's or Px?
Which form of measurement will ensure that I have a site that will not get distorted on different browser sizes/resolutions? Is there anything else that I have to be careful of when building my site so that it will not get distorted when a user zooms, or looks at the site from a different browser size/ resolution? (as was he case on my other sites)
Thanks for your time, guys. Any help would be greatly appreciated!!
Thank you.
Whichever is easier for you to work with.
Modern browsers (i.e. everything in use today except for IE6 and IE7) have a concept of "CSS pixels" which is different from "actual pixels," so e.g. zooming changes the size of a "CSS pixel." Fonts will scale just fine; if you say the font is 14px, it will start out that way, but if the user zooms it'll get bigger. Thus, if it's easy for you to measure in pixels, for example to size page elements relative to an image of a given pixel size, you should do pixels.
Sometimes you want to size things relative to text, though. If the width of an em-dash is a useful measurement, somewhat representing the "longest possible character," go ahead and use ems.
And finally, if you're trying for a fluid layout, percentages can be great: a gradient that starts fading 50% across the page is often what you want, as opposed to one that starts fading after some fit number of pixels. Even if you're not fluid, and the width of your container is fixed to e.g. 900px, it's still often useful to say "this goes at the 50% mark" or "I have one thing at the 33% mark and one at the 66% mark." That's much easier to work with than figuring out what the corresponding pixel offset is every time, and makes your intent clearer to anyone reading your code.
Short answer: it depends.
Longer answer:
There is a place for all three units, frequently in the same design. There is no "best" unit; they serve different purposes.
Pixel units generally offer the most precise control over the size of the elements in the user interface, but also restrict that size such that it does not change with regard to the other elements of the page design. The size of pixels themselves may change. For example, a Retina display packs more pixels into the same physical space as a non-Retina display, so images which were designed for traditional displays get scaled up. Similarly, traditional desktop web browsers may adjust the size of pixel in response to the user zooming the size of a page. In these cases however, the pixels change sizes throughout the entire document, and retain the same proportions with regard to one another, so you can use px values and expect them to work sanely in most conditions.
EM units vary according to the size of the text. They're most commonly used for setting the size of text, and for line heights; but there have been some interesting things done with "elastic" layouts such as the elastic lawn zen garden (turn off page zoom for this site; switch to text-only zoom and change the size a few times).
Percentages vary according to the size of the containing element, expanding and contracting depending on how much room is available to them.
And, really, it's very common to see web designs that use all of these. For example, suppose you have a site with two columns. The main column must expand and contract with the browser width, but the secondary column needs to stay the same width. The main column might have a width of 100%, but also a margin set in pixels for the secondary column to float in. And the text and line height might be set in ems.
So, the real answer is: they all have their uses. Keep practicing, and pretty soon you'll figure out how it all fits together.
EDIT: In the example above, I should have said "a width of auto" -- meaning take up all available space after margins, padding, and borders are accounted for. Sorry, I tend to think of that as a percentage even though it's actually a keyword.
from accessability point of view need to use EM's. You need you layout to adapt to very different fonts sizes so if allmeasurements are in EM's everything will scale as accessability tools increase font size
When creating liquid layouts, it makes sense to use percentages for the widths of your blocks, so they shrink and grow with browser size changes.
For heights, pts have a specific spatial value, and em are related to your current point size. This is useful because things specified in those units will be roughly the same size on everyone's display (unless they have different zoom factors applied). em are also useful when working with a dimension driven by an amount of text.
Browsers will also scale values specified in pixels, so they are not any more a "trap", but they are rarely the "natural" choice for layouts, unless working with raster images.
As Will and Domenic say: use all three, when appropriate. As you get more experience, you'll get a better feel for when to use which.
If you want to design a fixed layout website then use px or em.
If you want to design a fluid layout website then use percentages.
Percentage is always relative so page content with dimensions in percentage will automatically resize on window resize and on different screen resolutions.
px and em are one and the same thing. Same in their nature. They define the absoluteness of the dimensions. Btw for the difference, 1em=current font size. So if your html or body has css font-size:19px; then 1em=19px.
Shouldn't we use "Pixel" for anything in CSS if we are making a site for mobile devices?
px for layout and font. Should we only use em or % for everything on mobile sites?
and if i'm using <img> then should i defined height and width for <img> in HTML code? or it's good to not to define. or i should define size in css for <img> also in % or em
Edit:
Note: Question is not again about px vs em debate My question is specifically for separate mobile site. when we are making separate mobile site with different domain or sub-domain.
Everything depends on the context. Like with CSS for desktop browsers, there are situations where using pixels is not a good idea (for example mostly for font sizes), and there are situations where pixels are still very useful (for example fixed layout).
In general, avoid using pixels every-time you don't need to. For example, there is no reason to do it for fonts: it's not you, but the user who chooses if the font must be big on a high-res screen or not. Using percentages also helps you somehow to remember that a piece of text can never have an exact width and height, and force you to adapt your design.
Now, sometimes, for cost or other reasons, you have to do fixed layouts, or at least some parts of a page, associating images and text, have to be fixed in size. In this case, there is nothing wrong to use pixels. If I have a <div/> with some text inside and a pretty 200×100px background, the most obvious thing is to set the width and the height of this <div/> to 200 and 100 pixels.
if i'm using <img> then should i defined height and width for <img> in HTML code?
IMHO, you never should do that. The size of an image is purely a layout/design thing, so it has nothing to do with HTML, but with CSS.
Do you have to specify the size of an image in CSS? If you want your image to be displayed 100%, than no, you don't have to: this is by default in every browser. If you want to scale it down and, for some reasons, you can't scale the image itself than save the scaled image on server, than yes, you may want to specify the size of the image.
Remember than sending a big image and scale is down on client side is always a bad idea. The visual quality might be affected, and the client will have to wait more to see the image appear.
Actually, I recommend using different CSS files (and sometimes different templates) for browsers vs. mobile. Mobile isn't just a smaller browser, it is a fundamentally different user experience.
As for the pixel issue, I tend to use pixels in my base CSS rules and then use % or em's everywhere else so that things scale up and down together. It doesn't always work the way I would like, but it normally allows a lot of tweaking during development.
I noticed that when the dpi is set high than 96 to like 120 my site gets messed up using either Firefox or IE7. The CSS basically breaks. Anyone know how to fix this?
Link to web-site
Thanks
The site uses a fixed-size layout, but mixes the units px and pt. When changing the dpi of your screen, the relative size of these units changes, ie the site is broken by design.
What you should do:
don't use pt for screen layouts - pt is for printing only
read up on liquid layouts and the relative unit em
There's not really a fix that can prevent anything happening if a user has adjusted their Windows DPI setting. Altering Windows to 'large fonts' mode, or setting it to a DPI setting other than the default, affects all layout in IE.
However, this should never cause a site to massively break. A few things shall be slightly misaligned, perhaps, due to rounding of values.
The site you've pointed to indeed does break quite massively when the font size is changed - for instance, change the default font in the browser (or set Firefox to "Zoom Text Only"). Text from the buttons completely leaves the buttons and starts hovering elsewhere.
It looks like the main cause of this, at least with the buttons across the top, is that the whole row of buttons is single background image and the text inside them are floated elements which match up with the background image only at a given font size - any adjustment to their size and position and they become out of whack with their background.
When designing, always change the zoom setting (in IE7 and Firefox) and the font size (eg in Firefox using "Zoom Text Only") and make sure that those things that do change in size, don't break the site. In some conditions, things specified in "pt" will scale while things specified in "px" won't.
How you could fix it
It's clear that you've designed everything to be a certain size in pixels, including the header and all the buttons/tabs. If you want to do this, declare the header DIV to be position: relative, and position the H1, H2, and UL inside it absolutely, using pixel values (relative to the containing div). Remove the margins, padding etc from the DIV to simplify. Specify widths, heights and top margins of the LI elements using pixels.
What I would do
Normally, I would build things like this to be flexible, so that if for some reason a person had really big fonts enabled on their browser, it would stretch nicely to handle it. That isn't really possible with your background images, because they are build especially for one given size only. So I'd have a repeatable background on the header, and I'd do each background for each button separately. Obviously, this is going to be more work.