These are the devices that you’re going to be detecting and redirecting. You may notice after the words “userAgent”, you see the name of a device - “iPhone”, or “iPod”. 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: That would mean the link to your mobile site would be: (Please note that you need to replace “” with your web address) Step 5 - Embed code in your desktop site to redirect mobile browsers I recommend something simple such as naming the folder “mobile”. Once you’ve connected, you will need to create subfolder on the site and upload your mobile site to it. ![]() Even if you’re hosting the site on Adobe’s Business Catalyst, you can still use any FTP software to connect to your host. Use a third party FTP program like Filezilla to login to your web server. It needs to be a seperate link, away from from the desktop version of your site. Here’s a quick breakdown: Once the mobile site has been designed, you will need to export the HTML and upload it to a subfolder on your FTP server. Step 4 - Upload your new mobile site to your hosting server This experiment isn’t about the visual design aspect of mobile websites it’s about implementing the code to automatically redirect mobile visitors there. I skipped designing anything elaborate for this post. So much better! Step 3 - Design your site Here's what that code does to your website: With the following code snippet embedded in the mobile site (or included in the Page Properties > Metadata > HTML for ) 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. 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. There’s a meta-tag that can be used to control how content scales within the browser called “Viewport”. 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. 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. Step 2 - Scaling the content to fit the mobile browser window Okay, let’s continue - here are the settings I used in Muse for my iPhone friendly website: Make your thumbnails tiny like the site above! Or you might get: Then you can create your mobile site without any crashes. 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. 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. 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. My first step was to look up the pixel dimensions of the size of site I wanted to build - an iPhone in portrait format. I’ve never come across a mobile site designed completely in Adobe Muse, so I took that as a challenge. Step 1 - Setup your Mobile friendly website in Muse 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.įor the purpose of this demonstration, I’ll be using a redirect to a different location (essentially a separate website). 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. ![]() An understanding of this helps to make sense of the following post: Here’s a great link from the Google analytics blog comparing the benefits of responsive vs. ![]() 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.
0 Comments
Leave a Reply. |