Tag Archives: php

Google Custom Search Refinements

Google is a very popular search engine. One of the driving forces behind the popularity is the Google Inc’s generous offers such as free site based search. The Google Custom Search Engine (CSE) is a such free Webmaster tool. It allows the site owners to integrate the powerful Google search system into their website. I already discussed how to replace the default WordPress site search with your CSE. In this article, I will introduce you to creating content filters.

Filtering the web

As time progress, the amount of pages and media also increase with it. This is not just true for large scale cooperate websites, but also true for personal websites like SANUJA.COM. Someone who publish articles and other web items regularity would at least have one or two articles/items per week. If you multiply them by the number of weeks per year, that’s a lot of information. The problem with general web search on your site is that the visitor may move out of the site as a result of it. The solution is to use an integrated site search that only search your site. All Content Management System (CMS) comes with some form of built-in or modular site search. For average web owners, that’s all they need. But what if you would like to have more control over how the site content is search? The CSE will allow you to restrict your search to specific area of your site. This is how you configure your Google CSE to refine your search results.


If you have a section of your website that is more important than the rest, then refining is a good way to help the visitors narrow down their search. For example, on my site I empathize the academic exam bank. I want my visitors to filter out all the materials under Exams and Resources during a search (if desired). Here are the steps to creating a refining filter:

1. Log-in to Google Custom Search Engine (GCS) and select the search engine you would like to edit.

Selecting your Google CSE
Selecting your Google CSE

2. Choose “Search features” from the right hand menu and select the second tab “Refinements”. Now press “Add” button from the Refinements pane.

Adding a refinements.
Adding a refinements.

3. A pop-up window will appear with form for new Refinement addition. Save the item.

Add new refinement popup.
Add new refinement popup.

4. Choose “Setup” from the right hand menu and select the “Basics” tab. Under “Sites to search” you can add a limitation.

Refinement directory/link limitation.
Refinement directory/link limitation.

In this particular example I provided my visitors an option to limit their search to my exams area. Since all my exams bank questions are followed by the common URL, “http://sanuja.com/blog/exams/*”. Which is like a prefix. It will allow the Google CSE to limit all the returned search results to Exams pages.

5. Choose the Refinement option created in step 3.

Limiting the site directory and adding the Refinement
Limiting the site directory and adding the Refinement

Here is an example of a refined search…

Refined search results using the tab style.
Refined search results using the tab style.

Excluding content

You can prevent the Google Custom Search from indexing certain pages or URL (link) patterns. To do that, you can:

1. Navigate to exclude section by clicking the “Advanced” link at the bottom of “Sites to search” section.

Advanced link.
Advanced link.

2. Once in the Advanced sections, you should see “Sites to exclude”. Add either one URL at a time or use the prefix method just like in the refinement configuration.

Restricting (excluding) a prefix URL pattern.
Restricting (excluding) a prefix URL pattern.

There are few reasons to why you may exclude URLs, pages, images or other data. Pages from access restricted or membership based areas can be hidden from search results to prevent unwanted traffic to such areas. Sometimes images have copyright agreements that specifically restrict your users from searching images. You may have “junk” or temporary URLs such as http://domain.xxxx/P?7299 which often generated by some Content Management Systems or plugins/scripts.

Introduction to Drupal modules

Drupal is the second most popular Content Management System (CMS) with the best reputation for security. It is behind WordPress CMS because for most non-programmers/geeks, the administration of Drupal can be a nightmare. Even for someone who is not new to web programming, the learning curve can be very high. But there are good reasons why Drupal can be complicated. It is the most flexible CMS that has a very good adaptability. You can built a simple blog and over time you can turn that into a highly complex cooperate website. In order to do that, you will have to go utilize Modules.


Durpal Modules are like Plugins in WordPress. What the heck is a plugin anyway? They can be use as synonyms since the primary task for both is to extend the core functions of respective programs. If you are still confused, think of it as a software for Windows OS while the Windows OS itself as the CMS. These Modules can be downloaded from a repository (most common) or they can be custom written by the web developer. Modules extend the usefulness of the CMS by addition of extra functions such as Google Custom Search.


All the official Drupal Modules can be found here. You can either download them and upload it back to your web server or you can simply copy the compressed folder URL and installed it through the Administration Modules window.

Copy the link by right click (Windows) or download.
Copy the link by right click (Windows) or download.
I recommend installing the latest stable version of the module that supports your version of Drupal.

To upload, go to the Administration Modules window and choose install new module.

Administration Modules Window with a second arrow pointing to the Module install.
Administration Modules Window with a second arrow pointing to the install new module.
This will open a section in which you have the option to either upload or copy/paste the URL directly from Drupal repository.

After installation, go back to the Modules Administration and enable the newly added Module.

Going back to Modules after install.
Going back to Modules after install. Make sure you save your configuration before exiting the Modules admin window.
Please not all modules will be able to run because some modules require other specific modules to be installed in order to run (inter dependent or dependent).
Enabling new modules.
Enabling new modules.

With any type of install in computers, the most impotent is updates. As soon as you install a new item, run Drupal updates known as cron. It is better if you run cron over manual updates but I don’t want to go into details of cron in this article.

Checking for Drupal updates.
Checking for Drupal updates.

After enabling them, they will be ready to use. The usage varies depending on what type of Module(s) you installed. Therefore it is almost impossible to provide instructions on how to use whatever you installed. At least this should get you started on Modules. If you have any specific questions, try Drupal.org or contact me.

Notes: There are bunch of core modules comes with Drupal installations such as blocks module. They are essential for the CMS to operate properly. But still some of them may be disabled or deleted. The core modules should not create any problems for the site. The add-on type of modules I discussed here may create problems / conflicts. Always test the site after installing a single module.

Creating a skin from Graphene theme

Please note this article is specifically written using Graphene Theme. The concepts can be implemented on others themes with slight modifications.

Yes, WP is a very flexible CMS with wide range of third party extensions. Another reason for it’s flexibility is that the developers of WordPress CMS are pushing for multipurpose program. Within few years of launch, it went from a casual and easy to use blogging platform to a large scale web management system. To me it is a good thing for average user. Like I always believe, jack of all trades is better than mater of none.

Skip Tech Jargon

Mix and match

When we have so many open source free software to choose from, why not use them all? Most of the time, it is better to use specific software for particular task than to use one for all. WordPress (WP) for blogging and small scale websites, Drupal for large scale websites with large user base, phpBB for forums, phpList for newsletters, etc are few specialized software out of many. If you are designer then you would have to theme each and every one of the independent system to match each other. This can be done in two ways; by creating themes or through skinning.

What is skinning?

Both skins and themes creates “holistic and integrated spatial organization” of materials in their own ways. Skinning is different from theming because what skin keep all the elements of one platform and embed into the looks and feels of another. It neither changes any theme files nor create a valid theme. Themes directly change the structure of the front end interface and they are limited to the conditions of the program. For example, if I want to create a phpBB theme (a well written one), I have to comply with the guidelines for phpBB. Skinning takes all those conformities out of the equation because it is just a “wrap around” for “eye candy”. Once a skin is extracted from one program and installed on another, it just apply the same/similar style across different platforms.

Graphene theme skin

I will guide you on how to skin a WP theme using Graphene for WordPress. Some parts of this site uses phpBB and phpList with this exact skin. First take a back up of all your files and data. I would take up a task like this at nadir hours. You don’t want to mess with any code when your website is full of visitors. If you are launching a new site, consider things like forums before hand.

Copying the code

Log in to your website and choose appropriate Column Option. It is better to choose an option with no side bars because the screen real estate is very important. You can do do this by two ways in the Graphene Theme. One is using the Graphene Options.
Log in –> Dashboard –> Appearance –> Graphene Options –> Display(tab)

This will make the entire website (each and every page) default to whatever you choose. Another way to do this is under each post/page, you should find an option to choose Column configurations specifically for the current post/page. I used the later since I don’t want the entire website to have no columns during the setup.

After you setup the page/post, visit the page and go to the source code from your browser. Copy the code from div id="container" to div id="content-main" class="clearfix grid_16". Do NOT copy the following code. It will break your site since this is specific to my site.

The following code is used as an example. DO NOT copy the code and paste to your system even if you are using this theme. I am NOT responsible for any issues arise out of editing the core files of phpBB and/or WordPress.

<div id="container">
<div class="bg-gradient">
<div id="container" class="container_16">    
<div id="top-bar">

<!--Top Social Profiles bar-->
  <div id="profiles" class="clearfix gutter-left">
      <a href="https://G+_URL" title="Sanuja on Google+" id="social-id-1" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on Google+" /></a>
      <a href="http://FB_URL" title="Link sanuja.com on FB" id="social-id-2" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Link sanuja.com on FB" /></a>
      <a href="LI_URL" title="Sanuja on LinkedIn" id="social-id-3" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on LinkedIn" /></a>
      <a href="TW_URL" title="Follow on Sanuja Twitter" id="social-id-4" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Follow on Sanuja Twitter" /></a>
      <a href="http://FULL_FEED_URL" title="Subscribe to sanuja.com RSS feed" id="social-id-5" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Subscribe to sanuja.com RSS feed" /></a>

  <!--Search form-->
  <div id="top_search" class="grid_4">
      <form id="searchform" class="searchform" method="get" action="http://MAIN_URL">
      <p class="clearfix default_searchform">
      <input type="text" name="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" />
      <button type="submit"><span>Search</span></button>

<!--Banner image->
<div id="header">
<img src="http://BANNER_URL.jpg" alt="" class="header-img" />        	       
<h2 class="header_title push_1 grid_15"><a href="http://MAIN_URL" title="Go back to the front page">Sanuja Senanayake</a><h3 class="header_desc push_1 grid_15">noreply@sanuja.com may end up in spam. Check your spam box.</h3>                
    <!--Main navigation menus-->
    <div id="nav">
                <div id="header-menu-wrap" class="clearfix">
			<ul id="header-menu" class="menu clearfix"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://MAIN_URL"><strong>Home</strong><span>Index Pages</span></a>
<ul class="sub-menu">
	<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://sanuja.com">Front Page</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://FULL_URL/about"><strong>About</strong><span>Site Information</span></a>
<ul class="sub-menu">
	<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about">About this Site</a></li>
	<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/about/biography/">Biography</a>
	<ul class="sub-menu">
		<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/cv">Résumé (Senanayake)</a></li>
	<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/system">Home Network and Servers</a></li>
	<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/faq">Frequently Asked Questions</a></li>
	<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/copyright">Copyright &#038; Privacy</a></li>
	<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/about/sitemap/">Site Map</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-ancestor"><a href="http://FULL_URL/category/uncategorized/"><strong>Categories</strong><span>Article by Category</span></a>
<ul class="sub-menu">
	<li id="menu-item-1769" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/computer-science/">Computer Science</a></li>
	<li id="menu-item-2635" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/ce/">Consumer Electronics</a></li>
	<li id="menu-item-1716" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/earth-science/">Earth Science</a></li>
	<li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/documentary/">Documentary</a></li>
	<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/opinion/">Opinion</a></li>
	<li id="menu-item-1142" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/philosophy/">Philosophy</a></li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/"><strong>Resources</strong><span>Exam Bank/Links</span></a>
<ul class="sub-menu">
	<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/">Exams and Quizzes</a>
	<ul class="sub-menu">
		<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/anth201/">Anthropology 201</a></li>
		<li id="menu-item-1512" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/cpsc217/">Computer Science 217</a></li>
		<li id="menu-item-999" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy201/">Geology 201 GLGY/GOPH I</a></li>
		<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy311/">Geology 311 Mineralogy</a></li>
		<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy323/">Geology 323 Geochemistry</a></li>
		<li id="menu-item-2489" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy341/">Geology 341 Structure</a></li>
		<li id="menu-item-2499" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/goph355/">Geophysics 355 Exploration</a></li>
		<li id="menu-item-1754" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381/">Geology 381 Strat &#038; Sed</a></li>
		<li id="menu-item-2064" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381-final/">Geology 381 Strat &#038; Sed Final</a></li>
		<li id="menu-item-1426" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/alberta-class-5-gdl-quiz/">Alberta Class-5/7 GDL Quiz</a></li>
		<li id="menu-item-1472" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/canadian-citizenship-test/">Canadian Citizenship Test</a></li>
		<li id="menu-item-1069" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/other/">Other Types of Quizzes</a></li>
	<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/links">External Links</a></li>
	<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://secure.sanuja.com/"><img src="http://sanuja.com/lock_24.png" height="12"> Secure Access</a></li>
<li id="menu-item-990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/science/"><strong>Science</strong><span>Geology/Computer</span></a>
<ul class="sub-menu">
	<li id="menu-item-991" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/">Introduction</a></li>
	<li id="menu-item-3038" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/computer-science/">Computer Science</a></li>
	<li id="menu-item-3026" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/earth-science/">Earth Science</a></li>
	<li id="menu-item-1722" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/field-geology/">Field Geology</a></li>
	<li id="menu-item-987" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/funny/">Funny Science</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-ancestor"><a href="http://FULL_URL/contact"><strong>Contact &#038; Feedback</strong><span>Please Leave a Comment</span></a>
<ul class="sub-menu">
<li id="menu-item-2965" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-577 current_page_item"><a href="http://FULL_URL">Subscribe to Newsletter</a></li>
	<li id="menu-item-1286" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/forum/">Forum</a></li>
    <div class="clear"></div>
<div class="menu-bottom-shadow">&nbsp;</div>
<div id="content" class="clearfix hfeed">
<div id="content-main" class="clearfix grid_16">

You have to use the exact location of each file and replace FULL_URL plus whatever comes after that. For example, I have http://sanuja.com/blog/about/ instead of http://FULL_URL/about/ in the file I use.

Editing phpBB

After a successful install of phpBB, open overall_header.html and overall_footer.html file using cPanel, FTP or other back-end file access method in the following location:
…YOUR_INSTALLED_FOLDER / styles / prosilver / template /

The prosilver is a default theme that comes in the phpBB software bundle. You may edit any other theme and/or copy the theme for backup before editing it. Which ever the theme you decide to skin, find the template folder because that’s where we will find,

    → overall_header.html
    → overall_footer.html

In the overall_header.html locate the the area in which the phpBB begins it’s theme and paste the code just above it. I entered it in the first line after the body of the header file;

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

For the overall_footer.html repeat the same process except make sure all your div tags are closed properly. I found two divs not closing at the end causing the entire foot menu to get stretch. Of course, you add the footer code from WP at the appropriate place in the footer file. I added after the following code in the footer file;

     <a id="bottom" name="bottom" accesskey="z"></a>
     <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->

Copy the information for the skin head as instructed above. If you have a different theme, then go to the source code of a loaded page and find the CSS containers for header and footer.


For those of you who tying to implement skins across WP and phpBB follow the following guidelines (with any theme):

  1. Install WordPress and phpBB on your server (recommend using two different folders).
  2. Make a backup of each system before editing the code.
  3. Create a page with no side bars (recommended, but may use side bars).
  4. Load the page/post on a browser and view the source code.
  5. Look for any div elements; where do they start, where do they end and what do they contain.
  6. Only copy the header data from WP to import into overall_header, vise versa. When copying, copy the information within div elements with full URLs to prevent 404 errors.
  7. Use the documentation for the new system (in this case phpBB) for it’s outline files.
  8. Paste the data copies in step 5 into the appropriate location in the new system and save.
  9. Clear cache; on server/system, browser and any others that would store cache files. I would clear the cache after completing on each and very single step. I recommend updating large scripts in segments, which will reduce the possibility of a major code error.


Customizing the editor for coding

A lot of people hate software just because they do not like the look and feel of the user interface. Surprisingly even the knowledgeable “geeks” have strong preferences on the GUI (Graphical User Interface). This often takes away the focus from functionality and versatility of programs and impact negatively on high quality products.

The good news is that most programs have customizing options available for both GUIs and back-end. However, very few users are aware of these hidden gems. In this article we will discuss the customizability of the open source free software Notepad++ (“Notepad Plus Plus”).


Notepad++ is highly customizable and flexible enough to work with almost all programming languages. As soon as you save your file as a .php, .html, .py, .cpp, etc it will pick up all the standard syntax related to each language. In addition you can use this program as a standard text editor.

The initial setup is simple. Download the program from here and follow the on screen instructions.

Select "Themes" during install.
Select Themes during install.
Make sure you select themes (check mark it). If you do not have much experience with the program, I would recommend you select exactly what I have above. I do not have an image of the next window, but if you are unsure, do not select anything on the next window. Just move on as next, next, etc.

Once the installation is completed, go to settings on the top ribbon. Open Style Configurator…

Settings drop down menu.
Settings drop down menu.

In the Style Configurator window you have variety of options. You can have fun with this, but for now, I would select a per-configured set from Select theme drop down.

Styles selection drop down list.
Styles selection drop down list.
Personally I like black background because I find it better on my eyes. I spend hours at a time writing code and most people I talked to also found back background to be very pleasant (as opposed to white).
PHP syntax coloured (automatic) on black background.
PHP syntax coloured (automatic) on black background.
It is my personal preference. The beauty of customization is you can choose a theme and/or color scheme to get your ideal working environment. Since you can always reset these, I entourage you to experiment with it.

HTML-Kit (free version)

Don’t get fooled by the name! This is one of the best free code editors out there. It started as a basic HTML editor and then transformed into what it is today. Like Notepad++, it also have support for almost all languages. However, this is big HOWEVER, it is not open source nor it comes with all the customization features like Notepad++. You cannot change the themes without having to buy their “premium” version. While I have used this extensively in the past, I am tired of limitations in free version. Please try Notepad++ first and if you don’t find it useful, the second best option would be HTML-Kit free version. Why pay for features that already included in FREE Notepad++?

Other Editors

All general text editing software that allow saving files in different formats (.php, .html, etc) can be used for programming. If you are new to coding please find a software that have built in syntax highlighter (eliminate Microsoft Notepad). This will make those first few steps into coding fun.

Mobile friendly websites

The file sizes associated with web pages have increased as designs get more complex and rich in media. As expected network speeds have also increased to accommodate the growing bandwidth demand. When it comes to mobile Internet, it is lagging bit behind the conventional Internet. The download speed of a average Canadian household is about 85 Mbit/s in the top tier plans as of 2013, while the average speed of mobile Internet not even 1/3 of it. The gap is so big, it impacts negatively on the performance of general websites. This is why even media companies like CNN, BBC and CBC have developed mobile versions of their web content in addition to media rich desktop version.

The mobile Internet is growing at a rapid rate in almost every country on Earth. Hence, the demand for mobile friendly fast loading websites are growing and so are the tools to combat it. I will introduce you to those tools and their advantages and disadvantages.

Mobile friendly right out of the box

I can categorically argue that almost every single non-graphic/media oriented website in 1980s and 1990s were 100 % mobile friendly. Even the most early version of the Internet called bulletin board system probably more mobile friendly than the desktop version of this site. Today visitors are not only attracted to functionality but also the visual appeal.

There are several way to balance between the visual appeal and mobile functionality. The concept of responsive themes are not a new one because it is similar to those 1980s sites. What sets it apart now is that modern responsive themes do not compromise graphical elements. If you are using CMS (Content Management System) programs, then you can load a theme with responsive support. When someone enter the site on a mobile device or on a smaller resolution device, the theme width and dimensions of elements will change accordingly. This is a right out of the box type solution, in which web editors do not have to depend on outside applications or scripts for mobile version of the site. Obviously it is better than an independent mobile site like in the old days. When you have independent sites, you have to edit two different files when publishing a single post. Another advantage is if you do not have a CMS program, you could still use responsive themes to automate using CSS and other scripts. It is not that hard to implement a responsive theme on a HTML site.

But it is not the silver bullet either. One of the major faults in responsive themes is that if a visitor decide to re-size their window on a desktop, it will response to the change as well. Not only that, on mobile devices you lose the ability to just switch to full desktop mode. Because we have large screen devices like tablets and SG Note II/III, I find some responsive themes can be annoying to use.

Make it mobile

gmneoBy using a separate set of conditions for mobile users, you can create a mobile version of the same content with different a mobile friendly outline. In order to do this, you will install two different themes. A mobile detection script will pick up on visitor using mobile devices and automatically direct them to the mobile version of the site. If they wish, you can still provide an option for the user to switch back to the desktop version. If you are using a CMS, there are many plugins and extensions for both Drupal and WordPress. One of my favorite is Graphene Mobile Neo. I recommend using a mobile theme from the same developers who created your desktop theme to avoid any script conflicts and to retain all the short codes in the mobile version. Hence if you are using the Graphene Desktop version, please consider buying the their Mobile Neo version. A lot of people don’t know that Graphene WordPress theme is highly customizable and can be use even on large scale corporate environments. You can also use either versions of the Graphene theme as a stand along (without the need to have one version to support the other).

Unfortunately I have already purchased a mobile friendly theme for this site from another developer. It is actually far more expensive than Mobile Neo. It does not support any third party short codes without major modifications to the code. It is called WPtouch. I don’t say that their version is bad, but they do charge an arm and a leg for not only for initial purchase, but also for higher upgrade versions. They probably have the most popular mobile plugin in the WordPress market. I do not recommend them because I don’t think the theme worth $59 Canadian.

I have to be honest that I am bias towards mobile themes (as opposed to responsive themes). I don’t exactly remember where I read them, but several research groups have studied the load time and resource usage by a responsive and mobile themes. The conclusions of these studies are about 50/50 in support of mobile themes. I personally noticed that having a mobile theme and/or an independent mobile version to be more useful. The biggest advantage is that since you have two independent set of options for each version, you have full control over both versions. In addition, users now have the option to switch between the versions when using mobile devices. I publish a lot of Geology and Programming related articles here. One of the responsive themes I tried pushed some of my content to a side when viewing on a mobile window. It makes it harder to read and sometimes even useless all together. While I am sure someone will come up with a way to switch off responsiveness of a responsive theme (what a crap load of words, lol), I still prefer the customizations of mobile themes. You can also reduce the server load by preventing scripts specifically used on desktop, when someone use your mobile site. Another thing I did with mobile theme is to replace a code in mobile version to optimize usability. For example, let’s say you have a photo gallery. Each photo is open on a pop-up “lightbox” on desktop. If you have the same operation, but now on a very small screen, the pop up will most likely will either go off screen or will be too small to view. You could replace the code specifically in the mobile side to avoid such issues.

Problems with browsers

A major problem with browsers is that there are too many. Look at IE (Internet Explorer) disaster. I hate writing code just to make IE users happy. Depending on the mobile browsers your visitors use, your site will be displayed either right or wrong. Nope, I never seen half-right rendering. Specially if you are running a business, you need to have the online publications as smooth as possible. Even I found myself switching to desktop version of my own site because some of my images are improperly rendered in the mobile theme. This another reason why I support mobile theme with a desktop switch option!


At the end it is your choice! Some of you will disagree with my experience with WordPress mobilization methods. As long as you can keep your mobile visitors (customers) happy, that’s what counts. When designing and coding websites, keep in mind that most people are not as tech savvy as you are. Do not expect your visitors to spend time figuring out how to make their experience pleasurable. It is your responsibility to provide support for the site.