A Mobile Page is a second, narrow copy of a page, made just for phones. You build it at 480 pixels wide, then link your desktop page to it. When someone opens the desktop page on a phone, EverWeb sends them to the Mobile Page automatically. You keep your desktop design exactly as it is.
When you'd use this
- A guest house built its website in iWeb and likes how it looks. It wants phone visitors to see the prices and a Book button without zooming.
- A plumber wants a one-screen phone version of the home page: phone number, area covered and a contact form.
- A choir wants its concert dates readable on a phone, while the full desktop pages stay as they are.
Mobile Page or Responsive?
Use Mobile Pages if your website is Centered Layout and you're happy with its design. If you're starting again or have many pages, Responsive pages need only one design per page. See Do I need to redesign my EverWeb website for mobile devices?
To check your page type, select a page and go to Inspector > Page Settings > Page Layout. It should say Centered Layout. Don't change the Page Layout of an existing page: it can rearrange your design, and you can't undo it.
1. Add the Mobile Page
- Click Add Page in the toolbar.
- In the Theme Template Chooser, use the filter menu to show only Fixed Width templates, choose your theme and select its Mobile page style. Click Select.
- Rename it so you can tell it apart, for example Home Mobile.
No Mobile style in your theme? Add any Centered Layout page and set Content Width: to 480 in Inspector > Page Settings > Page Layout.
If your pages use a Master Page, give your Mobile Pages their own Master Page at 480 pixels wide. A page takes its width from its Master Page. See Put the same header, menu and footer on every page with a Master Page.
2. Set it up as a phone page
With the Mobile Page selected, go to Inspector > Page Settings:
- In Mobile Settings, leave Mobile Page on None and tick This page is for mobile devices. This tells search engines it's the phone version of your desktop page, not a duplicate.
- Untick Include page in navigation menu, so the Mobile Page doesn't appear in your desktop menu.
3. Add your content
Copy what phone visitors need from the desktop page (Edit > Copy, then Edit > Paste on the Mobile Page), and stack it in one column.
- Keep: your logo, phone number, address, opening hours, the main photo and the buttons people come for.
- Simplify: side-by-side columns, wide tables, long text and decorative pictures.
- Put each paragraph in its own TextBox. One big TextBox causes text to squeeze or overlap on a phone.
- Make buttons big enough to tap, and text larger than on your desktop page.
The menu: add a Navigation Bar, go to Inspector > Widget Settings, and tick Responsive Navigation Bar under Responsive Options. On a 480-pixel page it shows as a menu button (three lines). It lists your desktop pages: when a phone visitor taps one, that page sends them on to its own Mobile Page, if it has one.
4. Link the desktop page to it
- Select the desktop page.
- Go to Inspector > Page Settings > Mobile Settings.
- Set Mobile Page to One of My Pages, then choose the Mobile Page in Page.
Repeat steps 1 to 4 for each page you want on phones. Pages without one still open at desktop width on a phone.
5. Test it, then publish
- Click Preview in the toolbar, choose Preview QR Code, and scan the code with your phone's camera. Your phone and computer must be on the same Wi-Fi. Open the desktop page: it should jump to the Mobile Page.
- Go to File > Publish Entire Site.
- Check it on your phone in a private window.
Only screens narrower than 700 pixels, which means phones, go to the Mobile Page. Tablets and computers see the desktop page.
Password-protected pages
Simple Password protects directories. Keep each page and its Mobile Page on the same side: Mobile Pages for public pages outside the protected directory, and Mobile Pages for protected pages inside it. Otherwise phone visitors are asked for a password on a public page. See Can I password protect my website? Simple Password and Membership Sites
Two pages to keep up to date
Every change to a desktop page, such as new prices or dates, needs making on its Mobile Page too. If that becomes too much, consider Responsive pages.
Common problems
| What you see | What to do |
|---|---|
| A phone still shows the desktop page | Check that page's Mobile Settings points to the right Mobile Page, publish, and check in a private window |
| A phone asks for a password | The Mobile Page is inside a protected directory. Move it out, or point the desktop page elsewhere |
| An iPad shows the desktop page | That's how it works: only phones go to the Mobile Page |
| Something appears on every Mobile Page | It's on the mobile Master Page. Edit or delete it there |
| Text overlaps or squeezes | Put each paragraph in its own TextBox. Minimum Font Size is for Responsive pages, so leave it at 0 here |
Related articles
- My website looks wrong on a phone: how mobile works in EverWeb
- Do I need to redesign my EverWeb website for mobile devices?
- My website looks fine on my computer but is cut off or jumbled on my phone
- Build a responsive page with Containers so it stacks neatly on a phone
- Can I password protect my website? Simple Password and Membership Sites