Mobile UX design for content heavy websites
As more and more websites adopt a responsive design, UX designers need to think more about how content heavy websites will convert to mobile. What is the best way to display all this important information on a small screen, so it is still easy to navigate and read? Below are a few tips for some great content design for mobile.
Nothing wrong with long
A standard practise with responsive design is to stack content on top of itself when viewing on mobile, resulting in long pages. As users are used to scrolling up and down on mobiles don’t worry if the pages become long. Users are more likely to scroll on a mobile or tablet than a desktop.
Swipe both ways
Use horizontally scrolling in your design as well. It can be used to allow a user to move through featured or more detailed content such as a gallery of photos, suggested products on an eCommerce site etc.
Make the navigation stick
Lock the navigation in place so it is always visible no matter where a user scrolls on the page. This increases the speed in which a user can browse the site. Generally a simple header with a logo, menu and search option is fairly standard. You can also lock a simple footer in place with additional navigation if needed.
Hide then show
Mobile screens are small. No matter how technology advances we will still be limited by the size of the mobile device. Heavy content sites suffer with a small screen size so we have to be smart how we display information. Think about hiding content into collapsible sections each with a selectable title that reveals the content. If you are displaying results or a list of items limit the amount shown and give the option to the user to view more. Or not.
Keep the pictures
Don’t remove images just because the site is being viewed over mobile. Images are just as useful on mobiles for enhancing content and also provide large areas for a ‘fat fingered’ user to select to navigate to other areas of the site. Increased bandwidth over mobile networks means faster download times so removing images isn’t necessary.
View both ways
Because mobiles and tablets can be used in both portrait and landscape we should design for both views. This can mean a different layout for each view, or simply ensuring that the content expands to the width of a landscape view or contracts to the width of a portrait view without losing any usability.
