It’s important to keep a consistent UI across multiple devices & platforms. This ensures that wherever a user visits your site from, the experience is smooth and functional. There are many methods to ensure that individual modules adapt to the device they are being displayed on while keeping the same functionality and consistency.
Here are some examples of how common elements can be manipulated for a consistent UI across every device:
Sidebars: Sidebars are commonly used on archive or product listing pages and can contain filters, search bars, categories, toggle sliders and many other components. When scaling down to mobile these can be stacked and contained above the content it is being used to filter, it can also be hidden with small handles on the right and left to slide them in & out, this way the functionality of the sidebar is there, but it doesn’t interrupt the content that the user wants to see.
Menus: A common method of keeping a menu tidy across multiple devices is to turn it into a dropdown, keeping the main section showing so the user can identify it is a menu while keeping the options hidden, normally with a “+” & “-“ to toggle the state.
Side tabs: Side tabs on desktop sites are now relatively common and normally contain CTA’s for calling or emailing. Similar with sidebars these can be hidden with small handles to show them or removed altogether on smaller devices where it can be intrusive.
Stacking: This may seem like a relatively obvious point, however, there is a fine art to stacking as it means managing the order of content between devices. For example, two sections on top of each other containing an image and a text on opposite sides could lead to two images being on top of each other on smaller screens, this order would need to be modified for the flow of the page to remain consistent.
If you need a hand with improving your websites UI, please Get in touch!
Back to news