Inconsistent display of Muse site on mobile devices

I know that Muse doesn't fully support mobile devices at this point, but it should be possible to have at least some level of consistency on how the websites are displayed when opened in a mobile browser.
My website is supposed to fill the browser window, but when viewing the site on a mobile browser, the pages are aligned to the left, and the 100% width elements are cut off. However, on some pages, it looks fine, and on other pages it looks even worse.
Here are some screenshots that shows how differently the pages are displayed. I have also included a screenshot from a normal browser window. What can I do to make the site look "normal" on a mobile device? I have tried using some viewport meta tags, but I can't seem to get it right. Please help! It's embarrassing to have a company website that looks ridiculous when opened in a mobile browser.
This is the front page. As you can see, the horizontal header and footer has been cut off, and the page has been aligned left instead of filling the browser window.
This page is displayed even worse! The header and footer has been cut like above, but the whole page is scaled down to expose even more unnecessary gray space to the right.
This page is displayed correctly! However, other pages pages with the same bookshelf have the same issues as above.
This is how the website looks in a normal web browser. The header and footer follows the width of the browser.

The "correct" behavior for elements with both rollover and click behaviors on Mobile Safari is that the first tap provides the rollover behavior and a second tap provides the click behavior. For menu items with submenus this behavior is broken. The first tap both shows the submenu and follows the link on the top level menu item.
We don't have a fix for this yet, but it should be fixed for the next quarterly release of Muse (curently looking like late August).
The list of supported browsers is in the FAQ page of muse.adobe.com.

Similar Messages

Inconsistent display of Muse site on tablet.

I have designed a site on Muse desktop, and when viewed on a tablet, the content shifts to the left and the navagation appears differently across other pages. I have one item pinned in the center, not the left. Here is a link ot the site, if you could take a look.
Thank you -
http://pads6b2.businesscatalyst.com/index.html

Hi Sanjit_Das,
I am having the exact same problem with my mobile site. I have designed the master page with the menu and the footer. When I preview the page the menu has shifted to the top left hand corner. The footer text which in design view is on 2 lines is now on one line in preview mode. I don't have any empty boxes or frames any where on the page just the header, menu and footer text. Why is this happening? I have enclosed a screen capture of the problem below.
Thank you!

Creating a site for mobile devices

Good morning,
I have a number of questions relating to the creation of a
site for mobile devices. My client has given me the assignment to
re-design his current website, and to also create a sub-site
suitable for mobiles. I have spent a number of hours looking around
on the Internet and trying to gain a better understanding of these
issues. Still, a number of questions remain. if you can give me any
additional understanding, that would be great.
Question 1:
Is my understanding correct: I basically need to create two
sites, one for the wide-screen browser, and one for the mobile
browser? I can direct visitors to the mobile site using a CSS or
javascript link - if their browser identifies them as a mobile
browser?
Question 2
Mobile devices come in all sorts of shapes and sizes and
versions. PDA\s and iPhone's have different screensizes and
resolutions that smart--phones, which in turn are different again
from older and simpler phones. Should I design a site for a number
of different types of phones? That would a huge amount of work...
Question 3
I also own Device Central, an App which I should think is
very useful in this situation. But I fail to understand it! OK, so
I can see what my photo or website or flash file looks like on my
Nokia N73 - but I am not designing specifically for that phone. I
also want my design to look good on all the other phones! My client
needs a website that is not tailored to one phone, but to all
phones.
Question 4
And why does Device Central not have profiles for the iPhone?
I would think it is popular enough to warrant its own profile... (I
post this from the Netherlands, where the iPhone is not carried
yet, and so I have only ever held one in my hand). Is this because
the iphone can see regular sites just fine?
Question 5
How does Dreamweaver help me build a mobile site?
Question 6
My client wants to show video on his website. In fact, that's
what this website is all about: showing sports-videos from high
profile sporting events. Which video-formats are most suitable?
Question 7
Do all mobile phones support flash? Or only a few? Or none?
It seems to me that a flash website would allow for more creativity
in the design.
Thanks for any help you can give. Any resources you could
point me to are also very welcome...
Sincerely,
Rogier Bos
Rotterdam, The Netherlands

Macnimation wrote:
> Hi,
>
> I'm experimenting with creating a small site off a
standard site, for mobile
> phone/devices.
>
> Basically, I want to load a basic list page, which has
links to pages that
> will display and run flash movies.
>
> The flash movies, in FLV format are already at 640 x 480
which run fine in the
> main site.
>
> Is it simply to resize the movies to fit the mobile
content size , or will
> they "auto" resize?
>
> Do I have to chnage the webserver configuration in
anyway, its a standard IIS
> site at the moment, but MySQL with apache is also an
option.
>
> Would standard html do or would the pages have to be
done using xhtml or wml?
>
> I would like if possible to get this infomration first
before starting it, so
> I can possibly reduce delays.
>
> Any help or pointers to tutorials would be grateful
>
I'd like to check out the PDA scene some day soon, too. In
the meantime,
there's a recent discussion of this topic here:
http://www.sitepoint.com/forums/showthread.php?p=3288343#post3288343
www.geobop.org - Family Websites
www.invisible-republic.org - Adult political websites (Mature
adults only)

SSLVPN 3rd Party Certificate, still get "untrusted site" with mobile device

Hi,
I have recently implemented an Entrust cert on my ASA for SSLVPN. When accessing the ASA from Windows/MAC, the "untrusted site" page does NOT appear. When accessing the ASA from an Android/iPhone, the "untrusted site" page DOES appear. Can anyone chime in on why this is happening with mobile devices?
Thanks,
Eric

Hi Portu,
I'm not clear with your last request, what are you asking?
I've looked at the security warning on an iPhone, and it reads the following:
"The site's security certificate is not trusted!
You attemped to reach blah.blah.com, but the server presented a certificate issued by an entity that is not trusted by your computer's operating system. This may mean that the server has generated is own security credentials, which Google Chrome cannot rely on for identity information, or an attacker may be trying to intercept your communications."
This does not happen when using Google Chrome on Windows/OSX.

Muse phone site doesn't display correctly when viewed on mobile device, any advice to fix this?

You can view the website at www.conceptfizz.co.uk , desktop works fine, but phone version doesn't load full screen, only on the left hand side. Thanks

It's definitely loading the mobile version. select everything on the page to check that you haven't left any objects on the right hand side of the page, or that any widgets' bounding areas haven't expanded out too far - this often happens when you move components around.
David

Muse site shows mobile version in Chrome but not in Explorer

HI
I have recently started making websites in muse. I have made desktop and mobile versions of the website. When I view the website on my Surface Pro 3 (with its hi resolution 12inch screen) in Chrome or Firefox it will only show the mobile version and I can't make it change. However when I view it in Explorer or Safari it shows up as desktop. I really need this website to display constantly. Has anyone got any ideas?
- I have tried to make Chrome display the desktop version but it wont do it.
- I've tired zooming in and out
- The website is www.metech.co.nz
- I have thought about adding a tablet version that looks like the desktop

Hello,
I just navigated to the site your provided on our Surface Pro 3 and was redirected to the desktop layout you created.
Can you try the following for us?
Delete ALL of the cache and cookies in the browser
Chrome: Delete your cache and other browser data - Chrome Help
Firefox: How to clear the Firefox cache | Firefox Help
Navigate to your site in the browsers experiencing the issue (www.metech.co.nz)
Also can you tell us the following?
Is your site hosted on Business Catalyst or a third party server (ex. GoDaddy, Blue Host, etc.)?
If it is hosted on Business Catalyst, do you recall which option you selected from the "Redirect" drop-down when publishing the site? You can access this by doing the following:
Open your Muse file
From the "File" menu select "Publish to Business Catalyst"
Click on "Options"
Observe the option that is selected by default for the "Redirect" drop-down
If you could let us know if this resolved the issue or not we would greatly appreciate it.
Thanks!
Marc

Adobe Muse: Designing for Mobile Devices | Adobe Muse Feature Tour | Adobe TV

Get an in-depth look at how to design unique smartphone and tablet versions of your desktop site.
http://adobe.ly/TRnIeU

I was so excited to publish a mobile version of my site. Created, previewed - all looks great. Published. The home page looks fantastic! But the menus and links don't work. At all. I have checked the links in Muse and they are pointing where they should....what gives? As for the menus - those are automatically connected to the pages, right??? This is not good. Not at all. In case this helps anyone figure out what is wrong, my url is http://www.getshotnaked.com Can anybody help me? (I am hosted through Adobe Business Catalyst, btw)

Need help trying to have more than one delegate calendar display in iCal and on mobile devices

I have several calendars that are under my user name in Google. They all work as delegates and life is good.
I'm trying to set up the local school with a calendar for the sports schedule as well as a separate one for district events like school board meetings and would like to be able to add one for the holidays, exams and things of that nature. The sports calendar works but I can't figure out how to add the second caledar to iCal or my iPhone. It shows shared but doesn't appear as a possible delegate in iCal and will not load on the iPhone.
Google has the output to allow more than one calendar to display on a website but syncing at the level I want with the "i" apps isn't obvious.
Am I missing something? I really don't want one very cluttered master calendar for the school. Being able to turn on and off the various types of calendar will make it much easier to manage.

I have several calendars that are under my user name in Google. They all work as delegates and life is good.
I'm trying to set up the local school with a calendar for the sports schedule as well as a separate one for district events like school board meetings and would like to be able to add one for the holidays, exams and things of that nature. The sports calendar works but I can't figure out how to add the second caledar to iCal or my iPhone. It shows shared but doesn't appear as a possible delegate in iCal and will not load on the iPhone.
Google has the output to allow more than one calendar to display on a website but syncing at the level I want with the "i" apps isn't obvious.
Am I missing something? I really don't want one very cluttered master calendar for the school. Being able to turn on and off the various types of calendar will make it much easier to manage.

Third Party Hosting Muse Site - 404 Error on Mobile

Hi guys,
I recently exported my Adobe Muse site files (pixelariumstudio.com), uploaded them into FileZilla, and then uploaded the site to GoDaddy hosting services using FileZilla.
The site looks great on desktops but I receive a 404 error whenever I try to view the site on mobile devices (even tablets). I called GoDaddy thinking it was a problem on their end but after two opinions from two separate calls, I've been informed it's the code of the site itself that is the problem. The funny thing is, when the site was hosted through Adobe, it appeared fine on mobile devices but when the site was moved over to GoDaddy, the 404 error arose.
I'm wondering if Muse writes specific code for displaying a site in mobile browsers that is not recognized by third party hosting services because GoDaddy is not redirecting the site to the mobile view and instead just coming up with a 404 error. If so, is there any way to change the code that Muse writes to display the site on mobile devices so that GoDaddy can recognize it? I've done some research online to see what basic code is used to redirect a site to the mobile view but all I came up with was:
<meta name="viewport" content="width=device-width, initial-scale=1">
Every guide I find says to place that tag right after the <head> and I do but still no luck getting the website to display on mobile devices. If anyone knows the proper coding to get GoDaddy to display a Muse site on mobile devices, I would forever be in your debt. I'm guessing it's just a couple lines I have to replace but I don't know what lines or with what to replace it. :/ Here is the entire <head> of the website in case this helps find any faulty code:
<head>
<script type="text/javascript">
   if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musemenu.js", "webpro.js", "jquery.watch.js", "jquery.musepolyfill.bgsize.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "museredirect.js", "jquery.scrolleffects.js", "index.css"], "outOfDate":[]};
</script>
<script src="scripts/museredirect.js?17485671" type="text/javascript"></script>
<script type="text/javascript">
   Muse.Redirect.redirect('desktop', 'tablet/index.html', 'phone/index.html', '');
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="2014.2.1.284"/>
<title>Home</title>
<link media="only screen and (max-device-width: 370px)" rel="alternate" href="http://pixelariumstudio.com/phone/index.html"/>
<link media="only screen and (max-device-width: 960px)" rel="alternate" href="http://pixelariumstudio.com/tablet/index.html"/>

<link rel="stylesheet" type="text/css" href="css/site_global.css?3995807253"/>
<link rel="stylesheet" type="text/css" href="css/index.css?4104780936" id="pagesheet"/>


<script type="text/javascript">
   document.documentElement.className += ' js';
var __adobewebfontsappname__ = "muse";
</script>

<script type="text/javascript">
   document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/playfair-display:n4:all;ubuntu-condensed:n4:all;raleway:n3, n7,n6,n4:all.js" type="text/javascript">\x3C/script>');
</script>

    
<headHTML>
<style type="text/css">video {
        width: 100%;
.mask {
width: 100%;
height: 903px;
display: relative;
position: absolute;
overflow: hidden;
}</style>
</headHTML>
<style>
li {
letter-spacing: 2px !important;
</style>
</head>

Sounds like you haven't uploaded all the files exported by Muse.
Specifically, it looks like you didn't upload the 'phone' folder.
If you use Filezilla or another 3rd party FTP tool, you have to be sure to upload all the files exported by Muse for your site to work correctly.
You can also use the 'Upload to FTP host...' menu item within Muse to upload all the files to your web hosting provider.

Muse site not displaying correctly on tablet or phone

Having a problem with Muse displaying on mobile devices correctly.
I built the site using the desktop layout, then the tablet and phone.
When I open the site on mobile device they display correct.
I navigate to other pages and then the site reverts to the desktop version.
I need to know how to remedy this problem. I uploaded the site to
Business Catalyst and GoDaddy with the same results.

Hello,
The issue most likely is that when the phone layout menu items were linked to their related pages, the desktop pages were selected from the "hyperlinks" dropdown, instead of the "desktop" layout pages. There are different sections for desktop phone and tablet layout pages in the "hyperlinks" section as shown in this screenshot: http://screencast.com/t/KBTtyHeKfHj4
Please go to the design view and re-link the phone layout menu items to the phone layout pages.
Hope this helps.
Cheers
Parikshit

One page not pinching and zooming on mobile devices

Running OS X 10.9.2
Adobe Muse CC 2014
I have uploaded a 4 page website via FTP. Originally the pages were displaying too big (wide) on mobile devices. I couldn't find a solution to this problem so I created a tablet version of the site. Doing so got around that issue, except now 1 out of the 4 pages is not responding to pinch and zoom on mobile devices. The other 3 pages are fine and display at the correct size.
I cannot for the life of me figure it out. Does anybody know why this would be happening?

So for anyone having the same issue I think I've found the problem.
Mobile devices do not respond to pinch and zoom if there is a scroll motion set on that page in Muse. In my case, scroll motion was set by default on the background image inside the content of an accordion panel widget. I had some trouble getting the scroll motion to save as zero for some reason, so I set the values to zero, then unchecked the 'motion' box in; Fill > Scroll > Motion on every background image in the accordion.
I found the info in this thread: https://forums.adobe.com/message/5982902#5982902

What is the correct Page Width for Mobile Device???

Hi All
Just have a question that "What is the correct Page Width for Mobile Device???"
Is the Default 380px width is right? or 320px?
Because the average smartphone is having resolution is 320X480 pixels...
also in this video http://tv.adobe.com/watch/muse-feature-tour/adobe-muse-designing-for-mobile-devices/ Dani Beaumont created the Mobile version website in 320px width (If you watch the video carefully you can notice the page width is 320px)
And if the default page width 380px taken, will it be displayed correctly on every smart phone (average & high end)?
please reply if you have any suggestions

HI. I have designed a mobile web site that is currently 450pixels wide. This is the first one I have done. When it displays on some mobile phones, the width of the entire page is scaled down and it only fills about 1/2 of the width of the mobile phone with a whole pile of mrgin to the right. Is this because I should have designed it to be 380 pixes wide or have I done something else wrong. The test site is at:
http://ancasterdental.com/muse/phone/index.html
Please help me if you can. Thank you.
john.

How to Make Flash CS4/Dreamweaver CS4 Website Function on all Latest Mobile Devices

Hello!
I am trying to add code into my Dreamweaver CS4 file and/or Flash CS4 file in order to have the website I have created work across all of the latest mobile devices as well as traditional online systems. My flash file has a transparent stage, and my dreamweaver file has a full-screen background image. I have reviewed various tutorials and articles available online, and some advocate simply adding code, which does not seem to be working for me, while others suggest having a similar separate site created solely for mobile devices. If this is the best option, I don't know how that should be set up. What is the best path to take with this?
This is the collection of various pieces of code I have tried adding to my files:
<meta name="viewport" content="width=device-width" user-scalable="yes" initial-scale="1.0" /> 
   <meta name="HandheldFriendly" content="true" /> 
</style>
   <param name="allowScriptAccess" value="sameDomain" />
      <param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="true" />
        <param name="var params = {          id: "flashID", name: "flashcontent", menu: "false", allowFullScreen: "true", fullScreenOnSelection: "true", scale:"noscale", salign:"middle"};"
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//or//
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
next_btn.width = 133 * .5;
next_btn.height = 133 * .5;
//flash//
next_btn.width = Capabilities.screenDPI * .5;
next_btn.height = Capabilities.screenDPI * .5;
//flash//
this.stage.addEventListener(Event.RESIZE, doLayout);
//flash://
<initialWindow>
   <width>320</width>
   <height>480</height>
   
</initialWindow>
* Convert inches to pixels.
private function inchesToPixels(inches:Number):uint
   return Math.round(Capabilities.screenDPI * inches);
var button:Sprite = new Sprite();
button.x = 20;
button.y = 20;
button.graphics.beginFill(0x 003037);
button.graphics.drawRect(0, 0, this.inchesToPixels(.75),
   this.inchesToPixels(.25));
button.graphics.endFill();
   this.addChild(button);
//hard-code title://
var titleBar:Sprite = new Sprite();
titleBar.x = 0;
titleBar.y = 0;
//stage width determines width of title://
var titleBar:Sprite = new Sprite();
titleBar.x = 0;
titleBar.y = 0;
titleBar.graphics.beginFill(0x003037);
titleBar.graphics.drawRect(0, 0, this.stage.stageWidth,
   this.inchesToPixels(.3));
titleBar.graphics.endFill();
this.addChild(titleBar);
//footer://
var footer:Sprite = new Sprite();
footer.graphics.beginFill(0x003037);
footer.graphics.drawRect(0, 0, this.stage.stageWidth,
   this.inchesToPixels(.3));
footer.graphics.endFill();
footer.x = 0;
footer.y = this.stage.stageHeight - footer.height;
this.addChild(footer);
* Center one DisplayObject relative to another.
private function center(foreground:DisplayObject,
   background:DisplayObject):void
      foreground.x = (background.width / 2) -
         (foreground.width / 2);
      foreground.y = (background.height / 2) +
         (foreground.height / 2);
//cont.//
var title:SimpleLabel = new SimpleLabel("My Application",
   "bold", 0xffffff, "_sans", this.inchesToPixels(.15));
this.center(title, titleBar);
this.addChild(title);
//override width and height getters
public override function get width():Number
   return this.textLine.textWidth;
public override function get height():Number
   return (this.textLine.ascent - 1);
if (Capabilities.manufacturer == "Android Linux" && Capabilities.screenResolutionY == 1024)
next_btn.width = 85;
next_btn.height = 85;
This is the code for my Dreamweaver CS4 file (without the additional erogenous code attempts!):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Website Title and Slogan.</title>
<style type="text/css">

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<img src ="image.gif" width=90% height=auto>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<meta name="Keywords" content="keywords…" />
<div align="center"></div>
<div align="center">
<p> </p>
<p>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="630">
      <param name="movie" value="FlashFile.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="FlashFile.swf" width="900" height="630">
        
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
</p>
</div>
<div align="center"> </div>
<script type="text/javascript">

</script>
</body>
</html>
I have tried various combinations of the code listed above, but nothing seems to be working. I am not sure as to the correct positioning of the code, and maybe that is the problem, or maybe it is because this code in not for CS4, or not appropriate for my project. I also do not know what code should be inside the Flash file, nor what should should be inside the Dreamweaver file.
Thank you in advance for any assistance!

There is no simple code to add that will display the same on all mobile devices....
you do know that the iProducts (iPhone, iPad, etc) don't display Flash at all, right?
So as a start for "functioning on all latest mobile devices" you should drop any Flash content you have and move on.
Adninjastrator

Website looks different on mobile devices

I know that I can create phone and tablet versions of my Muse website, but I actually don't want a different layout. When I visit my published desktop site on mobile devices, the site's layout looks justified to the left. I have checked to make sure that the page is centered horizontally in the page properties. It looks fine on desktop browsers, but I have a narrow blank strip on the right side of my pages when viewed on mobile devices.
Any ideas how to fix this? Thanks!

Hello,
I would request you to shae the site URL so that we can take a look at it.
Mostly this happens when you place any object outside the browser fill area. Please make sure everything is in side the browser area.
Please refer to the liks below for more explaination.
https://forums.adobe.com/thread/1466574
Re: White border in Phone and Tablet
Regards
Vivek

Adding User Interface for Mobile Devices to access existing website.

Hello All,
I am new the mobile world. We have an exisiting J2SE web based app for our customers. What we want to do is create a set of screens for our app to display the data on any mobile device, Blackberry, iPhone, Netbook, etc. What jars, API's do I need to create these screens? We want to hook into the existing backend services and jars in the main app. I have found the Java Mobile Browser Detector on Sourceforge, anybody had any luck with that? What forums would be best to get the best information on this subject? Looking for advice from people with more experience with this kind of development. Thanks in advance.
Paul

You can look here.
[http://forums.sun.com/forum.jspa?forumID=999]
...display the data on any mobile deviceI suspect that is not going to happen without coding to each device. But that is just a guess.

Inconsistent display of Muse site on mobile devices

Similar Messages

Maybe you are looking for