A. Nonny Mouse Design, Spain
Web Design, Web Development, Web Managment Web Design & Development
Management & Advice
UPDATES (June 2014 and February 2016) AT BOTTOM but please don't skip to the end as the entire article gives useful information.

When a client recently asked me to make a mobile version of their website, I was faced with a dilemma because, although some of the existing pages were just static pages, the main portion of their website was done in the last open source version of Open Realty (version 2.5.8) and there seemed to be no easy solution for creating a mobile version of this portion of the site.

At first I thought that I'd just set up Joomla 2.5 with the Mobile Joomla extension and use the CMS Realty bridge to integrate the two. But then I realised that CMS Realty wasn't available for Joomla 2.5, so that choice was out. But I knew that I definitely wanted to set up the site - at least the non-Open Realty portion of the site - in Joomla 2.5, so I went ahead and set that up.
 
Before I go any further regarding the mobile version of the website, let me first explain why I was absolutely unwilling to use Open Realty since it stopped being open source. When I first discovered Open Realty, many years ago, I was very impressed with it and thought it was the best real estate script that I'd come across. In addition to being very well thought out and easy to use, it was free and best of all open source. Being open source meant that the few things that I found that weren't quite right about it, mostly in the administrative back end, I could make changes to and make as I wanted it.

When, several years ago, the developers of Open Realty decided to encrypt their script, this meant that I would no longer be able to make the changes that I wanted to the script. I checked out the new demo to see if some or all of the improvements that I expected to see in the script - the ones that I'd had to make myself in the open source version - had been made and was disappointed to see that some of them hadn't been. Granted the back-end was much improved but, for example, the text area for adding the description of the property was still not much bigger than a postage stamp. Although you could put in as much text as you wanted, the postage stamp sized text areas were extremely off-putting because you could see very little of the text once you'd put it in and making changes to the text would be difficult, especially for my clients who need things as easy as possible.

Additionally the developers were insisting on a Powered by Open Realty logo with the free version of the script, which I didn't like, and since I would no longer be able to make the changes that I wanted (because it was no longer open source) paying for the pro version was out of the question. If they had just kept it open source, I would have been happy to pay for the pro version but I'm not paying for something that has flaws that I can't fix.

I know I'm ranting on a bit but I found/find the whole thing quite disappointing. I understand that this new encrypted Open Realty is now handling mobile versions but this is not enough to make me even considering using it. Nothing short of making it open source again will convince me to use it.

So, that's why I've been using the old, open source version - it's a really good script, perhaps getting a little dated now, but the logic of the way it is set up is still impressive and with the changes that I've made to it over the years, I really like it.

Anyway, back to the mobile version of my clients website. I did some searching/researching, trying to find an answer to how to make a mobile version of the Open Realty portion of the site. My first thought was that it should be quite easy just to put in some code to detect the device used to view the site and automatically change templates. The problem there is that I'm not a PHP programmer and I couldn't write the code myself. So, I finally went to a website called Orodha, which is an off-shoot of the original Open Realty and came into being at the same time that Open Realty encrypted their code.

On the Orodha forum, there were a number of posts mobile versions but none of them gave me a definitive answer. I reviewed each of the posts and the responses to the posts and tried a number of things that didn't work. That's when I started thinking that perhaps it would be easier to send mobile devices to a separate css file rather than a separate template. I managed to figure out how to do this, I thought, using the meta viewport tag like this: "<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>" and a css file like this: "<link rel="stylesheet" href="/{template_url}/style-mobile.css" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" />" which I tried on a test site and it worked. Unfortunately when I tried it on my client's website, it didn't work (and I never did figure out why). So I was back to square one.

I hate having to ask for help and the last and most useful posts on the Orodha forum were over a year old so I didn't expect to get a response but I was desperate and so I posted on a note explaining my situation and asking for help. And to my delight and surprise I had two very nice, helpful people respond and was finally able to get a solution.

For those of you who may be searching for how to make a mobile version for Open Realty 2.5.8, here is the answer:

1) Put this code in the <head> section of the main.html file of your template:
<?php
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
if(stripos($_SERVER['HTTP_USER_AGENT'],"Android") && stripos($_SERVER['HTTP_USER_AGENT'],"mobile")){
    $Android = true;
}else if(stripos($_SERVER['HTTP_USER_AGENT'],"Android")){
    $Android = false;
    $AndroidTablet = true;
}else{
    $Android = false;
    $AndroidTablet = false;
}
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
$DoCoMo = stripos($_SERVER['HTTP_USER_AGENT'],"DoCoMo");
$Mobile = stripos($_SERVER['HTTP_USER_AGENT'],"mobile");
$BlackBerry = stripos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$RimTablet= stripos($_SERVER['HTTP_USER_AGENT'],"RIM Tablet");

    if( $iPod || $iPhone || $Blackberry || $Android || $webOS  || $DoCoMo  || $Mobile) {
echo '<link href="/{template_url}/stylemobile.css" rel="stylesheet" type="text/css" />';   
}else{
echo '<link href="/{template_url}/style.css" rel="stylesheet" type="text/css" />';
}
?>

2) Make a separate css file called, in this case, stylemobile.css. The easiest thing is to first to make a copy of style.css and rename it stylemobile.css. Then change the css in stylemobile.css to fit a mobile device. You will want to not to show some things that are on the style.css, so you will need to use display:none where that is the case. You will also want some additional css for the mobile version that will not be displayed on the desktop version, so add that as you need it.

3) Update any files that will be affected by the additional css in the stylemobile.css (for example, the listing_detail_mainjavarows.html and the search_result_default.html).

4) Add the additional css done in the stylemobile.css to the style.css and put display:none in those areas.

And that should do it.

I think I've covered everything but if it turns out I've forgotten something or something is unclear, contact me on This email address is being protected from spambots. You need JavaScript enabled to view it..

June 2014 UPDATE

I should have updated this page a while ago as I have had at least one person who has read this article and implemented the changes mentioned above. While those changes will work, I have found that I prefer to use @media queries based on device width to change the css file rather than changing by user agent. The reason I prefer this is that I have much more control over what size screen uses which css file. I do 3 css files now: 1 for computers, 1 for tablets and 1 for mobiles.

So, to that end, I will now explain what I do now in order to switch css files.
1. Put <meta name="viewport" content="width=device-width" /> in head, above the css.
2. Put these lines (or similar, depending on the widths you want to use for computer, tablet and mobile) below the viewport line mentioned above:
<link rel="stylesheet" media="only screen and (min-width: 961px)" href="/{template_url}/style-main.css" type="text/css" />
<link rel="stylesheet" media="only screen and (min-width: 701px) and (max-width: 960px)" href="/{template_url}/style-tab.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width: 700px)" href="/{template_url}/style-mob.css" type="text/css" //>
3. Create the 3 css files and make changes and additions as needed in the other Open Realty files.

Having said all that, I also have to add that I no longer use Open Realty 2.5.8 for anything other than existing clients who already have it. The newer versions of PHP cause errors in the script. I have managed to fix the errors so far but as newer versions come out, more problems will crop up, so I sadly have to report that I don't think this script is viable any more. Oh well, it was good while it lasted.

February 2016 UPDATE

I have just written an article which further addresses this issue. Click here to read it.

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set. To find out more about the cookies we use and how to delete them, see our Privacy Policy.

I accept cookies from this site