Drupal, unquestionably, is the most powerful and popular CMS platform available, these days. This open-source platform is gaining momentum from its peers for all the good reasons and it seems as if its popularity is skyrocketing with each passing day. From the top-notch views module to amazing SEO buoyancy, Drupal is all what you need to create any website from blogging to cooperate.
Drupal has evolved quite incredibly over the years and it’s quite evident with the way it embarks its presence in the mobile space. The fastest growing mobile trend has encouraged many site owners to develop websites that are compatible with a range of mobile devices. Having a mobile version of your website will help you serve your mobile audience efficiently. Drupal has all the needed tools allow you to create a feature-rich responsive website easily and quickly. Mobile apps have become a great tool to run your business on the go. They help entrepreneurs to streamline their businesses and generate sales. Developers too have shown a great enthusiasm when it comes to developing for mobile apps. The availability and sophistication of website and application development frameworks such as jQuery has also made it easy for online players to establish a strong digital presence.
What is jQuery and How it Has Emerged as a Favored Choice for Developing Drupal Mobile Websites
jQuery mobile provides a set of touch-friendly UI widgets that are compatible across a range of leading browsers and devices. Being a robust mobile framework, it has the ability to spruce up your website by adding user-friendly features. When using it, webmasters could easily create a mobile version of their website in the quickest possible manner. In the process of creating the mobile version of a website, jQuery mobile accesses the content using a URL or link. It is developed using the concept of progressive enhancement wherein it delivers the basic HTML to devices that do not support CSS and Ajax and then enables the device to support them.
Also, jQuery mobile comes packed with a dependable library that enhances your web design and make it unique and visually appealing to your visitors. It keeps the user-experience on the priority and adds more details to your website.
In this post, we am going to explain you how you can use jQuery mobile to create a mobile-optimized Drupal website
Let’s get started!
Following are the things you need during the tutorial:
I assume that you already have the latest version of Drupal installed and running and that we are creating a responsive design of your Drupal site.
1. Setting Domain Access Module
To begin with, we will use a tool which we can easily separate the content of both mobile and desktop site. Drupal features a module called Domain Access Suite, which makes it easy for us to run a group of affiliated Drupal sites using a single installation.
Next, this module should be included and then enabled to your site’s module directory. While doing so, make sure you carefully read the installation process from the module README.txt and INSTALL.txt files, however, add then a new code line at the bottom of settings.php to run it.
include './sites/all/modules/domain/settings.inc';There are plenty of sub-modules available in Domain Access module. Next, enable the Domain Access along with configuration, Domain Settings & Domain Theme modules.
After that start configuring your module (http://drupal7.dev/admin/build/domain) and start setting up an entirely new domain record (http://drupal7.dev/admin/build/domain/create).
Don’t forget about creating a new virtual host for your web server that is m.drupal7.dev domain name and then point it to the main directory of your website. Also, make sure you add your newly created records to your local host. If you don’t know much about the process, we recommend that you search for this information online.
Once you are done creating your domain records to run your mobile site, you can proceed to create your mobile-theme, Zen.
2. Build your theme and install it
I prefer to use Zen for this purpose. The reason being it is powerful, yet an amazingly simple theme for creating a mobile-ready website. Install the theme and embed it with your new domain record. Here, I am using mobile as a name for my theme.
For this, navigate to your domain list page (admin/build/domain), and then select the theme link for the mobile domain record, and make our newly created mobile-enabled theme as default.
Now, go to your mobile site to check whether your new theme is working well. While playing around Drupal, you come across a range of CSS and JS files, however, the majority of them are not required by the user. So, only load only those files that fit your website’s needs.
I am using pre-process function to use different variables such as $styles and $scripts. For more information regarding this step, you can visit Drupal’s Theming Guide.
Now, go to your template.php file to create the above mentioned function.
function mobile_preprocess_page(&$vars, $hook) {
// Use only theme's js
$scripts = array('theme' => array(
‘sites/all/themes/mobile/js/js.js' => array('cache' => 1, 'defer' => '', 'preprocess' => 1),
));
$vars['scripts'] = drupal_get_js('header', $scripts);
// Use only theme's css
$styles = array('all' => array('theme' => array(
'sites/all/themes/mobile/style.css' => 1,
)));
$vars['styles'] = drupal_get_css($styles); And that’s all. Once done, we recommend you define the specific region of your theme’s file.