6

I am designing a responsive site that supports landscape orientation. My question is specific to button sizes.

Usually on portrait mode, buttons stretch across the screen. For bigger smartphones however, this stretching might not look aesthically pleasing. Should they be allowed to stretch or should they be their own breakpoint?

I was considering treating them as their own breakpoint and not stretching them. They would be treated similar to alignment in tablets. Any thoughts on handling this?

2

One solution would be to set a max-width on the content area. If your application is not designed to fully utilize the extra space in landscape mode it might be best to add extra padding or a max width to the content wrapper itself.

In addition you could also consider setting a max-width on the button for landscape mode if setting a max-width on the content wrapper is not an option.

enter image description here

Best Buy's mobile website is using this technique

0

I don't like stretching buttons either. I think this pattern is left over from the early days of trying to handle a new responsive territory.

Mobile is definitely starting to take over and is here to stay but it is still a relatively new space to design for so expect more changes going forward.

Any design you decide to go with will need to be tested with your mobile users because stretching buttons are certainly more noticeable compared to other options and you want your actions to still be discoverable.

I really like the Google approach to responsive material design which pins universal buttons to the corners that expand as needed to show the most desired actions close to your thumb...

google inbox

0

As a general principle which can help find a solution to this sort of problem, allowing your content and interaction requirements to define when elements break, rather than arbitrary pixel counts or assumed devices is the best.

Applying that principle to this problem I would say that your buttons should have a size defined by two things:

  1. What they contain, so that would be the text call action and any icons etc.
  2. The touchable area required to make them easy to use for people with any level of dexterity.

So, your buttons need not stretch any further than to cover those two points and allowing them to stretch further is not adding anything else useful to the interface and is also detrimental if they become less aesthetically pleasing as a result.

0

Several factors will play a role in the decision.

From a usability standpoint, with regard to Fitts's Law, buttons should be reasonably large and at the edge of the screen to take advantage of the "infinite edge", the idea that a cursor cannot go beyond the bounds of the monitor. In a mobile setting, however, the cursor is your fingertip and moves through three dimensional space so this is less relevant. Properly responsive sites usually only have one dimension of scrolling however, so the underlying ideas of Fitts still holds. If you put a button at the bottom or the top of the screen, in a fixed overlay or in the scrollable portion, the bottom and the top are still the best place, and should at least accommodate a thumb.

From an aesthetic standpoint, you don't want giant buttons taking up the whole screen. With smaller screens its reasonable to have a button of focus stretch horizontally, but as screens increase in horizontal size, beyond a certain width just seems silly and disproportionate. But you still want access from the edge. Often, mobile interaction is carried out with one hand. If the button can't be reached in a one-handed grasp (it's too small and at the center of the screen), then you may frustrate the user.

So maybe proportionate padding is the answer? Padding increases with the size of the screen, but only to a point so the button is still thumb accessible, assuming this is an important button that the user will be seeking out.

(I've done things like this with javascript before, you just need to play around with the equation that determines and sets the padding from screen dimensions.)

  • Just FYI, Fitts' Law concerns time needed to move from one control to the next & the accuracy of such movement with regards to the distance between the controls and their shapes in the plane of movement. The "infinite edge" is a corollary because a control at an edge of the interface has infinite size. – dnbrv Feb 18 '15 at 23:46
0

Portrait mode: stretch buttons across screen to fit

Landscape: pick a side of the screen and make a menu that holds the buttons.

Bonus points if the menu is hide-able.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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