Our second stop on your Journey bring us to the mobile view for the platform. Your platform is already available in mobile view, so we will show you how to design yours and detail our features specific to the mobile experience.
When browsing the community using a phone or table, people can use the mobile view of the platform. This is an optimized version that looks very much like an app, but it runs in the browser of the phone.
The mobile view is designed for the members of the platform. This means that community manager’s functionality (i.e. showing scheduled/draft/expired items) is not available in the mobile view. However you can always switch to the desktop view on your mobile phone by using the link in the menu.
Of course, we want you to be able to design your mobile view just as easily as you can design your platform, so we created the mobile template for you to adjust as desired.
- Go to your platform Admin section and choose Design.
- Select Mobile Template.
- You can change the Menu Background Color, Menu Text Color, and Platform Color.
- You can also select a Background Image, Header Image, and Logo Image, as well as an Android Icon and an iOS Icon.
Tip: Check out the question mark tooltip to see which image sizes are recommended and use the preview to see how it will look on different pages.
Things to keep in mind
1. Pay special attention when using custom pages
If you’re styling a custom page with HTML you want it to look good for both the desktop view and mobile view. Therefore, there are two text areas where you can add content to the custom page:
- Mobile Message
If you want to make sure that it looks good in both views, you really need to add the content to both text areas. If you’re not adding custom styling with HTML, then you should still copy paste the text in both options.
2. Mobile View has its own page configuration in the admin section
Since the blocks in page configuration for the mobile view is different than the one on the desktop view, we created a special page for the page configuration for mobile view.
3. Pay special attention to language overrides
If you’re using language overrides, do not forget to change the text for the mobile view since these might be different than the texts in desktop view.
Add to phone/tablet home screen:
On most of the mobile devices, a member can add the link of the platform to the home screen via a browser. These icons will display that link as if it is an app on the device.
How to do this for Android devices:
Chrome: Launch Chrome for Android and open the website or web page you want to add to your home screen. Tap the menu button and tap ‘Add to Home Screen’. You’ll be able to enter a name for the shortcut and that’s it.
Firefox: Firefox for Android can do this if you tap the menu button, tap the ‘Page’ option, and tap ‘Add to Home Screen’.
How to do this for iPhone, iPad, & iPod Touch
Launch the Safari browser on Apple’s iOS and navigate to the website or web page you want to add to your home screen. Tap the ‘Share’ button on the browser’s toolbar: that’s the rectangle with an arrow pointing upward. Tap the ‘Add to Home Screen’ icon in the Share menu.
If your project will run most of the time on mobile devices, then you might also like to know more about Push Notifications.
Supported devices and browsers
The mobile view works on the following operating systems and browsers: Android 4+ and iOS 7+, Chrome, Mozilla Firefox, Opera, Android Browser or Safari in a version no older than 6 months prior to the date of latest platform update.
You can find other articles about front-end customization here.