See the Pen Responsive Pivot Table Prototype by Dudley Storey (@dudleystorey) on CodePen.
Recently my article on creating elegant table data with OpenType gained some attention via a much-appreciated tweet from Smashing Magazine. In response to that, a commenter quite correctly pointed out that the table was not responsive: as the browser window narrowed, data was cut off.
I couldn’t change the table as I have in previous examples: the order and direction of the data matters, and must be retained. However, there is another possible solution.
In a previous article I detailed how to create an SVG branding module that automatically adapted to different screen sizes. While that solution works, it has one disadvantage: even as the logo simplifies and grows smaller, the aspect ratio of the SVG viewBox remains the same, meaning that the logo takes up less space inside the available area. This is particular problematic when the branding changes from a rectangular format to square one, like the example above.
It has been wonderful to see SVG used with increasing frequency for logos, but most sites only take advantage of the most obvious features of the format: its immunity to scale, innately responsiveness and small file size. In practice, this means that most SVG logos remain the same at all viewport sizes, simply growing larger or smaller.
As I’ve addressed in the past, responsiveness isn’t just about “making things squishy“: it’s about providing the user with the appropriate detail at different viewport sizes. Brands are no exception: any well-designed logo is modular, with components that can be employed at different levels of detail. This modularity should be used in web development to take maximal advantage of space in responsive designs.
