Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
What an interesting and intriguing idea! I'd love to hear more about this, if you decide to go down this route :) –  surfitscrollit Dec 19 '13 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 '13 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 at 21:30

3 Answers 3

up vote 4 down vote accepted

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.

share|improve this answer
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 '13 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 at 15:19

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."!

share|improve this answer
    
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 '13 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 '13 at 19:29
    
I see, that's interesting. I haven't actually considered that, but will now. Thanks! –  seyelent Dec 16 '13 at 1:00

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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