Which units to use for responsive web design

[treddie]

Hello.

I am new to web design and have an important question to ask.  We all know that any website is going to be seen by probably every device out there that can view a page.  As such, different screens have different parameters such as width in pixels, and width in inches.  The pixels unit seems inappropriate because a screen can be 4.5" wide or,say 20" wide but have the same ppi.  If I were to use pixels, then a screen with the same ppi but vastly different width in inches will simply be scaled down to fit the smaller screen without any importance placed on the scale of the content, especially text.  I do not want to have to get out a microscope to view the webpage on my cellphone.  So it seems that inches is best, because regardless of the ppi,  I know my content will be scaled to the physical width of the screen, not ppi, which is only a measure of how sharp my web design will appear on any particular device with a given resolution.  Obviously, then, I need to compose my website for different screen sizes (like inches), NOT what resolution they will be viewing it at.

With that in mind, it also seems that another unit to use along with inches, is % of screen width.  For many screen sizes, I can simply let my content positions float based on what the media query tells me about a viewer's screen size, and therefore how to place my content solely based on percentage of screen width, without having to change things like text size (so long as everything fits in the smaller screen all scrunched up).  After that, I could switch to a different page layout for the next range of smaller screen sizes.

Does this approach seem like the right thing to do?  What headaches will it introduce, and what are other options?  It seems that one nice thing about this approach is that I can keep my amount of page designs to a minimum, by letting each one handle a nice range of screen sizes.

[osgood_]

treddie  wrote

Hello.

I am new to web design and have an important question to ask.  We all know that any website is going to be seen by probably every device out there that can view a page.  As such, different screens have different parameters such as width in pixels, and width in inches.  The pixels unit seems inappropriate because a screen can be 4.5" wide or,say 20" wide but have the same ppi.  If I were to use pixels, then a screen with the same ppi but vastly different width in inches will simply be scaled down to fit the smaller screen without any importance placed on the scale of the content, especially text.  I do not want to have to get out a microscope to view the webpage on my cellphone.  So it seems that inches is best, because regardless of the ppi,  I know my content will be scaled to the physical width of the screen, not ppi, which is only a measure of how sharp my web design will appear on any particular device with a given resolution.  Obviously, then, I need to compose my website for different screen sizes (like inches), NOT what resolution they will be viewing it at.

With that in mind, it also seems that another unit to use along with inches, is % of screen width.  For many screen sizes, I can simply let my content positions float based on what the media query tells me about a viewer's screen size, and therefore how to place my content solely based on percentage of screen width, without having to change things like text size (so long as everything fits in the smaller screen all scrunched up).  After that, I could switch to a different page layout for the next range of smaller screen sizes.

Does this approach seem like the right thing to do?  What headaches will it introduce, and what are other options?  It seems that one nice thing about this approach is that I can keep my amount of page designs to a minimum, by letting each one handle a nice range of screen sizes.

I use always use %. It's always worked for me and easy to understand. Not sure about your first paragraph, I could not make much sense of that, especially when inches was mentioned

Think in percentage widths is my advice.

[ALsp]

Use percentages for box dimensions.

Use font-size 100% on body element, then change font-size by using percentages. The percentage size of the child element will then be based on any parent element (including body) to which a font-size has been set. Use rem units for fonts when you want to remove inheritance.

And most of all, learn to code your layouts yourself and never use the built-in Bootstrap pages that come with Dreamweaver. If you do, it will burn you sooner or later.

[BenPleysier]

ALsp  wrote

And most of all, learn to code your layouts yourself and never use the built-in Bootstrap pages that come with Dreamweaver. If you do, it will burn you sooner or later.

Please don't listen to Al regarding Bootstrap. He, along with a couple of others, do not like Bootstrap because they feel that it is a bloated CSS/JS library and they want to show off their 'prowess' while others don't even use (the current version of) Dreamweaver to be able to give a proper judgement on Dreamweaver-Bootstrap relationship..

Dreamweaver is not unique when it offers Bootstrap as part of its package. Here is a list of rapid Bootstrap builders https://cssauthor.com/bootstrap-editors/, while there are also other frameworks that include Bootstrap in their arsenal the most notable being WordPress.

As a sidenote to ALsp "stop it", you should be above this sort of thing ..

[pziecina]

Personally I think you are overcomplicating the problem.

Providing you do not use absolute measurements and apply modern techniques, (such as srcset for images) then 99% of the potential problems you mention will never happen. The idea to use inches for your media query sizes is o/k as far as it goes, but doing so would still mean that you must also create media querys for each device/screen resolution possible at that size.

Everything else has already been said.

[Nancy OShea]

Digital designers rarely think about inches, unless they're building for a stadium jumbotron or very wide screen TV.    Most web designers use a combination of:

• pixels (px) with CSS breakpoints,  
• percentage (%) of viewport,
• viewport units (vh, or vw).  See links below.

Fun with Viewport Units | CSS-Tricks

The trick to viewport units on mobile | CSS-Tricks

[treddie]

Thanks for the advice, everybody!  I was leaning in that direction, but wasn't all clear on it.