Introduction to Mobile View Builder

Submitted by MobilizeToday on 2012-05-10 10:50

Greetings! We're starting series of articles dedicated to tips and tricks. We believe it will be helpful so you may benefit on desktop to mobile website conversion.

Just to remind, here are typical steps of making mobile websites based on existing desktop-designed ones:

  1. Sign-up to our service by typing in Desktop website URL on the home page or use Add New Website in our customer area.
  2. Edit mobile website in the Mobile View Builder.
  3. Adjust website settings if required.
  4. Publish mobile website and make it accessible to mobile audience.
  5. Setup DNS to make it accessible on custom domain.
  6. Add automatic redirection JavaScript into the desktop website.

The most complicated one from the above is #2 when you should use Mobile View Builder. Thus we'll unveil several "know how" things regarding Builder.

In this article lets outline the areas of the Builder page and describe their purpose.

On the picture below you'll see the source page (A) and the destination page (B).

Source and destination areas

Above the source area you'll see the toolbar with tabs and buttons.

Tabs and buttons

The first tab "Source" represents the initial desktop page you're working on. It has the following options in the toolbar:

  • Marked by red is the address bar. It's automatically updated when browsing the website. Optionally you may get direct access to any page by typing in desired URL and clicking "Go" button nearby. By clicking button "Back" you may navigate to the previously opened page.
  • Marked by green are the options to enable / disable JavaScript and CSS on the source page. By default JavaScript is disabled and CSS is enabled. You may use it depending on your needs. For example you may disable CSS to find and select elements hidden by default.
  • Marked by yellos is a button to create the Layout for the currently opened page. We'll discuss layouts a bit later.
  • Marked by blue is a widget selection tool. Once the content is selected in the source page you may use this tool to apply one of the available presentation.
  • There is a button to show or hide Controls area, it's marked by pink. The Controls area can be used for managing Layouts, Widgets and Filters. Here you may add / remove items, change their order, properties and so on.

Controls area

By selecting "Widgets" tab you have an ability to choose and add the new Widget to the current Layout.

Widgets tab

In Google Chrome and Firefox it supports drag'n'drop.

In the tab "Colors" you may adjust mobile website view by changing colors. Screen below is for our default framework. Color settings for widgets based on jQueryMobile framework have another look. We'll consider this in detail in our further articles.

Adjusting colors

Clicking "CSS" tab you may add any extra CSS styles you need for your mobile website.

CSS editor

If you need extra JavaScript, it can be added in tab "JavaScript".

At top of the Builder page you'll find "Dashboard", "Preview" and "More" buttons.

Top options

By clicking "Dashboard" you'll get back to website details page. "Preview" will open the window with mobile website preview. Clicking "More" you'll find "Snapshots" and "Options".

Snapshots is really important thing for the development since it gives you an ability to get back to any previous version of the mobile website. All you need to do to restore the version is just select the one desired and click "Restore" button.

Snapshots

Snapshots automatically created after adding new website, when new editing session started or after publishing mobile website.

In "Options" you may control table-less mode and filter flash objects. When initial desktop website has old-style HTML based on tables, enabled "Table-less" option is recommended. If you want automatically omit all Flash elements, you may enable "Flash filter". But please note that YouTube video, which is supported on most mobile platforms, will also be omitted.

Options

In the next article we'll consider several "you must know" things, including Layouts, Widgets and Filters. Feel free to leave your feedback on this and any further article so we'll better understand your needs.

Would you like to express yourself?