css - Responsive web design is based on screen resolution or screen size?

For mobile devices the resolution is actually big, only screen size is small. based on that:

• For websites design, do we target screen resolution (e.g 1920x1080)?


• And for mobile apps. do we target the screen size?

Answer

First, thank you all for the answers and precious guidelines, it sure helped!

Allow me to add my conclusion:

Practically, targeting mobile screen resolution is not a good UX, the resolution is too high for the small screen, fonts will be too small to read, icons will be too small to click, etc.

So, it's better to make the design based on the actual viewport size! This way it's based on what a user can see and feel.

To achieve that in real life, we should add a viewport width meta tag inside the of HTML documents:

This tells the browser to render the page with a width equal to the screen width so it makes sure that the HTML page width equals the screen width in terms of pixels. Development then can be easily planned with media queries targeting different mobile viewport sizes (which are kinda close to each other), and will produce more visually clear elements.

Please correct me if I am wrong.

---

Update:

Based on my humble experience I suggest the below steps for better responsive website development:

1- use view-port meta (see top), it will also boost the ranking of the webpage in mobile search results according to google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html

After testing, it appears that adding view-port meta alone will give your website grades in mobile testing tools https://developers.google.com/speed/pagespeed/insights/

2- you might want to consider applying mobile-first approach, it is always easier to go bigger than smaller (depends on how complex your website is)

3- Apply a hybrid responsive system, a mix between adaptive (fluid) and responsive (css media-queries), to accomplish this:

• 
  

  Use percentage for width and horizontal margins/ paddings. (vertical margins can have fixed pixel size if you like.. scrolling is not an issue anymore)

  
  


• 
  

  Use em for fonts, this way when you change the font size for the body (or html) in media-query all CSS elements will adapt to that size, using px will make it a nightmare because you have to go for each CSS class and change its font size.

  
  



• 
  

  Float div's to the left so they align correctly to available space (or right if your design require so).

  
  

4- Define the break points, use a responsive testing tool for that. I use firefox responsive design view, simply narrow the width until you reach the point where the website become faulty (e.g. 500px), that is a break point mark it down.

Apply the new CSS rules inside the media query for that break point (500px),

5- remember to preserve website quality and clarity! if elements becomes unclear and too close to each other, then expand elements width to occupy container width and make them stack vertically,

and remember to give a new font-size for the body so all sub-elements inherit a bigger font and become more readable.

6- Repeat the responsive test and define your second break point, Most likely you will not get many break points because we are using fluid design here and that is where using percentage's will payback!

I worked on a big website with heavy design elements before and it only required 2 media queries :)

Hope that will help