Design Is Fun demo asset
Using Muse, you can create site layouts for web content to be displayed on desktop, smartphones, and tablets. Using the mobile design features, you can create alternate layouts for phones and tablets as well as desktop experiences. Muse includes helpful settings, such as 100% width items and the Sticky Footer functionality, to ensure that your design displays well on the multitude of device screens on the market today. Muse enables you to use familiar workflows to create immersive designs for every possible screen dimension.
Alternate layouts are important because desktop sites contain a lot of information, usually much more than needed for a smartphone site. When you create a new site in Muse (by clicking Create New > Site in the Welcome screen or choosing File > New Site), the New Site dialog box contains a menu that allows you to select the initial layout (see Figure 1).
Figure 1. Use the initial layout menu to choose between Desktop, Tablet, and Phone.
When you are starting a new project from scratch, you can choose to design any of the layouts first, and then create additional layouts, all within the same .Muse file. When you publish or export a site, Muse automatically generates a file named sitemap.xml that contains a list of all pages, for all layouts. The sitemap.xml file is uploaded along with the other site assets. It improves a site's Search Engine Optimization (SEO) by helping search engines index the site, so that pages are accurately ranked in search results.
For the purposes of this tutorial, you'll take a look at working with an existing site design created for desktop browsers and see how to create a new layout designed for smartphones.
The sample project we'll use for this article is a fictitious website called Design is Fun. As you follow along, you can check out the live example of the site in a browser.
Reviewing the existing layout
Take a moment to check out the desktop layout of the Design is Fun site in a browser.
The Home page displays large banner image in the header, with three numbered sections lined up in a row below. The section labeled 01 serves as an About page that includes information about the business and a phone button. The section labeled 02 contains an interactive Google map, created with embedded HTML code. The section labeled 03 contains a contact form to send messages.
If you scroll down, a fourth section labeled 04 contains a thumbnail-based slideshow that displays a photo gallery of images.
In a real-word website example, a desktop site may contain many additional pages with text and image content that may not be applicable to visitors using a handset. Before creating a mobile layout from an existing desktop design, spend some time imagining the use cases for mobile visitors. Be aware that if you try to display all of that desktop content on a small device, it can become unmanageable and difficult for visitors to navigate. One of the skills you gain as you begin designing sites for tablets and smartphones is the ability to convey useful information that is easy to read and interact with on a touch screen.
Adding a phone layout to an existing Muse site
If you haven't already, download and install the latest version of Muse. Then, download the "Mobile Design is Fun" sample files for this project. Uncompress the DesignIsFun.zip file and save the folder on your desktop. You'll use the sample files to follow along with the instructions provided below.
1. Launch Muse.
2. In the Welcome screen, open an existing site by choosing Open and navigating to the file named museMobile.muse provided in the sample files folder.
3. The page thumbnails of the desktop layout are displayed in the site map in Plan view.
Notice that along the top of the Plan view, there are now three buttons to select layouts for Desktop, Tablet, and Phone (see Figure 2).
Figure 2. To switch between layouts, click one of the three layout buttons.
At the moment, the Desktop layout option is selected because that is the only layout currently created for the site. You can create a new layout at any time by clicking the desired button. Layouts that have not yet been created display a plus (+) sign next to their name.
This new capability enables you to create a single Muse project file that includes up to three different layout designs to be displayed on the corresponding screen size. All three layouts use the same domain name (such as my-site.com) so you can distribute a single URL to promote the site.
Behind the scenes, backend code intelligently displays the correct layout each time a user visits the site. The site logic detects the browser and device used by the visitor and automatically redirects to load the appropriate tablet, phone, or desktop layout.
While the Desktop layout button is selected, the site map displays the page thumbnails created for the desktop layout. The page thumbnail design matches the live website you reviewed earlier.
To create a new mobile layout for a phone, one of the first things you'll need to do with an existing site is review the content and determine which items are needed for the smartphone user experience. Since smartphone visitors are often on the go and are viewing the content on a smaller screen, it's important to simplify the design and only display the content that is useful and easy to interact with on a touch screen.
You can use the menu to select an existing layout to copy. For the purposes of this article, choose Desktop to copy the desktop layout to the phone layout.
Notice that you have the option of copying the Site Plan, Page Attributes, and the Browser Fill. Leave the default settings to copy the existing desktop site information to the phone layout.
Figure 3. Keep the Copy Layout menu set to None and click OK.
Muse creates a site plan for the phone layout. Page names, the site's structure, and attributes of the master page are copied over. The Phone layout button no longer displays a plus (+) sign next to its name, because the phone layout has been added to the Muse project.
You'll notice that the actual page content is not added to the phone layout page thumbnail. That is intentional, to allow you to copy just the content you actually want into each page of a mobile layout. As you bring the content you want to add into each new page, you can resize it to fit within the smaller dimensions of the mobile screen.
To facilitate the transfer of content, a scratch page was created in the desktop layout. This page is not part of the actual site and it is set not export or be included in the site navigation. Think of the scratch page like a holding container that you can use to temporarily store the content that will be placed on pages of the phone layout. For the purposes of this tutorial, the page assets that are used for the mobile layout on the scratch page have already been resized to fit the smaller phone page size.
After adding the phone layout, the scratch page in the desktop layout was copied into the phone site map, but it is not needed.
In Plan view of the phone layout, select the scratch thumbnail and delete it by clicking the X button on the top right corner (see Figure 4).
Figure 4. Delete the scratch page in the site map of the phone layout.
Browser backgrounds and padding are rendered differently in mobile browsers, so as you build a phone layout, it's important to take that into consideration. When working with a real-world site, you may find that one of the first things you'll want to do in the phone layout is to delete some of the extra pages. As needed, you can click the X button to remove any unnecessary pages that will not be presented in the phone layout.
Add new pages by clicking the plus sign to the right of the Home page. Create a total of four new pages and name them: Section 01, Section 02, Section 03, and Section 04 (see Figure 5).
Figure 5. Create the site map for the mobile layout by adding new pages.
Once the site map is set up, you're ready to begin designing the mobile experience. This mobile site will have two different looks: the Home page displays a background image and the four section pages will share a different design. In the next section, you'll create the master pages for the phone layout.
Setting up the master pages and properties of the phone layout
To populate the layout that displays on smartphone devices, you'll begin by reviewing the content in the existing desktop layout of the site.
Click the Phone button to return to the phone layout. Double-click the master page to view it in Design view (see Figure 7).
Figure 7. The tabs along the top of Design view show that the Desktop master page and the Phone master page are open simultaneously.
Choose File > Site Properties to open the Site Properties dialog box.
The Site Properties dialog box appears. Notice that there's a new column on the left that lists the layouts for the current site project. This project has two layouts, so the column on the left lists both Desktop and Phone. By default, the properties of the Desktop layout are shown.
While the Desktop layout is selected, notice that the desktop site properties include attributes such as Center Horizontally, and the ability to numerically define Top, Bottom, and Left padding (see Figure 8).
Figure 8. The site properties for the desktop layout.
Select the Phone layout and notice that there are some differences due to mobile browsers. There's no longer an option to center content horizontally and the padding section now includes options for Top, Bottom, Left, and Right (see Figure 9).
Figure 9. The site properties for the phone layout.
Right-click the master phone page and choose Page Properties from the context menu.
The Page Properties dialog box appears. Although not needed for this sample project, notice that you can set the padding values for the master page as desired, if you want the browser window to show around the edges and frame the page area (see Figure 10):
Figure 10. You can set the padding values in the Padding section of the Page Properties.
Use the Browser Fill interface to set the background image. Click the folder icon to the right of the Image section and browse to select the file named background.jpg in the sample files folder. Set the Fitting menu to Scale to Fill and click the center position (see Figure 11).
Figure 11. Add a background image to the phone master page.
Click the Plan button, and then click the Desktop layout button to return to the site map for the Desktop. Double-click the scratch page to open it in Design view.
As mentioned previously, the scratch page contains page elements from the desktop layout that have been resized to fit the phone layout design. For the purposes of this example, the page assets that are used for the mobile layout have already been resized to fit the smaller phone page size. In a real world project, you would open the Desktop layout in Plan view, create a page named scratch (or whatever name you prefer) and right-click the scratch page thumbnail to access the context menu. Set the Master option to No Master. Deselect the option to Export page (which removes the checkmark) and then choose Menu Options > Exclude page from Menus (see Figure 12).
Figure 12. Update the Scratch page settings to remove the association with a master page, ensure it is not exported, and exclude it as a menu item in Menu widgets.
Click the A-Master (Phone) tab to make it active. Right-click on the phone master and choose Paste to paste the header content. Use the Selection tool to move the header elements into position at the top of the page (see Figure 13).
Figure 13. Add the header content to the master page for the phone layout.
If necessary, drag the transform handles on the sides of the red rectangle until they snap to the left, top, and right edges of the page. The goal is to see a red border briefly appear on three sides, because this signifies that the red header rectangle is set to 100% width and will scale to fit the visitor's screen size.
Muse uses a technology called Viewport for the phone and tablet layouts which compares the active width of the page with the visitor's screen size and scales the content as needed to adjust for slight differences in device screen dimensions.
Although smartphone screens have less area to display page elements, it is still necessary to define the header and footer regions to specify the page area. You define these page regions with the placement of guides that you drag on the left side of the workspace.
If you don't see the guides, choose View > Show Guides and View > Show Header and Footer. You also need to show the Rulers in order to set the guides.
Figure 14. Drag the guides to define the header and footer regions.
Click the project tab named museMobile on the far left side to switch to the Plan view to see the phone layout site map.
The recent changes to the master phone page are displayed and the background image displays on all of the other phone layout pages as expected (see Figure 15).
Figure 15. The changes you made to the A-Master page are reflected in the other pages of the phone layout.
In the next section, Creating mobile layout designs in Muse, part 2, you'll learn how to quickly navigate between layouts and pages in Muse, so that you can move back and forth to copy the resized assets to the phone layout.