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:
- Sign-up to our service by typing in Desktop website URL on the home page or use Add New Website in our customer area.
- Edit mobile website in the Mobile View Builder.
- Adjust website settings if required.
- Publish mobile website and make it accessible to mobile audience.
- Setup DNS to make it accessible on custom domain.
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).
Above the source area you'll see the toolbar with 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 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.
By selecting "Widgets" tab you have an ability to choose and add the new Widget to the current Layout.
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.
Clicking "CSS" tab you may add any extra CSS styles you need for your mobile website.
At top of the Builder page you'll find "Dashboard", "Preview" and "More" buttons.
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 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.
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.