Upload New Muse Design to Existing Business Catalyst

Anybody is talking about responsive design, all the same in that location'due south certainly yet a number of sites that utilize dissever mobile versions to meliorate the browsing experience for those users. Hither's a cracking link from the Google analytics blog comparing the benefits of responsive vs. mobile sites. An understanding of this helps to make sense of the following post:

http://analytics.blogspot.ca/2012/07/mobile-websites-vs-responsive-design.html

How does a split mobile site work?

When a visitor lands on the desktop version of your site, a pocket-size piece of code (oftentimes using Javascript, PHP, etc.) detects the visitor's device or browser size and redirects them to another location. This separate location is usually a completely different site designed specifically for that device; however it can also be a separate manner sheet (CSS) that simply loads the HTML content into a format that'southward better suited for that particular resolution.

For the purpose of this sit-in, I'll be using a redirect to a different location (essentially a separate website).

Step 1 - Setup your Mobile friendly website in Muse

I've never come across a mobile site designed completely in Adobe Muse, and so I took that equally a challenge.   My get-go step was to wait up the pixel dimensions of the size of site I wanted to build - an iPhone in portrait format.

While the resolution of the iPhone screen is 320 x 480, I decided to build the site at 320 x 356, in lodge to meliorate fit the interior window of mobile safari.

SIDE NOTE #1:  Information technology seems at that place is a bug in Muse (do I get a prize for finding it first?)  When y'all create a new site with the dimensions 320 10 356, Muse will crash if your thumbnail size in the Plan view is bigger than those dimensions. Before you create that new site, you will need to open a "normal" sized website and in the plan view scale the thumbnail size downward to very minor. Then you can create your mobile site without whatever crashes.

Make your thumbnails tiny like the site above!  Or you might get:

Okay, let's keep - here are the settings I used in Muse for my iPhone friendly website:

Stride 2 - Scaling the content to fit the mobile browser window

If yous were to blueprint your mobile site at the size shown above and publish it onto the web, it wouldn't look quite correct when yous viewed it on your phone. The background would be wide, and you lot would notwithstanding have to pinch to zoom in and out in order to fit the content to the screen.

There'south a meta-tag that can be used to control how content scales within the browser called "Viewport". If yous publish a site without decision-making the viewport (using the code snippet below), the browser background will be visible and your site will look microscopic in the middle.

With the post-obit code snippet embedded in the mobile site (or included in the Folio Properties > Metadata > HTML for <caput>) you can ensure the site scales up to fill up the browser, and the user won't be able to zoom in and out by pinching.

THE VIEWPORT Code:

Here's what that code does to your website:

Then much meliorate!

Step 3 - Design your site

I skipped designing anything elaborate for this post. Deplorable. This experiment isn't virtually the visual design aspect of mobile websites; information technology's virtually implementing the lawmaking to automatically redirect mobile visitors in that location.

Step 4 - Upload your new mobile site to your hosting server

Once the mobile site has been designed, you will need to export the HTML and upload it to a subfolder on your FTP server. It needs to exist a seperate link, abroad from from the desktop version of your site. Here's a quick breakdown:

Use a third political party FTP program like Filezilla to login to your web server. Even if you're hosting the site on Adobe'due south Business Catalyst, you lot tin can yet utilize any FTP software to connect to your host.

Case:

Host: yoursite.businesscatalyst.com
Password: whatever you prepare

Once you've continued, yous volition demand to create subfolder on the site and upload your mobile site to it. I recommend something uncomplicated such as naming the binder "mobile". That would mean the link to your mobile site would be: world wide web.yoursite.com/mobile

(Please notation that you need to supersede "yoursite.com" with your web address)

Pace 5 - Embed code in your desktop site to redirect mobile browsers

This is essential! Using the small snippet of code beneath, nosotros can actually automatically detect the device a visitor is using (or the screen resolution), and immediately forward them to that location. The lawmaking looks similar this, and needs to be embedded in your Muse desktop site:

Y'all may find after the words "userAgent", you see the proper noun of a device - "iPhone", or "iPod". These are the devices that yous're going to be detecting and redirecting.

Immediately post-obit those words, you tin can see the line "location.supercede (www.yoursite.com/mobile/index.html) - what practice yous retrieve goes here? If you guessed the location that you uploaded your mobile site, then you're right.

SIDE Note #ii: if you lot want to redirect based on a specific resolution, then you could utilize a variation of this lawmaking (provided below). Supercede the number later on "screen.width" with whatsoever size of browser window you lot're catering to.

Why would you want to use the technique above?  Well because at that place are so many devices out in that location all using diversity of screen resolutions, that'south it is near impossible to blueprint unique sites for them all. This is why responsive design is and so pop, because you don't need to worry about updating and designing multiple sites. Forget the days of "best viewed on", now your site will serve upwardly dissimilar versions depending on the browser that'due south viewing it.

SIDE Annotation #iii: "Breakpoints" are used in responsive site design as the common sizes that sites should be designed to fit (desktop, tablet portrait / landscape, mobile portrait or landscape). Google "common breakpoints in web pattern", and attempt playing with a reasonable site size that could await good on all devices (e.g. iPad portrait).

TIME TO TEST:

#1 - Mobile site setup in Adobe Muse

#2 - Include viewport code

#3 - Complete your design

#4 - Upload mobile version to a seperate folder on your server (via FTP)

Here's a QR code if you're too cool to type that link in.

So what happened?  I detected that you were visiting the dinosaur (desktop) site on your phone, and automatically forwarded you to the robot (mobile).

Cool? Game-changing? Useless? That'due south up to you.

Cheers!

(Please note that nigh of this code isn't new to the web, it'southward actually been in use for a few years. Somewhen Adobe will rescue us by implementing responsive site design directly into Muse. But for now, we work around…)

vickeryhiciandold.blogspot.com

Source: https://www.muse-themes.com/blogs/news/6296420-experiments-in-mobile-site-design-with-adobe-muse

Share this post