I recently read two books focused on website performance.
Designing for performance (weighing aesthetics and speed) by Lara Callender Hogan.
Responsible Responsive Design by Scott Jehl.
The first book is interesting and a very good primer for new developers or for folks that have never considered web performance based on design trade-offs. The second book was a very handy manual of sorts and was my favorite.
I would reccomend reading both if you haven’t had a chance. They should be available from your local library through inter-library loans.
The 2013 Drupal Summit was a great event. This was my third such summit and it was another solid Drupal event. I wanted to list the key ideas I took away from the conference as well as some modules and software that I am unfamiliar with but heard about over the two days.
Key Ideas
Testing is becoming a major part of the Drupal development process.
This is awesome! There were fantastic sessions on PHPUnit and several on Behat. It is certainly a positive direction. There is no requirement to write tests but there is tremendous upside if you are creating reusable components, building from an install profile, or have mission critical components. Testing has been around for a long time with SimpleTest and other methodologies. However, there seemed to be a big focus on it at the summit.
Treat your site, service, component, etc… as a product.
I really enjoyed this concept. It appeared in several sessions as an underlying theme. The main concept is that whatever you are building, try hard to make it as if it was a standalone product. It should obviously work well, but how is the UI, is there documentation, tests, versions, etc… If we try for the above with each project or anything we are developing the finished piece should be better overall.
Responsive tables are a big challenge. Tabular data is often very important and you don’t want to hide the data just to keep the nice responsive design in shape. Currently within Drupal I am not aware of any defacto solutions. I experimented with jQuery Mobile’s technique table reflow, the footable module, and lastly Zurb’s responsive tables.
I had one criteria for a successful solution; my users should not have to do anything to make their table responsive. I did not want them to right click on the table and add a class, I didn’t want them to have to build all of their tables with views, just plop in a ckEditor table and hit save.
A secondary criteria was that the solution should be lightweight since it is primarily to be used by users on mobile devices and we don’t all have 4G LTE in our offices and living rooms as of yet. All of the solutions mentioned above use some sort of CSS hook to indicate that the table needs to become responsive at certain breakpoints. The lightest weight solution for me turned out to be Zurb’s approach.
To automate the insertion in the HTML of a CSS class I turned to the Flexifilter module. Not enough people use this module but what it allows you to do is to create a Drupal input filter, so really an output filter, on anything that is formatted, like your WYSIWYG output.
After enabling the module you need to go to Structure -> Flexifilters -> Add New Flexifilter.
Configuring a filter.
Inside of a filter you have several options but the Pattern Based Text Replacement widget works with regex. Once a filter is configured, you have to enable it. Once enabled, head over to your text format configuration screen and enable your new filter.
Configuration -> Content Authoring -> Text Formats -> Full HTML. I put the filter as the last item to be ran so that I can ensure the class I want added is actually added.
Enable the text filter and place it as the last filter to run.
So now we have a class called responsive being added to tables folks create. How does this help us? We need to leverage Zurb’s great work to answer that. You can grab the source from their GitHub project page. We want two of the files, responsive-tables.css and responsive-tables.js. You can discard the rest. Place the css file in your theme/css directory and the js file in your theme/js directory.
Open up your theme.info file and tell Drupal about these two new files. In a Zen sub-theme it looks like this:
stylesheets[all][] = css/responsive-tables.css
; Optionally add some JavaScripts to your theme.
scripts[] = js/responsive-tables.js
Next, open up the responsive-tables.js file as we need to wrap it in a Drupal safe closure. At the very top of the file add
This allows the code that the Zurb folks wrote to run without conflict with the other jQuery that Drupal executes. That is pretty much it. Save those files. Go to Structure -> Appearance to reload the info file and your table should now be responsive at small window sizes.
