HI, I’m trying to customise a responsive WordPress theme at the moment and I’ve come up against a couple of issues that are really making my head spin.

Firstly, I’m using Adobe Illustrator to design/layout my site. Having viewed a few Lynda tutorials, I decided to create separate Illustrator artboards for individual device types (phone, tablet, laptop and desktop). As per the tutorials, I created each artboard using the pixel dimensions of a specific or generic device. The problem is that most mobile devices have higher screen resolutions than desktop computers. This means that in real terms, when looking at the Retina iPad artboard in Illustrator, it appears almost as large as the desktop artboard. Everything is out of scale.

Now, while this is fine if I want to export assets directly out of Illustrator, if I want to see the actual physical size that an element will display on its target device, or compare the scale of individual layouts, this is really not great.

1. Ideally I’d like to be able to to hit 100% in Illustrator and see all of the devices/artboards displayed on screen at their actual physical dimensions. (I can always scale up any vector assets later). Is this possible?
   
2. Is there’s a way that I can use the pixel dimensions and the resolution of a device to calculate the actual physical dimensions?
   

Secondly, this theme has a breakpoint of 767px, below which it rearranges it’s layout (single column) for mobile phones.

Now, when previewing my design using Responsive Design View in FireFox or Responsive Web Design Tester in Chrome, I can enter the pixel dimensions for, say, an iPhone 5 (640×1136), and it will display a preview in my browser.

Because my iMac has a much lower resolution than my iPhone, the preview displays much larger than an actual physical iPhone screen. Not very useful.

Because the pixel dimension are substantially larger than the Media Query that targets phones, the phone layout is not triggered. Even less useful.

However, when I view the site on my actual iPhone, it displays perfectly.

1. Question: Am I going mad?
   

The pixel density doesn't matter, an iPhone 5 has a screen width of 320px, even though it has double pixel density. You dont want your designs to be based on actual devices, there are many many devices of all different sizes and shapes, your design has to work in all of them.

This is one reason to get things into code as soon as possible. Yes it's great using graphics programmes to produce some mock ups but at the end of the day they're really just that.

Surely screen density does matter when it comes to the resolution of photos and other non-scalable assets. I’ve seen a lot of companies update their iPad games and label them “Retina Ready”. I assumed this meant that although the screen size of the iPad had not markedly changed, the resolution of bitmap graphics had been doubled.

 

Yes, I'm starting to realise that it's not possible to design for every individual device, but surely we have to put the break-point somewhere. At some point 4 columns must become 2, and two columns must become 1.

 

• If resolution is separate from view-port dimension, does that mean that dimension is measured using some kind of constant pixel unit rather than actual pixels (of whatever size)?

 

When I search the web for the screen size of an iPhone 5, I'm presented with (640×1136)px. So the iPhone has 640 tiny Retina pixels across it's screen, but these aren't the pixels that we measure the screen dimensions with.

 

• How do we work out the screen dimensions of a viewport if we're only given the actual pixels?

 

I understand that responsive design should be viewed as a continuum spanning an ever increasing variety of view-port sizes. But graphics programs don't allow for resizing so surely we need to nail it down to a few generic sizes.

 

• If you were designing a layout that had four columns for desktop - two columns for tablet (portrait) - and one column for phone, which three screen dimensions would you set up in Photoshop or Illustrator (or Sketch)?

Edited May 9, 201511 yr by nomis

Have a look at http://www.mydevice.io/devices/ - this shows you physical size vs display/device widths (referred to as CSS width) for a small selection of common devices.

 

How do we work out the screen dimensions of a viewport if we're only given the actual pixels?

 

You really need to be thinking in terms of fluid % widths so your content adapts for any screen size, whether that's a width of 320px, 375, 480, 640,800,1024 and so on.

 

I understand that responsive design should be viewed as a continuum spanning an ever increasing variety of view-port sizes. But graphics programs don't allow for resizing so surely we need to nail it down to a few generic sizes.

 

Graphics programmes produce images, and images are always a fixed size. They're fine for producing mockups, but really all you're doing is creating a general look and feel which need to be ported into HTML and CSS. I know a few designers who produce mockups at 320px (phone), 768px (tablet portrait), 1024px (tablet landscape) and a larger one to cover general bases. That's a lot of work and why more designers are switching to methods like http://styletil.es/ that don't constrain you to image widths.

 

If you were designing a layout that had four columns for desktop - two columns for tablet (portrait) - and one column for phone, which three screen dimensions would you set up in Photoshop or Illustrator (or Sketch)?

 

I'd probably use 320, 768, 1024 and the largest width, it really depends on the content which should dictate where the "breakpoints" occur anyway so it needs testing in a browser to see what actually works best.

Thanks rbrtsmith and BlueDreamer, you've really helped me clarify the situation. You see I was was originally trained as a graphic (print) designer, but you've made me realise that I can't really think in those terms anymore.

No problem. Print and web design are really two very different disciplines. With print you work to a fixed canvas and can largely dictate how things appear - with the web you can only suggest how things appear because browser users can change things like fonts/text size, even colours and layout, via their own local CSS or browser settings.