Review: Mobify

By

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

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.