I want to create a template . If the user monitor at least is 14 inches , It has a ppi for itself maybe 102 or something else.
So What ppi should I set for my web template to avoid the screen horizontal scrolling ? Is it the maximum ppi of the 14 inches monitor ?
ppi/dpi (dots per inch) doesn't work here: Different 14 inch monitors can have different resolutions - the number of pixels displayed on the screen.
For your purposes, the only thing you need to worry about is the user's resolution.
The size of a pixel can differ depending on the device's size, but it doesn't matter for layouting.
If you want to avoid scroll bars, either choose a very low pixel width (960 pixels is deemed ideal by many, because layouts with that width are guaranteed to work on a 1024 x 768 resolution) or use relative widths instead of pixel sizes.
Related:
Smashing Magazine: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
Related
This question presumes: device-pixels are absolute (fixed, not relative to anything).
Following reading this article,
My device (MacBook Pro 2019) has a pixel ratio of 2 (2 device pixels in every CSS pixel when zoom-level 100%; calculated by .devicePixelRatio). At 100% zoom-level, CSS pixels (as measured with .innerWidth) are the same as device pixels (as measured with screen.width & Cmd + Shift + 4 + click). I was expecting CSS pixels to be half the value of device pixels.
Why does MDN say CSS pixel is an absolute value when zooming in actually increases the size of a CSS pixel (by increasing the amount of device pixels it equals to)? Why is this in MDN?
In your case the scaling is done at the OS level, so everything will "lie" because your OS is set to lie to every applications, including the browsers.
The window.screen.width value will be the one reported by your OS, but in your system preferences, it says that you want the resolution of your display to be set to half of its real resolution, that's what you'll get.
So even these values are not device pixels, but some kind of CSS pixels (well window.screen.width is really 'CSS pixels', the one from the ScreenShot app isn't).
However, while "lying" about the number of pixels, it correctly exposes the pixel density (number of physical pixel used per px). That's what you'll have in window.devicePixelRatio when the browser doesn't apply any zoom by itself. Unfortunately, we don't know when the browser applies such a zoom, so as web-devs, we can't know the OS pixel density, nor the true resolution of the device.
As for the second point, I will assume you asked why MDN says CSS pixels are absolute rather than relative as written in your question.
This doesn't mean that a CSS pixel will always have the same physical dimension outputted (which is impossible btw, think of a video-projector), it's in contrast with relative lengths like %, em, vw, etc. which are relative to an other length.
CSS pixels are absolute in that they don't rely on any other length, even though the physical output may vary.
i Need Business card height and width in pixels on web, because i have created business card design by HTML and CSS in my application. here i can give print commend to print business card.
Now whats the width and height in pixel i use, so that it will correctly printed on actual business card size (3.5 and 2 inch)
It should be:
height: 336px
width: 192
=
height: 3.5in
width: 2in
Inches are valid CSS lengths just use those.
Absolute length units represents a physical measurement and when the physical properties of the output medium are known, such as for print layout. This is done by anchored one of the unit to a physical unit and to defined the other relatively to it. The anchor is done differently for low-resolution devices, like screens, and high-resolution devices, like printers.
Length # MDN
CSS units and dots-per-inch
The unit in/inch doesn't represent a physical inch on screen, but represents 96px. That means that whatever is the real screen pixel density, it is assumed to be 96dpi. On devices with a greater pixel density, 1in will be smaller than 1 physical inch. Similarly mm, cm, and pt are not absolute length.
Some specific examples:
1in is always 96px, 3pt is always 4px, 25.4mm is always 96px.
From my experience up to now the pixel size is something very relevant and intepreted differently based on many factors. My question is how do pixels work in html pages.
For example we can set the width and height of an image:
<img src="lalala.jpg" width="100px;" height="100px;">
What does 100 pixels actually mean?
How are the 100 pixels translated on screen?
How are the 100 pixels translated if on print papper?
To be more specific. If I set the image size to 100px then is it going to be the same size in inches on different screen sizes ? Ad if so..Is it going to be the same size if I print the same page while using a different screen size?
In HTML, pixel lengths of the height and width attributes are controlled by CSS. In some instances, these are refereed to as "CSS pixels". HTML itself does not provide a definition for what a pixel should represent (thus why I added the css tag into your question).
CSS itself has its own Units and Values documentation which defines the Pixel in its section on Absolute Lengths:
5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:
unit definition
---- ----------
‘cm’ centimeters
‘mm’ millimeters
‘in’ inches; 1in is equal to 2.54cm
‘px’ pixels; 1px is equal to 1/96th of 1in
‘pt’ points; 1pt is equal to 1/72nd of 1in
‘pc’ picas; 1pc is equal to 12pt
100 pixels is equal to roughly 1.041in, which itself is equal to roughly 2.65cm.
I'm not going to answer the further questions you've asked about different monitors and printing as this would make my answer incredibly long and dull. If you want to find out these answers yourself, a good place to start is in the same document I've already linked, which goes into detail about the Reference Pixel. Values in CSS are based upon a value of 96dpi (which means that 96 pixels on a monitor which has a pixel dencity of 96dpi will be equal to one inch if you were to measure it with a ruler).
Because every screen has diferent pixel size HTML/CSS or whatever software language is going to be made never gonna match the physical pixel size.
To calculate pixel size you need Hardware machine language not software.
I have a question regarding fixed layout. It has two parts, closely related, so I'm putting in one question.
Part (a)
Why 960px is suggested for the website layout? I understand that it is optimized for the most common screen resolution (1024px). But why exactly 960px? Won't the 1000px be as good?
Part (b)
What exactly is Grid system? I did check 960.gs but didnt get the idea of columns. Is it better to use grid system (using the template from 960.gs, which looks so messy) or should i stick with traditional way, like:
<div id="wrap">
<div id = "left-column">..</div>
<div id = "center-column">..</div>
<div id = "right-column">..</div>
</div>
1024px is the max screen width it's aiming at. We need to allow some window chrome, so it needs to be less. We'd ideally like it to have lots of factors, allowing us to split it into equal size columns with integer widths.
960 has lots of factors:
echo factors(960);
1 2 3 4 5 6 8 10 12 15 16 20 24 30 32 40 48 60 64 80 96 120 160 192 240 320 480 960
1000 doesn't have as many
echo factors(1000);
1 2 4 5 8 10 20 25 40 50 100 125 200 250 500 1000
Specifically, you can easily split 960 into 2,3,4,5,6 and 8 columns.
Why 960px is suggested for the website layout?
960 pixels is a common width for web layouts because 1024 x 768 was the most common resolution for many years and designers were forced to design for the lowest common denominator. When designing to a fixed width, it's wise to design so most people don't see a horizontal scrollbar. If your design is 1024 pixels wide, a page that is higher than the viewport (say 768 pixels for simplicity), will suddenly introduce a vertical scrollbar, eating away the available horizontal space which suddenly is less than 1024 pixels (1024 minus the width of the vertical scrollbar).
So you need a width less than 1024 minus the width of the vertical scrollbar. The width of a scrollbar isn't much more than 20 pixels, but to take into account non-maximized windows and end up with a number that's easily divisible into as many factors as possible, since that makes designing fixed-size boxes or columns easier. As 960 has more factors than 1000, 960 was chosen.
It's a partially false safety net to base the design on a fixed width of 960 pixels, though, since many people won't maximize their windows or even re-size them properly, so even with resolutions higher than 1024, their browser window might not fit 960 pixels. That's why responsive web design is beginning to take off, where designs are more fluid and responsive to the user's device settings (like screen resolution).
What exactly is Grid system?
A grid system is just a set of predefined CSS class names that you can use in your HTML documents to align the different boxes in your design into a "grid" that matches one or more common layouts for web design. A grid system is good if you're unfamiliar with CSS and find it difficult to align the boxes (in both width and height) your design is composed of.
If you find CSS simple enough to write yourself, I recommend you write it yourself. I also recommend not to use strictly fixed width columns, but instead more responsive web design (like mentioned above) to accommodate different screen sizes better than a fixed-width design is capable of.
960px is used because it is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16... - allowing designers to have a huge variety of different column widths and possible layouts. There are probably other "magic" numbers in this respect.
Also as pointed out, a width of 960px fits the majority of resolutions "nicely".
I think the divisibility reason is the primary reason.
{ 2^6 , 3 , 5 } allows for (7*2*2)=28 scaling factors
using six twos and the next two smallest primes
Also 960 = 1920/2
It also double to guard another use case : wherein user tile 2 windows side-by-side
like browser on left side, and word processor on right.
A grid system is used to have elements line out on the same vertical lines. This gives your layout a better look because all text/headers/images are left aligned the same way.
960 is as others said a based on 12 or 16 colums because it can be devided by the most amouont of numbers. This way you can have a row of lets say 8 elements and one of 4 and have the same space between your elements. If you look at the link you can see the white margins between the elements are the same wheter you make a 2-8-2 cell layout or a 4-4-4 cell layout(12 col based)
960px has a huge amount of factors, meaning layouts can have full-pixel, sane values with a lot of different dimensions.
960px is used because the most common and is the smallest screen resolution used regularly. You'll get mobile devices and a few 800x600 screens, but there are few and far between. The extra space on the side(s) of the page allows for window borders and scroll bars, while not obscuring the content.
Here is a different way of thinking about grids. What I offer here is a working solution to create accurate layouts needed for the width independence of responsive design. I make the assumption that all good web design should be responsive and accurate at all scaled sizes.
Having designed/built hundreds of responsive landing pages over the past three years I discovered an issue with the 960 pixel grid early on. Since responsive designs use percentages for widths instead of pixels, the number 100 becomes all important. The second important aspect of this issue is to avoid the use of fractional percentages. The final essential part is to make sure the image widths are in exact proportion to the percentage they occupy. Given these three constraints there is only one grid that makes sense: the 1000 pixel grid.
Before adopting this approach, we used the 960 pixel grid with the associated fractional percentages for our responsive designs. As a result we found different results from one browser to the next. The variance is subtle, a pixel this way or that, and due to round-off errors. There are some who find such nuances to be an acceptable trade off for the ease of dividing columns exactly equal using fractional percentages. If you are interested in a thoughtful alternative I invite you to read on.
For those familiar with U.S. currency, specifically the dollar, you already understand how whole number percentages work. You know the dollar can be sub-divided using pennies, nickels, dimes, quarters and fifty cent pieces. Anytime you have to split a dollar three ways someone will end up with the extra penny. In your layout, using whole numbers, this means three columns could be set up as 33%:34%:33%. Your image sizes would be 330px, 340px & 330px. The differences in width are virtually imperceptible because our perception is far more attuned to the alignment of elements rather than the comparing of widths. The 100 percent grid and the 1000 pixel grid correlate as a simple 1:10 ratio. This method is simple, accurate and easy to remember.
Building your layouts using percentages is a tremendous time saver. Our main container does get a fixed pixel width set using a single CSS class. When you change the fixed max width the layout scales. When a mobile device such as a table or phone requests your page, your layout will scale accordingly. I would, however, limit the upward scale to be no more than 125% to avoid noticeable softening of the images. For example, our new upcoming view port of 1230 pixels falls within this constraint.
In conclusion, it is best to remember we are craftsmen who, at our best, create true art. History provides us with wonderful analog examples created before computers existed. We have all seen the beautiful mosaics created with broken pieces of glass or tile; their beauty comes not from machine-cut, equal size pieces but rather, the carefully crafted pieces assembled by the hands of an artist. Established historic methods provide insight to solving similar problems found in web design.
I have designed and developed more than 10 sites, but I still have a doubt about the correct unit I should use. Should it be px, em or %?
EDIT 1: FOR LAYOUTS (Especially for container boxes)
Different units depending on context. If there was one that was best for every situation, then there wouldn't be so many units.
As rules of thumb go:
If you are working on screen media:
Use % for font sizes
Use px for images
Use px, %, or em for box sizes
Use ratios for line height
If you are working in print media:
It might be wise to avoid px (this is not a hard rule by any means) and everything else is fair game. It really depends how much control you want.
There's no real right or wrong, but as a rule of thumb:
For anything you want a certain, fixed size, use PX
For anything you want to scale with font-size, use EM
For anything you want to scale to the available space in the window/container, use %
Each used to have specific advantages or disadvantages in different browsers when it came to users scaling the browser's base font-size/zooming, but more recent versions of the browsers by-and-large get around these issues by scaling everything, not just font-size.
If you're talking about font-size then px and pt are not ideal.
Ems and Percent units are scalable, therefore they are far more accessible - friendly for the visually-impaired. They also scale down well for mobile phone users.
Px and Pt units do not scale upward for visually-impaired users, or downward for mobile phones.
If you're talking about layout or containers then it depends on the type of design you want - fluid or static - and there isn't necessarily a "right" answer.
Without going into an example, it's difficult to advice. Do you have a site in mind we could look at?
Use the unit you need in the specific context.
Unit Description
====================
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)
source: http://www.w3schools.com/css/css_units.asp
For flexibility and accessibility I recommend using % for horizontal measures (relative to the user's screen), and em for vertical measures (relative to the user's font setting).
For fixed width layouts
For as much as pixel perfection I would suggest to use PX for width ,height, margin, and padding
for line-height use unit-less value like {line-height:1.2}
for typographic elemets use {font-size:62.5%) for body then use em for other elements
in HTML for <img> always use unit-less width and height .