Improving UX For Large-screen Mobile Devices

#Design | Posted

Over the past two years, smartphone screen sizes have been getting increasingly larger. Larger screens mean more real estate for a hand or thumb to cover, and if you own or have used one of these devices before, you’ve likely had the uncomfortable experience of having to adjust your grip or strain your thumb to reach key functionality.

A study by Steve Hoober notes that 50% of smartphone users prefer to do so one-handed, while 75% rely solely on their thumb to interact. This is a significant group of people we should be considering when designing for the web. One way to serve these people is to reposition common actions, like navigation, that they frequently need to access.

Media queries are the standard method of delivering optimized CSS to devices based on their screen width, but media queries can also be used in the same way based on screen height. Trent Walton has written on how to use this technique to optimize font sizes and Apple uses them to maintain art direction on their page for the Mac Pro (though I don’t endorse the scroll-jacking).

So how will these vertical media queries help us improve usability for large-screen smartphones? Let’s take a look at a fairly standard menu on small device-widths.

UX Large-screen mobile devices


Tapping “Menu” expands our menu and presents the user with our primary navigation option. Typically these are positioned in the top left or top right of the screen. However, this is a cumbersome target to reach if your smartphone has a large screen. Your thumb needs to stretch all the way to the top of the device, which is uncomfortable if you’re only operating it in one hand. We can use a combination of both device-width and device-height to alter the position of a standard mobile navigation element for users who are accessing our site on large screen smartphones.

  1. @media screen and (min-width: 320px) and (min-height:465px) and (max-width:767px) {
  3. }

What we’re saying here is to apply our large-screen-specific CSS only if the screen size is between 320px - 767px, but also if the height is greater than 650px. This allows us to detect small devices with taller screens and move the navigation to a more accessible spot of the viewport for the people using those devices by arranging it closer to their thumb.

UX Large-screen mobile devices_2


What you choose for the screen size values can vary depending on testing, your project, and your user base, but the purpose is to switch positions of the navigation once it becomes uncomfortable for the user to reach it at the top. Instead of forcing the user to adjust grip on their device or to use a second hand, we’re moving the primary nav closer to their reach.

For full code and a live demo, check out the CodePen. Want some more Phase2 mobile UX goodness? Check out Brad Wade's blogpost on the Department of Energy's responsive website!