Create a Mobile Website

Do you need to create a separate mobile site? Or will it just "work" on mobile devices? Let's find out!

When we say "mobile website", we usually mean a website that has been built specifically to be viewed on mobile devices (such as mobile phones, iPods, and maybe even iPads and other tablets, etc).

Actually, in many cases, a "mobile website" is actually the same website. The only difference is that the template automatically detects which device is viewing the website, then displays the correct layout depending on the device being used. So in these cases, by saying that you're going to "create a mobile website", you actually mean that you're going to modify your existing website's template to be more "mobile friendly".

The "Automatic" Mobile Site

If you use an online website builder, you might find that the package includes a mobile site. In some cases, you may need to configure the mobile site through the website builder. In other cases, there's no need to create a separate mobile website, as it's all done for you.

For example, our partner site ZappyHost has an online website builder plans that have a mobile site included (Full Disclosure: ZappyHost is a partner site and I earn a commission from any product sales).

If you don't use a website builder, you'll need to create your own mobile site.

3 Ways to Create a Mobile Website

There are three main approaches to creating a mobile website. The approach that you use will depend on your particular circumstance.

• Create a Separate Mobile Website
• Mobile Device Detection
• Responsive Design

Below is an explanation of each.

Create a Separate Mobile Website

This method involves creating a completely different version of your website. This version has been specifically designed to be viewed using a mobile device. Using this method, the mobile website will be served on a different URL to the desktop version. For example, if the desktop version is on www.html.am, the mobile version might be on m.html.am.

One of the disadvantages of creating a separate mobile website is maintainability. Any updates to the website needs to be done to both websites - the desktop and mobile version.

A key advantage of this approach is the speed in which you can create a mobile website - especially if you use an online mobile website builder. Some webmasters use this apprach first - so that they can quickly make a mobile website. Then later, once they have more time, they modify their existing website to use either responsive design or mobile device detection.

Mobile Device Detection

A common method of creating a mobile website is to use mobile device detection. This is where you use a server-side script to detect whether the user is using a mobile device or not. If they are, you display your content in a way that is optimized to mobile devices. For example, your mobile version might have smaller (and less) images. Also, the navigation might be positioned differently.

One of the main differences between desktop websites and mobile websites (when it comes to layout) is that, while desktop websites usually have their navigation near the top of the page, mobile websites usually have their navigation at the bottom. The reason for this is simple. Mobile website users don't want half (or all) of their screen filled up with the same navigation every time they view a new page on your website. Imagine if a user decides to view say, four pages on your website. Now, imagine them getting annoyed at you - because every time they view a new page, they have to scroll down just to view the article!

Another big difference between desktop and mobile websites is the navigation itself. Navigation buttons need to be quite large and well defined on mobile websites. This is because users need to use their fingers to click them. If the navigation is too small or not clear enough, the user could accidentally click on the wrong option. This often means that the navigation takes up quite a lot of space on mobile websites - supporting the reason to place the navigation near the bottom.

When using mobile device detection, you have a choice of serving the website on the same URL as the desktop version or a different URL altogether.

• Different URL

  Many websites display their mobile version on a subdomain of the main website. For example, if the desktop version is on www.html.am, the mobile version might be on m.html.am. In this case, when the mobile detection script encounters a mobile device, it simply redirects the user to the mobile version of the site.

  While this may seem like a logical way to go, it might not be your best choice. Search engines such as Google recommend against using a separate URL if possible.

• Same URL

  Some webmasters/companies configure their mobile website so that it is displayed at the same URL as the desktop website. So, if the desktop website is located at www.html.am, so is the mobile website.

  Displaying both desktop and mobile content on the same URL is usually done via server-side scripts. The script detects which device is being used to view the website, then dynamically displays the content in a format that's suitable to that device.

  This approach definitely has its benefits. One of the main benefits is that it avoids duplicate content issues (where the same content is located at more than one URL).

Responsive Design

Responsive design is a concept where, a single version of your website is optimized for all devices. This is typically achieved using CSS to display the appropriate items and their styles to suit the viewing device. CSS can be used to adjust an HTML element's size, color, style, etc. It can move elements to a different position on the page or even hide them altogether. CSS media queries can be used to determine different styles based on the size of the user's window. Using responsive design, your website will often appear to "adjust" itself as you resize your browser.

Responsive design seems to be a very logical way to go about designing your website. Having said this, it can take quite a bit more effort to create a website using responsive design. Also, depending on your website, you might find that responsive design doesn't quite cater for all your needs.

Summary

In summary, you have three main choices when it comes to creating a mobile website. The option you choose will depend on your individual circumstances.

But whatever you do, don't forget to test your mobile website with as many mobile devices that you can get your hands on!