Responsive Web Design

Hi all,
I've been designing websites for a while now, but I've never ventured into mobile websites. I've been looking all this responsive web design stuff and it all looks very exciting, except I'm struggling to get my head around one thing.
The whole concept seems to be based on finding breakpoints in the resolution and altering your design. But surely resolution alone can't/shouldn't decide the layout/design alone. I'm thinking this because of the disparity between screen resolution and screen size.
For example, should the same page appear on a 5-inch, 1920x1080, mobile screen (i.e. HTC's new flagship and likely all the 2013 flasgships) as it does a 24-inch, 1920x1080, desktop monitor and also a 50-inch, 1920x1080, television?
Surely not... Yet I find no mention of PPI or screen size (inches) on any page describing responsive web design.

I would greatly appreciate anyone's thoughts on this matter. Please let me know what concepts I am missing.

Kallum

 

Responsive web site are based on CSS3 new attrib @media

/* Then use the media query to hide it at 481 and wider */
@media all and (min-width:481px) {
    div { display:none }
}

Code (markup):

but the better an easy way is to use a Lib like bootstarp or foundation also take a look to HTML5 Ninja

 

Hey, thanks for your input I do, however, understand the use of @media and I've made a few mock-up sites that implement it.
My problem is with saying: if width>1000px then the browser should see the full layout.
That hardly makes sense if the user is on a 5-inch 1080x1920 Android phone and therefore for them to read and interact with the page, which is likely designed without touch in mind as that would be more like the 400<width<960 pages, it will be very difficult for them.

Kallum

 

No I don't think it should too.

Maybe we should use W3C's recommendation to query media-resolution (http://www.w3.org/TR/css3-mediaqueries/#resolution). I am not sure though about 2 things:

1. which browsers have implemented this W3C thing, and thus could vastly detect device resolutions? Maybe that's why this (min/max)-resolution isn't so popular as the (min/max)-width, and (min/max)-device-width.
2. whether that DPI(dots per inch) is the same as PPI(pixels per inch) ?

 

That seems like the way to go.

Regarding point 2:
I always though the logical way to calculate a DPI or PPI was the amount of dots/pixels in a square inch but it seems now the standard is the amount of vertical lines in inch (the number of pixels in a horizontal inch). As far as I know, DPI refers to printing or screen whereas PPI can't really apply to print as there are no pixels on a page. so the terms are interchangeable when talking about screens.
If someone knows differently please let us know

And on point 1:
That's going to be a big issue. That, and the amount of different queries that are going to come into play.

 

What you are missing is that browsers and OS 'lie' about DPI all the time. Most browsers on desktop 'pretend' EVERYTHING is 96dpi, but Windows at the OS level can set 120dpi, 144dpi, or just about anything you desire... some big iron *nix say either 75 or 100dpi, and the browsers that actually care about accessibility (which at this point is Opera and... uhm... yeah) pick up on that automatically... You can also set in most any browser the default font-size, changing that number as well -- you tell Firefox to use 20px fonts by default, you get the same behavior as Opera on Windows at 120dpi -- which is WHY you're supposed to design using %/em, so fonts on your page auto-enlarge (or even auto-shrink) to the users preference without them having to dive for the zoom. (Or saying "screw it" and bouncing to some other site when they try to zoom and your page breaks or doesn't fit the screen)

What does this have to do with your question? Since systems already lie about DPI, on mobile they've up and decided to lie about resolution too. By default if you don't use the viewport META (and the scaling CSS for Safari and IE) the majority of mobile browsers 'lie' and claim to be 800px wide, regardless of the device size. You add this:

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

Code (markup):

... and on older iOS and Droid devices you'll get the actual physical resolution; but on newer devices -- like the retina display iOS devices it reports HALF the physical resolution. Images are doubled in size, while fonts and CSS3 effects are rendered using the fully available resolution.

Mind you, you'll still be given fits on trying to declare font sizes in IE9 and Safari on mobile, which is why you'll also want to add something like this:

@media (max-width:640px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

Code (markup):

You want it in that small screen query as if you send that to desktop browsers Safari and Chrome will refuse to let the user zoom the page. (which is REALLY stupid)

It's not exactly a great solution, lying about what a pixel is, but it's the one the industry has agreed upon.