Development

Mobile Performance with Drupal - Part 1, Testing

I don't think you need yet another blog post to tell you mobile is becoming a bigger and bigger thing. Your website has to look good and perform well on mobile - you know that. But is it? How do you tell? How do you improve?

We here at FireRoad Digital are very data driven. So our process for improving mobile performance for our client Drupal sites uses the same general methodology we use for most everything:

  1. Implement best practices techniques for implementatng a certain functionality or improvement, based on our experience with developing and enhancing literally figuratively millions of Drupal websites
  2. Test, measure, analyze the results
  3. Iterate based on what we've learned

Let's look at our own FireRoad website as an example of this process. We developed it in Drupal 7 to be mobile responsive from the beginning, meaning it dynamically optimizes how the content and user interface is displayed and interacted with by the viewer based on the device being used. So we've already done part of Step 1- the basics- but for the sake of example, let's do some testing and analyzing of the initial website before we would normally go through our typical optimizatition process.

We can also use this opportunity to try out Test My Site, a new super easy to use and understand website usability and performance test tool from Google. Based on their PageSpeed Insights, which has been embedded in their other tools such as the Google Search Console, this tool doesn't require a Google account to use and provides results easily understandable results, with clear actions for improvement.

Let's be brave (and transparent) and run this tool on fireroaddigital.com

Google mobile test - first screen

 

Click TEST NOW and the tool will scan and process your site for a few seconds, and dispense some wisdom about mobile viewing habits and statistics while you wait.

Shortly you will see the results summary page, which for our site is ..

 

Google mobile test results summary

 

Our "mobile friendliness score is good" !  Good ... but looks like we could improve.  Click on the GET MY FREE REPORT button and Google will send you a lovely PDF with more details and action items. We can also step through the different categories right now and drill into the details.  Just scroll down ...

 

Google mobile test results- friendlinessGoogle mobile test results- SpeedGoogle mobile test results- Desktop


So what to do next?  The first category - Mobile Friendliness - shows how well we developed our mobile look & feel to both look good on mobile devices, as well as be optimized for mobile interaction. Looks like we've done pretty well there- the general process of developing Drupal mobile friendliness deserves a blog post of its own, including Drupal theming, media querries, Bootstrap and grids, and lots more ... which we totally should get around to writing one of these days. But looks like there are still a few points we could eke out with some tweaking.

We did the worse on the second category - Mobile Speed. We already run on the fastest, most powerful Drupal hosting platform around - Pantheon - with plenty of processing power, RAM, SSD drives, Varnish caching, and just about anythng else that can be done to increase server response. Since we are not directly managing our web server (with good reason), we do have limited options on what we can change there. On the client side, maybe some of our images are too large to download on mobile quickly. Maybe we should us e a Content Delivery Network. Maybe we haven't configured caching on the client side correctly. Lots of options here.

And thirdly, this test looks at our desktop speed. There will be some similar criteria as the mobile speed, with more leeway given since desktop users typically have more bandwidth available and larger images are needed to fill up bigger desktop monitors.  We did well, but we won't ever be satisfied with a B+.

in parts 2,3 and 4 of this series we will look at each category - why we received the grade we did and what specifically we can do to improve each number. Stay tuned - we are going for 100 / 100 / 100 !

June North Texas Drupal Meetup - Debugging

Come join us at the June (15th) North Texas Drupal metup - Allen Shaw will be presenting on Pessimism, Entitlement, and Other Virtues of a Successful Debugging Approach - targeting beginner to expert Drupal developers.

Debugging can feel a lot like hunting for a needle in a haystack, and sometimes you're not even sure the needle is there. But we'll walk through a few examples taken from real life, and see how those were found and solved. Along the way we'll look at strategies for narrowing the search, and tools to help with navigating unfamiliar code.

In this session we'll look at what to do when the unexpected happens and you need to debug, especially when it's someone else's code -- either Drupal itself, or a contributed or custom module.

Developers of all backgrounds are encouraged to attend, as I'm hoping we'll have time to learn from each other when it comes to preferred practices and toolsets. 

More info on our Meetup group.

North Texas Drupal April Meetup Notes

We had a big crowd at our April meetup of the North Texas Drupal Users group this past Monday.  And it was all about the Drupal 8!

I gave a brief intro on Drupal 8 progress, stealing liberally from webchick's Drupal 8 slides.

Brent Bice was up next, speaking about the market and business side of Drupal 8, as well as some of his discussions with Acquia engineers and product managers.  His slides on are slideshare.

Brandon Williams from the Austin Drupal users group was generous enough to travel up to Dallas for the event to present on Drupal 8 changes for developers, specifically with regards to API.  He posted his slides on gitbub.

Since the normal May meetup date would fall right about DrupalCon LA, we decided to have our next meetup in June.  Details soon.

Drupal 8 Mega Resource Guide

Drupal 8 is coming soon (ok, soonish), so we've put together this mega guide for all your Drupal 8 edumacation. And don't forget our North Texas Drupal Users Group meetup Drupal 8 Extravaganza! here in Dallas in a couple weeks.

Official Drupal 8 page

"Drupal 8 Will Have Something for Everyone to Love"

Drupal 8 Preview Slideshow by webchick

"Drupal 8 will be the best release of Drupal yet."

The Drupal 8 Sessions - DrupalCon Austin

Links to 17 sessions related to Drupal 8

Why Drupal 8? Why now?  by jam

"As of March 2015, when should you deploy Drupal 8?"

Ultimate Guide to Drupal 8 by webchick   (eBook link)

"This blog series will attempt to enumerate the major changes in Drupal 8 for end-users, for site builders, for designers and front-end developers, and for back-end developers."

Drupal 8 - What's in it for me?

He looks at the benefits of using Drupal 8 for both marketers and technologists.

Try out Drupal 8 on Pantheon

It's still in beta, but Pantheon lets you spin up a Drupal 8 site quickly and easily.

Drupal 8 Release Date

A mathematical estimate on when Drupal 8 will be released based on the remaining number of critical bugs and tasks against Drupal 8 punched into a Monte Carlo simulation.

Drupal 8 Changes Twitter Bot

Follows changes from https://www.drupal.org/list-changes/drupal and tweets them.

Acquia's Drupal 8 Blog Series

It's a series of blog articles. By Acquia. On Drupal 8. That's pretty much it.

27 Questions (and Answers) from My First Drupal 8 Site Build

"Slowly, through trial and lots and lots and lots of error, I found answers to all of my questions. Those answers follow."

Drupal Podcasts - Keeping Up While Doing Something Else

Podcasts, or "a digital medium that consists of an episodic series of audio, digital radio, PDF, or ePub files subscribed to and downloaded through web syndication or streamed on-line to a computer or mobile device" (wikipedia) have been around a little over 10 years, and lately have seen a resurgance in popularity. It's a great way to learn something, or least be entertained while you are commuting to work, exercising, or just cleaning the kitchen.

My preferred iOS podcast app, Downcast, shows me subscribed to about 50 shows. Which of course is way more than I can listen to, but at least gives me choices. Many of those are Drupal, technology and marketing related. Some of the best:


 

Dropcast from Mediacurrent. Brand new from one of the top Drupal shops in the world. The first show comes in at 45 minutes, with a variety of topics.

 


 

Drupalize.me logo

Drupalize.me from Lullabot. Drupalize.me has been around a while and generally puts out 1-2 shows a month, each running 15-50 minutes.

 


 

Drupal Easy logo

Drupal Easy. With nearly 150 episodes, it's been around forever. Tends to go long and sometimes sound amateurish, but they have great guests.

 


 

Hacking Culture logo

Hacking Culture by Lullabot. Also brand new, and not Drupal-exclusive. But their first episode featured a Backdrop CMS (the Drupal fork) discussion.

 


 

Drupal Easy logo

Full Stack Radio. A podcast for "developers interested in building great software products, product design, user experience, testing and system administration."

 


 

Social Media Examiner. If there is a marketing and social media podcast out there that has more immediately actionable information in it, I don't know it.

 


What others do we like that maybe aren't Drupal or developer focused? Well, since you asked: Sword & Laser, TED Radio Hour, Science Friday, Radiolab, Duct Tape Marketing, Cool Tools, and Ask Me Another.

Happy Listening!

Drupal 8 Extravaganza at the March North Texas Drupal Users Group Meetup

Drupal 8 is likely going to launch sometime in 2015.  So we all need to get ready - Drupal 8 is a whole new ball game.  Likely agenda for the March 16 meetup:

  • Drupal 8 status
  • What's New from Drupal 7
  • Direction
  • Resources
  • Can You Build a Real Site With Drupal 8 Yet?

For that last one, we'll walk through the process of creating a new, functional website using just Drupal 8 and see where the pitfalls are.

And just for fun, DrupalReleaseDate.com uses Monte Carlo simulation to guesstimate the Drupal 8 release date.  As of today, it shows January 6, 2016.  Yikes.  Better get working on those blocker bugs.

So if you live in the Dallas / Ft. Worth area and use Drupal or want to learn more about Drupal, then the North Texas Drupal Users Group is the place to be.  See you in March.

AngularJS and Structural SEO in Drupal - Feb North Texas Drupal Meetup Notes

We had a nice turnout last night for the North Texas Drupal users group.  And we just cleared 100 members!  You need to join us on our Meetup page to learn about all our upcoming meetups.

First up was the various Drupal ecosystem updates:

  1. DrupalCamp New Orleans is on March 28th.  Beignets and Drupal- can't beat that!
  2. DrupalCon LA starts on May 11.  Only one week to submit session proposals.  Although we all know that only the big sponsors get selected, but you can try anyway.
  3. CiviCon 2015 starts on Apr 23 in Denver.  The conference site should be up soon.
  4. BackDrop CMS had their 1.0 GA release.  This was the fork of Drupal made a year or so ago.  You can spin up an instance to play with on Pantheon.
  5. Lots of great Drupal podcasts out there to help you keep up while commuting or exercising.  Dropcast, Drupal Easy, Drupalize.me are all Drupal-focused.  Others of interest: Hacking Culture (open source), http://fullstackradio.com/ (dev), and The Changelog (dev)
  6. Wonder when Drupal 8 will release?  DrupalReleaseDate.com uses Monte Carlo Simulation to take as good a guess as anyone.  Says Oct 29th right now.
  7. Weather.com was launched by MediaCurrent, making it the most heavily used Drupal site developed to date.  And, it has a AngularJS front end!

And that's what Travis presented - using AngularJS as a front end to Drupal.  His presentation is on his website - http://travistidwell.com/

Next, I spoke on Structural SEO in Drupal - how the construction of your Drupal website affects its search engine placement … and conversions … directly and indirectly.  My 75 slides aren't that useful without me talking about them, but I will be turning it into a more readable document shortly and it will be available on our website.

Next month - It's all about the Drupal 8!  See you then.

 

Firehose Program for Fixed-Price (nearly) Unlimited Drupal Development

FireRoad Digital (FRD) is excited to announce the Firehose program for Drupal website owners that eliminates the typical pain and friction that comes from hourly-based pricing.


Do you own or manage a Drupal website for a small/medium business or non-profit, and need to make regular updates, add features, and keep it updated and secure, but either don’t have in-house Drupal expertise or your IT staff never has the bandwidth to help out with that long list of site improvements you need? There’s no reason to hire an expensive full-time Drupal developer- sign up for Firehose instead!

For a single fixed price per month, you can call or email us with most any request for site changes or improvements, from simple changes to a new feature, and we will take care of them quickly and expertly.

This includes consultations on design, strategy or functionality as needed, via phone/ video calls, email or in-person (Dallas / Ft. Worth area). We will also proactively look for ways to continuously improve your Drupal website and structural on-page SEO, discuss with you, and implement with your approval.

No need to get an hourly-estimate from us first or call your CFO to see if you can afford a desperately needed new website feature. It’s like having an experienced Drupal developer available on staff, but at a fraction of the cost, and that is already budgeted.

The Firehose also includes proactive Drupal core and contributed module updates, to keep your site safe and secure. We track changes from drupal.org and update your site as needed, without you having to even think about it. Remember Drupageddon?

All developers at FireRoad Digital have at least a Computer Science bachelor’s degree and 5-7 years of experience working exclusively with Drupal on over one hundred websites and complex Drupal projects from SMB to Fortune 500- it’s all we do. We are all USA-based, working in Dallas, Texas. Nothing is outsourced or offshored!

Finding and hiring a full-time experienced Drupal developer is difficult and can cost $150K a year in salary and benefits. For a small fraction of that cost you can have a team of skilled US-based Drupal developers available for most anything you need.

Call or contact us to learn more about Firehose!

North Texas Drupal February Meetup

We've announced the first meetup of 2015 for the North Texas Drupal Users Group - Monday, Feb 16th at 6:30 at the Addison Treehouse.  If you do Drupal in the Dallas area, you should be there!

First off, we'll be learning How To Integrate AngularJS into Drupal.  AngularJS a lightweight Javascript open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications.

Then, we will take a look at Structural SEO in Drupal.  Come learn how to optimize the structural elements of your Drupal website to optimize your on-page SEO - all with just Drupal contrib modules and configuration - no programming!  You know, the stuff we talk about here at FireRoad all the time!

We'll be announcing the March meetup soon, and it's all about the Drupal 8.

More info and register on our Meetup event page.  Free as usual.

And what's with the two guys holding fish?  They're ... Anglers!  We are so clever..

Advanced FlexSlider Construction in Drupal 7

Flex Slider is a popular Drupal module used to create responsive sliders with the FlexSlider 2 jQuery plugin. It's powerful and flexible with good hooks available for customization. It's not always clear, though, how to construct sliders in more complex situations.

The Challenge

Our example scenario consists of two content types. The first, call it Roadkill, has two fields of interest: a multivalue image field and a standard body field. The second, Cuisine, has a multivalue field collection field (field_cuisine_slider). The field collection field consists of a reference to a Roadkill node plus a single value image field.

The challenge is to create a slider with the following characteristics:

  • The main slide consists of the field collection image field plus the body text of the referenced node.
  • The slider uses thumbnail navigation using the first image of each referenced node.

(Note: this scenario may appear a little contrived, but it's actually based on a real case in which one group of users could create and edit the first content type and another group of users could create and edit the second content type.)

Site Building

The amount of extra site building is actually pretty minimal. First, we need a couple of modules (other than Flex Slider and the modules used to setup the content type architecture):

Next, create a new view mode. In Display Suite, you can do this by going to Admin→Structure→Display Suite→View modes→Add a view mode. Give it a name, like Cuisine Slider (machine name cuisine_slider) and enable it at least for field collection entities.

In the field collection (Admin→Structure→Field collections→your field collection→manage display→Custom display settings), enable the new view mode for this field collection. Save the field collection, then configure the view mode so that it contains just the image. This will be the main slide image. We'll add the text later in code. Save the field collection again.

(Note: you could instead add text from the Roadkill node here using the Rendered entity field formatter and appropriate configuration on the Roadkill node, but we're doing it this way to look at a particular facet of Flex Slider.) 

Now, add a FlexSlider option set in Admin→Configuration→Media→FlexSlider→Add. Give it a name, like Cuisine Slider (machine name cuisine_slider) and on the Navigation and Control Settings vertical tab, set Paging Controls to Thumbnails. You might also uncheck Slideshow on the General Slideshow and Animation Settings tab so that the slider doesn't rotate automatically, but that's up to you. Save the option set.

In the Cuisine content type, manage the display where you are going to use the slider (Admin→Structure→Content types→your content type→Manage display). For the field collection field, set the Format to FlexSlider. Choose the Option Set you just created (Cuisine Slider), and the view mode you created (Cuisine Slider). Change the number of values to display or skip if you want. Click Update and then save the content type.

That's all the site building that's necessary. Just four things:

  1. Create a view mode
  2. Configure the field collection to use the view mode
  3. Create a FlexSlider option set
  4. Configure the content type to tie it together.

Write Some Hooks

FlexSlider defines several useful hooks, but we only need one of them plus one other core hook.

In your theme's template.php file, write an implementation of template_preprocess_field. In this hook, we:

  1. Extract the field collection fields we need
  2. (This is key) Put them in a place accessible to the other hook we're implementing.

You can use any method you want to get the field collection fields in an easier to manage state; I just used the function from this Four Kitchens post verbatim.

/**
 * Implements template_preprocess_field
 */
function mytheme_preprocess_field(&$vars, $hook) {

  if ($vars['element']['#field_name'] == 'field_cuisine_slider') {

    $field_array = array('field_roadkill', 'field_main_slide_image');
    _rows_from_field_collection($vars, 'field_cuisine_slider', $field_array);

    // Copy the rows into the item array so they will get passed to the flexslider list preprocessor.
    // Do this here to keep the row processor generic.
    foreach ($vars['items'][0]['#items'] as $index => $item) {
      $vars['items'][0]['#items'][$index]['row'] = $vars['rows'][$index];
    }
  }
}

/**
 * Creates a simple text rows array from a field collections, to be used in a
 * field_preprocess function.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 *
 * @param $field_name
 *   The name of the field being altered.
 *
 * @param $field_array
 *   Array of fields to be turned into rows in the field collection.
 */

function _rows_from_field_collection(&$vars, $field_name, $field_array) {
  $vars['rows'] = array();
  foreach($vars['element']['#items'] as $key => $item) {
    $entity_id = $item['value'];
    $entity = field_collection_item_load($entity_id);
    $wrapper = entity_metadata_wrapper('field_collection_item', $entity);
    $row = array();
    foreach($field_array as $field){
      $row[$field] = $wrapper->$field->value();
    }
    $vars['rows'][] = $row;
  }
}

Next, write an implementation of template_preprocess_flexslider_list (see flexslider.theme.inc that is part of the FlexSlider module). In this hook, we're doing a few things for each slide:

  1. Retrieve the values from the referenced Roadkill node we need for the slider.
  2. Set the $items[$index]['title'] element to the body of the Roadkill node. The FlexSlider theme function wraps this in a <p class="flex-caption"> tag, so you might want to do some processing on the text to ensure there are no disallowed tags (like <div>).
  3. Set the $items[$index]['thumb'] element to the first image of the referenced Roadkill node.
/**
 * Implements template_preprocess_flexslider_list
 */
function mytheme_preprocess_flexslider_list(&$vars) {

  // Only process the optionset we defined
  if (isset($vars['settings']['optionset']->name == 'cuisine_slider') {

    $items = &$vars['items'];
    foreach ($items as $index => $item) {

      // Use entity_metadata_wrapper for more standard access
      $roadkill = entity_metadata_wrapper('node', $item['row']['field_roadkill']);

      // The thumbnail is the first image in the referenced roadkill
      $thumb = $roadkill->field_image[0]->value();
      $thumb_style = $vars['settings']['optionset']->imagestyle_thumbnail;
      $items[$index]['thumb'] = image_style_url($thumb_style, $thumb['uri']);

      // The caption is the body of the referenced roadkill. The 'title' index becomes the 'caption' 
      // index in flexslider list theme functions.
      $items[$index]['title'] = $roadkill->body->value->value(array('sanitize' => TRUE));
    }
  }
}

Move Along

In this example, we've taken a relatively complex challenge and reduced it to a few configuration steps and a couple of hooks. All that's left is the theming.

Pages