I have been writing customizations — extensions, modules, plugins, templates, and themes —
for a few of the most popular LAMP CMSes, keeping the code on
github.
I have been doing this off-and-on for many years, since the
PHP Nuke
days, in fact.1
Most recently I have written customizations that utilize device detection for each of the most popular LAMP CMSes,
Joomla,
WordPress,
and
Drupal.
This page contains an overview of that work.
Integrating
idMyGadget
with a CMS makes the results of the device detection available to all of the CMS's extensions —
all of its components, modules, plugins, templates, and themes.
This enables all of the extensions to call functions like
isPhone(),
isTablet()
and
isDesktop(), and
adjust the content served as appropriate.
As soon as I learned that there is software enabling a site to determine what device the visitor is
using when they connect, I was immediately curious about
how it works and what it is capable of detecting.2
I did some
googling
and noticed that very few people were doing this - integrating Device Detection with LAMP CMSes -
so it seemed like an opportunity to do something unique.
This increased my curiosity!
In addition to satisfying my curiosity, the goals in pursuing this project include:
Getting more development experience with Joomla and WordPress.
Learning what Drupal development is like.
Finding out why most, if not all, sites use only responsive techniques?
With technology like this available, it seems counter-intuitive to
send the exact same content to all browsers, regardless of the device,
Ideally, if I can get this to work well, and enjoy doing this sort of work,
maybe I can actually make some money doing this for clients.
Once I got the idea, though, the major goal became satisfying my curiosity about how difficult this would be
and what the results might look like.
Additionally, I have been looking for an excuse to dive into Drupal development for many years.
As Ben Franklin once said,
For the best return on your money, pour your purse into your head.
Fast forward to now and, having spent the better part of a year playing around with this idea, and
having thoroughly satisfied my curiosity about LAMP CMSes in general and
how they might use device detection in particular, I have a confession to make:
It would be nice to tell more people that device detection is possible, teach them a bit about how it works, and
perhaps even make some money off of some of this work and all that I have learned.
(There, I said it.)
For what it's worth, I have been giving presentations at some meetups around town.
Of course, I am not much of a sales and marketing person, but I suppose that could always change ...!
If I may be so bold as to try some marketing, let me say that,
if you or someone you know is interested in learning how their LAMP CMS can be enhanced to
customize as much or as little of the content it serves to specific types of devices, please
Contact Me!
The Joomla module in
jmws_mod_menu_idMyGadget
allows administrators to create menus that display only on specific device types.
Note that device-dependent menus enable administrators to serve — or not serve —
specific (types of) content to specific device types.
Explanation of how this works is a bit complicated and well beyond the scope of this annotated list of repos.
Joomla + IdMyGadget Template Repos
The following repos contain Joomla templates that use idMyGadget device detection:
The template in
jmws_beez3_idMyGadget
combines the beez3 default joomla template and code using idMyGadget.
For this project, I made as few changes as possible to the template when
implementing the features listed below.
The template in
jmws_protostar_idMyGadget
combines the protostar default joomla template and code using idMyGadget.
For this project, I again made as few changes as possible to the template when
implementing the features listed below.
The template in
jmws_protostar_tomh_idMyGadget
combines the protostar default joomla template with code using idMyGadget.
In addition to the changes needed to implement the features listed below,
this template also contains some changes I felt like making while I was working on the project.
Each of these templates has the following options tabs in the CMS's administration panel allowing administrators to:
The IdMyGadget Options Tab allows site admins to specify:
Which device detection library to use
Which header (logo) image is served — if any — on phones, tablets, and desktops
Whether to use the Fluid Layout on phones, tablets, and/or desktops
Whether to show the site name on phones, tablets, and/or desktops
The site title — if any — and the html element to use for it on phones, tablets, and/or desktops
The tag line — if any — and the html element to use for it on phones, tablets, and/or desktops
The Hamburger Nav Options Tab allows site admins to specify:
Whether to show the Left Side Hamburger Menu Icon on phones, tablets, and/or desktops
Whether to show the Right Side Hamburger Menu Icon on phones, tablets, and/or desktops
The Left Side Hamburger Menu Icon size and color
The Right Side Hamburger Menu Icon size and color
The line cap and line size of the Left Side Hamburger Menu Icon
The line cap and line size of the Right Side Hamburger Menu Icon
The Phone Nav Options Tab allows site admins to specify:
Which jQuery Mobile Menu Theme to use
Whether to show the Phone Nav Menu on phones, tablets, and/or desktops
Adding the Phone Nav Menu causes the template to include
jQuery Mobile,
which is what makes the Phone Nav Menu display mobile-friendly app-like menu options in the page header or footer or both.
The Phone Nav Menu does not look good on tablets and desktops, but
the option to use it on those clients is available so that you can judge for yourself.
Each of these themes has the following groups of options in the CMS's administration panel:
The IdMyGadget Detector group of options allows site admins to set:
Which device detection library to use
The IdMyGadget Header/Footer Menus group of options allows site admins to specify:
Which jQuery Mobile Menu Theme to use
Whether to show the Phone Nav Menu on phones, tablets, and/or desktops
Enabling either the Header or Footer Menu causes the template to include
jQuery Mobile,
which is what makes the Phone Nav Menu display mobile-friendly app-like menu options in the page header or footer or both.
The Phone Nav Menu does not look good on tablets and desktops, but
the option to use it on those clients is available so that you can judge for yourself.
The IdMyGadget Left Hamburger Menu Icon group of options allows site admins to specify:
Whether to show the Left Side Hamburger Menu Icon on phones, tablets, and/or desktops
The Left Side Hamburger Menu Icon size and color
The line cap and line size of the Left Side Hamburger Menu Icon
The IdMyGadget Right Hamburger Menu Icon group of options allows site admins to specify:
Whether to show the Right Side Hamburger Menu Icon on phones, tablets, and/or desktops
The Right Side Hamburger Menu Icon size and color
The line cap and line size of the Right Side Hamburger Menu Icon
The phone navigation options work well, but the hamburger menu icons can be a bit flakey on some devices,
so it is best to avoid using those at this time.
Here is how this happened: I got
idMyGadget
integrated with Drupal 7, but discovered that the version of
jQuery
used by Drupal 7 was incompatible with the version of
jQuery Mobile
I was using.
The theme in
jmws_drupal_idMyGadget_stark-d8
is based on the Drupal 8 version of the
stark
theme.
It has access to the parameters set by the module, but at this time does not do anything with those values.
The theme in
jmws_drupal_idMyGadget_bartik-d8
is based on the Drupal 8 version of the
bartik
theme.
It has access to the parameters set by the module, but at this time does not do anything with those values.
Installing the
jmws_idMyGadget_for_drupal-d8
module adds following groups of options in the CMS's administration panel under
Configuration -> System:
The IdMyGadget — Gadget Detector group of options allows site admins to set:
Which device detection library to use
The IdMyGadget — Hamburger Menu Icon group of options allows site admins to specify:
Whether to show the Left Side Hamburger Menu Icon on phones, tablets, and/or desktops
The Left Side Hamburger Menu Icon size and color
The line cap and line size of the Left Side Hamburger Menu Icon
Whether to show the Right Side Hamburger Menu Icon on phones, tablets, and/or desktops
The Right Side Hamburger Menu Icon size and color
The line cap and line size of the Right Side Hamburger Menu Icon
The IdMyGadget — Options for Desktops group of options allows site admins to specify:
Which logo image is served — if any — on desktops
Whether to show the site name, and the html element to use for it, on desktops
The site title — if any — and the html element to use for it, on desktops
The tag line — if any — and the html element to use for it, on desktops
The IdMyGadget — Options for Phones group of options allows site admins to specify:
Which logo image is served — if any — on phones.
Whether to show the site name, and the html element to use for it, on phones.
The site title — if any — and the html element to use for it, on phones.
The tag line — if any — and the html element to use for it, on phones.
The IdMyGadget — Options for Tablets group of options allows site admins to specify:
Which logo image is served — if any — on tablets.
Whether to show the site name, and the html element to use for it on tablets.
The site title — if any — and the html element to use for it on tablets.
The tag line — if any — and the html element to use for it on tablets.
The IdMyGadget — Phone Nav Options group of options allows site admins to specify:
Which jQuery Mobile Menu Theme to use
Whether to show the Phone Nav Menu on phones, tablets, and/or desktops
With the
integration of Symfony,
setting up these options in
Drupal 8
is quite a bit different than it is in Drupal 7.
Specifically, it is much more Object-Oriented, and OO Programming is something I greatly enjoy!
YouTube Saves the Day!
Not only was this my first experience with Drupal, it was also
my first experience with the fresh release of a new major version of a major CMS.
At the time, I was somewhat surprised at the lack of up-to-date documentation, but
in retrospect, this is not surprising at all.
As it turned out, I found some very important information on
youtube.com
of all places.
This was not what I expected, but in hindsight it makes perfect sense:
the informative video was from
DrupalCon 2015 in Barcelona,
and done shortly after they finalized the changes that were going into D8.
Having found one video with essential information not available elsewhere,
I wanted to watch all the videos;
the sense of
FOMO
suddenly became very strong!
Of course watching them all is out of the question, there are too many.
4
First Time for Everything
There's a first time for everything, and this turned out to be a huge learning experience.
Now I know where to go first for leading-edge information such as this!
At one point during this advanture I actually found one of the answers I needed on
twitter!5.
Wonders never cease!
Looking at the
goals of the project,
I have achieved all of them except the last two —
both of which entail making some money off this work.
To accomplish these last two goals I need your help!
If you, or some one you know has, or wants a LAMP CMS site and
is interested in learning how to serve different content
6
to different devices, please
Contact Me
and see if we can get to work on that.
Time Spent
I always feel like, once something like this done, it looks easy.
However, I assure you that doing all this was not a walk in the park!
These pie charts show how I spent my time on this project.
Time Spent by Activity
As far as activities go, most of my time was spent
learning,
and most of that time was spent learning how to work with the
individual CMSes.
Although they are similar, each has a different organizational structure and
different sets of functions and methods for accomplishing things.
Coding and experimenting go right along with that,
related but distinct activities.
The maintenance includes getting all three CMSes running on
three different hosts: development, backup, and production.
Time Spent by CMS
And as far as time spent on the various CMSes,
I spent about the same amount of time learning and working with the two versions of Drupal
as I did with Joomla and WordPress combined.
Drupal is complex, and is well-known for having a
steep learning curve7.
But I was still surprised by its complexity,
the number of changes made between versions 7 and 8, and
especially the lack of documentation when Drupal 8 was released.
It is a bit ironic though that despite spending all this time on Drupal, and
learned a ton,
I don't have much to show for the effort.
Of course, now that I have done it for my demo use cases, I could follow the
same process to satisfy more practical goals — much more quickly the second time.
And to be honest, I think it would be great to do something like this in
JavaScript
with
Node
or in
Python
with
Django
or
Flask.
So this work is still in progress!
I look forward to getting back to it if and when I find some customers with specific LAMP CMS needs, or
some time to try it with one of the other languages mentioned previously.
LAMP CMS Agnostic
I have been going to a lot of meetups lately, and
at first was a little suprised that there is not more cross-pollination —
that there are not many people who work on more than one of these CMSes.
This experience taught me that a degree of specialization is necessary if one wants to build websites,
rather than create a tool for website builders to use.
This is especially true if one wants to work with Drupal.
This experience has also made me lamp-cms-agnostic.
Each of these CMSes has its strong and weak points.
Choosing the right tool can go a long way towards making the job easier.
If you are thinking about using a LAMP CMS to create a website,
are uncertain which one to use, and would like an impartial opinion, please
contact me.
4
Plus they tend to put me to sleep, even when I take notes. Bummer.
5
Never in a million years would I have considered a site that
limits contributions to no more than 140 characters to be a valid,
much less important, source of detailed technical information.
As I recall, though, this life-saving tidbit was a link.
6
My sites simply demonstrate what is possible here.
The differences in content sent to different device types may be slight or massive, depending on the
use case —
what you want to do.
I am not a usability person nor a marketing and sales type guy; I did this mostly out of curiosity.
However I do see a lot of potential here, and still find it hard to believe that
it is right for all those sites out there to send all the same content to all device types.
I guess that's just me?
7
According to
this post on forums.xkcd.com
the famous
xkcd
cartoon depicting Drupal's steep learning curve is
actually a photoshopped version of an
xkcd cartoon showing the learning curves of popular
MMORPGS.
Learning Curves
