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.

Responsive Design

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

If your site has only a few pages and a shallow hierarchy you may be able to achieve a good result on the smaller screens of smart phones using responsive design. However for larger sites built on a CMS like mojoPortal there can be lots and lots of pages and the hierarchy of those pages can be arbitrary. This makes it much harder to achieve a good result on the small screens using responsive design. Making a large menu with a deep hierarchy adapt to small screens is particularly difficult. Also phones are often connecting over lower bandwidth so the size of the payload made up of html, css and javascript should ideally be kept as small as possible for phones. The use of responsive design often results in very large CSS payloads for all the overrides for various screen sizes, so in general I recommend using a different skin for smart phones so that you can leave out the css used by larger screens. In short your main skin should adapt from tablet size screens on up to very large monitors and you should use a separate skin specifically for smart 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.