Experiments in mobile site design with Adobe Muse
Everyone is talking about responsive design, however there’s certainly still a number of sites that use separate mobile versions to improve the browsing experience for those users. Here’s a great 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 separate mobile site work?
When a visitor lands on the desktop version of your site, a small piece of code (often 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 style sheet (CSS) that simply loads the HTML content into a format that’s better suited for that particular resolution.
For the purpose of this demonstration, 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, so I took that as a challenge. My first step was to look 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 order to better fit the interior window of mobile safari.
SIDE NOTE #1: It seems there is a bug in Muse (do I get a prize for finding it first?) When you create a new site with the dimensions 320 x 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 down to very small. Then you can create your mobile site without any crashes.
Make your thumbnails tiny like the site above! Or you might get:
Okay, let’s continue - here are the settings I used in Muse for my iPhone friendly website:
Step 2 - Scaling the content to fit the mobile browser window
If you were to design your mobile site at the size shown above and publish it onto the web, it wouldn’t look quite right when you viewed it on your phone. The background would be wide, and you would still have to pinch to zoom in and out in order to fit the content to the screen.
There’s a meta-tag that can be used to control how content scales within the browser called “Viewport”. If you publish a site without controlling the viewport (using the code snippet below), the browser background will be visible and your site will look microscopic in the middle.
With the following code snippet embedded in the mobile site (or included in the Page Properties > Metadata > HTML for <head>) you can ensure the site scales up to fill 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:
So much better!
Step 3 - Design your site
I skipped designing anything elaborate for this post. Sorry. This experiment isn’t about the visual design aspect of mobile websites; it’s about implementing the code to automatically redirect mobile visitors there.
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 be a seperate link, away from from the desktop version of your site. Here’s a quick breakdown:
Use a third party FTP program like Filezilla to login to your web server. Even if you’re hosting the site on Adobe’s Business Catalyst, you can still use any FTP software to connect to your host.
Example:
Host: yoursite.businesscatalyst.com
Password: whatever you set
Once you’ve connected, you will need to create subfolder on the site and upload your mobile site to it. I recommend something simple such as naming the folder “mobile”. That would mean the link to your mobile site would be: www.yoursite.com/mobile
(Please note that you need to replace “yoursite.com” with your web address)
Step 5 - Embed code in your desktop site to redirect mobile browsers
This is essential! Using the small snippet of code below, we can actually automatically detect the device a visitor is using (or the screen resolution), and immediately forward them to that location. The code looks like this, and needs to be embedded in your Muse desktop site:
You may notice after the words “userAgent”, you see the name of a device - “iPhone”, or “iPod”. These are the devices that you’re going to be detecting and redirecting.
Immediately following those words, you can see the line “location.replace (www.yoursite.com/mobile/index.html) - what do you think goes here? If you guessed the location that you uploaded your mobile site, then you’re correct.
SIDE NOTE #2: if you want to redirect based on a specific resolution, then you could use a variation of this code (provided below). Replace the number after “screen.width” with whatever size of browser window you’re catering to.
Why would you want to use the technique above? Well because there are so many devices out there all using variety of screen resolutions, that's it is near impossible to design unique sites for them all. This is why responsive design is so popular, 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 up different versions depending on the browser that’s viewing it.
SIDE NOTE #3: "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 design", and try playing with a reasonable site size that could look 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)
#5 - Embed redirect code into the desktop version of your Muse website, and point that link to your newly uploaded Mobile site.
First, visit this website on your desktop - you should see a dinosaur.
http://www.visualarms.com/mobiletesting/index.html
Now visit the same site on your iPhone - you should see a robot.
http://www.visualarms.com/mobiletesting/index.html
Here’s a QR code if you’re too cool to type that link in.
Cool? Game-changing? Useless? That’s up to you.
Cheers!
(Please note that most of this code isn’t new to the web, it’s actually been in use for a few years. Eventually Adobe will rescue us by implementing responsive site design directly into Muse. But for now, we work around…)
Comments
I snapped the QR with my Android and saw the dinosaur. And now I FEEL like a dinosaur myself.
Same question as Mike D. Can it work with Android if you properly place it in the code?
I don’t see why it wouldn’t work with Android. Sent Mike a link via email that had a redirect script for Android – it’s actually the first result when you Google “Android Redirect”. Code is pretty much identical to what is above, just using “Android” instead of iPhone, etc.
I’m so stoked after finding this article. I can’t wait to build my mobile site! It would be nice to know if the same info works for android phones.
Touchdown! That’s a relaly cool way of putting it!
I just checked on my Blackberry 9860 (all touch) with the current viewport you have in place … and the result is … desktop.
Love this post – answered some questions very quickly and now also pointed out some things to look for
Just a quick question in regards to accessing my muse site within Business Catalyst via ftp.
I don’t seem to have the option to change or add any sub folders within Business Catalyst
any idea as to what I maybe doing wrong here?
Hi James,
What FTP software are you using? I’d suggest Filezilla – it’s my favorite, and creating / renaming folders looks just like you were doing it in finder (or explorer). You definitely have full access within your BC hosted FTP server to make those changes…
Good luck!
Would the same principal work for iPad? I accept designing 3x versions is a drag but a bespoke site for each would be a great selling point…
Hi Steve! Great post ;)
I just wanted to ask you how could I make the mobile website in full screen. Kind of like a web app.
Thanks!
I discovered your blog site on glooge and check a few of the early articles. Still maintain the good work. I just additional up your RSS feed to my MSN Information Visitor. Seeking ahead to reading more from you in the future! …
Hey great post . i have questions i think you can help, i put the viweport code and it works in all the pages of my web movil but the home . and it´s the home the one that has the code but also i put the google analytic code do you thinks is that why it doesnt work in the home page because ut has the 2 codes . please let me know .
hi!
Im building a website, through web page maker and adobe muse. Im not done yet with the desktop version, so I havent even begun with the mobile version. BUT!! I want to put a just one mobile page with the message “website under construction” and a link to the mobile version… As you point out, the same link inserted in a mobile will lead to a different page, how can I redirect it to the desktop homepage?
Thanks for this! Is there a way to also center the content for all devices, once the zoom is controlled?
This was a great post,.. Muse has had various updates since,. but I was wondering if you knew of a solution for being able to zoom into the desktop version of a muse site on a mobile. (Specifically my iPhone won’t let me zoom into my muse site.
Awesome, I have been looking all over for this!
does this work the same way with Android, blackberry, etc?
Do I use the same userAgent code but switch out iPhone with other device names?