How to Build a Hybrid Mobile Site With GoMobi

Just having a website for your small business isn't enough in today's mobile world. This step-by-step article provides instructions for using the popular website development software GoMobi to build and customize a mobile site.

Mobile technology is so prevalent today that consumers are increasingly buying smartphones and tablets instead of desktop computers or laptops. Advertisers see the value of this new medium and are striving to take advantage of it by building mobile websites and apps that offer everything from products and services to games and other forms of entertainment.

You can build two major types of mobile sites: apps and mobile websites. With an app, you’ll need to design one for each mobile device. This is fine as long as you don’t need to make too many of them; if you want a layout for many different devices, though, this can quickly get expensive.

Tips: How and When to Build a Mobile Website

In contrast, a mobile website can work on many different devices and can be considerably less expensive to build. The downside is that you’ll probably need to use off-the-shelf-software, which in turn might lack some of the options you’d have if you built a mobile app.

This article will look specifically at GoMobi mobile website development software. GoMobi is designed to work on more than 6,000 mobile devices, including those with the iOS, Android and BlackBerry operating systems. GoMobi does have its limits, but there is a workaround that offers you more flexibility than the standard interface.

Getting to Know the GoMobi Interface Layout

Before you fire up GoMobi and get started, you have to decide whether to use a .mobi domain or a subdomain. The former is easier to find in search engines and the extension makes it instantly obvious that you have a mobile site. The subdomain, which would look like m.yourdomain.com, is less obvious to users and search engines, but the idea is starting to catch on. A mobile domain typically costs about $7 per year, while a subdomain is free so cost isnt a factor with either option.

You’ll also need to get GoMobi itself. The easiest way to get the software is through an authorized GoMobi partner, the bulk of whom are Internet hosting services.

Once you have done that, and you launch the GoMobi site builder, you’ll see an interface like the one below:

Sitebuilder Interface in GoMobi — The Control Panel for mobile site building in GoMobi.

As you can see, the preview of my site doesn’t look that great, so I have to edit it using the design tools. After the edits are done, I’ll access the other tabs and customize the mobile site from there.

First, choose a template for your site. As you can see, there are many options:

GoMobi Templates — Numerous templates are available to GoMobi users.

Below that, you’ll see an area where you can customize the site look and feel even further with the Head Layout, Body Layout, Icon Set and Logo.

GoMobi Customization — Customizations are available, too.

Next, you can set the color scheme or choose custom colors for the icons, backgrounds and so on.

GoMobi Color Schemes — GoMobi offers many color scheme choices as well.

Having made those adjustments, here’s what the site preview looks like:

At this point, it’s time to add a couple other features to the mobile site.

GoMobi Additional Features — We’re not done yet. There are more features to add.

Under the Tools tab, you have a wide variety of choices.

These options include QR codes, Google Ads, site search engine optimization (SEO), Google Analytics and the capability to copy your site. The most important of these, though, is the Redirect Code Generator. This creates a snippet of code that you place on the home page of your desktop site. The code detects that a website visitor is using a smartphone and automatically moves the user to the mobile site.

GoMobi Redirect Code Generator — The Redirect Code Generator is one option.

The Analytics tab is useful, too, since it allows you to view information about visitors to your mobile site.

GoMobi Analytics — So is an analytics tab.

How-To: Embracing Mobile Site Visitors: Early Detection is Best

Major Features of the GoMobi CMS

One nice thing about GoMobi is that it lets you add a variety of icons to your business’ mobile site. Some will make more sense than others, depending on the nature of your business, while others are a must-have in today’s increasingly mobile world.

Among the necessities is a Call Us icon. This lets potential customers call your business with the press of a button while they’re out and about, saving them the trouble of toggling between their mobile browser and dialer.

There’s also the Find Us icon, which will show your business location and address on Google Maps. All customers have to do is click on the Get Directions button, and a screen will pop up to give you choices for ways to find your business.

Here’s an example of the screen in use with Willie’s Bakery and Café in Victoria, B.C. Note the Get Directions button at the bottom of the page.

GoMobi Find Us Screen — The GoMobi Find Us screen contains a map, address, phone number and Get Directions button.

Let’s say I want to stop in for a cup of coffee. I click on the Get Directions button highlighted above and a popup appears.

In this case, I click on From Current Location.

GoMobi Find Us Directions — Ask for direction and ye shall receive.

This brings up a new screen with directions to the restaurant and a map of the route.

If you own a restaurant or other business that requests (or requires) customers to make reservations, then the Booking Request icon is a must for your mobile site.

GoMobi Booking Request Page — Hit the “Get Directions” button and this is what you see.

At left is the booking request page looks like in action. As you can see, customers enter their name, phone number, email address and the time and date they wish to book, along with any comments. After that, they answer the security question and click Book. It’s that easy.

Adding a Site Translation icon brings up a list of more than 40 languages that GoMobi will translate a page into at a customer’s request.

Meanwhile, the Integrated Service icon will let customers buy products and services from their mobile devices using PayPal or Google Checkout accounts.

GoMobi Products — This is the popup visitors see after clicking the Integrated Services icon.

Finally, various Social Media will connect customers to your business’ Facebook, Twitter, LinkedIn and YouTube accounts.

Limitations of the GoMobi CMS—and a Workaround

One downside to the GoMobi CMS is that it doesn’t support tables or JavaScript. Fortunately, I accidentally discovered a workaround that allows for many custom features.

The workaround revolves around a mobile page created with HTML and CSS that in Adobe Dreamweaver. This makes it possible to create customized pages and link them into the GoMobi system. While GoMobi uses a proprietary interface, these pages could be hosted elsewhere. The end result is a hybrid site.

Feature: Top 20 Mobile Websites and Services

Here’s the basic page code that I use in Adobe Dreamweaver to build the custom pages. It includes a CSS link.

And here’s the code for the CSS document.

@charset “utf-8”;

/* CSS Document */

body {