Setting up a mobile version of your website

This article will describe how you can setup your website for mobile browsers with WordPress. There are several possibilities how to do this because there are multiple solutions. It is possible to use your current site and using a plugin which will determine a mobile browser, or you can create another website (yourdomain.mobi or m.yourdomain.net) and use a mobile theme.

Both solutions have advantages as well as disadvantages. The first one is a matter of performance. With a plugin still the whole site, theme, options and plugins are loaded before some simple basic text and images are shown on a mobile phone. But on the other hand, you just have to upgrade one system and plugins only once. If you have setup another website with a mobile theme, you have to upgrade the core twice and also every used plugin twice. On the other hand, the performance is better.

But you can’t use the same data in your database because that contains settings and options for your “normal” website and you don’t want to replace those! I assume it is only possible if you use other tables in the database or another database for all the settings and options, and use the original data when showing posts and pages. Let’s see if that will work!¹

Here I’ll describe the second solution: setting up a website for mobile browsers with WordPress and a special WordPress theme for mobile browsers.

There are a few things to consider. The layout of mobile phones is not suitable for extreme graphics, flash and usage of JavaScript. Also most font types are not supported. And the size of the little screen is really the limit for the design of your website. I use a Nokia N95 and that has a resolution of 320×240 pixels or 240×320 pixels, depending on turning the screen to the left. And that, turning a screen, is also an option you have to keep in mind. Below I have some examples of websites that don’t use the turned screen option, they are made for 240 pixels wide only.

As you can see, the pictures below do show those websites much better. But it is quite simple to use the full screen, even if the mobile is straight up or turned left. You can use <div> elements with a width of 100%. Most mobile phones do support HTML and do not need weird systems like WAP (WML) and so. Just keep in mind that a mobile browser is not that extended like FireFox or IE8.

To setup a site, the best way is to create a subdomain preferably with the letter m. So like m.huiz.net or m.yourdomain.com. If you prefer a website like www.yourdomain.mobi, you can do that too. As long as your subdomains or domains are running on the same server, you can call your database by localhost, else you must refer to a database server. 

Next time more about this subject.

——–

 ¹ I still don’t know if this will work, I have to create the theme first and try things out.