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.

By Nathan Segal
Thu, December 27, 2012

CIO — 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:

Layout 

Preview

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.

GoMobi Tools 

Menu
Here are a few.

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.

GoMobi Call 

Us Icon

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.

GoMobi 

Find Us Icon

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.

GoMobi Find Us Popup Screen
Hit the "Get Directions" button and this is what you see.

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.

GoMobi Booking Request Icon

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.

GoMobi Site Translation Icon

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.

GoMobi Social Media 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.

< !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >< /title >
< link href="/css/mobilecss.css" rel="stylesheet" type="text/css" />
< /head >
< body >
< /body >
< /html >

And here's the code for the CSS document.

@charset "utf-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.medium {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; font-weight: bold;
}
.mediumwhite{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
}
.big {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px; font-weight: bold;
}
.xbig {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
}

As you can see, there's not much to it. Of course, you can customize this code for your own layouts as necessary.

Here's an example of what this looks like in use.

GoMobi With CSS and HTML
An example of a GoMobi site that uses CSS and HTML.

Luckily, implementing this with the GoMobi interface is a snap. First you'll need to upload all your pages and CSS to your server. Once you do, you'll be able to link to them through the GoMobi interface. To do so, go to the Features tab and scroll down to Create Link, as seen below

GoMobi With 

CSS and HTML

In this section choose the link type (http://) and link to the page in your directory. i.e. http://www.yoursite.com/directory/yourfile.html. After that, you can customize the link icon if you wish.

If you have a lot of pages, instead of creating an icon for each, a better idea is to create a page of links that link to the various pages.

Make the Most of Images on Your Mobile Site

You can't build a website today without adding images. Putting them on a mobile version of your business website comes with a few unique challenges. Here are some best practices to keep in mind.

  • Use the JPEG, PNG-8 or GIF file formats. Don't use the full version of PNG because it tends to bloat file sizes as many as 10 times more than JPEG.
  • When creating a logo for your mobile sites, don't make it any wider than 300 pixels. Any bigger and it could create scaling problems on different mobile devices.
  • Add a bit of white space above and below the logo for "breathing space." That way the image doesn't bleed right to edge of a small smartphone screen.
  • When creating your layouts, don't use the coding options on the GoMobi interface, since they're too small and difficult to use. Instead, use a program such as Notetab Pro or Adobe Dreamweaver CS6.

As you can see, creating sites for the mobile Web offers a lot of options. What we've covered is only a small sampling of what's available in terms of sites, services and resources. In addition to the mobile website development applications mentioned, there are several additional products and services to consider, including Web hosting from HostPapa and mobile content management systems from Blue Train Mobile, Mobify and MoFuse.

Nathan Segal has been working as a freelance writer, photographer and artist for 14 years. He is based in British Columbia, Canada. Reach him via email or visit his website. Follow everything from CIO.com on Twitter @CIOonline, on Facebook, and on Google +.

Our Commenting Policies