VorlesenxsMobi - Mobile Site Builder Tutorial
Dr. Eckard Ritter
Allersberger Straße 185/O
90461 Nuremberg
Tel.: +49 911 3733753
eckard.ritter@googlemail.com
How to Create a Mobile Website in Minutes
Build Your Own Mobile Website
xsMobi lets you create mobile websites quickly and easily. This manual is actually a mobile website itself! Should you view it in mobile format, you can easily browse the most important chapters just by the navigation link and you will be walked through it.
When you sign in for the first time, there are no pages, images or links. Your user data contains only your email address that you signed up with.
First step: click `Add Record` at `Mobi Pages` to create your first page.
Create and Edit Pages
Editable fields of a page are: page title, description, page text, an image, navigation and an external link.
* Page title: 80 characters
* Page description: 2400 characters
* Page text: 4000 characters
* Sort: the order in which your pages are listed
Images: you may select one image per page
8 internal links: link pages to each other (create them first!)
1 external link: optionally insert an external link (first create it!)
Edit pages: click Edit in each line of the page title list
Preview pages: click on the page title of the page you want to preview
Organizing Pages
Once you have set up a number of pages (up to 30 are possible), it is especially important to get them organized: just use the SORT field!
Sorting pages is helpful for two reasons:
FIRST, in your dashboard, it is extremely helpful to have pages sorted and grouped, for example:
[0000] Our Business
[0100] Our Market
[0200] Services We Provide
[0210] First Service
[0220] Second Service
[0290] Terms of Service
[0800] Contact Us
SECOND, the page sequence in your dashboard will also be the sequence in which your pages are displayed in one of the full screen formats, the `OnePageView`.
The sort type is `alpha`, not `numeric`. That is, the numbers 100, 8, 78, 2 will
NOT be sorted this way: 2, 7, 78, 100!
They will be sorted THIS WAY: 100, 2, 7, 78
In order to have them sorted numerically: enter
100, 008, 078, 002 in the SORT fields of the respective pages.
Tip: instead of beginning with 1, 2, 3, 4, 5 - begin with 0100, 0200, 0300 (padding with 0s) and you can easily insert pages without renumbering.
Mark a Page as Your Homepage
With xsMobi, you are free to design the linking structure of your mobile website! And so you are able to select one of your pages as your homepage: the page that will be first displayed when your site is called up.
IMPORTANT: the page title of the HOMEPAGE of your website should start with a `*` character (asterisk).
You are free to CHOOSE ANY PAGE as your site`s HOMEPAGE. You can do this by typing an asterisk into the Page Title at position 1!
Upload and Add Images
Upload images to the dashboard of your mobile website. Then, when editing a page, you can select which image to insert into this page.
Add an Image to a Page
When editing a page, select the image that you want to insert from the thumb nails of the images you uploaded.
As there is only one image per mobile page and no option for positioning, all you need to do is select the image for the page you are editing.
Once all images are assigned to pages, you may want to remove the image thumbnails: just uncheck `Show image thumb nails`, you may recheck it anytime.
You can anytime deselect an image: just check `No image`.
Create and Add Links
Create links for your mobile website. When editing a page, you can select which link to insert into the page.
EXTERNAL links are those to other sites
INTERNAL links are those to other pages of your website, i.e. navigation links
This paragraph is on EXTERNAL links.
Create Links
Click `Add Record` at `Mobi Links` to open the Mobi Links Edit Menu.
+++ Title (required): it will become the link anchor text - and is therefore very import for both site visitors and search engines
+++ URL: please enter the full URL (http://...)
+++ Description (optional, max 200 characters): this text will be displayed ahead of the link title
Add a Link to a Page
When editing a page, insert an external link from the link collection you had previously created.
As there is only one external link per mobile page and no option for positioning, all you have to do is select the external link in the drop-down menu XLINK.
You can unselect it at any time, i.e. remove it from the page, by selecting`available`.
Link Pages: Add Navigation
Link pages of your mobile site to each other - this is where user guidance comes in!
There are up to 8 link positions available on each page. Each of these can link to any other page you had previously created.
Tip: you need not use all 8 positions. Use the appropriate ones (context sensitive linking).
+++ You need not worry about a link to the homepage (the one marked with a `*` in the title): there is an automatic link to the homepage on each page.
+++ And you will not need a contact page and a link to it since there is an automatic link to the contact page on each page as well.
+++ Be creative and user-friendly: on each page, use links to as many other pages as is appropriate. In mobile web design, it is particularly important not to let the user run into pages that they do not need at the moment.
User Data and Settings
This data includes both address data and website data to be displayed throughout the entire site.
This data is comprised of address data plus site-wide data (i.e. content to be displayed on any page of the website).
The latter are:
+++ The Slogan: this text will be shown on all pages of your mobile website. For instance, the slogan of this tutorial reads `How to Create a Mobile Website`.
+++ Homepage Title. Each page of your mobile website automatically links to the site`s homepage (the one with the `*` in the title line). The link text is `Homepage` by default, but you may edit it. For instance, the Back-to-Homepage-Text of this tutorial is simply `Build Your Own Mobile Website`
+++ Contact Page Title. Each page of your mobile website automatically links to the site`s contact page. The link text is `Contact us` by default, but you may edit it. For instance, in this xsMobi manual, the link text is `Want More Help? `.
+++ Homepage title. Each page of your mobile website automatically links to the site`s homepage (the one with the `*` in the title line). The link text is `Homepage` by default but you may edit it. For instance, the Back-to-Homepage-Text of this tutorial is simply `Build Your Own Mobile Website`
+++ Contact page title. Each page of your mobile website automatically links to the site`s contact page. The link text is `Contact us` by default but you may edit it. For instance, in this xsMobi manual the link text is `Want more help?`.
Full Screen Formats for PC Browsers
Your website is not only available in DotMobi format. Additional to the `mobileOK` (or `.mobi compliant) page format, xsMobi creates two more page representations on the fly: `Mobile PLUS Full Screen in 1 Step`.
The entire mobile website you build is also published in PC browser formats. So you can easily check your pages, links and images more conveniently. Plus, xsMobi adds some SEOs automatically!
* The normal `PC View` is just a larger copy of your mobile website to fit a PC browser window.
* The `OnePageView` is the most universal format and ideal for use with PC browsers, Net books, iPhones and any Smartphone. Moreover, the `OnePageView` is the most search engine friendly since it comprises the entire site content within one single webpage.
All those URLs are shown with the PROFILE page (see below).
Mobile pages created with xsMobi are W3C mobileOK and .mobi standards-compliant.
Their full screen pendants are W3C compliant as `XHTML 1.0 Strict!`
Furthermore, a PDF plus eBook representation of a mobile website is available. These are professional services and not included with the free version of xsMobi.
Further Tips
This page is a draft yet and will be filled continuously. Start April 1st, 2010
Show image thumb nails?
The default is `checked` - uncheck it for faster loading once your images are assigned to the pages.
Navigation
You may design a central linking structure for your mobile site - or a more sequential or circular one in which the user walks through a group of pages by clicking the same link position repeatedly (this works nicely for mobiles with access keys).
Organizing Links in Your Profile Page
Assign categories to your links. In your profile page, links will be grouped by category.
In that way, your profile page can aggregate your social media profiles such as Twitter, FaceBook or YouTube.
Note: if there links you did upload but you would not like to see them displayed within your profile page, just assign category `no`