How to create a mobile website with adobe muse

1. Click outside of the Links dialog to close it.

Next, you’ll add the content of the Section 03 page.

1. Click the Scratch tab (Desktop) to return to the Scratch page. Select the white rounded background rectangle, the purple circle 03, the Section 03 text frame, the contact form, and the Submit button. Copy the selected items.
2. Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 03. Click the down arrow key to select the page of Section 03 phone, and then press Return/Enter to open it in Design view.
3. Paste the elements you copied in step 1 into the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. Styles applied to the desktop contact form widget are retained when copied to the phone layout. The only change made to prepare the form for a mobile layout is to resize the form and form elements to fit on a smaller screen.

The Section 03 page contains a Contact form widget that uses the Business Catalyst server-side database and scripts to process submitted form data. When you click Publish and upload the site files from Muse, the form functionality works automatically.

Note: While you can use other service providers to host your website of finished Muse, please note that you will need to do some additional coding for contact forms to work if they are not hosted on Business Catalyst servers.

In this sample project, the contact form does not have CAPTCHA enabled. CAPTCHA is a setting in the Options menu for contact form widgets that you can add when you want to confirm that the form was submitted by a human, and not by a script or “spam bot”: the CAPTCHA interface displays an image with a series of characters that require the visitor to type the corresponding string in order to successfully send their message through the form. While form submissions from spam bots can be a hassle, it’s also important to consider the site’s ease of use on a mobile phone. If you make the form too difficult to complete, visitors may decide not to send your message.

The Section 03 page is now complete. There is no need to add a link to the Submit button, because the button is already configured as part of the contact form widget.

The final page of the phone layout, Section 04, contains a submission widget for slideshow. Widgets in Muse are designed and tested to work with all modern desktop and mobile browsers, so you don’t need to change anything to make your slideshow work on a touch screen.

Follow these steps to copy the content from the scratch page on the desktop layout to the Section 04 page on the phone layout:

1. Click the Scratch (Desktop) tab to return to the Scratch page Scratch. Select the long white background rectangle, the red circle 04, the Slideshow widget, and the Section 04 text frame. You can use the Pick tool to click and drag over all the items to select them at once. Copy the selected items.
2. Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 04. Click the down arrow key to select the page of Section 04 phone, and then press Return/Enter to open it in Design view.
3. Paste the elements you copied in step 1 into the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. Styles applied to the desktop contact form widget are retained when copied to the phone layout. The only change made to prepare the form for a mobile layout is to resize the form and form elements to fit on a smaller screen. When you add widgets with interactive features (such as slideshow widgets) to the mobile layouts you create in Muse, you’ll notice that the Options panel includes the option: Enable Swipe. This setting is enabled by default, so any widgets you add to your mobile layouts are automatically configured to allow visitors to tap and use gestures on touch screens. The Section 04 page contains a slideshow widget that displays the corresponding image when a thumbnail is tapped. . The slideshow is set up to use a horizontal transition to move from one image to another in the gallery. This example requires user interaction to display the photos, although if you want you can set the Slideshow widget to autoplay so that it automatically cycles through the images when the page loads.

Note: If you configure slideshow widgets to use the Fade, Horizontal, or Vertical transitions, the Muse code automatically enables the Swipe gesture to allow visitors to swipe the slider. touchscreen to flip through the slideshow images.

In the next section, Creating Mobile Design Layouts in Muse, you’ll learn how to easily update assets across all mobile platforms and how to publish your Muse site for each mobile design.

.