Creating mobile layout designs in Adobe Muse

Transcription

1 Creating mobile layout designs in Adobe Muse Using Adobe 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. 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. 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. 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. 1 Creating mobile layout designs in Adobe Muse

2 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. 1 Click the Phone button at the top of the Plan view to create a new phone layout. The Add Phone Layout dialog box appears. 2 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. 3 Click OK to close the dialog box and add the phone layout. 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. 4 In Plan view of the phone layout, select the scratch thumbnail and delete it by clicking the X button on the top right corner. 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. 2 Creating mobile layout designs in Adobe Muse

3 5 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. 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. 1 Click the Desktop button to return to the Desktop layout. 2 Double-click the Master page to open it in Design view. Review the elements of the master page: A red header area with the site title: Design Is Fun! A non-tiling background image set to 100% width 3 Click the Phone button to return to the phone layout. Double-click the master page to view it in Design view. By default, the padding for the phone layout has been cleared. Before adding content to the design, you'll redefine the padding for the mobile display. 4 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. 3 Creating mobile layout designs in Adobe Muse

4 5 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. If desired, you can enter numbers in the padding section to set the padding values for the phone layout pages. However, there's also another way to do this. 6 Click Cancel to close the Site Properties dialog box. Now you've returned to the Design view for the master phone page. 7 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. 8 Click OK to close the Page Properties dialog box without making any changes and return to Plan view. Next, you'll add content to design the master page. 9 Double-click the master phone page to open it in Design view. 10 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. 11 Click on the gray area outside the page, or anywhere in the Control panel, to close the Browser Fill interface. Like many Adobe products, there are multiple ways to achieve the same goal. First, you'll see one way to navigate between the layouts and then you'll learn a faster method. 12 Click the Plan button, and then click the Desktop layout button to return to the site map for the Desktop. Doubleclick the scratch page to open it in Design view. 4 Creating mobile layout designs in Adobe Muse

5 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. And then, you would select the items you want to add to the Phone pages, copy them to the scratch Page in the Desktop site map, and resize them by dragging the transformation handles. This task has already been completed for this example. 13 Select the entire header in the home page design on the far left which includes the red rectangle, the home icon, and the Design is fun! text frame. Right-click and choose Copy from the context menu that appears. 14 Click the A-Master (Phone) tab to make it active. Rightclick 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). 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 scaling 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. Note: 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. 5 Creating mobile layout designs in Adobe Muse

6 15 Drag the header and footer guides to match the locations shown. For this design, the guides should be located at these positions: Top of the page: 0px Header: 50px Footer: 420px Bottom of the page: 480px Bottom of the browser: 0px 16 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. 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. Using Go to Page to copy site content between layouts 1 Click the Master (Desktop) tab to make the master desktop page active in Design view. Muse makes it easy to switch between layouts using the included navigational tool: Go to Page. This button appears in Design view in any project that has multiple layouts. 2 Click the Go to Page button. When working with multiple layouts, it is helpful to be able to jump back and forth quickly between two or more pages, so that you can easily copy and paste content. Note: In addition to clicking the Go to Page button, you can also use the keyboard shortcut: Command+J (Mac) or Control+J (Windows). The Go to Page dialog box appears. It contains a text field that you can use to type the first few letters of a page name in the site, so that you can easily jump to that page without going back to the Plan view repeatedly. 6 Creating mobile layout designs in Adobe Muse

7 3 Enter the first three letters of the page name you want to locate. For this example, type the first three letters of the word Master: mas. The field scans the site for any matching page names and displays them in the list. 4 Press the down arrow twice to select the A-Master (phone) page and then press Return/Enter to open it. The Master (phone) page opens in Design view and is ready to edit. Tip: Another great way to jump between the different layouts in a site is to use the new keyboard shortcuts: Command/Control+7 displays the desktop layout Command/Control+8 displays the tablet layout Command/Control+9 displays the phone layout These shortcuts are only active when editing a site that has the corresponding layout. Experiment with using these new shortcuts to develop a workflow that you prefer when switching between layouts and specific pages. Next, you ll create a second master phone page and add the design elements. Adding a second master page to the phone layout 1 Click Plan to return to the site map of the phone layout. Double-click the A-Master field below the master phone thumbnail and rename it: Landing. 2 Hover your cursor over the Landing thumbnail. Click the plus (+) sign to the right of the Landing page and create a second master page. Rename the new master page: Interior. 3 Right-click the Section 01 page thumbnail and choose Masters > Interior. This sets the Section 01 page to use the new Interior master page you just created. Or if you prefer, click and drag the Interior master page on top of the Section 01 page thumbnail. 4 Repeat step 3 to set the Section 02, Section 03, and Section 04 pages to also use the Interior master page. Now you ll add the design for the Interior master page, to start populating the appearance of the four pages (Section 01-04) that use it. 1 Press Command+J (Mac) or Control+J (Windows), or click the Go to Page button in the Control panel. 2 In the Page field of the Go to Page dialog box, enter the first three letters of the word Scratch: scr. The Scratch (Desktop) page appears. Notice that there isn t a Scratch (Phone) page listed, because you previously deleted it. 3 Press the down arrow once to select the Scratch page and then press Return/Enter to make it active. 7 Creating mobile layout designs in Adobe Muse

8 The Scratch page opens in Design view. As you can see, with a bit of practice, it becomes much easier to switch between pages with the new Go to Page feature. It is not necessary to return to the Plan view and double-click pages to open them and edit them in Design view. Of course, if pages are already open in Design view, you can also click the tabs along the top of the workspace to choose the file you want to edit. 4 Select the artwork used for the header (the same red rectangle, home icon, and Design is Fun text field you selected before) and the footer (the red rectangle). 5 Right-click the page while the header and footer are selected and choose Copy from the menu that appears. 6 Press Command+J (Mac) or Control+J (Windows), and then enter the first three letters of Interior. The Go To Page dialog box lists the name of the Interior master page you just created. Press the down arrow once and then press Return/Enter to open it in Design view. 7 Right-click on the Interior page and choose Paste, or use the keyboard shortcut to paste the header and footer. 8 Use the Selection tool to reposition the header and footer on the Interior page. While the footer rectangle is selected, verify that it is set as a Footer item in the Control panel. In the original desktop layout design, the header and footer rectangles are set to 100% width. By dragging the left and right edges to match the edge of the browser window, you can set elements to span the entire width of the available screen space on a monitor or device screen. 9 While the header rectangle is selected, drag the handles until you see a red border that highlights the left, bottom, and right sides of the browser window. This red border indicates that the header rectangle will display at 100% width on the smartphone, to cover the top of the page. Repeat this step to set the footer rectangle to 100% width as well. Next, you ll copy the four navigation buttons from the Scratch page to the Master (Phone) page. One of the great features included with multiple layouts in Muse is that the styles you apply to elements are preserved when you copy them. Character styles, graphic styles, and paragraph styles are maintained throughout the different layouts you create. 8 Creating mobile layout designs in Adobe Muse

9 1 Click the scratch (Desktop) tab to make it active. Click once on the group of four numbered colored buttons (located below the home design on the left side) to select it. While the group is selected, the word Group is displayed in the Selection Indicator. 2 Copy the group and then click the Interior (Phone) tab to return to it. Paste the group, which contains a series of buttons that the design uses as a navigation menu. Notice that the styles applied to the objects are preserved as you copy design elements between layouts. 3 Use the Selection tool to position the group of buttons above the red rectangle. As you drag it, a smart guide temporarily appears when it is aligned to the center of the page. Drag it until it is aligned center and near the bottom. 4 While the group of buttons is selected, select the Footer checkbox in the Control panel or right-click on the group and choose Footer Item from the context menu that appears. That will ensure that any page content added to the other pages will display above the four buttons. In the next section, you ll see how to add links to the pages using the Hyperlink menu. Adding links with the Links menu As you design sites with multiple layouts, you ll notice the Links menu is organized into sections, making it easy to add links to different pages in each layout. 1 Click once on the group of buttons to select the entire group, and then click again to select the orange 01 button at the top. 2 Click the menu that says: Add or filter links to see that the Recently Used Links section is listed at the top, then there s a section that contains the Desktop links, a section that contains the Phone links, and a section that contains the Files (where downloadable files are listed if your site links to downloadable files, such as PDF files). If you add a tablet layout, the Links menu includes a section that contains the pages in the Tablet layout as well. Each section of the menu is categorized, so that you can easily track the links added to each layout. Additionally, anchor links (when present in a site) are now slightly indented and listed below the page where they exist. 3 While the 01 button is selected, use the Links menu to choose the Section 01 page. This simple sample project does not contain many pages, so it is easy to choose from the Link menu. However, when working on a more complex project, you may find that the lists become much longer and it is time consuming to read through the menu to find the correct page. 9 Creating mobile layout designs in Adobe Muse

10 To search for a link, you can start typing the beginning of the page name or anchor name in the Links menu. You only have to type the first few letters, and the Links menu filters the results and displays them in a drop-down list. This makes it easy to access the links you want to update quickly. If you create a link and then change your mind and want to remove it, you can select a link in the Hyperlink menu and click the X button to the right of the menu to delete it. 4 Repeat step 1 to add links to the 02, 03, and 04 buttons, so that they are linked to the corresponding pages in the phone layout. 5 Select the Home icon in the header. Use the links menu to add a link to the Home (phone) page. This makes it easy for visitors to jump back to the home page of the site. Adding a link to the Home page in the header is a common web design convention. 6 Click the Landing (Phone) tab. Repeat step 3 by selecting the Home icon and setting the link to the Home (Phone) page. Now both the master phone pages share the same header content, which helps visitors navigate and remain oriented on a small screen. At this point, you ve added all of the main navigation links to the phone layout. In the next section, you ll populate each of the pages with unique content. Adding page content to the phone layout pages You ll begin by finalizing the Home page. 1 Click the Interior (Phone) tab. Copy the entire group of four numbered buttons. 2 Use the Go to Page feature to jump to the Home (phone) page and paste the group. The links that you added in the previous section are retained, so now both the Home page and the Interior master page share the same navigation. 3 Use the Selection tool to position the group in the center of the Home page, near the bottom of the footer. 4 Click the scratch (Desktop) tab to return to the scratch page. Copy the text frame in the far left pod that says: There s more than one way to solve a problem. 5 Click the Home (Phone) tab and paste the text frame. Use the Selection tool to position the text frame, so that it is centered above the group of buttons. Next, you ll add the page content for the Section 01 page. 6 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle and three text frames, in the second pod from the left. The three text frames include the 01 circle, the section 01 placeholder text, and the orange Phone button. Copy the selected items. 7 Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 01. Click the down arrow key to select the Section 01 phone page and then press Return/ Enter to open it in Design view. 10 Creating mobile layout designs in Adobe Muse

11 8 Paste the elements on the Section 01 page of the phone layout. Use the Selection tool to center them on the page using the guides that temporarily appear. The purpose of the Section 01 page is to provide a brief introduction to the business and make it easy for mobile visitors to call it. When designing mobile websites, you can add a new type of link that enables the visitor to tap their screen and invoke the smartphone s phone dialer to call a number. This is a great mobile site feature because it enables potential customers call a business very easily. To add a link in a mobile layout to dial a phone number, follow these steps: 1 Use the Selection tool to select the Phone button. 2 In the Links menu field, type tel:+1 and then a phone number, like this: tel: This is the format that mobile browsers recognize for telephone number links. 3 Press Return or Enter to save the link. Note: If you d prefer to create an link, you can enter the following format in the Hyperlink menu field: mailto:designers@design-is-fun.com After adding the link to the Phone button, the Section 01 page design is complete. 1 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle, the green 02 circle, the Section 02 text frame, the embedded map, and the green Map button. Copy the selected items. 2 Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 02. Click the down arrow key to select the Section 02 phone page and then press Return/Enter to open it in Design view. 3 Paste the elements you copied in step 1 on the Section 02 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The Section 02 page contains embedded HTML code that was generated on the Google Maps website to create an interactive map. If you followed along with the tutorial titled Getting Started with Muse, you ll remember that you copied the Google Map source code from the Google website and used the embedded HTML feature in Muse to paste it into the a page. Fortunately, Google Map code already includes support for finger gestures on touch screens, so visitors with devices can interact with the map easily. For this sample project, the map dimensions have already been resized. However, If you need to resize the dimensions of embedded HTML content in your projects, you can rightclick on the content and choose HTML to view the code in the HTML window. You can edit the height and width values in the code to resize the map to fit a smaller screen. 1 Select the Map button. This time, you ll add a link to an external website (Google Maps) to make it easy for mobile visitors to visit the full version of the map in a new browser window. 11 Creating mobile layout designs in Adobe Muse

12 2 Copy the link below and paste it into the field of the Links menu: n= , &hq=adobe+systems,&hnear=san+francisco,+california&t=m&z=14 3 Click the word Links to the left of the Links menu. In the dialog box that appears, select the checkbox: Open link in a new window or tab. Also, in the Tooltip field, enter the following text: Map to Adobe Fremont. 4 Click away from the Links dialog box to close it. Next, you ll add the page content for the Section 03 page. 1 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white rounded background rectangle, the purple 03 circle, 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 Section 03 phone page and then press Return/Enter to open it in Design view. 3 Paste the elements you copied in step 1 on the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The styles applied to the desktop Contact Form widget are maintained when copied to the phone layout. The only change made to prepare the form for a mobile layout involves resizing the form and the form elements to fit on a smaller screen. The Section 03 page contains a Contact form widget that uses the Business Catalyst server-side scripts and database to process the 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 finished Muse website, be aware that you ll need to do some additional coding in order to make contact forms work if they are not hosted on the 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 a script or spam bot - the CAPTCHA interface displays an image with a series of characters that requires the visitor to type in the matching string in order to successfully submit their message through the form. While spam bot form submissions can be a nuisance, it s also important to consider the site s usability on a mobile phone. If you make the form too difficult to fill out, visitors may decide not to submit their message. The Section 03 page is now complete. There s no need to add a link to the Submit button, because the button is already set up as part of the Contact Form widget. The final page of the phone layout, Section 04, contains a Slideshow widget. 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 the slideshow work on a touch screen. Follow these steps to copy the content from the scratch page of the desktop layout to the Section 04 page in the phone layout: 12 Creating mobile layout designs in Adobe Muse

13 1 Click the Scratch (Desktop) tab to return to the Scratch page. Select the white long background rectangle, the red 04 circle, the Slideshow widget, and the Section 04 text frame. You can use the Selection tool to click and drag over all the elements 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 Section 04 phone page and then press Return/Enter to open it in Design view. 3 Paste the elements you copied in step 1 on the Section 03 page of the phone layout. Use the Selection tool to center them on the page using the alignment guides. The styles applied to the desktop Contact Form widget are maintained when copied to the phone layout. The only change made to prepare the form for a mobile layout involves resizing the form and the form elements to fit on a smaller screen. When you add widgets with interactive features (such as Slideshow widgets) to 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 designs are automatically set up 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 configured to use a horizontal transition to flip between images in the gallery. This example requires user interaction to display the photos, although if you choose, you can set the Slideshow widget to autoplay, so that it will cycle through the images automatically when the page loads. Note: If you configure slideshow widgets to use the Fade, Horizontal, or Vertical transitions, the code in Muse automatically enables the Swipe finger gesture to allow visitors to swipe their touch screen to flip through the slideshow images. In the next section, Creating mobile layout designs in Muse, part 3, you ll learn how to easily update assets across all mobile platforms, and how to publish your Muse site for each mobile layout. Updating and optimizing assets for display on mobile devices Compared to desktop computers, tablets and smartphones have a much more limited processor, slower connection speeds, and smaller storage capacity. As a result, special consideration is required when designing and delivering site designs on mobile devices. Muse includes features that can help you optimize the graphics displayed in the mobile layouts to ensure that the site loads quickly and performs acceptably. 1 Press Command/Control+7 to display the desktop layout, and then double-click the A-Master desktop file to open it in Design view. 2 Open the Assets panel by clicking its tab in the panel set to make it active. Or, if it is closed, choose Window > Assets. 3 Select the large background image of the green hills. The asset is highlighted in the Assets panel. 4 Click the asset s name, background.jpg, to expand the list of instances used in the site. Notice that the background image file is listed three times, with two different icons, indicating that it is used in both the phone and desktop layouts. In this small example site, the list of assets is fairly manageable, but when you build larger sites, the list of assets can become longer and harder to scan. 13 Creating mobile layout designs in Adobe Muse

14 To make the list of assets easier to navigate, you can select the first item for each asset and then click the arrow to the left to collapse the set. Click it again when you want to expand to view the full list of instances where the asset is used in the site project. If you want to locate the assets used for a specific layout, click the top of the column on the far right of the Assets panel that displays the Desktop, Tablet, or Phone icons. This causes the list of assets to sort so that the assets for each layout are displayed in a consolidated set. If you want to make a change to a graphic that will update all instances of it (on all layouts) you can right-click on an asset name and choose Edit Original from the menu that appears. The original file you placed opens in Photoshop, Fireworks, or the image-editing program you used to create it, so that you can quickly make changes. When you save the revised original file and return to Muse, the item in the Assets panel will display the Out of Sync icon to indicate the version of the graphic in the site no longer matches the source file. Right-click the file again and choose Update to update all iterations of the graphic to use the new version. Previewing mobile layouts There are several options you can use to preview the site designs you create: While in the Design View of the Desktop layout, click Preview to see the built-in Webkit-based emulator render the HTML, CSS, and JavaScript. Preview lets you see how your layouts will appear in a browser before publishing a site and checking it online with a device. 1 While in the Design view of the Phone view, click Preview to see the phone layout display. Use the Preview Size menu to select between iphone 4, iphone 5, Samsung Galaxy S III, and Nokia Lumia 920 to see the layout displayed on different screen sizes 14 Creating mobile layout designs in Adobe Muse

15 2 Click the icon to the right of the Preview Size window to switch between viewing the layout in portrait or landscape modes. The Preview Size includes pre-defined height and width ratios that cover the most common mobile phone screen sizes. Some of the smartphone screens are wider, such as the Motorola Droid. If a visitor has a wider display, then the Viewport feature in Muse automatically scales the phone layout width to fit the available screen real estate. While in preview mode, you can click links and navigate through the site. You can scroll, which simulates a finger gesture swipe, but to actually test it, you ll want to test it on the device. If you click the i button next to the Preview Size menu in Preview mode, you ll see a note with a link describing an Adobe tool named Edge Inspect. Edge Inspect lets you use a Chrome browser extension to connect mobile devices to your computer, and then sync them with content viewed in your desktop Chrome browser. With Edge Inspect, you can use Chrome and the Preview in Browser option in Muse to view a site on your desktop, and the same page is also automatically displayed on the connected devices. (Be sure to set Chrome as your default browser). To learn more about working with Edge Inspect, visit the Edge Inspect Product page. If desired, you can also purchase a third-party tool named Reflection, which enables you to see an emulation of your device (which is connected using the same network connection) appear on your desktop computer screen. While using your smartphone or tablet to navigate a site, the emulator mirrors the touch screen of your device. Publishing a site with mobile layouts You can publish sites with multiple layouts in Muse using the same method you use normally to publish desktop sites. It is helpful to publish trial sites and then use mobile devices to view the live version to test the designs on smaller screens. 1 Click Publish or choose File > Upload to FTP Host to upload the site files to the hosting server. When you publish a Muse site with multiple layouts, it is pushed live with a single URL. So you only have to register one domain name, like this: When you publish a site with two or three different layouts, Muse generates the code for the site that includes detection scripts that identify which type of computer or device and which type of browser the visitor is using the access the page. The detection code determines the platform and browser version, and then automatically displays the correct layout. You don t have to do anything to ensure that visitors using a tablet will see the tablet design and visitors using smartphones will see the phone design. It all happens behind the scenes. The new mobile layout features in Muse enable you to optimize your mobile layouts so that device users do not download larger files unnecessarily. The alternate layout functionality serves up only the smaller, resized image files so that the site performs well across all platforms and browsers. 15 Creating mobile layout designs in Adobe Muse