Contact us
  • en
  • fr
  • Solutions
    • Company IntranetDiscover our company intranet software to connect and engage your employees
    • Collaboration PlatformDiscover our digital collaboration platform that boost your employee engagement and performance
    • Knowledge ManagementHow To build and manage your knowledge base with eXo Platform
    • Employee EngagementDiscover how to boost your employee engagement
  • Product
    • Overview
      • Software TourAn overview of our software capabilities
      • Why eXoHow eXo improves your employee experience
    • Features
      • CommunicationFeatures to facilitate employee communications
      • CollaborationFeatures to create efficient teams
      • KnowledgeKnowledge management capabilities
      • ProductivityEmployee productivity tools to engage employees
    • Technology
      • Open sourceAn overview of our technology
      • IntegrationsDiscover how eXo integrates with your tools and systems
      • SecurityHow eXo Platform ensures your data security
  • Pricing
    • Product pricingLearn about our business model and pricing
    • ServicesLearn about our professional services
    • FAQsQuestions about the software, the community and our offers
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Technical documentation
      • Getting started
      • Developer Guide
      • Technical administration guide
      • REST APIs
    • From The Blog
      • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
      • eXo Platform community edition is back
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Company
    • About us
    • Careers
    • Customers
    • Newsroom
    • Contact us
    • Partners
  • Menu mobile
    • Pricing
    • About us
    • Services
    • FAQs
    • Customers
    • Resource center
    • Contact us
    • Blog
Company Intranet Discover our company intranet software to connect and engage your employees
Collaboration Platform Discover our digital collaboration platform that boost your employee engagement and performance
Knowledge Management How To build and manage your knowledge base with eXo Platform
Employee Engagement Discover how to boost your employee engagement
Overview
  • Software Tour An overview of our software capabilities
  • Why eXo How eXo improves your employee experience
Features
  • Communication Features to facilitate employee communications
  • Collaboration Features to create efficient teams
  • Knowledge Knowledge management capabilities
  • Productivity Employee productivity tools to engage employees
Technology
  • Open source An overview of our technology
  • Integrations Discover how eXo integrates with your tools and systems
  • Security How eXo Platform ensures your data security
Product pricing Learn about our business model and pricing
Services Learn about our professional services
FAQs Questions about the software, the community and our offers
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Technical documentation
  • Getting started
  • Developer Guide
  • Technical administration guide
  • REST APIs
From The Blog
  • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
  • eXo Platform community edition is back
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
About us
Careers
Customers
Newsroom
Contact us
Partners
Pricing
About us
Services
FAQs
Customers
Resource center
Contact us
Blog
  1. Accueil
  2. Uncategorized
  3. eXo Add-ons: Mobile-ready Website Template

eXo Add-ons: Mobile-ready Website Template

Surely you have heard about the eXo mobile application; without a doubt, you’ve admired the quality of this native mobile client that is intended to be used under the iOS and Android mobile operating systems. And of course, you have enjoyed embedding your own applications with your navigation style and your design in a mobile context.

That’s why I thought about adding one more way to leverage another mobile capability and giving the power to the end user to perform a set of actions. These include creating an HTML5 mobile website through a simple template wizard, changing the look and feel of the website by customizing the logo or selecting the main colors using the data stream sent by Adobe Kuler, updating the content and the navigation menu based on the eXo Content Management System, and finally, configuring the redirection to the mobile website if using a mobile device.

During this tutorial, I will show you how to acquire all of these capabilities through simple actions and configurations:

  • Template-based creation of an HTML5 website for mobile
  • Look & feel customization — theme & logo
  • Content and navigation updating
  • Mobile device detection and redirection configuration

1. Installation

It is possible to obtain the source code from this location: https://github.com/exo-addons/mobile-template-extension

To install the extension, you need to build the project. Run this command on the top of the project: $mvn install. This build will generate a JAR file, which needs to be put in the Tomcat lib folder, and two WARs; a mobile-website.war that contains the extension, and the mobile-apps.war that contains the applications. These WAR files need to be added to the Tomcat Webapps folder.

2. HTML5 Mobile Website

eXo Platform 3.5 offers the way to the end user to create his or her own website based on a set of website and intranet templates. The end user is also able to create his or her own website template to automate the creation and the configuration phases. I had the idea to create a template that may be used to create a mobile website based on HTML5 standards.

The end user may select the mobile website template from the list of site templates, and then will get a pre-configured website designed to be used in a mobile web browser. The end user needs to also add the other parameters such as portal and permission settings.

This website will inject the viewport metadata to increase the ability to zoom web pages for easier reading in the mobile web browser.

meta content="width=device-width, initial-scale=1" name="viewport"

3. The Look & Feel Customization

Once the website has been created, the end user will get a HTML5 mobile website whose content is based on the categories navigation.

The main page of the website contains a banner that displays the company logo, the search box, the menu, and the related content, which is based on the categories navigation. The searching capability is performed on this mobile website, and the related result page is also adapted to the mobile context.

Now we return to the main page to try to edit the layout. Here you will find a special portlet “Mobile Theme”, which is dedicated to customize the look and feel of the page by selecting one color theme and changing the location of the logo.

For the theming part, we have already used the services of Adobe Kuler as a color themes generator. Let’s look closely at this crucial and time-saving product for designers. What’s Adobe Kuler? It’s a web-hosted application, providing free color themes that can be used by anybody, in any project you are working on.

That’s why we called for the Adobe Kuler workflow in order to provide a set of themes, which group five colors together by way of a very intuitive user interface for editing hues, help you imagine different ways to skin your application. It’s possible to filter themes based on several criteria such as ‘The Highest Rated’, ‘The most popular’, etc.

Therefore, the end user will have the opportunity to customize the look and feel of the website through the edit mode of this portlet.

By default, there is a default theme that is used at the creation of the website. The end user needs only to select one color among others to set the five main colors of the theme. The colors come from Adobe Kuler, which is a web-hosted application for exploring, creating, and sharing color themes. Each time the end user selects one group of colors, the configuration menu will be updated, and preferences will be stored after saving the menu. It’s possible to have three filters for colors: Random, Highest Rated, and Popular. It’s also possible to add a custom logo. To do so, the end user can upload the logo directly to the file system; or simply input the resource location URL (which may be a relative or absolute URL, or even a URL linking to an external resource).

4. The Content Personalization

It’s possible to personalize the content of the website using the categories navigation mechanism. The end user may update the associated categories by adding and updating one category or its related content. The categories-based navigation will be updated easily without any additional coding.

5. The Redirection Mechanism

One more feature of this add-on, is the capability to configure the redirection to the mobile website after an automatic detection of the device.

The end user only needs to indicate the URL of the mobile website already created, and then, each time a visitor arrives at the platform, the system will detect the device used for browsing. If it’s a mobile device, he or she will be redirected automatically to the indicated location. This information will also be stored in the preferences of the Mobile Switcher Portlet.

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz