Adobe Muse is a winner in terms of getting webpages done fast and yet responsive. But if you, like me, want to control the user experience a little, there is no out-of-the-box-solution to disable zoom and pinch in adobe muse for mobile users.

Here I’ll give you a free alternative to the many paid solution that will disable zoom and pinch in adobe muse – but I’ll give you the recipe for free.

Why should I care to disable zoom and pinch in Adobe Muse?

I recently created a webpage for image2work.com, in which project I used Adobe Muse. But zooming with Adobe Muse is a mess on mobile devices and makes the user experience bad in my opinion. 

For instance, when I zoom into my page, the menu in the top looks very funny. And some places on the Muse page, text align odd. Have a look at the example below.

Frankly, the best way to avoid that the page looks odd when people use it is to disable the zoom. There should be no reason to zoom on a mobile web page, because then it is not mobile optimized. Just always design your web pages mobile first. That will let you target the vast majority of your visitors. Take a look at the live graph below for the index of Mobile users vs. Desktop users:

 

Do the magic – disable zoom and pinch in Adobe Muse for free

And it is quite simple. All you need is Adobe Muse and TextMate installed on your computer/Mac.

First you need to add a code to the master page of your Muse Project. Here is a gude to understand the master pages in Adobe Muse. Essentially it’s just like in InDesign, that you compose a page, that is to be shown an all pages.

In that master page, place the following viewport meta-code in the “Metadata” field (right click and choose –> Page proporties).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />

Save the project and export it into html.

Now grab hold of TextMate, that you can download here. It will work without a license key (for now anyway. It might cost something later on).

Now in TextMate, activate the search and replace window (cmd+f), like shown below.

Here comes the trick. Because Adobe Muse also injects its own viewport we need to remove that, in order to make our own injected viewport take action. Therefore TextMate can help us replace text phrases in multiple files.

To do so, fill in the “Find” field with Adobe Muse standart viewport meta-code:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

In the “Replace” field, let it be empty.

Then, in the “In” locate the folder, where you have exported your Adobe Muse project in html to, and click “Find All” – it shows you how many, and you can review it before clicking “Replace All”.

That’s it you are all set – and nobody can zoom on your mobile webpage again.

The replace step should be repeated for every export from Adobe Muse.

The geeky method – by Terminal

In the end … there is also the Perl way, for the geeks out there:

perl -pi -w -e 's/find/replace/g;' ~/Desktop/*.html

This code finds all files at the Desktop, ending with .html and replaces all “find” with “replace” in all the files. That might be easier for some people. But you want a litle convinience, the method above kicks ass too.

Thanks for reading 😉