Adobe Muse / Designing for Mobile Devices

This goal can be achieved by creating a responsive website, so that the layout, content, and styling changes, as needed, relative to the screen on which it is being viewed. The approach will depend on the web design tool used and on the decisions made by the designer.

A responsive design approach allows for the creation of a fluid-width layout, using rules based on properties of the viewing device, such as screen dimensions, to define how the design should change. However, in cases where the design requirements are significantly different, a rule-based approach may not be sufficient.

An alternate design approach allows the primary layout to be manually adapted for other devices, and customized so that a unique experience can be delivered for each screen size.

These design approaches are not mutually exclusive, and both are applicable to websites that are created using Adobe Muse. Adobe Muse targets the creation of highly-designed, task-based websites that are optimized for the viewing device, without writing any code. Designers have the freedom and the control to define the content, design, and functionality of each layout for desktop, tablet, and smartphone versions of a website. In addition, Adobe Muse includes several fluid elements, such as background images, 100% width items, and gradient fills, which dynamically resize with the device and orientation.

Designing for mobile devices using Adobe Muse will be familiar to designers who use the Alternate Layout design tools found in Adobe InDesign. These tools are used to easily adapt a primary InDesign layout for other orientations and page sizes as diverse as billboards, print ads, posters, postcards, and more. Like InDesign, Adobe Muse allows you to duplicate existing master pages— including text styles and relationships between objects— and to manually adjust the content on the alternate layout to achieve your design goals.

As designers know, creating alternate layouts is much more than choosing a different format. Adobe Muse provides support for creating mobile layouts throughout the design process, from planning to publishing.

To start, you only need to design one smartphone and one tablet layout. Because Adobe Muse is optimized to the most popular tablet and smartphone specifications, designs will automatically scale to fit across all device screens and orientations. Choose whether to copy master pages and master page attributes as you create unique layouts for tablet and smartphone versions of your site. Adobe Muse automatically optimizes images for faster load times.

Once you begin designing, choose to update a graphic or image once across all layouts or individually for each layout. With text, you can choose to keep the same formatting, styles, and colors, or update specific to each layout.

Take advantage of mobile viewing by using built-in touch support functionality. Use the hyperlink menu to set phone numbers to automatically dial when tapped or email addresses to start an email with the "To address" already filled in. Widgets are also touch-enabled and automatically convert to support touch gestures, such as, finger scrolling or page-swiping, without coding.

Once the designs are complete, preview designs on the most popular mobile devices. Once the site is ready to go live, Adobe Muse will publish files that are optimized to ensure that the relevant layout is delivered based on the device on which it is viewed.

With built-in support for tablets and smartphones, and ongoing updates to meet the latest web standards, you can be confident that your site will load quickly, and work across multiple browsers on desktops and mobile devices.