Mobile Web Design Adaptations for Better UX

Chloe Zou
Chloe Zou
Jul 10, 2017 · 2 min read

The number of mobile internet users has far surpassed the number of desktop users, eliminating the question of whether or not websites need to be adapted to devices of varying sizes — they have to.

You don’t get to decide which device people use to access your website. But how do you decide how each page should change at each break point? Is it acceptable to squeeze your content through a funnel and hope it comes out looking responsively optimized, or should you step back and take a more calculated approach?

Using a tool like Safari’s responsive mode or similar tools in other browsers can help you to easily switch between breakpoints to test and optimize each breakpoint appropriately. In order to help you make these decisions about your own breakpoint modifications, here are a few elements we commonly adapt in order to better fit our mobile sites.

Adapting Your Content to a Smaller Space

In general, mobile sites should have all the content and power of the desktop site, but we sometimes make the decision to hide photos or illustrations when the main content is textual, particularly in cases where the imagery’s original purpose was to provide visual balance. These are a few of the content elements we choose to alter when adapting to a smaller screen size.

In Western Society, we read top to bottom, left to right. When shrinking down the content to fit a smaller screen size, we keep this in mind, making sure to preserve the important stuff at the top, while pushing the rest down according to hierarchy.

Click here to read more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade