*Update: As of March 2018, Adobe Muse is no longer being developed

Adobe Muse CC 2015 is software that allows designers to create visually impressive websites with very little coding knowledge. It also has the added benefit of parallax scrolling – where items on the webpage move or animate as the user scrolls down or up.

Adobe Muse is only suited to smaller or one-off websites. It comes with no back-end admin facility – not ideal if you’re thinking of creating a large ever-changing blog, for example.

Overall, Adobe Muse offers limited responsive website functionality. This is tricky as nowadays websites have to be optimised to work seamlessly on any screen size – such is the diversity of electronic devices.  However, there are ways around this, as I’ll talk about.

I’m going to give you some tips about this Adobe Muse mini-site I created. I prefer to get stuck in and design, rather than using the many ‘off the shelf’ templates available, though if you’re interested please check out these Muse templates.

Scaling text in Adobe Muse
Working out how to scale text is important

Scaling fonts and images

Although images can be set to scale automatically when the screen size is adjusted, what about text? Sadly, not. So, what to do?

Within the software, choose a web font from the wide choice available. You’ll find the page will load quicker, but these fonts won’t automatically adjust in size when required to.

There are possible ways around this.

The first requires downloading this plugin which allows you to set the scaling properties of the web fonts. However, we found this was cumbersome and some of the lovely kerning we’d adjusted got ‘mucked up’.

A better, though time-consuming way, is still to use web fonts but combine them with breakpoints. More below…

Setting breakpoints for screen sizes:

Adobe Muse has three templates for your site. Phone, tablet and desktop. I would recommend starting with your desktop design first.

You have a choice of Desktop, Tablet or Phone templates
You have a choice of Desktop, Tablet or Phone templates
Set your breakpoints for different screen sizes
Set your breakpoints for different screen sizes

Within the desktop templates you can use ‘breakpoints’. Open a browser with you desktop design in, and scale the page downwards – when your web font looks too large, set a new breakpoint in Adobe Muse and adjust the size of the font. Keep decreasing the window size, adding new breakpoints and adjusting the font until you have something you’re happy with.

In the end, we found that we didn’t need breakpoints with our design. Though we did need to create a separate dedicated phone template as our text was just too big for tiny screens. It’s good that the phone page will load automatically when needed.

Thinking about Meta data and SEO:

It’s easy to create a great looking site, then forget about page ranking. So make sure you use web fonts, as discussed, as these will be great for SEO purposes. Make sure you add in alt text for images too and meta data in the page properties panel. All these things could help improve your Google ranking.

Remember to use meta data
Remember to use meta data

So what’s the verdict?

Adobe Muse is fun and fairly intuitive, and the templates allow you to have a lot of control. I’m sure future releases will have improved responsive functionality – but in the meantime, breakpoints work well enough.

What are your experiences with Adobe Muse? – I’d love to know.



You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *