Supporting Tablets and Phones
Use of tablets and smart phones to browse the web is growing very rapidly and it is becoming more and more important to provide a good user experience for those devices.
For tablets such as the iPad the main site skin should already work fairly well since it has a large display and provides an excellent web browsing experience.
My advice for supporting smaller tablets and also for supporting very large displays is to use responsive design. Responsive design is a general term for designing in a way that adapts to the device capabilities. Media queries for example can be used to alter/override the CSS used for particular screen sizes to optimize and adapt the design for the size of the screen. This article is not a tutorial on responsive design but many such tutorials exist on the web and I would encourage you to search the web and read up on the techniques used in responsive design.
A Separate Skin for Phones
mojoPortal has several abilities built in to help you with this. You can set a "Mobile Skin" in site settings. Note that though tablets are also considered mobile devices the "Mobile Skin" is really intended for Mobile Smart Phones. You can also specify whether particular pages or content instances are published on smart phones using the "Publish Mode" setting found in Page Settings and Feature Instance Settings, so in some special cases you could make 2 versions of content, one published for web browsers (tablets on up) and the other for smart phones (which we call mobile).
As mentioned above making menus that work well on the small screen of a smart phone is particularly difficult if your site has a lot of pages and/or a deep hierarchy. You can try to come up with your own solution for that problem but I recommend you take a look at our Mobile Kit Pro add on product. The main benefit provided by Mobile Kit Pro is a custom menu control that we implemented specifically to handle sites with arbitrary depth and hierarchy. You can try it by browsing this site or our demo site with an iPhone, Android Phone, or Windows Phone. On this site we have the "Mobile Skin" set to use Mobile Kit Pro and you can see that even though this is a large site with lots of pages navigation is easy on these devices.
Note that when you do specify a "Mobile Skin" in Site settings, the thing that makes it become active for smart phones is a fragment from the user agent string of the browser. This setting can be modified from user.config by overriding this setting:
<add key="MobilePhoneUserAgents" value="iphone,ipod,android,iemobile" />
it is basically a comma separate list of a unique fragment found in the user agent string of the smart phone web browsers. If you really wanted to make an ipad use the mobile skin you could add ipad to the list, but I think the larger screen of an iPad has a better experience with the normal site skin. You could also add blackberry to the list.
Created by Joe Audette on Oct 19, 2012
Last Modified by Joe Audette on Oct 19, 2012