Bo Simonsen: Responsive tricks for Plone sites

We recently launched a major redesign/restructuring of one of our majors customer’s site. The main achievement has been the responsive improvements. In this blog post I will share some of the lessons we learned from this redesign. I believe these lessons are not just relevant for Plone, since they are sort of generic solutions.

Use LESS or SASS/Compas

We did the responsiveness for tablet/mobile using less. The styling become a major assignment and contains many lines of CSS styling for such a project. LESS/SASS provides a nice way of splitting up the CSS styling into different files, so you can create mobile.less, tablet.less, theme.less, etc. We use media queries for deducing what kind of device the user has so, for example, in mobile.less you have the media query in the beginning of the file. This gives a very nice overview and also reduces the probability of making mistakes.

Responsive videos

When the editor inserts a Youtube video on the site, it is likely to have a fixed size. What we would like is, on a mobile/tablet, whenever the user rotates the screen the size of the video should be changed, according to the new screen dimension. The following jQuery (ECMAscript) code can do this generically:

function resizeVideos() {
  $('iframe').each(function() {
    $(this).attr('width', $(this).parent().width());
    $(this).attr('height', $(this).parent().width() * aspectRatio);
  });
}

$(window).on("orientationchange", function(event) { resizeVideos(); });
$(window).on("load", function(event) { resizeVideos(); });
$(window).on("resize", function(event) { resizeVideos(); });

$(document).ready(function() {
  aspectRatio = $('iframe').height() / $('iframe').width();
});

Responsive tables

For our customers, it is quite normal to see pretty long tables; long with respect to number of columns, so tables similar to this:

A common design pattern is to do a vertical orientation of the table, so each row in the table will be a table in it self, for example.

On the web you may find a lot of ECMAscript code that is able to transform tables from a horizontal layout to a vertical layout, but so far I have not found any generic fix, so I decided to do it my self. The following ECMAscript code will transform tables marked by the responsivetable class.

$(document).ready(function() {
    headers = $('.responsivetable th').map(function() { return $(this).text(); });

    generated_css = '<style>';
    generated_css = generated_css + '@media only screen and (max-width: 760px) {';

    for(i=0; i < headers.length; ++i) {
        var j = i+1;
        generated_css = generated_css +
                        '.responsivetable td:nth-of-type(' +
                        j +
                        '):before { content: "' +
                        headers[i] +
                        '"; }';
    }

    generated_css = generated_css + '} </style>';

    $(generated_css).appendTo("head");
});

It requires a bit of CSS styling as well:

@media
only screen and (max-width: 760px)  {

    /* Force table to not be like tables anymore */
    .responsivetable table,
    .responsivetable thead,
    .responsivetable tbody,
    .responsivetable th,
    .responsivetable td,
    .responsivetable tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .responsivetable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .responsivetable tr { border: 1px solid #ccc; }

    .responsivetable td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 40% !important;
    }

    .responsivetable td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

}