Mac SEO Blog

More and more users accessing the internet via their mobile devices. As a result it is important for the user experience that the webpages they browse look good on their hand-held devices. The video tutorial below will show you how you can create a mobile friendly version of your iWeb website. Users visiting your website on an iPhone or Android device will automatically be redirected to the mobile version of your website. Be sure to use the sample code for setting up the redirect:

VIDEO TRANSCRIPT:

In this tutorial, I am going to show you how you can create a mobile version of your iWeb website, so that users visiting your site on an iPhone or Android will be directed to your mobile friendly website.

In order to follow this tutorial completely, you must have a RAGE Web Hosting account. You can sign up for a hosting account ragesw.com/hosting

You will also need iWeb SEO Tool, or SEIntelligence, which are two applications offered by RAGE Software that allow you to add search engine optimization features to your website.

Our first step in the process will be to setup the address for the mobile site. If you have paid attention in the past to the addresses of websites you have visited on your phone, you may have noticed that typing in facebook.com for example, will turn into m.facebook.com – In this case, M represents mobile.

Now we must set it up so that your address will turn into something similar. The first thing you need to do is login to cPanel. Your cPanel login information was sent to you in your RAGE Web Hosting: New Account Information email. When you are logged in click on the icon that reads Subdomains.

In the Subdomain text field, type in mobile just like you see here. You will notice that your mobile URL will now be the combination of this subdomain plus your domain. So in my case, it will be mobile.ragesw.net. Just a quick note, if you have multiple domains on your account, you can click this drop down menu to select the domain you want to use for the mobile site. You will notice that the Document Root field will automatically be filled with www/mobile. Take note of that because we will be using it later on in the video.

The next thing we are going to do is prepare our mobile sites in iWeb. What we will do is create a new site by going to File and selecting New Site. Since we want our mobile site to be mobile friendly, our best option is to choose the blank page. Now, I’m just going to get rid of this text box, and then disable the navigation menu. This is done by clicking on Inspector, and clicking on the Page tab, and unchecking the options to Include this page in the navigation menu, and DIsplay navigation menu. The reason we do this is because since we want to ensure mobile friendliness, we basically want a blank page and none of the page defaults from iWeb.

With the inspector window still opened to the Page tab, click on the Layout button, and change content width to 300 pixels. This is going to create a mobile size canvas for us to create our mobile sites on. Repeat this for all of the mobile pages you are going to make.

Now you can design a more mobile friendly version of your website. This can include images that are smaller in file size, and larger more compact text. It might be a good idea to visit some mobile friendly websites on your phone so you can get a better idea of how to design your mobile site. One tip is to always include a link to view your full site. A way to do this is to just create a text box that says View Full Site, highlight the text, open the Inspector window, go to the hyperlink tab, click to enable as hyperlink, and type in the non-mobile link for this respective page.

When you are done creating your Mobile friendly site, you will need to publish it. The important thing here is to publish the mobile site to that new subdomain that we just created.

So if you are using iWeb 09, you will go to the publish page by clicking on the site name, and select Publish to FTP server from the drop down menu. Customize the site name and contact email to your liking.

Input your server address, username, and password. In the Directory/Path field, type in the location of your subdomain, which if you remember from earlier, was www/mobile.

In the website URL field, make sure you type in your URL as http://mobile.yourdomain.com. In my case, I will type it in as http://mobile.ragesw.net

When you are all ready, click the Publish Site button to publish the site.

If you are using an older version of iWeb, publish this new mobile site like you would publish your regular site. The most important thing to remember is that you need to publish the site by putting www/mobile in the Directory Path field. If you forget to do this, it will not work, and you risk overwriting your original website, so do not forget about this step.

When the site has been published, you can visit it on your phone by going to mobile.yourdomain.com to make sure everything looks the way you want it to. If not, go back to iWeb and make your changes and then publish the site once again.

Once you are satisfied with the mobile version of your site, there is one last thing that needs to be done in order to make the phone know to send the user to the mobile version of your site.

Go to ragesw.com/blog. In the search field, type in web hosting tutorials, and select the result that reads RAGE Web Hosting Video Tutorials. The direct link to that page is this. On this page, locate and click on the link that reads Setting Up A Mobile Friendly iWeb Site.

On this page, you will see this link that reads “Be sure to use the sample code for setting up the redirect” Click on this link and copy the code that will appear on the page that follows.

Now, before we paste this code somewhere, I want you to first publish your main website from iWeb to a local folder on your hard drive. Then load that local folder into iWeb SEO Tool, or SEIntelligence, whichever program you use. In this example, I am using iWeb SEO Tool, but the same principle applies to SEIntelligence.

With your website loaded in the tool, paste the code that we just copied in the head code section of the Site Settings tab. Replace the URL which reads mobile.ragesw.net to your mobile URL. If you are using SEIntelligence, open the Site Settings tab, and paste the code in the Header Code/Google Analytics box. Also replace the mobile.ragesw.net URL with your mobile URL.

If you have another code in this box, such as Google Analytics, just paste this code above it. Then click on the Apply To Entire Site button.