Mobile Web Design Adaptations for Better UX
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.

…
