Loging In To The Mobile Website Builder

The Welcome Page -- you will see this each time you login.

Click Create New Site -- this is what you will see a dialog box

The 'Web Address' will be the website address of the mobile site you are going to create.  The folder will be put in your deco/mobile2 website folder making your url http://www. your url here.com/deco/mobile2/ name of your site. One word folder names work best.

 

Edit Page Content

The mobile website editor will allow you to do many things.

You will see this screen when you first login.  To edit the site click on Create or Edit Content

 

After you have selected Edit Conent, you will see a Page like this.  This is where you add your content to your mobile site.  You can create pages and sub pages, even sub-sub pages if you want to. The options are endeless for site design.

Each page can have three types of sections:   

HTML Section (a section of HTML  can code).

Image Map Section (a single image and the image can be linkable).

The following screenshot shows an Image Map section. In this demo the user uploaded a single jpg.

IMAGE IMPORT: There are also options to automatically resize the uploaded image. This MUST BE SET before you import or re-import the image. It is only on the Image Map Section Page

Image List Section (a section to have muliple images we recommend not more then ten in each page)

The HTML section is standard HTML content. To aide you in creating the content you can use our  popup HTML editor, this text editor will open in another screen.  You can have more then one text or image section on a page, but remember you are creating a site to be viewed on your phone so large pages will have a lot of scrolling.

 

Other Settings

There are many other settings you can use to customize your mobile website. We have settings that will aide in fine tuning the appearance, others are for search engine optimization (this is the make site easer to find button and Google Analytics button) easier to find and adding Google Anaylitcs to the site) adding java scripts.

Make sure you change your page title, which you can do on the Make Site Easier To Find Button.

To change your appearance click on the Modify Appearance to add a background image, change your title bar appearance to change how your back button or contact button information looks, change your menu text color or font as well as size.  The changes you can make are endless and will allow you to create a custom look all your own.

 

To change to a different theme:

 

Preview and Publish

 

To preview the mobile website, just click the preview button - the globe with the paper behind it is the preview button. The preview button is located at the top button bar.  

Then you will see a screen like below. There will be a url and a copy link.

You can preview the page two ways:

1. You can click on the url and then the site will come up in a seperate browser window. This will look like the site does to anyone using a browser, unless using Chrome or Safari, when it will look as it does on a phone.

2. You can also use our Mobile Website simulator. To use the simulator

   a. Download and install Adobe AIR from this link: AIR

   b. Download and open this file: Mobile Simulator

   c. Copy and paste the url from the above screen into the browser bar on the Mobile Simulator then click enter.  

You will see this when you launch the viewer copy and paste the url into the browesr bar at the top, to change the settings click on the black wheel to the right of the browser bar.

        

When you are done and ready to publish your page, just click the publish button at the top button bar. This is the globe -- and does not have the paper behind it!

If you do not see it check that you are not being blocked by a pop up window.

 

Re Directing Mobile Website

- Use This code to redirect to a single website for Iphone or Android. Replace the url for Deco Moblie with your own url.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i)))
{
location.href=’http://decomob.com/mobile’;
}

- Use This code to redirect clients to one site for phones and one site for tablets. Replace the decomob.com urls with your own.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i)))
{
location.href=’http://www.decomob.com/mobile’;
}
if((navigator.userAgent.match(/iPad/i)))
{
location.href=’http://decomob.com/ipad’;
}

 

 

Design Notes

- Use Image Map section to add a logo to the home page.

- Use a background image to match the style of your main website.

- If you don't see the changes in preview, refresh your browser and check for blocked pop - ups

- Remember to enter site title - this is found in the  'Search Engine Settings' button and is the title that appears on your browser tab.

- For design ideas see how we created our samples!