GoMobi is a great mobile CMS. It’s flexible, easy to use and it will display on over 6,000 mobile devices, including the iPhone, Android, Blackberry and iPad, but it does have it’s limitations, which can really frustrate a designer.
Here’s an analogy to explain my point. Imagine you’ve just bought a flat panel television. It has fabulous color, takes up little room and looks great. Then you discover that it’s been shipped with rabbit ears and you can only get three channels. Needless to say, you’re disappointed. Then, one day you discover something that looks like an access panel, but there’s no mention of it in the manual. With a screwdriver, you carefully remove the panel and discover something that looks like a plug inside. You look at your cable or satellite tv cable and you think it will fit with the plug in your tv, so you try to plug it in and Bingo! You suddenly get three hundred channels.
It’s a similar situation with the GoMobi interface. There’s so much that’s possible with the interface but it’s not obvious, nor is it written about in the instructions. What you’re going to learn about is a discovery that I made that extends the power of the GoMobi interface and allows you to create customized web pages using a mobile DOCTYPE, some HTML and CSS. The other aspect is you can save all your pages on your server, rather than on the GoMobi server, giving you full control over all of the content. Any changes that you make to your pages will be immediately accessible through your GoMobi mobile site.
In an earlier article, I referenced a site that offers this capability, which shows off both CSS styling and tables. In this article, you’ll learn how to get results similar to these. Before we get started, here’s a download (mobile victoria.zip) of the various files you’ll need to make this work, which you can modify at your discretion.
In this file you get:
• index.html (HTML file which contains the mobile DOCTYPE used for mobile layouts)
• mobile.css
• mobilevictorialog.gif (this is a sample logo. Note that when you build these layouts, it strips away some of the GoMobi design elements, so if you want those, such as the logo, those need to be added manually).
• mobilepromo.png (image layout element).
Here’s a screen shot of the basic CSS, which you can modify to suit your own layouts.
Here’s an example of what the layout will look like in Dreamweaver. Of course, this will have a different appearance in the GoMobi browser. This layout also contains a table, which has been modified. All of these changes are in the files you can download and use a starting point.
Once you’re satisfied with your layout, it’s time to upload it to your server and save it in a folder. In my case, I use GoDaddy, which has given me predictable results. Some hosts don’t work well with this technique and will damage the layout. This appears to do with they way files are handled, so if you start building custom layouts, test the hosting of different providers to make sure that your layouts will work.
Making this work with the GoMobi interface is a snap. To do so, open the Publishing Manager in OpenSRS, click on the name of the file you’re working on and in the resulting page, click on LAUNCH SITE BUILDER.
When the Site Buider opens, click on the Features tab. Scroll down the page until you get to the section with the heading: Create Link. Click on it to open it.
In the Features tab, select Web (http://), then enter in the full URL with the directory and file name of the location where you’ve uploaded your data. i.e. http://www.mobilewebsitemarkets.com/htmlgoodies/index.html At this point you’ll want to rename the icon, change the icon and decide where you want it on the layout. In this case I chose “$.” Once you’re done, click on the Add to Site button at the bottom of the page.
Here’s a preview of what the page will look like in a mobile browser. That’s about all there is to it. It’s a quick fix to a complex problem. It’s been tested on the iPhone, Blackberry and Android and the results have been excellent every time.
One other thing you should know. If you’re giving a demonstration to a customer who doesn’t have a smart phone and you don’t have one handy, you can do the demonstration in the browser. A word of warning: If you leave the browser settings as they are and attempt to display your custom pages, this is what you’ll see, above. This is because we’ve not used any methods to constrain the layout.
Fortunately, there’s an easy fix. Constrain the width of your browser so it matches the width of your mobile interface, like the image above. Then your custom layouts will match the other pages and prevent any unpleasant surprises.
And that’s it, a quick and easy way to extend the capabilities of the GoMobi interface. In the next article we’ll look at tips and tricks to help you get the best out of your GoMobi layouts.
