Intuitive, user-friendly site navigation is essential to a positive online experience. Designers must consider how visitors will interact with page content in various scenarios because usability considerations differ between computer screens and mobile devices.
To accommodate the variety of potential screen sizes — from large desktop monitors to small smartphones — you must provide clear navigation that makes web content easy to use no matter how it's viewed. Adobe Muse CC provides helpful tools to ensure your sites are easy to access on mobile devices.
With Adobe Muse, you can create mobile navigation by adding alternate layouts for desktops, tablets, and smartphones, all in a single .muse file (see Figure 1).
In this article, I show you how to add alternate layouts using the Mobile Lightbox widget and incorporate mobile navigation into those layouts using the Mobile Accordion widget. You can use these widgets to add dynamic, cross-platform menus to websites that people can see on a wide range of screen sizes.
If you haven't already installed Adobe Muse CC, download the free 30-day trial from Adobe Creative Cloud. Then download the sample project file (mobile-navigation-muse.zip, 57 KB). The sample file is a bare-bones .muse project set up with a phone layout that contains customizable mobile navigation widgets. To see the final version of the desktop site, visit thewildisles.com (desktop) or thewildisles.com/phone (mobile phone).
To make the mobile experience better, follow these design pointers:
When you create a new site in Adobe Muse (by clicking Create New > Site in the Welcome screen or choosing File > New Site), the New Site dialog box includes a menu that lets you select the initial layout (see Figure 2).
You can pick whichever layout you prefer to start designing. And it's not necessary to create all three layouts for a site ― the choice is yours.
For the purposes of this tutorial, you'll work with the .muse file you downloaded at the beginning of the article. That sample project was created to use the initial phone layout.
At this point in the tutorial, the Phone layout option is selected because it's the only layout in the site. Create a new layout by clicking the desired button. Layouts that have not yet been created have a plus sign next to their name.
Note: When you add alternate layouts to a project in Adobe Muse, all of the layouts use the same domain name (such as my-site.com). You can distribute a single URL to promote the site. Logic in the code routes visitors to the correct set of pages based on the browser and operating system they're running.
Once you've added a new mobile layout for tablets or phones, the next step involves editing the pages of the mobile site. The home page in this project is named Lightbox.
If you're working on a site with multiple layouts, the tab in Design view now shows the layout after the page name: Lightbox [Phone]. The tab title makes it easy to tell which version of the site you're editing.
Mobile Lightbox widgets display a small menu button that takes up very little space on the page. When a visitor clicks the menu button, a modal window appears to display the larger menu, while temporarily dimming the rest of the page. When you edit the page in Design view, it displays the default, expanded view of the links to the other site pages.
The Mobile Accordion widget is composed of a Menu widget nested inside an Accordion widget. Similar to the behavior of an Accordion widget in desktop layouts, a larger container of the accordion expands to display the corresponding content when you tap the label container. The label container acts like a toggle switch: As you click it repeatedly, the larger container alternately collapses and expands.
While the entire widget is selected, you can drag its handles to expand it to fit the width of the mobile layout. A red smart guide temporarily appears when the widget is centered on the page. You can also move the widget's position vertically on the page.
Note: Although you can position the site navigation in any location you prefer, the common convention for mobile sites is to align menus at the bottom of the vertical page. This location makes it easier for visitors to tap the menu items with their thumbs.
When a visitor taps the Menu label, a container expands to display the corresponding content. In the default set, the label displays the word "Menu," and the container displays a vertical menu of the existing site's pages. Whenever you add or edit the pages in Plan view, the menu item page names and links are updated automatically.
The process of publishing a site with alternate layouts is the same as publishing a site with only a desktop layout: Click the Publish button and enter a name for the new site. Click Publish to upload a free temporary site to the Adobe hosting servers. You can create an unlimited number of temporary sites with Adobe Muse.
When you publish or export a site, Adobe Muse automatically generates a file named sitemap.xml that contains a list of all pages for all layouts. The sitemap.xml file is uploaded to the hosting server along with the other site assets. This improves a site's search engine optimization (SEO) by helping search engines index the site, so that all the pages included in a site's alternate layouts are accurately ranked in search results.
To learn more about publishing sites in Adobe Muse, see Signing in and publishing your first Adobe Muse site.
Widgets are powerful prebuilt site features that you can use in your Adobe Muse sites to display interactive functionality. In addition to mobile navigation menus, Adobe Muse includes many other types of widgets, including contact forms, slideshows, tabbed panels, and tooltips. Experiment by creating a temporary site and adding some widgets to the page. Click Preview to see how they appear in a browser.
Experiment further by nesting widgets inside other widgets. You can also embed HTML to add content from many other third-party sites, such as videos from YouTube or Vimeo, maps from Google, and more.
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.