Finally, it’s here! I’ve had some interesting adventures in getting to my review of the mojoPortal Mobile Kit Pro.  The add-on for mojoPortal works perfectly; my biggest challenge was in getting the Android SDK downloaded, configured, and getting the hang of working with the emulator, so that I could test locally, and get screenshots for this tutorial.

(Fun fact: if you’re planning on using the Android emulator with Visual Studio for testing, and normally navigate to “localhost:[port]” (127.0.0.1), in your emulator browser, navigate to “http://10.0.2.2:[port]” instead.)

Caption 1: Default view of website via Android mobile browser

Here, you can see how this mojoPortal-driven site appears in the Android browser by default. You can see the navigation, but it’s pretty unwieldy to see all the content.

Caption 2: Default view, zoomed out.

Even zoomed out, it’s a strain to try to see all the images and read the content, because everything is so small. Let’s take a look at the difference with mojoPortal’s Mobile Kit Pro.

Caption 3: Default Skin, Mobile Kit 1.0

Much better! Installation is extremely easy; insert the sts.MobileKit.Web.dll in the /bin folder, and the mobile skin in the “skins” folder of the site you want to apply the mobile kit to.  Set the mobile skin in Site Settings, and presto – you’re ready to go!

Caption 4: Here you can see the mobile menu

By default, the mobile kit divides your website into three tabs: Content, Menu and Tools.  Content is taken from the center column of each page, then left column and right column, if used.  Menu converts the navigation of the website into a drill-down accordion, and Tools allows quick access to login, registration, site search, and the option to switch back to regular site layout.

Caption 5: the Tool Tab

I’m delighted to be able to provide an easy-to-use version of my website for mobile users, but I still want to keep my branding consistent, and use my chosen site colors.  Fortunately, I had already created a custom jQuery UI in ThemeRoller, so it was as easy as copying the custom theme folder over into the new mobile skin, and adding a reference in the layout.master, just like I did in my main site skin.

I restarted the site, after making these changes, and a bit of tweaking of the style.css (for example: you will want to change the heading colors to match the rest of your theme), and I had this:

Caption 6: IndigoTea.com, optimized for mobile!

I’ve got my custom colors and font styling, so visitors to my site on the web will readily recognize the mobile version. Nice!

Caption 7: The menu in drill-down mode

The menu supports drill-down, indicating “up” and “down” in the web navigation hierarchy.

Caption 8: Child Page Navigation in Content

The navigation for child pages will look very much like the Menu, but you will always see the three tabs at the top, to keep from getting lost in larger sites.

Caption 9: All Built-In Features Supported

Even the built-in features such as the shopping cart, blog, and forum display gracefully with mojoPortal Mobile; I’m very pleased with how well this works!

You may have some customized content that will not work well in a mobile display; Mobile Kit allows you to set the display for certain pages and features to be WebOnly, MobileOnly, or all.

All in all, I found the mojoPortal Mobile Kit to be easy to work with, very easy to customize for our branding, and a great addition to an already robust content management system.  If your analytics show that you have a significant number of mobile visitors, or you would like to make access to your site for mobile customers easier, mojoPortal and the mojoPortal Mobile Kit are a great choice!

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!