Create a basic mobile micro-site

In Sitefinity CMS, open for edit the primary mobile template that's based on MobileBasic.master. It contains 3 content placeholders for navigation, content, and footer:

• Add a "Breadcrumb" control to the navigation container.
• Add a "Generic Content" control to the footer and add a couple of dynamic hyperlinks, e.g. Contact Us | About. You'll need to update the URLs as soon as the target pages have been created;
• In the "Site Map" area - create a group named "Mobile" that's not visible in the navigation controls. This group is the parent for all your mobile-friendly pages.
• Create a "Home" page under the page group created above. Set it visible for navigation, and not indexed for search. Choose as the template for your page the "MobileBasic" template that was updated as described above. Add a Generic Content control to the content container and write a brief welcome message. Publish the page.
• Create as many pages as needed (e.g. Contact Us, About) in order to have all links defined in the template footer valid. Your mobile site map will look similar to the following snapshot:

• Use our Response Redirect Control on your main home page in order to implement automatic redirection to your mobile-friendly home page. Make sure caching is not enabled on the main page - so that all browser requests are evaluated by the "Response Redirect Control".

Part 1 is now completed. Congratulations on your new mobile micro-site!

BlackBerry Browser - screen capture, original resolution 480 x 360:

Create "News List" and "News Item" mobile pages

Part of the Mobile Starter Theme are two external control templates that can be used to consume the news items as a list and as a single item - in a mobile-friendly layout. If you publish news items on your full website, follow the steps below to enable a "News" section on the mobile version of your site:

• Create a page under your mobile home page that will display a list of recently published news items - we'll name it "Mobile-News" and use as template the MobileBasic template (see part 1 for suggestions on how to customize this template).
• Create a page under the "Mobile-News" page created above that will display the news item - name it "Mobile-NewsItem" and use the same MobileBasic template. The page hierarchy will look similar to this snapshot:

• Open the "Mobile-News" page in edit mode and add the following controls to the "Content" container: a "Generic Content" and a "News View" control.
• Edit the "Generic Content" control and provide a title for your news list, e.g. "What's New".
• Edit the "News View" control and set the basic properties: limit the number of items to be displayed, choose not to divide the list in multiple pages. Only the item "title" and "summary" are supported by the news list external template:

•  Choose to display the full news item in a specific page - select the "Mobile-NewsItem" page that was created above.
• On the [Advanced] property page expand the "Appearance" section, and provide the ItemListTemplatePath. The path recommended in the deployment instructions is "~/Sitefinity/ControlTemplates/News/MobileNewsList.ascx":

• Publish the "Mobile-News" page.
• Open "Mobile-NewsItem" page in edit mode and add a "NewsView" control to the "Content" container.
• Edit the following control properties on the [Basic] property page: News Settings > Display > select Title, Date, Content, Author (only these 4 fields are supported).
• Edit the following properties on the [Advanced] property page: Behavior > BehaviorMode > choose "Detail"; Appearance > SingleItemTemplatePath > browse to the template provided in the theme pack, e.g. "~/Sitefinity/ControlTemplates/News/MobileSingleNews.ascx":

• Publish the "Mobile-NewsItem" page.

Part 2 is now completed. To preview your mobile News List and News Item pages using your desktop browser - use Opera Mini Simulator from http://www.opera.com/mini/demo

BlackBerry Browser - screen captures, original resolution 480 x 360:

Create a Home Page navigation panel

To create a navigation panel on the mobile home page, we'll use a Generic Content control and define our menu entries as an unordered list of dynamic links with a mobile-friendly styling, appropriate for both regular and touch-sensitive screens:

• Generic Content - create as many list items as needed, and use dynamic hyperlinks to provide the target URLs; below is our demo navigation menu with 3 options / links: News List page (see part 2 of this guide for details), Controls page, Themes page.

• The CSS class "menu_links" ensures proper / easy link selection for all screen types (regular, touch-sensitive). Already provided in the "style.css" file of the Mobile Starter Theme:

Part 3 is now completed. Please feel free to provide any feedback you might have regarding the Mobile Starter Theme and this Quick Start Guide.

BlackBerry Browser - screen capture, original resolution 480 x 360:

Version 1.0