Search code examples
webopencmsmobile-website

Options for creating a mobile version of a website running on OpenCMS?


My client has an existing commercial website developed using OpenCMS and they want to create a mobile version of the same.

I have seen websites starting with "m." instead of "www." I am guessing these are the mobile versions of the websites which access the same database but are independent of the actual website. And users are redirected to the mobile version when the device detected is mobile.

But then, I also saw that OpenCMS has an option for creating mobile friendly templates using the <cms:device type="mobile">

My knowledge about creating mobile websites is quite limited. So I just wanted to know which of the above two options or any other option I don't know about will be the right direction to proceed.

Thank you!


Solution

  • For some of my sites I used the approach of creating a "front"-template which decides which real template to include, based on the user-agent.

    With this approach of course you would need to create two distinct and separate templates, one for the full desktop version of the site, and one for the mobile version. Of course you can still share css, images and JavaScript between them.

    Starting from scratch nowadays, I would go for jthemans answer, with a responsive design.

    But if you have no big budget, and need to come up fast with a solution, the distinct-template-approach will be faster.

    Anyway, here is the simple "front"-template which I mentioned:

    <%@ page session="false" %>
    <%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <c:choose>
    <c:when test="${    fn:contains(header['User-Agent'], 'Android') or
                        fn:contains(header['User-Agent'], 'iPhone') or
                        fn:contains(header['User-Agent'], 'iPod')
    }">
        <cms:include page="/templateMobile.jsp" />
    </c:when>
    <c:otherwise>
        <cms:include page="/templateFull.jsp" />
    </c:otherwise>
    </c:choose>