Looking for in-depth guide on Responsive Design and media queries using dppx

#1

I’m about to take on the task of making my existing website mobile-friendly. I have read that using a Responsive Design is generally considered the best way to do this, using CSS media queries to change the look of the page based on the width of the screen viewing the page. However, I think a lot of the information I have found regarding this was written back when smart-phones had resolutions of 600px wide or so. My Galaxy S5 is 1920x1080, so a website attempting to set layout based on the width (in pixels) of the screen is likely to think my Galaxy S5 is a desktop monitor. Indeed, a lot of websites do display on my phone with the desktop version, and it really sucks because the text is always microscopic. I can always zoom in, but for designing my own site I feel it’s unacceptable to ask the user to do that, and it also ruins the look of the whole page anyway. In general, I hate the way text is so tiny on a smart-phone screen (and I’m near-sighted and viewing small things up close is easy for me, I can’t imagine how much worse this is for people who are far-sighted).

What I really want is to get the width of the device (in inches), and then scale the text proportionally to the screen so that the text is always the same size (in inches) regardless of the device. I have read that, while there is currently no way to get the screen size of the device in inches with a media query, you can get the resolution using “dppx”, and that’s enough to know what size to set text to in order to have it appear consistent across devices.

But I’m really confused as to how dppx works. I have read that it means “dots per pixel” but a pixel is a dot, isn’t it? Okay, ignoring that, I have seen that it says there is a ratio of 96dpi:1dppx, so I think I would be looking at the following values:
For a typical monitor that is about 18 inches wide and has a pixel-width of 1920, it would therefore have a dpi of 106.7, which would be 1.1dppx.
For my Galaxy S5, the factory specs say 432dpi, which would be 4.5dppx, right? That means the S5 has a resolution of about 4.1 times that of the desktop monitor.

So in my CSS, I could have it check the dppx, and if it is at least 2dppx, I could set the font-size to 181% (1.1/2). If it is at least 3dppx, I could set the font-size to 273% (3/1.1). If it is at least 4dppx, I could set the font-size to 364%. The goal, as mentioned before, is that text is always the same size (in inches) regardless of device. I could probably instead use Javascript to get the dppx and dynamically write the CSS to get an exact scale, I think. I’m assuming PHP can’t do it, being server-side. It looks like I should be able to have some Javascript code in my document header like:

var percent_dppx=res.dppx()/1.1;
//and then something to set text by class or ID have font-size = percent_dppx*100%
//or else have the Javascript write CSS into the HTML specifying the font-size

Mostly this is all stuff I am brainstorming as I type. It would help a lot if anyone can confirm I am on the right track.

#2

Well, showing the code you posted, you have issues. Not all phones use Javascript. From what I have seen
so far, most issues with displaying to a phone can be handled in just CSS. I played with this a lot with the
Bootstrap library for PHP. It comes with a ton of media-sizing things already built in. It lays out all displays
with a base of 12 items left to right. Then, if it is moved to a smaller sized screen, it adjusts where this are
actually displayed. With some forethought, you can lay out each page of your site so it looks and flow very
nice on a phone. I would look into it. You can resize your browser screen to test how it looks on a smaller
screen. Here’s a nice tutorial on it. Press the green “Next-Chapter” links to walk thru other sections…
http://www.w3schools.com/bootstrap/
Here is the site to get it yourself. (Free and a huge amount of items in it)
http://getbootstrap.com/2.3.2/

On the size of devices, there are a lot of lists out there that discuss sizes of media devices. The current
goal of the manufacturer’s are aimed at at lease 1080p so they can play full feature movies. I have found
that a lot of these discussions about media display sizes are biased depending on where you read the
data from. But, to get you started, I would look at Wikipedia. It has a vast amount of knowledge on this
subject and gives a huge list of just about every display size. Here is a link to it…
https://en.wikipedia.org/wiki/Graphics_display_resolution

Many programmers disagree on the minimum size you should program for. I stop at 800x600. If someone
has a phone smaller than that, they are not using it much for the internet and more than likely are using
their computer for that. But, depends on what your website is used for, too. If it is a gaming site that just
needs to list items to be picked from, a 300x width would work. If it is a high-end photo gallery, then, you
want bigger displays. The project drives the design as always… The dots per pixel does not really matter
as you have no control over that. If you mess with your displayed data to fit the media viewing device, you
are just asking for trouble. It is much much better to create a movable layout which is responsive and will
adjust depending on the size of the viewing screen! Just make the display in smaller “chunks” across the
screen and the “chunks” will flow down in order on smaller displays… Bootstrap is great for that!

Well, that gives you something to start with… I would not worry about dots per pixels or actual size of the
screen, but, more on the layout of what you are displaying…

Oh, also, you are wrong on the 18 inch wide screen having a set number of pixels. My 23 inch has only
1280 pixels across, my 17 inch wide laptop has 1920 across. Depends on the size of the pixel which varies
vastly. Again, work on the layout not the screen size…

Good luck… I am sure a lot of others will jump in to this discussion…

#3

I am not completely closed to trying Bootstrap. Another friend of mine recommended solving my problem with “Use Wordpress”. I’ve been resistant to using things like this because I’ve always been a very “do it yourself” kind of person. I write all my own code and have never used code libraries, because I like having control over it and I don’t like the idea that the site might be using some code that I don’t understand.

And I guess the other thing is that I’ve put many many hours of coding into my website, and it’s hard to throw it all away. But I’m open to considering it. And I’m just going to trust for now that text size won’t be an issue, since that was my main concern with this thread. Thanks, I will think about it.

#4

Well, by your comments, you might not understand what Bootstrap and Wordpress are. Wordpress is a
framework that allows you have an ADMIN control panel on a site to control the front-end site. It is not what
you want for your work. In my humble opinion! Bootstrap on the other hand is mostly a CSS system backed
by javascript and JQuery on the server which assists the page to display HTML in a controlled way. So, there
is no comparison between these two items. In Bootstrap, you can just use the base parts of it and do all of
the rest yourself. But, since it has a huge amount of code already in place for responsive layouts and has a
ton of special classes built into it for phone media displays, I think it might help you. I would never suggest
Wordpress for what you were discussing!