The Oak Mobile app is the easiest way to keep your frontline teams connected wherever they are. Before your people start tapping away, you will want to make sure your desktop homepages look great on a smaller screen.
Getting your layout looking sleek is simple using the Mobile Designer. Even if you are not actively pushing the app right now, keep in mind that if device pairing is turned on, anyone can download it and log in whenever they want. Both the standard Oak app, available on the App Store and Google Play, and the custom white-label version get the exact same mobile optimisation treatment.
This guide will walk you through optimising your homepages for the mobile experience, alongside important considerations and top tips for a smooth launch.
This guide covers:
Before you start:
- You will need to be assigned as a Homepage Manager in the area(s) you will optimising homepages.
- It is always helpful to know how access is currently set up. To check how many devices are paired or if overall pairing access has been enabled, a System Manager can head to Site Settings > Devices. Here, you will see a toggle that allows people to connect, along with the total number of currently paired users and devices. To manage device access permissions, navigate to the permissions at the main business level and head over to Devices to assign device access.
Optimising homepages using the Mobile Designer
-
Go to the page options (3 vertical dots) in the top-right corner of your homepage and select Edit this homepage.
-
Find the pencil toolbox and hover over it to reveal a mobile icon. Click this to open the Mobile Designer.
-
The Mobile Designer shows a preview of the homepage on mobile and all the applets that have been added, including applets hidden from desktop view. If the homepage has not been optimised for mobile in the past, all of the applets will sit individually in the mobile ribbon along the top of the screen.
Top tip: Ensure applets have meaningful and unique titles to make optimisation simpler. To update the names and icons, return back to the desktop page and edit the applet.
-
Use the arrows next to the preview to scroll between the different pages, or select the different applets/applet groups in the ribbon to view.
-
Start building your mobile experience by grouping applets together into pages. Click and hold down on an applet, then drag and drop it onto another applet to create a new applet group. If you want to add an applet to an existing group, just drag and drop it right into the group.
Top tip: On the app, swipe across the top ribbon to see all your applet groups. To keep things easy to find on all device sizes, we recommend sticking to a maximum of 5–6 groups.
-
Edit the name of the group by hovering over it and clicking the cogwheel icon. Provide the group with a name and an icon.
Note: Icons are not visible on the main homepage of the mobile app, however they are visible on child-area homepages.
-
Re-arrange the order that the applet shows on the page by holding down the arrows and dragging up/down, followed by dropping. To remove any applets from the group, click on the X icon to the right of the applet, or select Delete Group. This only removes the applet from the group and does not delete applets.
-
Select Confirm to save the applet group/page.
-
Change the order of the applet groups/pages by dragging and dropping in the ribbon.
-
In some cases, you'll need to have a mobile-specific version of a desktop applet. For example, you may have a list of links in the desktop version of your homepage that is shown as a set of Image Buttons. An alternative version could include the same links, however displayed as Menu Buttons, to ensure they load quicker and take up less screen space.
You can create two versions of an applet and have one visible to desktop users, and the other visible to mobile users. Hover over the individual applet and select the eye icon above to hide it from the mobile experience only. Groups cannot be hidden; instead, delete the group and hide the individual applets.
- Once you're happy with your mobile view, click the X in the top-right corner to save the optimisation changes. Publish the homepage in order to retain the changes, which will immediately show on the app.
Considerations, tips & guidance
There's a few things to be aware of when optimising for mobile.
Keep it simple: Limit heavy imagery and decorative applets (like banners or news carousels) that slow loading and eat up screen space.
Format custom HTML: Set the width of custom content to percentages (e.g.,
100%via Tools > Source Code) to prevent cropping.Resize images dynamically in content: Use percentages instead of pixel dimensions in media options so images scale smoothly across screens.
Check Hubs: Hubs are naturally optimised for mobile, however we recommend ensuring applets appear above the default Timeline.
Set up the navigation bar: Enable key features like Aria, Moments, and Hubs (Actions > Site Settings > Devices > Navigation Bar).
Test before launch: Preview the app yourself, recruit beta testers, or contact your Account Manager for a review.