Drupal Planet

Drupal 8 Content Creation Page Usability Testing by userfeel.com

The Drupal community works hard on the upcoming (expected to be released in the summer of 2013) Drupal 8 release.

Drupal 8 aims to provide a much improved workflow for content creators. One of the most critical screens in this is the content creation page.

After some great discussions and design mockups shared in the issue queue, the community has come up with a mockup.

Drupal 8 Content Creation Page Mockup

In order to make sure that this is a much-improved workflow, the community needed to do usability testing on this, so netstudio, creator of userfeel.com offered 5 remote usability tests.

UserFeel provides the technology and a huge panel of thousands of testers so it was easy to find the right people to test the new design. We needed people who are regular content editors (post content at least once a month on their sites) and use a CMS to do this. After the initial screening, the right people were found and tests were conducted.

You can watch the usability test videos on the following links:

Usability Test 1
Usability Test 2
Usability Test 3
Usability Test 4
Usability Test 5

Drupal Optimizely Module for easy A/B testing

Εικόνα Optimizely is a testing tool that lets you setup A/B and Multivariate tests on your page with virtually no coding! As their creators say, it's A/B testing software that you'll actually use. A one-time copy-and-paste is all you need to run tests.

We developed a Drupal 6 and Drupal 7 module that makes that even easier. You only need to install the module and insert your Optimizely user id. That simple! You are ready to start building your A/B and Multivariate tests*.

Even better, the module is provided for free! Go download it and start testing. We wish you happy optimizing!

*Optimizely service is not free. You can get a 30-days free trial though from optimizely.com.

Open Deals - A Drupal Distribution for Deals sites by netstudio

Today was a very exciting day in netstudio. After a month of work by Nikos, George and me, we gave to the Drupal development community a Drupal Distribution for building deals sites.

Its name... Open Deals!

Deals because if refers to deals sites (group buying sites). Open because it is free (Zero Priced AND Free to Use) and Open Source.

What is a "Drupal Distribution"

First things first. What is a Drupal Distribution?

It's a pre-set Drupal installation designed to execute a specific task. There are many distributions out there that cater to many needs, like for example online magazines, organising events and seminars, educational institutions, government agencies etc.

Distributions are meant to be used by either developers or users familiar with web technologies, that have both the time and the spirit to dive into their own site's development, or at least a serious part of it.

Solid foundations

Now that we are done with terminology, Open Deals is a Drupal distribution, very easy to install (just like Drupal), that only needs a couple of settings to be set and of course content (deals). Other than that, it's up and running in no time, thus giving birth to a new deals site.

Open Deals is based both on Drupal's strong and stable platform, and is pre-set according to Netstudio's experience, exactly like we would do for a heavy-duty and fully functional site for one of our own customers.

Features and Specifications

In short, the most basic feature of Open Deals are:

It is able to manage deals with a minimum and maximum number of sales
Includes countdown to the expiration date of the deal like all deal sites do.
Easy to administer
Allows multiple admistrators with different rights.
It will soon have its own iPhone Application.
It's extendable, versatile and of course open source since it's Drupal based.
It comes with its own theme based on deals' sites layouts.
It's SEO optimized.
Fully interconnects (e-commerce data) with Google Analytics.

Free and Free of charge

The most important aspect of Open Deals is that it is not only free of charge but also free to use. Anyone can download it, and use to create as many sites as he wants, either for him or his clients, altering anything he wants to.

Professional support

Furthermore, the distribution is supported by Netstudio which has an ever-evolving and experienced team of developers, designers and search engine marketing & analytics experts, that can help even the more demanding users regarding tasks that are either too advanced or simply they don't want to meddle with, such as usability testing, Drupal optimized hosting, design, development, SEO, Analytics, A/B Testing, Multivariate Testing etc.

Continuous improvement and development

The distribution is still in it's frist (alpha1) version, which means that many things can be improved and corrected in the months to come, including new additions and functionalities (like an iPhone Application for the site's users), according always to the interest the Drupal community shows in it. Our first impression though is that there is a warm welcome for Open Deals since the demand for deals sites worldwide is growing.

Demo & Download

You can see the Open Deals demo at www.opendealsapp.com/demo. For the more bold users, you can build your own site by downloading the distribution from www.drupal.org/project/opendeals.

Methodlogy

The distribution was initially a MySQL Dump, which means that during the installation the user was prompted to import a MySQL database. We altered the installation process though to conform to the Drupal Standards and it is now a "proper" Drupal Distribution based on Features.

Comments, Feedback & Error Reporting

We will be happy to receive your feedback either through our contact form, or the Issue Queue of the distribution at drupal.org.

Thanks

I would like to thank both Nikos and Giorgos for their persistence and patience taking into consideration the amounts of pressure that we placed upon ourselves to achieve the distribution's completion, and also Nectarios Sylligardakis from eresus who not only welcomed me into the Drupal community about a year ago but also encouraged me to proceed with the distribution development.

Migrating ivf-embryo.gr from Joomla! to Drupal.

ivf-embryo.gr is Thanos Paraschos' "Embio Medical Center" website. Embio Medical Center is a specialized in vitro fertilisation clinic.

The clinic is one of the most known in Greece and its website is one of the largest in both in content and visitor numbers that was developed and hosted by Netstudio. We joke about it calling it an encyclopedia due to the tremendous amount of articles it contains.

The website was developed in 2007 using Joomla! 1.0.x and in 2009 was transferred to Joomla! 1.5.x. During those 4 years, and while the content's volume was still growing, 2 major reconstructions needed to be done along with numerous fixes and improvements.

Having already witnessed Drupal's advantages over Joomla! (faster loading, solid platform, SEO optimized, expandable), we chose to convert ivf-embryo.gr into a Drupal site. That proved to be way harder than we had anticipated.

The site comprised a staggering 550 elements in its main menu, already translated in 8 languages! The menu was linked to over 4500 pages and also included contact forms, videos, images with enlargement capabilities etc. Also, the whole moving process needed to include precise url migrations (meaning the old joomla! urls should match exactly the new ones) so the site wouldn't lose its ranking in the search engines.

For this project, 5 out of 9 members of our team had to participate and also a partner from the clinic's side. Initially, Yannis installed and set Drupal and the basic modules that we would need. After that, I took up the actual process of moving the content.

Initially, I tried using Drupal Feeds. I succesfully added a large percentage of the content this way by matching Joomla! articles to Drupal nodes. Sadly, at that part, the site's internationalization features kicked in to ruin everything. I had to intervene in Feeds' code in order to extend it and make it support the needs of the particular case. Since time was an issue, I didn't have the luxury to develop a module that would extend Feeds, so I wrote a module from scratch that performed the basic operations we needed. That proved to be more time efficient since we didn't meddle with the multiple cases Feeds is designed to deal with.

Here is a code snipet, using the Drupal API for inserting a Basic page and its translation:

<?php
global $user;
// joomla ID
$joomla_id = 15;
// Choose the node that fits the Joomla ID.
// Having already created a field_joomla_id
$query = new EntityFieldQuery;
$results =  $query->entityCondition('entity_type', 'node')
  ->propertyCondition('language', 'el')
  ->fieldCondition('field_joomla_id', 'value', $joomla_id, '=')->execute();
// Array holding node translations
$ex_translations = array();
// If the node already exists update it
if(!empty($results)){
  $nid = current($results['node'])->nid;
  $newnode = node_load($nid);
  $tnid = $newnode->tnid;
  $ex_translations = translation_node_get_translations($tnid);
}
// Else create a new one
else{
  $newnode = new stdClass();
}
$newnode->language = 'el';
$newnode->type = 'page';
$newnode->name = $user->name;
$newnode->title = 'Greek Titme';
$newnode->body[$newnode->language][0]['summary'] = '';
$newnode->body[$newnode->language][0]['value'] = 'Greek content';
$newnode->body[$newnode->language][0]['format'] = 'full_html';
$newnode->field_joomla_id[LANGUAGE_NONE][0]['value'] = $joomla_id;
// prepare the node for saving
$newnode = node_submit($newnode);
// save the node
node_save($newnode);
// For translations, tnid needs to be set
if(empty($ex_translations)){
  db_update('node')
    ->fields(array(
      'tnid' => $newnode->nid,
      'translate' => 0,
    ))
    ->condition('nid', $newnode->nid)
    ->execute();
}
// If translations already exist, update them
if(!empty($ex_translations)){
  $tnode = node_load($ex_translations['en']->nid);
}
// Else create new ones
else{
  $tnode = new StdClass();
}
$tnode->type = 'page';
$tnode->uid = $user->uid;
$tnode->title = 'Translated Title';
$tnode->language = 'en';
$tnode->body[$tnode->language][0]['summary'] = '';
$tnode->body[$tnode->language][0]['value'] = 'Translated Content';
$tnode->body[$tnode->language][0]['format'] = 'full_html';
$tnode->field_joomla_id[LANGUAGE_NONE][0]['value'] = $joomla_id;
$tnode->promote = 1;
if(empty($tnode->tnid)){
    $tnode->tnid = $newnode->nid;
}
// Saved translation
node_save($tnode);
?>

On the other side (Joomla!), a component was created that extracted in json format the corresponding information.

<?php
$db = JFactory::getDBO();
$q = "
SELECT c.id, c.title, c.introtext, c.fulltext, c.created FROM #__content AS c
WHERE state = 1
ORDER BY c.id
";
$db->setQuery($q);
$articles = $db->loadObjectList();
$export = array();
foreach($articles as $i=>$a){
  $export[$i]['id'] = $a->id;
  $export[$i]['title'] = $a->title;
  $export[$i]['introtext'] = $a->introtext;
  $export[$i]['fulltext'] = $a->fulltext;
  $export[$i]['date'] = $a->created;
  $export[$i]['redirect'] = JRoute::_('index.php?option=com_content&view=article&id='.$a->id);
}
echo json_encode($export);
?>

That json string was passed into Drupal where the the module we wrote performed the necessary operations in order to create the menus, nodes and translations accordingly and insert them into the database (using the Drupal API of course). The whole process was long and tiresome. After many (many) attempts, many staging servers restores, many words and phrases that for censorship issues Ι will ommit from this text, and many "yiipee's" after the successes, Ι managed to complete the transfer. The information was transferred with great precision and very little needed to be corrected manually.

The next issue we needed to tackle was images. They were manually added in Drupal's "files" folder (where they would normally be saved by Drupal). Then, another module was created who's job was to deal with the display of the images using lightbox and dynamically generate thumbnails.

Last but not least, I was left with the url matching. Fortunatelly, here the solution was rather obvious. We used Drupal Redirect (http://drupal.org/project/redirect) and chose to redirect instead of copying the paths. The reason is that Drupal handles urls brilliantly with pathauto and we wanted it to stay that way.

That's where my part ended. George made the last correction on the blocks and menus while Olga performed corrections and revisions on the content. Lastly, Panagiotis who manages our clients' Google campaigns, had to alter the landing pages' urls in the ad texts.

Finally, the website runs on Drupal! You can visit it at http://www.ivf-embryo.gr. It's faster than ever since it uses Drupal 7 caching. Everyone here at Netstudio and most importantly the client are very pleased with the migration and we can already see the positive outcome from the better ranking in Google's results!

Drupal Con London from a newbie's point of view

Recently I was pleased to attend along with Netstudio's team this year's DrupalCon in London. If someone would ask me what did I take in from the whole experience, I would reply "A whole new view on what 'open source community' means!". It's really astonishing how Drupal's community works and proves that nothing is coincidental:

It's not a coincidence that more and more sites are developed in Drupal.
It's not a coincidence that the greatest educational organizations (.edu) use Drupal.
It's not a coincidence that sites like the White House, MTV, Economist, Examiner and Ubuntu are Drupal sites.
It's not a coincidence that Netstudio now only develops in Drupal!

Let's take things from the beginning though. Not only was it my first DrupalCon (or any -con to be precise), it was my first time in London too and the excitement was intense. Two things that need to be noted, was that although my English is rather fluent (or so I want to believe), I had a really hard time when it came to ordering food. The menu's entries look like gibberish to me so most of the time i resigned to American style food.

Good for me I must say, cause the team's daredevils most of the times never got what they thought they were ordering and were left puzzled!

The second thing that took me by surprise was that i couldn't - for my life - decide which beer to choose!

Needless to say, we replaced all the water intake we needed with... beer. Hey, it's England after all!

On to the serious stuff though; We then visited Fairfield Halls in East Croydon where we met a crowd of 1800 Drupalers.

We met the communities greatest personas; we are of course refering to Dries and Webchick.

We also met our own country's Drupalers, Kostas and Stelios Kourakis (yes, brothers), from PointBlank with whom we discussed many interesting plans and proposals regarding both the spread and growth of Drupal in Greece.

Chit-chat took place in specific pubs where all the DrupalCon-ers were gathered.

Needless to say, the whole thing also featured entertainment acts, including - but not limited to - beautiful ways on how to... build a module!

...and also the famous Batman theatrical show.

We were proud to spread the Drupal spirit throughout London with our t-shirts.

Let's take a look inside the conference.

The atmosphere was amazing. Usually you'd find us in Albert Hall where the most interesting lectures took place...

We always tried to split up though, to make it possible to absorb as much information as possible from as many lectures as possible. During intermissions we assigned tasks to Netstudio's team members according to their field of expertise.

Notable lectures were:

On the last day, we took place in a sprint regarding Internationalization and realized in utter surprise how 200 people can work together, in a single hall, in 8 different projects. We were left speechless with how down-to-earth friendly Drupal's elite were, since Dries was at the next table, participating in the sprint, while Gabor Hojtsy was at our table coordination the i18n sprint.

In retrospect, I think switching to Drupal (oh right, we were developing in Joomla! - forgot to mention that - good riddance!) was Netstudio's smartest move. Not only due to the technology available that makes development faster, efficient and pleasant, but also due to Drupal's amazing community that in it's own unique way urges you to contribute, to give back as much as possible!

Can't wait for our next rendezvous with the Drupal community in Munich!

Newbie over and out!

New features for the Drupal - Google Website Optimizer module

In netstudio we like to run experiments. We do that very often because we know that it positively affects the site conversion rate.

We try to find ways to make everything do often easier to implement. Thus, in sites made by Drupal, we use the Google Website Optimizer module. This module automatically inserts the necessary script to the pages that are to be tested and also to the conversion page, saving us some time from having to add the necessary scripts to the site theme manually. The module was developed for Drupal 6 by Nick Schoonens from Australia and was ported to Drupal 7 with the help of Geoff Brown from Canada.

While using the module, we considered adding some functionality that would help us with the way we run experiments at netstudio. Maybe some of them are useful to others as well. So, we added the following features to the 7.x version and gave this back to the community as well as 7.x-1.1.

1. Ability to filter certain IP's

This is a very common scenario in which we don’t want our own IP's to be counted towards the visits and the conversions of the experiment. The filter is implemented in such a way that allows for the filtered IP's to see the experiment variations but not add to the visits and conversion numbers.

2. Google Analytics integration

Google Website Optimizer is very good at calculating and showing the winning variation based on the conversion goal that is set while setting up the experiment. Integrating Google Website Optimizer with Google Analytics though allows us to measure other micro and macro conversions as well and see other metrics per variation like pages/visit, time on site, average order value etc. It is not unusual that the variation that appears winning in Google Website Optimizer, after analyzing in Google Analytics, proves to not be the right to select.

3. Experiment with the page title

One of the things that we pretty often test, is the page title. In the 1.1 version of the module we have added a “Test Page Title” check box which adds the necessary code to the testing page so that we can create title variations in Google Website Optimizer. No more node.tpl.php altering to add the necessary code around the page title.

The above functions are the first of a series of functions that we plan adding to the module. If your site is developed on Drupal 7, you can download it and use it to from here. Send us your ideas for more functions that you wish it had, and maybe we can add them in the next version.

If you need help with the setup or analysis of your experiments, contact us. We will be glad to offer our professional services. Don’t forget, we are Google Website Optimizer Certified Partners.