11

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?
Improve this question
1
  • Don't confuse virtual pixels with real pixels.
    – DA01
    Dec 2, 2015 at 22:58

4 Answers 4

Reset to default
6

Responsive design is based on neither screen resolution nor screen size. Instead, responsive design is based on the content and how it's made which allows it to fit all sizes and resolutions.

The way you're thinking about responsive design is wrong. I assume you're coming from a more conventional print design background, yes? Designing for the web is much more freeing. Responsive websites don't often have the same, conventional breakpoints or specific sizes/resolutions that they are made for because the web allows for more than that - it allows for all screen sizes to be reached. A such, you can design using whatever sizes is right for what you're designing so long as they are reasonable.

With that being said, the best practice is to design in a mobile-first way, which really should be named mobile-most-important. This forces you to focus on the content that is most important and possible and then allows you do add more for bigger screens instead of forcing you to start with more on large screens then remove things when designing for smaller ones. You can read more about this in my responsive design primer.

But we also have to design in ways that allow for responsivity. The best practice of which is a live example, whether in prototype form or in some wireframing program, not a static document like a PSD. When it comes to the developer side, we should be using responsive units and structuring our code in a way that makes sense.

With that being said, you should put things in terms of pixels, meaning resolution, not screen size.

Improve this answer
8
  • Thanks for the answer mate. I am actually a web developer and designer, I tried to make my question short that's why I did not go deep in details and the methods I use. You are right, responsive design has no rules and that what I always tell my team mates in work, but Only recently I noticed that since mobiles has high resolutions, then there is no point to waste our time on coding media queries for 468 px for example? and I should target the resolution, right?
    – Engineeroholic
    Aug 3, 2015 at 16:55
  • Yes, as I mentioned in the last line, you should be more concerned about resolution than the screen size
    – Zach Saucier
    Aug 3, 2015 at 17:46
  • Zach... It is a pitty this is not a debate forum :o) I think totally different. I'll post my answer. ;o)
    – Rafael
    Aug 3, 2015 at 18:15
  • 1
    After a quick research, I found something critical most of developers miss.. if <meta name="viewport" content="width=device-width, initial-scale=1.0> is being used, the browser width will equal device width, thus media queries should be based on screen size not resolution! that makes huge difference that I failed to pay attention to for long time XD
    – Engineeroholic
    Aug 3, 2015 at 18:42
  • @Engineeroholic That's in my responsive design primer that I linked to :)
    – Zach Saucier
    Aug 3, 2015 at 18:46
4

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 <head> of HTML documents:

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

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

Improve this answer
13
  • 2
    If you find an answer helpful you should upvote it so show so
    – Zach Saucier
    Dec 2, 2015 at 21:34
  • You should design for the virtual screen resolution. Screen size is a misnomer as you're not actually designing to specific inch or cm dimensions.
    – DA01
    Dec 2, 2015 at 23:00
  • Furthermore initial scale could be applied to a web page that is huge. It will then just shrink it down to fit which is not responsive.
    – DA01
    Dec 2, 2015 at 23:02
  • @ZachSaucier , I would love to upvote my colleges answers. unfortunately, I can't because my reputation is less than 15! I think this prohibition should be removed.
    – Engineeroholic
    Dec 2, 2015 at 23:11
  • @DA01, yes screen size is misnomer, its just general term. Slangy saying screen size here refer to the screen dimensions in pixels (not as saying screen resolution).
    – Engineeroholic
    Dec 2, 2015 at 23:25
4

Great question indeed!

My confusing long answer: None and both

Just some thoughts here commenting a bit the contradictions we are facing today.

The technology is not what it should have being since ages.

We all should be designing based on real life units (or percived size), with some degree of flexibility and freedom to let the user do some aditional adjustments.

But to know the real life measurements we need both information. Phisical dimensions and Device resolution = pixel density.

But it turns that just some years ago, screen devices are starting to declare the pixel density. And some do not declare it to the server, just make a lot of publicity about it. (Aka Ipad, Iphone)

The display resolution can be detected by the operating system becouse it is imperative to send a signal accordingly, but for screen real life size we need a huge database of each model. Not good.

That leave us with just this screen resolution that it is some info that we can know.

But it is totally different to design for a big FullHD monitor than the same resolution on a mobil device. Both 1920x1080. Ouch.

A special case is that on projectors, becouse we have no clue of the projecting distance and viewers distance.

A partial solution are the media queries, and vector elements, etc.

A short answer

For webdesign: At least untill we find something better.

Fluid design (percentages) and natural flow, well defined sections.

  • 1920 wide

  • with media query probably at 1280

  • and/or at 1024

  • probably at 720

  • and 480.

with device detection for aditional support.

For mobile native apps

As it is very specific, just follow the brand's gidelines, regarding UI and Icons.

Edited.

Why choosing a small screen resolution on a FullHD mobile device?

A smartphone has a real resolution of FullHD but normally it is declaring a small resolution to the server and browser. You can test this googling https://www.google.com/search?q=what+is+my+screen+resolution so the media queries work.

Improve this answer
1
  • what about height? and this is something I encountered today at work where a customer requested responsive website without vertical scroll at all (very weird!), this was a big headache to deal with for all resolutions and will result in too many media queries! eventually I used a mix of fluid design, 1 media query, and CSS trick; where for the first time in my life I did footer with position absolute and bottom=0 to make it stick in bottom for long screens. (where I find it wrong coding) thus, I only used media query for screens shorter than content.. this way I only needed to use 1 query
    – Engineeroholic
    Aug 3, 2015 at 20:15
2

How a responsive page reflows is based on the dimensions of the viewport (not screen) in virtual pixels (not real pixels).

On a traditional desktop where 1 virtual pixel = 1 real pixel, if your browser is set to 1000px in width, then the page will reflow to fit that.

On an iPhone 6, where 1 virtual pixel (Apple calls these points) = 3 real pixels, the browser width is the screen width and the content would reflow to fit the 417px width (even though that is actually 1242 real pixels)

So it is a bit weird, in that with the above examples, the device with the fewer real pixels actually be seen as a wider viewport in a responsive layout.

Improve this answer
3
  • While this is true, I still think the important thing is focusing on the responsive design, not the screen it's viewed on
    – Zach Saucier
    Aug 3, 2015 at 19:27
  • @ZachSaucier umm...I agree? I think? I don't know. It's one and the same, is it not? Responsive design is about accommodating a variety of sizes of viewports. They seem to go hand in hand. It's not responsive if you're not also thinking about the various sizes it will flow into.
    – DA01
    Aug 3, 2015 at 19:37
  • What happened to the last 9px?
    – Janus Bahs Jacquet
    Dec 3, 2015 at 0:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.