Review: Mobify

Mobify is a web-based mobile site creator. To get started, you need to sign up for an account.

Once you do, you're taken to the screen above, where you enter in the in name of your .COM site and give it a name. Note that this has to be a .COM that's in use in order to be developed into a mobile site. Once you enter in the data, click on the CREATE MOBILE SITE button.

This brings up the above page. Here, you have three options.

The first is to click on the Getting Started with Studio link. This takes you to a page of tutorial subjects on how to use Mobify Studio.

Next is the heading which states: + Create a mobile site - completed. If you click on this you get the message that the mobile site has been created and to update changes, to click on the settings heading.

The next option is to click on the LAUNCH STUDIO button.

This brings up the Studio workspace and you can now edit and customize your mobile site.

Note: In order to make the most out of Mobify Studio, you'll need to have a working knowledge of HTML and CSS. To begin, I recommend using the Getting Started tutorials. This includes a 45 minute video, along with a number of screen shots to supplement the process. You also have the opportunity to register for webinars, one of many options that shows up after registration.

As for building a mobile site, when you look at the completed URL on a mobile phone, you'll notice it's the same URL as a .COM. This is because Mobify uses what they refer to as a one web approach. The way it works is that they create JavaScript bundle that resides in the <HEAD> tag of the site and when someone visits the site, it fires off that bundle, reinterprets the page and downloads that information to the mobile device.

Moving forward, the LAUNCH STUDIO button brings up Studio and the first step of a wizard, which is where you select the logo which will appear in the mobile layout on the left of this page.

This generates a selector that you can see on each element as you move around the page. I'm going to click on the logo in the above screen shot.

This brings up a dialog box on the right with the logo name, the CSS and you'll notice that that word "Global" is selected. This is because the logo appears on all the pages of the desktop site and we want the same thing for the mobile site. Click on Select to accept that.

After doing so, we receive confirmation of our choice, and the appropriate display on the mobile preview site. Click on the Continue button.

Next, it's time to choose the primary navigation. Once again, the Global setting comes into play and it's necessary to expand the navigational options, which can be changed later. After selecting those, you get a confirmation message about the navigation selection being created, then it's time to click on the Continue button.

Now it's time to add some content. In this case I chose a bit of text and expanded the selection for all of the text. I named it: introtosite. The CSS is #Layer1 and the Scope has changed to This Page because I only want the info to appear on this page. When I click on Select, it builds that info to my mobile site.

At this point, you can continue to select content or just accept what you've done for a mobile site. There's also an interesting preview feature in Mobify. On the lower right of the mobile preview screen shot above is the heading: View on Your Device. This allows you to send a preview link to your email account. On your mobile device, click on the link to open it. You'll have to authorize it for the device, then you can preview the layout.


After going through the rest of the tutorial and looking at how Mobify works, it's clear that there's quite a learning curve involved. I tested out Mobify with three different sites. One was built before the dawn of CSS and it was clear I'd have to rebuild the entire site with CSS before I could adapt it for mobile.

I also attempted to build a mobile site with my travel blog (WordPress) and I immediately encountered difficulties with the logo, where the software selected the RSS button instead. Despite cycling through the settings I was unable to select the log and it was clear that I'd have to edit the settings after the fact.

I attempted to use Mobify with a third site (this one built using CSS and HTML in Adobe Dreamweaver). While I was able to get the site to build relatively quickly, it was clear that I'd have to do a fair bit of juggling with the HTML, CSS and images in order to get it display properly. It's possible that building the site could go quickly once you figure out the HTML and CSS, but from what I can see, it will take a fair bit of work and a good understanding of both HTML and CSS to make that happen.

  • Web Development Newsletter Signup