Two Related Responsive Design Questions

HTML & CSS
1

Two Related Responsive Design Questions

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 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?
2

No.

Emulators are better than nothing, but for 100% accuracy testing should be done using the actual devices.

Also, don’t confuse resolution with view-port dimensions.
AFAIK, some devices even allow users to set custom resolutions.

Too many possible devices to test for them all?
Exactly.
If you are designing for devices you going down a very difficult, if not altogether impossible path.

As @RyanReese is fond of saying, “fluid design with a few break-points”. Or something like that.

1 Like
3

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.

  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.

  1. 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.

  1. 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)?
4

The breakpoints should be dependent on your design and nothing to do with the device (unless you are making an app for one or two specific devices).

At the simplest level design on the desktop and just open and close your browser window slowly**. When the design doesn’t fit or looks awkward then throw in a media query and make it look better.** If you use a fluid design and a few well chosen media queries you cater for all devices for all time and not just the ones you know about today. :smile:

It really is as straight forward as that and you don’t need emulators or devices to do most of the work as you just simply open the browser window on the desktop and that’s the view a device will get depending on how wide it is.

Don’t confuse device resolution with the viewport width as devices map these things differently.

Quirks mode

Similarly, the iPhone 4’s Retina display has a far larger physical pixel density than previous iPhones, and its formal pixel density is 960. Still, it reports 320px for the device-width media query (as well as JavaScript screen.width)

Devices decide the width that things look best at so you just need to ensure that your layout scales up and down nicely and then it will look the best it can on that device.

Of course you do need to check at sometime on the real device or emulator because there are bugs and discrepancies to take care of and of course you may need higher quality images for devices with greater pixel densities but the basics are as mentioned above.

This is where you are going wrong again and what makes a large tablet different for a small laptop and what makes a small tablet different to a large phone. Don’t design for specific devices, leave that world of pain behind and set yourself free from device enslavement.

I design all my responsive sites on the desktop and make them scale up and down nicely and they automatically fit on all devices. The design changes to one, two or three columns at the point the design needs to change and not where I think a device exists.

1 Like
5

Thanks @Mittineague and @PaulOB, 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.

6

Exactly Mitt.

Your website should essentially just be fluid. Not many widths set, at all. If you notice something breaks along hte way as you resize your browser, then sure go make a query for that, assuming, of course, it warrants one (don’t mistake poor code + a query needed, for the right way of doing things.)

Great examples of when to use a media query:

  1. You need to collapse columns into single columns. E.g. 3 columns mash into 1 (think table-cell to block).
  2. Beginning hamburger navigation
  3. Loads others :wink: .
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.