Introduction

For mobile phone and other mobile device users visiting my DenverHomeValue.com real estate website, the normal Joomla template (Affinity by RocketThemes) is way too complex to display properly (or quickly) on the smaller screens of those devices. As a result, mobile device users would not have a very good experience.

The first step was to take a very basic Joomla template that I was already familiar with, copy it to a new folder under the templates directory, and strip it down even further, to the bare essentials. I then heavily modified the original template’s css to work with smaller screens. For maximum compatibility with the many different screen widths that mobile devices can have, the template css never uses specific pixel sizes. It uses only percentages for screen wrappers and other div width specifications. This also means font sizes, margins and padding criteria are all specified in em units ( .9em, 1.0em, 1.2em, etc.), never points or pixels. This technique allows each device to allocate specific font pixels and screen widths according to its own capabilities and limitations. The process would be very similar for a WordPress theme file, which I will probably also do soon.

Then, you (the website actually) have to know if the browser visiting the site is a mobile device, and then send the user to an appropriate page that uses the simpler, mobile device compatible template. To do that, I developed and installed custom php code to do that into the index.php file. That gets pretty technical, and php code is not what this article is about, so I will skip that for another article.

During all this, I found that it was also necessary to also have a way to test the results of my work on my PC, and still make the special device sensing code think that it was a mobile phone. I searched the web to find something that would do this, and found a Firefox add-in called “User Agent Switcher”. It allows you to build a library of different user agent s strings, not only for mobile devices, but also for different browsers and search engine crawlers. It was just what I needed to “fake out” Joomla and the special device sensing code, and also allows me to quickly and easily test with different mobile device types. It also allowed me to capture screen prints of the results, as included following.

The end result (test results emulating iPhone with 320 px screen width) is a page like the following. It has a very simple graphical banner that works with the smallest 240px mobile screen, content that is written and maintained within the Joomla CMS as usual, and a very simple footer that uses a Joomla Custom html module in the template’s footer position. It has the required ownership disclosures for a Realtor website, and links to special versions of my terms, copyright and contact pages. Those are that are attached to both the normal and mobile template via normal Joomla menu selections and template configuration processes.

Welcome Page

With these basics taken care of, I could work on my real estate listing content for users doing a home search on their mobile device. For that, I had to go to my IDX vendor’s tools, and condition them to also recognize the mobile device and modify the html they generated accordingly. They are not Joomla, and are based on the Django template language, so I am skipping that entire process, which I will post in another article that addresses the vendor specific details.

The end result is a home search form like this:

IDX Search Form

The user would enter their search criteria in the form, then click the “Search Now” button, and get:

IDX Summary Search Results

IDX Details Page

Clicking on any property photo or the “Property Details” link, would get details like the following Property Details Examples: