When starting a\u00a0mobile website project, first determine\u00a0how many web pages you will need to build for use on mobile devices. If there will only be a few ‘mobile’ pages, you can include them in the EverWeb Project file that contains your website’s desktop pages. If you envisage having a large number of mobile pages you may find it easier to use\u00a0two separate Project files, one for desktop pages and one for mobile pages, to make management of the website and its content easier. Project files containing a large number of pages can become unwieldy to use so breaking it up in to smaller pieces may be advantageous to your workflow.<\/p>\n
If you are\u00a0using two Project files, remember that you can have both of them open at the same time making content\u00a0management between \u00a0desktop and mobile pages relatively easy.<\/p>\n
In this example, we are going to use EverWeb\u2019s built in \u2018Restaurant\u2019 theme templates to create desktop and mobile pages. The restaurant website only has a few pages, so the desktop and mobile pages will be built\u00a0in one Project file.<\/p>\n
To begin with, create a new website Project file if you have not done so already. The first page to add will be the restaurant\u2019s desktop \u2018Home\u2019 page. To do this, click on the \u2018Add Page\u2019 button in theToolbar. Select the \u2018Home\u2019 page style of the ‘Restaurant’ theme.<\/p>\n
Once you have created the desktop ‘Home’ page, next create the mobile page counterpart. Again, use the \u2018Add Page\u2019 button, this time selecting the \u2018Mobile\u2019 page style ‘Restaurant’ theme.<\/p>\n
With the mobile and desktop \u2018Home\u2019 template pages added, let\u2019s take a moment to compare the two page styles. The desktop page is horizontal in layout with a page Content Width of 800, whilst the mobile page Content Width is 480. Therefore, each page style matches the environment it is intended for. The desktop layout is\u00a0used for desktop computers, laptops and tablets, the mobile layout for mobile phones.<\/p>\n
<\/p>\n
![\"grill1\"](\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/09\/grill1.png\")
<\/a>The desktop style page has a horizontal layout and allows for more content than its mobile counterpart.<\/p><\/div>\n
<\/p>\n
<\/a>The mobile page format is a one column vertical layout with plenty of space on each side for scrolling up and down the page .<\/p><\/div>\n
<\/p>\n
The desktop page has much more content than its mobile counterpart. The mobile page has been stripped down to just the essentials. Non essential text and graphics\u00a0seen on the desktop site have been removed. This helps the mobile page load faster and avoids cluttering up the smaller screen display. The mobile page also space on each side of the page specifically to accommodate easier scrolling up and down the page.<\/p>\n
Furthermore, the \u2018message\u2019 of the desktop page, \u2019Eat to Bite\u2019, is located where the visitor\u2019s eye is usually drawn to – the upper left hand corner of the screen. The \u2018message\u2019 of the mobile home page is also clear –\u00a0\u2018Eat to Bite\u2019, but this time is front and centre, taking advantage of the mobile form factor. The photos highly visible as well to try to tempt you to make a reservation.<\/p>\n
The \u2018Make A Reservation\u2019 button itself is prominent on the mobile page, with the button text large and the font easy to read. The three graphic elements\u00a0below the Contact Form have potential to be used as large buttons linking to other pages as they are easy to use in a touch centric environment.\u00a0The Contact Form itself only a few fields to fill on the mobile page and so will take less time for any visitor to complete. The use of the Contact Form saves visitors from clicking to another page. This is advantageous when your visitor is\u00a0in a poor reception area.<\/p>\n
The Image Gallery is used to show some of the restaurant dishes in preference to text descriptions that could\u00a0be used on the desktop page. When using photos be careful about their file sizes as large photo files will slow page download speeds<\/p>\n
One more thing to note about the mobile page is that it has no navigation menu, whereas the desktop page does. Navigation menus on mobile devices can frustrate users as they can be difficult to use. For mobile devices, go for large hyperlinked buttons, graphics or images that are easier to ‘click’ on with your finger.<\/p>\n
The above\u00a0mobile page strategies outlined above will help keep your visitor on one page. The design helps encourage the visitor to scroll up and down the page, rather than having to load other pages, so keeping your visitor focused!<\/p>\n
<\/p>\n
2 Linking Desktop and Mobile Pages\u2026<\/strong><\/p>\n In our restaurant example, we want to link the desktop \u2018Home’ page with the mobile \u2018Home’ page so that when published you automatically see the desktop page on a desktop device and the mobile page on a mobile device. To set up the linking first select the mobile page. In the Page Settings\u00a0Tab of the Inspector Window, scroll down to the \u2018Mobile Settings\u2019 section. On the left of the section, click on the arrow to\u00a0expand the section contents. Make sure \u2018This page is for mobile devices\u2019 is checked. If it is not, check the box.<\/p>\n <\/p>\n