A concept called “responsive text” has recently been spreading through design community around the web. Many people may originally believe that responsive text is the ability of the typography to alter and re-size itself so that the displayed content is easy to read on a variety of phones, tablets, and other devices.
Contrary to this belief, the concept actually revolves around the amount of displayed content that would be present on smaller or larger screens. In essence, it is the ability to design a page so that content will be summarized as the amount of accessible screen space reduces and then expands as the available screen space increases.
Desktops would have the whole page while mobile phones may be missing parts of the content. Ideally, the transitions would be smooth and logical.
There are websites up and running that claim to be showing responsive text in action. One such website for anyone interested in checking it out is the Sifter.com. On this site, the navigation menu will condense if it is viewed on smaller screens. They use media queries to make parts of the text disappear or reappear based on screen size. This means that no actual rewriting is performed like it would be in cases of creating phone specific copy.
Should Responsive Text be Used?
In the Sifter example, when the screen shrinks, the navigation menu tabs at the top of the page change. One tab completely vanishes while another one goes from “Pricing/Plans” to simply “Pricing.” This does not seem to actually be “responsive text” in action because it seems that unnecessary content is simply being hidden from one sized screen to the next. Many designers agree that if information is not important enough to be shown on screens of all sizes, then it should simply be deleted.
Along the same lines for this particular example, the tab name changes while remaining linked to the same area. This would imply that users on smaller screens would attempt to get information regarding pricing, but will also be shown any information regarding the available plans.
This type of interaction can quickly become confusing and infuriating to mobile users. Maybe this would make sense if the links changed as the content changed so that consistency remained for users on the different devices.
The question that designers must answer is whether or not going through that much effort to remove information between devices is worth the hassle. If people on any device are meant to have access to the same information, then why not simply have a reduced tab name to begin with?
Because the internet is always adapting and expanding, it should come as no surprise that people are experimenting with different web designs. The biggest issue seen with the “hiding text” approach is that the principle is completely contradictory to writing bloat-free text. When a person writes copy, a lot of skill goes into cutting out the excess information so that the text is clear and concise. If you write a lot of additional text simply so that some can be hidden on smaller screens, it is practically an admission that you have crowded a page.
The execution of responsive design takes advantage of a number of techniques and tricks so that your website stays flexible. With the right methods, you can guarantee that the site stays pretty, comprehensible, and uncluttered on any screen of any size. Personally, outright hiding elements of a page should not be encouraged among the design community.
Possible Responsive Text Problems
Another simple example of “responsive text” is applying a CSS class to the lines and paragraphs that you want to hide as the screen size decreases. While it is very easy to accomplish, it does require that the written copy make sense when all the text is present and when some of the text is hidden. This can be very difficult if the displayed content varies on desktops, tablets, and phones. The writer of the content would also need some way of identifying the various breakpoints throughout the text. This of course means that there could be some technical difficulties whenever content needed to be updated.
A possible far-reaching concern regarding some of the responsive techniques is the validation of suboptimal code. In order to make the tabs disappear, the Sifter designer used “display: none! Important.” This hiding method should be avoided. While many people are aware that this code shouldn’t be used on any type of regular basis, calling it a good idea could lead to designers using it more often.
Any Practical Uses?
Whether or not responsive text has a practical use is still up in the air among designers. Some think that it is something to be embraced while others think that it should be avoided, at least at this point in time. The best advice at this time is for people to give a try themselves and see how it works for their needs. A possible application for this design strategy would be to provide teasers or summaries of information for mobile users so that they were aware of more content being available on a larger device. Then again, writers may not be happy when they are asked to write a large amount of easily adaptable content.
As previously mentioned, it is not recommended that bloated content only be trimmed down when users are on smaller viewing devices. With this in mind, some designers have brought up the fact that writing precise copy for large websites can be extremely time consuming and difficult. Some people see this as support for the argument that content can be “hidden” on phones where the screen could quickly become hard to read and cluttered. This really comes down to the needs of your particular site.
Attempting to apply responsive text may help you determine whether or not you have enough viable content on the website in question. If the content is not good enough for one screen, it probably isn’t good enough for the other sizes. The fluff should be deleted or replaced with something more concrete for all users to enjoy.
