*** From the Archives ***

This article is from July 17, 2013, and is no longer current.

Essential Tips for Adobe Muse

4

Even though Adobe Muse is less than two years old, it is rapidly evolving into a trusted tool for designers. And as Adobe’s Creative Cloud continues to expand its membership more designers are discovering Muse’s power to help them build websites without worrying about code. Lets take a look at six quick and important tips to improve your Muse sites.

1. Adding Embeddable Maps

One of the easiest and most powerful tools inside Muse is the ability to embed HTML inside your site. On the surface this may sound like it contradicts the idea of making great sites without coding, but in fact the web is full of services that make it easy for you to embed and use a variety of tools with little more than a simple copy and paste. For example, map services such as Google and Bing make it very easy to embed a map on your Muse site.

To embed a map, just visit your favorite mapping service and look for a place to copy/share embed code, then just copy and paste it into your Muse site. After a moment the map will be rendered and you can preview its interactivity.

Embeding a Map with Muse

If you want to change the dimensions of the map, right-click the map and choose “Edit HTML”. From there you can tweak the code to specify the exact dimensions that you want it to be. As soon as you click OK the map will re-render and be ready to test.

2. Adding Metadata

Metadata might seem like a boring topic, but when you consider that without it your site could be invisible to both search engines and people with vision-impairments you quickly realize just how important it is. There are lots of quick ways to add metadata to your Muse site.

  • Right-click on any page in Plan view and choose Page Properties to enter a description and keywords
    Adding Metadata in Muse
  • Right-click on a style and choose “style options” to apply a paragraph tag
    Adding Metadata in Muse
  • Right-click on any image and choose “Edit Image Properties” to apply a tooltip and alt text

    Adding Metadata in Muse

Be sure to take your time to enter metadata for all of the relevant content on your site to improve your SEO and accessibility for all.

3. Going Mobile

While it is possible to view your Muse website from mobile devices, if you take the time to optimize your site for phones and tablets you can create a more engaging experience for visitors.

To build alternate editions of your site for other devices, just click on the Tablet or Phone button in Plan view.

Mobile Muse Sites

From there you can duplicate your site layout from the desktop edition of your site. Next, copy and paste over the relevant information to the new layout. From here you may want to modify your styles to reflect to limited real estate of your new site. You may also want to remove extra images or content in order to speed up load times. Finally, be sure to thoroughly test your site to ensure that it is functional and readable on another device.

4. Round-trip Editing with Photoshop

While it is possible to use jpg, gifs and pngs as images on your website, you may run into difficulties if you ever wish to edit the original asset. Consider using .psd files for your images on your site to allow round-trip non-destructive editing similar to the InDesign-Photoshop workflow.

5. Using Typekit Fonts

It seems like only yesterday web designers were limited to “web-safe fonts.” Thankfully that era is behind us now that web fonts are mainstream. Be sure to take advantage of the built in capability of using Adobe’s Typekit fonts directly in Adobe Muse.

Typekit fonts in Muse

To use them, just select and type you wish and choose Add Web Fonts from the Text menu. From there you can browse an ever-growing collection of professional typefaces to use at no extra cost on your site. And don’t forget to create character and paragraph styles to make working with your type that much easier!

6. Taking Advantage of Online Resources

When you are looking for inspiration or just don’t have the time to build everything from scratch, it can’t hurt to take advantage of various Muse resources that are available online.

Widget Gallery – https://muse.adobe.com/widget-gallery

This free website from Adobe hosts a variety of widgets designed by the Muse community. These widgets are free to download and use on your site. And if you happen to create a unique widget yourself, be sure to upload it to the widget gallery so other can learn from your experimentation.

Muse-Themes – https://www.muse-themes.com/

If you don’t consider yourself a designer or if you simply don’t have the time to design a site yourself, be sure to stop by muse-themes.com. This site sells various templates or themes of website designs. These themes are professionally designed and built using industry standard best practices.

Jam Sessions – https://muse.adobe.com/

Nearly every week the Muse team hosts a free online webinar called Muse Jam Sessions. Each week focuses on a particular aspect or theme by Muse Product Manager Dani Beaumont. Be sure to bookmark this site and learn something new each week.

Bio

James Fritz is the author of Muse Essential Training and the content manager of Design, Photography and CAD at lynda.com. You can follow him on twitter @jamesfritz for tips and other design related news.

 

James Fritz is a Principal Program Manager: Content Tools and Workflows at LinkedIn.
  • Chris Kellett says:

    Think you miss an online resource here what about http://www.musegrid.com it has the largest collection of Adobe Muse business templates and widgets on the web and over 40 free tutorials surely thats a resource for the Muse community you would not want to miss?

  • James Fritz says:

    Hi Chris, that is a really good point. Yes, I agree that musegrids.com would be another great resource for designers to know about. Thanks for sharing!

  • Tom Rudman says:

    FYI – 20 Nov 13 – ‘type-kit’ fonts issues persist with some mobile devices, resulting in your fonts being replaced by arial, and the like. Employ ‘type-kit’ fonts with caution;) 

  • ali says:

    Dear sir
    I cant find your muse essential training film by james Dritz on lynda .com
    i download this film before and i search about subtitle
    please help me.
    thanks
    ali

  • >