Set up your public website for mobile users

Note: Note: The SharePoint Online Public Website information in this article applies only if your organization purchased Office 365 prior to March 9, 2015. If you purchased Office 365 after March 9, 2015, use an Office 365 website hosting partner. For more info see Information about changes to the SharePoint Online Public Website feature in Office 365.

By default, your Office 365 public website is set up to display the same way on mobile devices as on a full-sized monitor, so phone and tablet users may have to do a lot of scrolling. However, you can change this with a pre-built mobile master page. Master pages provide a common navigation structure for all pages on your site. You can select a default master page and a master page to be used just when users view the site from a mobile device.

As soon as you change the mobile master page, people using mobile browsers will get a view that works for smaller screens:

Sample public website showing drop-down arrow for navigation and text that wraps on a small screen.

You’ll see two major differences: navigation is done as a drop-down list, and lines wrap to fit on the smaller screen.

The mobile master page is automatically applied to all pages in your website, so there’s no need to republish. It works with any theme. There is no separate URL: when people go to any page using a larger screen, they see one view of the site, and when people use a small screen, they see the new mobile view.

Add a mobile master page

  1. Go to Sites > Public Site, and then in your public website, click Settings Settings: update your profile, install software and connect it to the cloud .

  2. Select Site settings.

  3. In the Look and Feel section, select Master page.

  4. In the Any Mobile Device box, select any of the mobile master pages:
    Use one of the master pages that includes mobile in its name.

    Note:  The four default mobile master pages provide the same layout, so you can use any of them.

  5. Click OK.

  6. Click Home to return to the home page of your site.

  7. To preview your page as it would look on a device, on the Page menu, select Preview, and then select Any Mobile Device.
    The Page menu, showing the Preview on Any Mobile Device option

    Important:  If your browser blocks pop-ups, you’ll see a message “Internet Explorer blocked a pop-up.” Click Allow Once, click Retry, and then the preview opens in a new window.

  8. Drag a corner of the preview window in to make the preview browser window smaller, so it matches what you see on a mobile phone or tablet.

Need to customize the mobile layout?

If you create a new master page for your website, you may also want to create a new master page for the mobile view. For more information about creating master pages, see Use Design Manager with your Public Website in Office 365.

Learn more

To learn more about customizing your website and pages, see Public Website help for Office 365.

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!

×