10

I am trying to figure out what the best way to make my site responsive would be. It seems a lot of people base responsive design off screen pixel dimensions, but I feel breakpoints in aspect ratio would lead to the best design for my website.

I just want to know if this is an unusual approach with any potential disadvantages, in any way. Of course, I will still use screen dimensions in order to adjust things like font sizes, but the majority of the css will be re-jigged based on aspect ratio.

I'm just a bit concerned because I don't see this approach talked about much anywhere.

Improve this question
3
  • What an interesting and intriguing idea! I'd love to hear more about this, if you decide to go down this route :)
    – shauneba
    Dec 19, 2013 at 8:54
  • 1
    @surfitscrollit Well I'm going this route right now, and it's working beautifully so far! :) I may write a blog post on it someday if everything works out, at which point I'll add a link here for future reference.
    – seyelent
    Dec 20, 2013 at 17:36
  • @seyelent: I think you are working on the right track. If one wants to develop a web app - especially one - that does not have a vertical scroll - than I do not think there is an option to NOT consider aspect ratio. For example: if I am trying to show a video to a user without him having to scroll down - then I need to know the aspect ratio of the user screen to provide him with a better user experience - no?
    – user43311
    Feb 17, 2014 at 21:30

4 Answers 4

Reset to default
5

I think it's a great idea, and see no reason why you can't implement it. Responsive design is (still) an emerging discipline, and if you manage to show that aspect ratio gives better User Experience than todays viewport width approach, then you may even effect the future path of cross-device and responsive design.

Explore, experiement, implement and test.

Improve this answer
2
  • 1
    Thanks, glad to hear the approach isn't flawed! I'm still using screen sizes to make finer adjustments, but aspect ratios (or ranges of ratios, rather) seem to group the uncountable number of devices best from my perspective. Thanks.
    – seyelent
    Dec 14, 2013 at 23:03
  • Since this was the chosen answer, I think this comment is important: aspect ratio tells you nothing about the size of the device--which is arguably the bigger consideration when it comes to responsive design. I'd be wary of an aspect-ratio solution.
    – DA01
    Mar 1, 2014 at 15:19
10

Strikes me as very problematic. Adapting to a device's width is much more useful than adapting to it's aspect ratio. In most cases you wouldn't want the same layout on a 4 inch (diagonal) device as a 10 inch device, even if they have the same aspect ratio.

Another problematic issue here is that, when dealing with text on the web, it's too hard to control vertical sizing. It's easy to specify width metrics like 40em, but you have very little control over the height of a block of text because you don't know how much about the font height (unless you enforce a specific font size, which is very bad practice - you should allow imperfectly sighted people, like me, to use their preferred font size set in the browser settings). This is simply the nature of horizontally flowing text: one can specify the width but not the height.

But don't let me discourage you from experimenting. As Benny said, "Explore, experiment, implement and test."!

Improve this answer
3
  • Wonderful advice, thank you. I actually think it depends a lot on the layout itself, and do keep in mind that I am using a combination of both approaches (just using aspect ratios won't cut it). For font sizes, I have a base font size as a percentage in the css for ''body'', and all font sizes are percentages of that base. So I just change the body font-size, and everything follows after. Is that alright?
    – seyelent
    Dec 15, 2013 at 17:43
  • 1
    @seyelent - You're right it does depend on the layout, what I said applies to most layouts but not necessarily all. Re fonts, it sounds correct to me. What I was getting at is that the user can specify in browser settings to use a larger/smaller font size, so you (the designer) won't really know what the actual font size will be.
    – obelia
    Dec 15, 2013 at 19:29
  • I see, that's interesting. I haven't actually considered that, but will now. Thanks!
    – seyelent
    Dec 16, 2013 at 1:00
1

any potential disadvantages

The primary potential disadvantage is that the aspect ratio provides you with no indication of the size of a device they are using...which is one of the purposes of a responsive solution.

I may have a 30" monitor with the same aspect ratio as my phone. But you likely wouldn't want to present the same UI on both.

Improve this answer
0

I don't think any increase or reduction in the number of breakpoints would be achieved using aspect-ratio. So no disadvantages and the advantage is only if it makes more sense to you while developing. It is a less used approach but not a bad one as long as you couple it, as you mentioned, with a screen pixel-size. The pixel size would be used to render a different layout for small devices (e.g. watches) than could potentially match a given aspect-ratio for a large device. So the width + aspect-ratio pattern is similar to the width + height pattern of breakpoints most commonly used.

It would be nice to have a standard that uses visual-angle of a device's screen. A watch could one day have as many pixels and the same aspect-ratio as a phone but the visual angle (how much of the user's field of view) it *generally uses would greatly help determine the correct layout. So a watch would have a much lower visual-angle value...

Improve this answer

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.