Responsive text is a technique suggested by Frankie Roberto for adapting content depending on the screen size of the user. Text is wrapped in a span tag which has a class applied to it. When a media query is triggered the element can be hidden or shown using the css display property by targeting that class.
As a technique it's simple & effective. There are, however, some problems which would need addressing for the technique to be developed further:
display: none isn't an ideal technique for hiding content. Elements are still loaded into the page even though they are not displayed. This is a problem with responsive design in itself & can be fixed using a lazy loading technique.
display: none is also bad for accessibility as screen readers ignore it. This brings up an interesting issue of how screen readers work with media queries (if at all) & responsive design.
Creating some kind of content hierarchy by adding span tags throughout the content seems to be a bit messy. Maybe the technique could be applied to 'aside' elements or could this be a call for a new numbered 'p' tag which works with content importance like the 'h' tag?
This technique will work okay with static content but what about dynamic content? The most interesting viewpoint to come out of the discussion in my opinion came from Karen McGrane: "How would this effect the author & my mind immediately goes to the author experience: what's the CMS?" Responsive text would require a CMS which allows you to mark up the text depending on the text's importance.
As an idea responsive text also brings up two more important discussion points which I'll tackle in a future article:
Should we serve up the same content to all people?
If it's not on mobile is there any need for it at all?