Is There Ever A Justification For Responsive Text?

Advertisement

Depending on who you follow and what you read, you may have noticed the concept of “responsive text” being discussed in design circles recently. It’s not what you might imagine — resizing and altering the typography to make it easier to read on a range of devices — but rather delivering varying amounts of content to devices based on screen size.

One example of this is an experiment by designer Frankie Roberto1. Another is the navigation menu on the website for Sifter App2. Roberto and Sifter are using media queries to actually hide and display text based on screen size (i.e. not rewriting or delivering different content based on context — as one would do with mobile-focused copy, for example).

Having looked at how this technique works, I wouldn’t endorse it yet, because its practical value is not clear. Also, describing this as “responsive” could legitimize what is possibly a less than optimal coding technique. Below are screenshots of how it works on the Sifter website:

Website for Sifter App3
Altering the tabbed content in the navigation menu at Sifter4. Large view5.

How Is This Accomplished?

In this example (and in Roberto’s demo), you’ll notice a couple of things. The screenshots show two versions of the Sifter website at different screen sizes to demonstrate what is happening at two breakpoints.

When you view the website on a large device, the second-last menu tab will show the full label of “Pricing & Plans.” On smaller devices (anything up to the size of a tablet), the label changes to just “Pricing.” This particular example might not be a big deal, but my main concern is that this is being regarded as “responsive text.” It’s not. It’s simply hiding bloated content, and if the content is not important enough to show on smaller screens, then it’s probably not vital at any size.

Does the change in wording mean that information on Sifter’s plans is offered only to users on large devices, or is the “Plans” part redundant? We can assume not, because the tab at all screen sizes links to the …/plans page. This is potentially confusing for users on small devices: they clicked on “Pricing” but are sent to a page that outlines the plans first.

To show and hide the “Plans &” part of the tab, Sifter’s designer has wrapped the element in a span. For a single menu item, this isn’t the end of the world, but good luck going down the path that Frankie Roberto demonstrates6 with his paragraphs. I can’t imagine what a nightmare it would be to maintain multiple versions of actual page content and then tie them into breakpoints! (Not to mention our earlier question about whether text that is hidden at certain sizes is redundant in the first place.)

Hopefully, we all know to avoid hiding content with display: none !important;. Responsive design is many things; its many little tricks and techniques constitute a wonderful approach to making websites flexible. But hiding elements on a screen in this way should not be one of them.

It’s Just a Demo, Though, Right?

Frankie Roberto’s demo is just that: a demo. He’s clear about that, and he offers a suggestion for a use case. I applaud the effort — everyone should experiment with the Web. The Sifter website is a live website, though — not a demo or proof of concept — and what it has done is being described as “responsive text.”

I’m a huge fan of the concept of “one Web7.” If you find you have to hide parts of your content on smaller devices, then you might need to refocus your efforts and write less bloated copy or reconsider your wording of page elements.

One of the joys of working “mobile-first” is having to maintain a sharp and critical eye in order to cut bloat (a capacity we should always exercise, of course). Responsive text seems to be the polar opposite of this approach. You are practically admitting from the outset that too much text is on the page. You are making the dangerous assumption8 that someone on a small device wouldn’t want to read the hidden text.

Maintenance Problems Will Come Hard And Fast

Frankie Roberto achieves a clever effect in his demo. On a large screen, you see all of the copy. And as the screen shrinks, so does the amount of content (and vice versa, of course).

Responsive text demo on a large screen9
Roberto’s full content, on a desktop screen.

Responsive text demo on a small screen10
On a smaller screen, the content is reduced.

Achieving this in the demo is easy. A CSS class is applied to the excess paragraphs to hide them.

Some Potential Problems to Consider

  • The copy will have to be highly structured in order for it to be readable when parts of it are hidden on small devices. For example, if a content block has 10 lines, then it should still flow when lines 2, 5, 9 and 10 are hidden on a tablet and lines 2, 4, 5, 9 and 10 are hidden on a phone.
  • The writer would need some mechanism in the CMS for flagging the breakpoints in the content. The method for updating content would end up being rather technical as a result.

If the message you are communicating on a small screen is sound, then there is nothing you could really “enhance” it with. Anything you add would simply be bloat.

Are There Any Potential Uses For Responsive Text?

I don’t think there are. But I realize this is just my opinion, and I encourage readers and the wider Web community to evaluate it for themselves and disprove me with solid examples.

When discussing this on Twitter the other day, I got interesting responses from a number of fellow designers. Many agreed that whatever you display on a small screen should be your content everywhere, because that is the distillation of your message.

Roberto (@frankieroberto11) suggests a potential use case for adaptive news content; for example, showing a summary, a mid-length version or the full article depending on the device. This does sound like a useful way to digest news, but in such a fast-moving environment, I can’t imagine copyeditors would thank you for assigning them to write content that adapts so extensively and still makes sense in these different contexts. But it’s something to think about.

Stephanie Rieger points out12 that producing bloat-free content on a big website can be incredibly time-consuming:

@welcomebrand @froots101 Discussions with stakeholders reveal last round of copywriting took 6 mths End result, hide text on ‘lesser’ screen

No argument there. I’m working on rebuilding a large website, too, and am encountering the same issues. But I’m not sure that hiding content based purely on screen size is wise. If it’s not relevant or worth displaying, don’t simply hide it: delete or unpublish it.

In Conclusion

My interpretation of the Sifter website and what its designer is trying to achieve may be wrong (this is an opinion piece, remember!). Feel free to tell me as much in the comments below. But from my quick look at the design, code and copy, I won’t be embracing responsive text anytime soon, despite it being an interesting experiment and endorsed by some very clever folks.

I struggle to think of a use case that withstands the basic scrutiny that I apply to content for my clients, which is that if all of the content is not good enough to show on all devices, then the amount of content is not optimal. I recognize that this is a harsh stance, so do check out the code and experiments covered here so that you can make up your own mind.

Remember, just because something is “responsive,” it might not be best for your project.

(al)

Footnotes

  1. 1 http://www.frankieroberto.com/responsive_text
  2. 2 https://sifterapp.com/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2012/02/sifter.jpg
  4. 4 https://sifterapp.com/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/02/sifter.jpg
  6. 6 http://www.frankieroberto.com/responsive_text
  7. 7 http://adactio.com/journal/1716/
  8. 8 http://stephanierieger.com/mobile-users-dont-do-that/
  9. 9 http://www.frankieroberto.com/responsive_text
  10. 10 http://www.frankieroberto.com/responsive_text
  11. 11 https://twitter.com/frankieroberto
  12. 12 https://twitter.com/stephanierieger/status/170142401669763074

↑ Back to topShare on Twitter

James Young is a Creative Director at Offroadcode and a freelance designer and front-end developer based in Huddersfield, Yorkshire who works with a wide range of clients around the world. You can follow him on Twitter.

Advertising
  1. 1

    I think this fact needs to be tattoo’ed to the arms of each and every designer – “If something is not worth having on the mobile device, it is worth revising twice if it is really needed at all.”

    May be I exaggerated on the tattoo part but you get the drift.

    There is another example somewhere where the additional text converts to a Read More link, and may be when clicked it would expand to the full text. I will post it when I find.

    0
    • 2

      The “Read More” conversion idea at least gives the viewer a clue that what they’re reading has been truncated. It’d make for an interesting usability test for sure.

      0
  2. 3

    I really don’t see a reason for any responsive design, let alone text. We have all these smart phones now with full web browsers capable of displaying working websites in all their glory, and what do we do? We scale them down to a small size. Whatever.

    0
    • 4

      Because UX? It’s not about scaling sites down it’s about making things accessible and presentable on a 3 by 4 inch screen.

      0
      • 5

        One of my biggest frustrations with this is that this often disables zooming and sometimes removes features that are standard on the desktop version of a site. For me, both of these things make mobile sites less usable and less enjoyable than their larger counterparts. I usually switch to the “full site” and zoom in to see the content better and avoid the frustration.

        I will say that I agree from a technical standpoint that sending less data is appealing for mobile bandwidth constraints. And the principle of designing for the device sounds appealing in theory. However, I feel that I have found more practical examples of things being less useful and more poorly designed for mobile. This may be an issue of implementation, but I think it warrants concern if so many designers cannot implement this technique properly.

        0
    • 6

      tim – it’s called bandwidth and UX targeted goal delivery. good bless mobiles for finally waking up the world to shite flash design and marketing people covering pages in non targeted advertising guff

      0
    • 7

      “repsonsive web design” is not a down-scaling. it’s an optimization for the different viewports of today… if it’s done right!

      0
    • 8

      Can’t believe that Tim’s comment got 16 down votes – I gave him a +1. He made a rather good point in the sense that most mobile browsers so far are doing a good if not a great job at dealing with non optimized sites. He’s right in stating that instead of focusing on working on a usable site what do we do? We shrink them, and I’ll add rip out whatever we do not get to work instead of trying.

      I do believe that responsive design has it’s place but it is not applicable everywhere, and it has been around for quite a while. It’s not exactly new but now that it has found a significant purpose it has become overwhelmed with techniques that defy what should be good design. Good article.

      0
    • 9

      Reading layout that was ment to be 1000px on 320px screen is madness. Responsive design should not strip down content (as many of sites do), but it should reorder, rescale, resize elements so the page is enjoyable in 320px/480px. even 7″ tablets with 1280×800 still ruin perception.

      0
    • 10

      Tims comment isn’t completely ridiculous. I recently browsed one of my non-responsive websites on my smartphone, and in landscape view it displayed absolutely fine. It wasn’t particularly slow, and the content was perfectly readable and usable. There was, essentially, nothing wrong with it, so with this particular website I will not be making it responsive. Sure, some people browse on crappy old phones but in a lot of cases it’s gonna be a very small number. It is worth remembering modern smartphones have perfectly capable browsers, and whilst websites should be usable and accessible on mobiles, they don’t always need to be responsive or “dumbed” down.

      0
  3. 11

    Though I agree with you in the sense you speak, as in the example from sifters website, hiding ‘plans’ on the tab on smaller devices yet redirecting to a plans page, would not only be misleading but would also loose confused customers.

    But i dont entirely agree that the content you have on a smaller screen should be your final content on all devices.

    There can be many instances, when content is useful to users on big screens but not to users on small ones.

    Also when writing a copy to sell a product, too much scrolling on small screens is a bad idea hence the copy is kept simple and short, however it would be necessary to go in more detail on a bigger screen.

    0
    • 12

      “There can be many instances, when content is useful to users on big screens but not to users on small ones.”

      I can only think of the instance, and that’s when what I’m reading requires me to be sat at a computer rather than on my mobile.

      I fear that what you’re assuming is that a small screen means I’m out-and-about, in a rushed context on a low bandwidth connection, and a large screen means I’m sat at a desk with more bandwidth and potentially more time.

      Much the opposite – I lie in bed reading loads and watching movies on 50MB broadband on my mobile, whereas I sometimes work on my laptop in a cafe via a 3G data signal.

      0
    • 13

      “however it would be necessary to go in more detail on a bigger screen.”

      what? why?

      0
  4. 14

    From what I understand responsive design should be a solution to have one-layout-fits-all so to save time in designing and mantaining content.
    I’m not sure if desiging and coding a good responsive layout takes less time than designing 2 distinct layouts (1 for big screen and the other for mobile). What’s more, if you have to take care of how every piece of content changes according to screen size I believe it becomes even worse.
    As a user I find annoying to discover that on mobile I loose part of the story, it is much better to have the possibility to switch from mobile to desktop version of a web site (consider that modern mobile browsers are pretty good at rendering big layouts).

    I wrote a post about this few days ago

    0
  5. 15

    ABSOLUTELY NO. Why are we going backwards?

    If there is a problem being solved by this ‘solution’ it should be solved in other ways; rewrite it!

    I strongly recommend you watch or read Jeremy Keith’s talk on the ‘one web’ -

    0
  6. 17

    Great post ! Couldn’t agree with you more. If you feel you have some extra text to spare for mobile, maybe you don’t really need it at all.

    One thing is to adapt content and maybe display certain blocks for bigger devices, but to hand pick text and adapt… hmmm no.

    0
  7. 18

    The so called Responsive Design is overrated.

    It’s an attempt to achieve the impossible task, it’s in no way that you can force content in 980px into 320px, and vice versa. Why not just make websites look good and solid in 980px ? They will already look good on both pc and ipad and ipad-like devices without extra works at all.

    How often that you need to access a website using 320px phone ? most of that traffics are users loging in hotmail or facebook, they don’t consume real content using 320px.

    The more you keep trying to force 980px content into 320px, the more you hurt “web-standard” because you are trying too much and results in too much hacks.

    Right now the web-standard is ruined by people in the industry.

    0
    • 19

      Hi Paul,

      I think you are wrong, everyday I have a 30 mins train ride. During that train ride i often browse the web on my smartphone.

      I think you should look at some statics to get another perspective about what users do and what they don’t do. This is what googles give me after a quick search
      Rasmus

      0
      • 20

        @ Rasmus: That’s so true, same to me. I’m using my smartphone very day to get the news or read articles when I’m on the train. And I see quite many people doing the same…

        @ Paul: Transforming content from 980/960px or so to 320px isn’t that hard. Why are we hurting webstandards when building a responsive website? Don’t get a sense out of that, sorry. “Webstandard” is a 980px wide layout then?

        Responsive Design is about transforming content to fit into smaller/larger screens. Not to cut off or hide content and information which ‘we’ think people might not need on a smartphone/pad.

        0
        • 21

          Hi Rasmus

          Do you read smashingmagazine.com using your 320px phone ?
          Do people buy stuffs from amazon.com via 320px phone ?

          Of course, NOT !

          Mobile users with small screen phone (like 320px width) don’t use their phones to consume real content, they use it for facebook / twitter / gmail.

          The device is too small that it can’t be used to read real articles.

          Mobile users that consume real content are those with ipad/iphone capability ( tablets or smartphones with high resolution screen ) that users can pinch zoom and interact with the web just like pc.

          So why bother with responsive ?

          Unless your site is so simple like wikipedia, you can’t squeeze a 980px content into 320px, it’s just impossible. The statement here is about real websites with real contents, real world working websites, not a demo or a few pages portfolio.

          980px is not the standard. the number of pixels has nothing to do with being a standard, 980px here is the value of pixels that is standard across pc and tablet: meaning if your site is designed with 980px, your site will look perfect in pc and ipad/iphone/ and most other tablets.

          Currently there are a lot of hacks (it sounds better when it’s called workaround but it’s the same thing) . These are not solutions, these are hacks that come with high price, think about the overhead of keeping all the hacks up and working when things change at its course.

          0
          • 22

            I’m reading your comment on my Android smartphone right now… It’s my lunch break and I have no access to a computer in this cafe. And it’s an enjoyable reading experience at 480px (landscape) because of Smashing’s very well done responsive layout.

            Simply because YOU do not do something doesn’t mean the rest of the world doesn’t. Additionally, I’m interacting with a comment on my smartphone. C-r-a-z-y right? What kind of a person would do such a thing?? Simply preposterous I say.

            0
          • 23

            Actually I am reading this on a 320px screen right now. Stop making assumptions about what other people do and don’t do. :/

            0
          • 24

            I have read a few research papers on actual user habits when it comes to platform, and browsing of the net from smartphones and tablets is becoming huge. Ignore it at your peril.

            0
          • 25

            Hi again Paul,

            Since you answered me i’d like to clear this out.

            > Do you read smashingmagazine.com using your 320px phone ?
            Yes I do!

            > Do people buy stuffs from amazon.com via 320px phone ?
            I don’t want to make assumptions but I don’t. I buy from amazon.co.uk because I live in europe :)

            You also choose to answer for me that I don’t, well Paul actually I do, but that is not so interesting, what’s interesting is what people in general do and doing a quick research I found that 7% of web traffic comes from smartphones.

            0
          • 26

            Paul, shhhh, the grown ups are talking…

            0
          • 27

            Paul – to answer all of your questions: YES. I have done all of the above either in a web app or a native app. Responsive design serves a very real purpose (although its presence as a fad will most likely wane) and it’s troglodytes like you who slow down innovation in areas like this. Bet you’re perfectly happy with your MS Office suite and are convinced that Google Apps is just a fad too, huh? For shame.

            0
          • 28

            In the US, 25% of users who access the web from a mobile browser use it as their ONLY browser. They do not have or use a desktop. (These stats available at MobiThinking.)

            Some communities in the US (black, hispanic, the poor) are underserved by the traditional desktop web. They cannot afford computers or broadband. Their first and only access to the web will be through a smartphone. (These stats from a NYTimes article on the Digital Divide.)

            Getting content on mobile is not a luxury, it’s a responsibility.

            0
          • 29

            Paul – you’re making assumptions that just are not supported by facts. Currently, I’m looking at two 23″ widescreen displays. I also spend 30 minutes or more every day reading real content on my Android phone. Personally, I HATE having to zoom in to be able to read articles on non-mobile friendly sites. I have at least 20 mobile friendly sites bookmarked that I go back to on a regular basis.

            Mobile devices now account for 10% of our 250,000 monthly pageviews on WaterMatters.org. We are gradually phasing in an adaptive layout that works on desktop, tablet and smartphone.

            Your assertion that it is “impossible to squeeze” content into 320px is totally inaccurate. Yes, it takes thought and planning, but it is a challenge that I happily accept. If you are the least bit concerned about your users’ experience and your future in web design, you might want to accept what is actually happening.

            0
          • 30

            @Paul: Well, you say it’s not standard, but then yes, it is standard along pc/pad. 980px is neither the standard width for desktop (mine is 1920px), iPad(768px portrait) nor iPhone(640px portrait). It looks the same on every device, ok, that’s fine, but I always have to zoom when I view it on my 320px smartphone. Nah, I don’t wanna buy an Ipad just to view the 980px page without zooming. By the way, I also have to zoom in portrait mode on an Ipad. That it looks the same doesn’t mean it’s usable on every device.

            I consume REAL content on my 320px nokia smartphone every day, I even buy things on ebay on the fly. Thanks smashingmag for redesigning, now your articles fit purrfectly into my 320px screen :)

            0
          • 31

            me too. Reading this and commenting on my android phone. The new responsive layout being a big reason I visited at all.

            0
        • 32

          I agree with mono.

          Responsive doesn’t mean that content should be changed – putting a glass of water into a smaller class doesn’t make it any less water; it just changes how it’s constrained. True responsive design changes the container, not the contents.

          0
    • 33

      @Paul. Facts & figures actually show that people are consuming real content on their phones, my friend. Definitely something not to overlook.

      0
  8. 34

    I feel Mobile visitors and desktop users don’t always have the same mind set or time.

    If I’m on a desktop checking out a restaurant I will normally take my time and Explore all the content to make a decision. If I’m on my mobile phone then I’m that “last minute” guy…show me a menu & contact info.

    I think we all have difrent mind sets depending on what we use to access the web,

    0
  9. 35

    The concept of assuming that users on a mobile device “don’t need” certain content doesn’t make a lot of sense to me. Can we really make that broad a distinction that mobile users are only looking for the most basic of information? I don’t think that we can.

    There are many users for whom a mobile device is the ONLY way they access the Web. If we have content on our site that is necessary for “desktop” visitors, why wouldn’t it be relevant for users on a smaller screened device? I can totally get behind delivering visual content, such as textures or background images, that may be nice-to-have and attractive for desktop users, but not necessary when bandwidth and download time is more of a concern, but the actual content of the site is one thing that should be relevant regardless of the device. As many have said before, if you have content on your site that is only relevant half the time, it is really necessary at all?

    I access a number of sites on my phone – the same sites that I access on my desktop – and I find it annoying when features or content I am looking for is “turned off” because the site owners made a broad decision that I simply wouldn’t need it on the mobile device. I DO need it, and by making it “easier” for me to use the site on my phone, they have actually made it harder for me to use the site on my phone. They may be “responding” to my device size – but they are not really responding to my needs. Good responsive web design does both.

    0
  10. 36

    What can be done with less should not be done with more.

    0
  11. 37

    I think there is definitely a case for responsive (length) text where it would improve the experience across different screen sizes and contexts.

    Taking one of the simplest examples – the blog – one might find it useful to apply a responsive technique to decrease the length of a post summary if (say) the font is being englarged for easier reading.

    As with all modern trends in web design, I’m very much a “horses for courses” type of person. I never use the same framework or the same approach between designs because the content and context are unique.

    I’m pleased this article was published. Even if the demo only hints at what could be possible, it’s stuff like this that gets others thinking about better or alternative solutions.

    0
  12. 38

    I’m with Tejas. If it’s not important enough to be included for one mode of access, it’s not important at all. The examples in the screenshot seem to support that the full-sized article has a lot of fluff. As a user, I don’t want to have to go back to content on my desktop to get the “full story”; if key information was left out because I accessed with my phone, I’m going to abandon that site and use another site instead that gives me everything no matter how I access it.

    0
  13. 39

    Of all the things I hoped to never see this is one of them. Just because the device is smaller doesn’t mean that information should be left out. If its not important enough for everyone to see leave it out.

    0
    • 40

      Is literal content the only consideration for design? Or does usability factor in, or context of use, or a myriad of other factors?

      Design is a process of careful balance of uncomfortable compromises.

      If you have the screen space to be more expressive and communicative without incurring scrolling then do so, if however your device parameters impose limitations that give rise to excessive scrolling for the same content then present blunter text and hope you hit the compromise sweet spot.

      0
  14. 41

    Yeah going to have to agree with the author (and most comments) there really isn’t a use case for this. I wanted to try and defend it, but every argument I came up with pretty much fell apart. It all boils down to the simple fact that if you feel OK hiding content from one group of users why have it at all?

    0
  15. 42

    Umm, you have seen the smashingmag site, haven’t you? This is exactly what you guys do. Here’s a quick sample.
    http://i1181.photobucket.com/albums/x429/iliadraznin/smresponsivetext.jpg

    I think like with design, there are cases when it makes sense to cut down on content for smaller screens. I completely disagree with the idea that if the content isn’t important to show on small screen it’s not important to show at all. Just like with design there’s such a thing as “core content” and “flavor/auxiliary content”.

    As Frankie Roberto’s example demonstrates, in a sentence “the amount of textual detail scales relative to your screen size” the world “textual” certainly adds extra information but it’s not vital to the main point, so removing it on a smaller screen doesn’t really hurt the content.

    And what does ellipsis do if not that (when used to hide overflowing content)? This is just taking that idea and extending it.

    Now, the point about the amount of work involved in that is legitimate, and I think more than anything else, makes this idea impractical. Still, in limited cases like the Sifter website, I think it’s a perfectly viable option.

    0
  16. 43

    Off the top of my head, one thing that responsive text would be useful for is abstracts — they could be shortened or lengthened according to screen size.

    0
    • 44

      James Young (@welcomebrand)

      February 27, 2012 8:07 pm

      This was as close to a case as I could get to but it immediately becomes a nightmare to maintain if you want to alter/add/remove breakpoints for example.

      J.

      0
  17. 45

    What are the SEO implications of this?

    0
  18. 47

    I don’t agree with this solution, but I do think that showing different amounts of text in different environments can be useful. Promoting a concert, for instance, you would typically use at least a couple of sentences for reading on a pc, whereas on a device you would limit yourself to a baseline. On the device people would not come to your site to find out more about the event, but more typically to check the date, to book, to share the event on social media, etc.

    0
  19. 48

    To say that all the same information will always be necessary on all devices is ridiculous. Mobile browsers are just that “mobile” and people using mobile devices may very well have very different needs than those using desktop browsers. Are you willing to tell me that you can’t think of a difference in the information you’d be interested in if you’re on a train vs. sitting at your desk or walking down the street vs. lying in bed? This should be a no-brainer.
    If your biggest fear of a mobile site having less content available is that you won’t to be able to access it the same as you can from your desktop, then just add a “full version” option to the mobile site. You could even highlight the mobile vs. “full” version of text/content that you had otherwise omitted, so the user could see the difference – this way they could see that you were really doing them a favor by omitting certain content.
    This idea is brilliant and is not terribly new. There are thousands of apps for mobile devices that do the exact same thing. The beauty with this approach is that you aren’t making someone download a separate app, but are giving them an app-like experience automatically.
    I am more than willing to admit that most content writers could benefit greatly from accepting the idea that less is more, but that is precisely what this approach is accomplishing.
    As I am very new to web-design/development, I can’t say that this particular approach to accomplishing the desired result seems terribly graceful (rather it looks like loads of work that no one really has the time to maintain), but the idea, again, is brilliant.
    Also, the way one interacts with a desktop browser is far different from how one interacts with a mobile browser. beyond that (and this goes a bit past screen size, but could have strong relations with it) what about text that is responsive to to geo location. If you could inform your mobile user that they are within two-blocks of your store-front when they load your site wouldn’t that be powerful?
    I predict responsive text is coming – like it or not.

    0
    • 49

      > Mobile browsers are just that “mobile” and people using mobile devices may very well have very different needs than those using desktop browsers. Are you willing to tell me that you can’t think of a difference in the information you’d be interested in if you’re on a train vs. sitting at your desk or walking down the street vs. lying in bed? This should be a no-brainer.

      I agree that different people on different devices may have very different needs. I think the problem that a lot of people here are expressing is that screen size alone is not enough information to determine what those needs are. Some people use laptops on the train to read news, some use smartphones. They both have the same amount of time and want to do some reading, why should one of them get less content simply based on screen size?

      Other people use smartphones in bed over their home WiFi, should we limit what they are able to see based on screen size alone? These people are not “mobile” in the sense that they are time poor and on the move, they are simply using a portable form factor for comfort and convenience.

      Now a site’s interface on the other hand is something that very much can be customized based on screen size. A smaller screen means that links and buttons may need bigger target areas (for fat fingers), and content should occupy the full width (if possible) at a larger proportional text size. This means that users with smaller screens can have a text-size appropriate to the size of their device without having to pinch and zoom to be able to read text, which often means excessive scrolling back and forth across the width of a page.

      Let’s say you combine a responsive interface with responsive text and give the user a choice of “Mobile” or “Desktop” versions, you may create a scenario where someone wants the “Mobile” interface, but the full “Desktop” content. Perhaps it would be better to give them an “interface” option and a “streamlined content” option?

      I’m not convinced a use case doesn’t exist for responsive text, but I can’t think of one off the top of my head.

      0
    • 50

      With due respect, I feel you need to gain experience before you so forcefully venture your opinions – or, indeed, start making predictions!

      Put as simply as I possibly can …

      Responsive design is about improving the user experience, per device. In other words, you are (for the most part) dealing with known quantities.

      Responsive text would entail guessing what users want/need based upon the device they use to access your site.

      Surely you can see the problem with the latter?

      Personally speaking, responsive text combined with a mobile site that does not provide me with a clear means to switch to the ‘full’ version would put me off completely.

      0
    • 51

      I agree, Nick.

      My experience has shown that in most cases the actual user tasks are quite different between mobile and desktop usage. So, we’re not only talking about a “simplified” layout, we’re talking about probably different copy too. While I suspect that a fair percentage of teenagers might in fact read blogs on their smartphone, most of their parents won’t.

      So the question is, who are we designing for? And “for everyone” is not an answer.

      0
  20. 52

    I recently used this technique for printing. I built a singe-page website that has a whole bunch of information on it. But I was asked to keep it to two pages for printing. So I added a .printhide { display: none !important; visibility: hidden; } to anything I didn’t want to show up, anything that wasn’t really important for printing. Worked like a charm!

    0
  21. 53

    “and if the content is not important enough to show on smaller screens, then it’s probably not vital at any size”

    > Thanks for saying that.

    “Remember, just because something is “responsive,” it might not be best for your project.”

    > For saying that, thanks !
    I couldn’t agree more with the opinions stated here.

    0
  22. 54

    A random thought: How about delivering the same article with different copy text? And this is decided not by the device, but the demographics. Of course that requires multiple copies to be written, but a 18 year old might like to read articles in one tone versus the tone preferred by 30 year old.

    Next level of personalized?

    0
  23. 55

    Designing for mobile is about context and not so much fitting everything possible into a small space. Responsive design is more about give and take and content priority. While I don’t agree with this approach, I do think it is the designer’s responsibility (given enough data and proper analysis) to make judgement calls with regard to content and their relevance to the whole mobile experience.

    0
  24. 56

    I don’t support the notion of responsive text. The goal of responsive design is to serve the same content to any device. If the mobile website is serving different content than the desktop website, then responsive design isn’t the appropriate solution. Rather, separating the mobile experience and desktop experience into two distinct websites would be the way to go.

    If screen real estate is a major concern, and it came down to hiding part of the content (after already hiding design elements), I would only hide secondary content (e.g. nav, asides, ads, comments) and offer users a method to dynamically reveal the hidden content using a JavaScript-based solution. The same content would be served, but the layout would be temporarily “collapsed”.

    0
  25. 57

    I am not sure I have seen a mobile web site that I have preferred over the desktop version. It appears even massive organisations are unable to adequately maintain the mobile version of their website to the same standard as their desktop version.

    Mobile versions of websites make too many assumptions that are no longer true on many mobile devices.

    1. Can’t play flash…well BBC iplayer, your site does work on my phone, yes I need to hack my user agent string to view your web page, thanks for nothing mobile iplayer.

    2. Can’t click small links. Tried Chrome beta, it has the best solution for small links by creating a magnified view. Of course I could use any other browser on android or iphone and pinch zoom my way to those tricky links.

    3. You want want to spend a lot of time reading so I wont bother showing you extended articles. I often read extensively on my mobile phone.

    4. No bandwidth for big images. Most of the time I operate my smart phone is on wifi at work, at home, at a firends house.

    If bbc, itv, ikea, amazon and ebay cannot get it right why should we consider even attempting a mobile specific interface?

    0
  26. 58

    Well, I have an idea about to show content.
    Let’s suppose, you have a blog archive and displaying total numbers of 5 posts in desktop (big screens). For smaller screens you can just show 2 posts instead of 5 posts (without reducing the summary of posts). But the problem is we have to hide 3 posts and I would love if there is a way to not load those posts instead of just hiding them from css (display:none) because if we are not giving access to view our last 3 posts to mobile user then why just we use their download time and bandwidth?

    0
    • 59

      it’s not that hard! catch the screen resolution with jQuery, load the content with AJAX, depending on the resolution!

      0
  27. 60
  28. 61

    Its amazing how narrow sighted people are about their audiences. The average web user is going to purchase goods via a mobile phone, and surf a full website. Its a fact and people have to learn to deal with it. I will say that when I first heard of Responsive design I thought “why the hell do i need to code for this” the iphone does a damn good job at serving up the entire full website and making it easy to navigate. Unfortunately I then learned the hard way – there are some sites that you will be zoomed in on and you are missing changes on some other part of the screen because of your viewport is so narrow. (ex: errors, messages, warnings, data changing etc) Granted sites with a crazy amount of interactivity should be made into an app is another argument. But at least Responsive Design has a place in my mind.

    0
    • 62

      The examples you gave were generally about bad design not responsive design.

      - Error messages should appear close to their point of origin. If the error requires user action then the focus should be moved to the point where the user can take action and the error message should be presented near this space to advise as to the required type of action.

      - Data changing dynamically should be presented with appropriate transitions and if dynamically changing data is outside of the view port, but is vital to the user, then messages informing of the change and allowing simple navigation to the point of change should exist no matter what the view port size is. Additionally the design you describe is indicative of poor initial design that would benefit with some change regardless of view port size.

      0
  29. 63

    Helge-Kristoffer Wang

    February 28, 2012 3:41 pm

    I’m finding this very interesting. I’ve experimented with fluid/responsive web layouts and images, but I’ve never done this to text – and I can see several uses for this, but I can also see several cons that would make me go against it, so at this moment I think I’m gonna lay this down a half a year or more atleast from now.

    0
  30. 64

    In my experience mobile traffic can account for upwards of 20% for some websites. On a website that receives 10s of 1000s of hits a week… that’s some heavy numbers.

    Not accounting for them would be ridiculous. Actually just plain silly. Responsive Web Design is just a buzz term. I couldn’t care less if your website stretches or shrinks, and I’ll happily bet that 19% of that 20% don’t care either. All anyone wants is a simple, friendly user experience.

    Adaptive. Responsive. Or just plain well designed. If I can browse your website with relative ease without zooming and pinching and tickling my iPhone then great.

    0
  31. 65

    First, I can’t believe that Tim’s comment was down voted so much. He’s spot on. When considering mobile visitors, it is about UX, but it’s not about stripping things down and giving the user a lesser experience than a desktop user. Simple planning so that mouse over menus actually work on a touch screen and remembering to include additional CSS so that phone numbers that turn in to links on a smartphone don’t break the layout. Remembering not to bunch up links so they are easy to select with a finger, not using flash, and other easy to plan for situations are all you need to have a good user experience on both mobile and desktop. It’s about making the SAME experience so the user has access to everything you have to offer.

    In my experience, of the 50+ sites we manage, mobile users do account for about 20% of all traffic. Of those, the overwhelming majority are on an iOS or Android 2.0+ device. Most of the screen sizes are also 480×800 or larger as well which means that in landscape a properly designed and coded will look great and not need a “mobile” version. When you consider that display technology is only getting better and we are getting more qHD and even 720p screen resolutions, why would you force a mobile user to settle for a lesser experience? I know that personally, my browser is set up to pass a desktop user agent to avoid having to see mobile websites. Without exception the people I know with smartphones have either done the same or at least choose the full version when given the option.

    In the vast majority of our clients, we recommend planning for mobile with good UX design to begin with rather than creating a dumb down version for mobile. There are always exceptions to the rule, but creating a mobile version for every site is hardly necessary or desirable.

    0
  32. 66

    I totally agree with you. Mobile did a great thing, which is that people start to think about what they actually put on a website and what isn’t necessary. I’m a supporter of the one-web-philosophy and think that copy is something that shouldn’t adapt to the device (in terms of the content itself, not layout or style).

    0
  33. 67

    Here’s a case for different content, Yelp. The scope of what someone is trying to accomplish on a full browser version of the site is very different from what someone is trying to do on the mobile web. The full site needs to support researching businesses by multiple criteria aided by different forms of meta data and even discussion. A person using a phone needs quick and easy access to what’s nearby without much additional noise. They may want to draft a review. While I don’t think its a strong case for responsive text I do think it justifies pushing different content and actions depending on context.

    0
  34. 68

    I think most of the comments on this post sadly demonstrates the divide between techies and authors. Anyone who works in a communications team knows all too well how much publications are already modified or inflated to cater to different platforms and audiences. Think twitter v facebook v myspace v website v news letter v rss feed. Small mobile device users are usually looking for shorter punchier summations where as someone looking for a more detailed picture is more likely to be working from a desktop.

    This already happens but currently authors reformat and republish the same substantive document for every format. Wouldn’t it be nice if you could have it all in one concise tagged piece of content?

    What this method absolutely does need is a fail safe, a backstop… a read more button so that you’re not restricted to only seeing one version of the content because of the platform you’re using. Apart from that it’s potentially a good idea.

    A well structured piece of writing in plain english should already be able to be divided by paragraph to provide a range of different information for different audiences. It is a bit more work, but this is not too much of a leap to be able to specifically tag content for different audiences.

    0
  35. 69

    I recently did a redesign of my personal site and had a unique take on responsive text. I used Media Queries and the CSS content attribute to change an adjective every 10px. It was a lot of fun to make, and I’m happy with how it turned out.

    0
  36. 73

    We are currently designing & developing a couple of responsive websites and are taking a carefully ‘mobile first’ approach. The content and the framework are both being designed with mobile users in mind.

    However, when opening the site on a desktop the possibilities of doing interesting things with layout (extra navigation / advertising etc) open up.

    Just as @Ilia mentioned above – there is core content and auxiliary content. By hiding some of the extra stuff I feel we may be giving the user a better experience on a smaller screen size.

    Going back to the desktop – there’s more room to breathe so the core content can still be the focus (with a bit of clever design), but we can also pad out the experience with additional padding.

    It’s hard to establish when this content could be completely unnecessary, even in the desktop environment – but the client won’t always be so easily convinced – and perhaps by hiding it we’re making things a little less irritating for our mobile users.

    I do think this article raises an important point and we should all be incredibly cautious about how we use this kind of technique.

    0
    • 74

      By the way… Smashings Ajax editing form didn’t work at all on on my iPhone :<… So apologies if any of that sounded incoherent.

      0
      • 75

        So on my iphone editing a reply doesn’t work but creating a new reply replaces your original? Maybe ommitting the ability to reply on mobiles would have saved me this frustrating experience… Hehe.

        0
    • 76

      There a a few assumptions there…

      What is a desktop? Do laptops count as desktops or mobile devices? What about desktop replacement laptops?

      What are mobile devices, do laptops count, do netbooks count, does a kindle count?

      What is a small screen, there are mobile phones and tablets between 3″ and 13″, there are resolutions between 320*240 and 1920*1080.

      480 pixel width appears very different on an iPhone4s and a Galaxy tab P1000.

      My desktop machine has a 1280*1024 screen, my laptop has a larger screen size and pixel count 1920*1080 display, but I do access it in various locations and can use it on the move. What do you assume about my usage patterns?

      Then there is the fact that smaller screen devices tend to always display full screen where as larger screen devices can display multiple windows per screen.

      Do you assume Kindle owners are happier to read longer articles because they are reading on an e-reading device or do you assume that the device is mobile and therefore should have reduced content?

      While there may be a few generalisations that are acceptable to your audience it requires a lot of effort to keep up with changes in mobile devices and browsers to sufficiently differentiate the content that your audience may wish to consume. For example the Transformer Prime…is it a mobile device, well it is a 10″ tablet, but it does have a 1920*1080 screen, it can connect to a keyboard to convert it to a laptop.

      As I have stated I have not seen a good responsive website where I did not prefer the desktop version. It appears hard for companies even with huge budgets to keep their mobile versions up to date sufficiently with content and interactive tools as they do with their desktop versions. It appears to be a generally wasted endevour over the vast majority of the web…

      0
      • 77

        Marc Haunschild

        March 14, 2012 9:08 am

        There is one more thing: a lot of devices can read the texts to the user. Why somebody who uses a screen reader on a device with a really small screen (let’s talk about screen resolution of 1 by 1 pixel!) should not be able to listen the whole text?
        Again, and again and again, I want to ask all this strange responsitivity lovers: How, how HOW you can know my needs and how you dare to decide what content I want to get – and what not.

        0
  37. 78

    James,

    I agree in principle with your approach — that less is more, that every element of a digital experience needs to be considered carefully in terms of its usefulness and appropriateness, and that responsive responsive text would place burdens on content creators that most businesses are not yet in a position to embrace. However, I also think it may end up being an excellent way to ensure that content remains meaningful and usable on multiple platforms.

    I suspect that much of your response to the idea of responsive text comes from these early examples, where in fact the writing is not contextual — the lengthier copy blocks are merely wordier versions of the shorter ones.

    Practiced by competent content strategists or other interactive editorial or copy writing professionals, this technique may well maintain the viability of long-form copy in a digital environment where consumers and platforms are pushing text into smaller and smaller chunks.

    I agree, however, that the technical challenges warrant caution.

    0
  38. 79

    There’s another useful kind of use we can imagine for responsive text.
    For example, a content slider with scalable text. This will be practical, specially if it’s a full css3 slider.
    But there’s another use for this: this little line at the bottom of the site (or this login at the top) where lies copyright, terms of use, etc. If you’re able to scale down your text without creating a special class for this, it’s a must, and zero trouble to maintained the code.
    Don’t you think?

    0
  39. 80

    Same question : Why do you want to show some text and some not. If some text is not shown to mobile users, then what is the use of that in the desktop version?

    The whole idea of responsive text is insane in a sense, it does not give your visitor a complete picture of your website or what is in it.

    0
  40. 81

    Better than hide parts of the text, I think it’s best not to write it from the start.

    IMHO.

    0
  41. 82

    What a lively debate :)

    I don’t think I disagree with anyone’s particular point of view here, but I do think that some are dismissing the “mobile first” approach and being careful not to overload the mobile experience with information that is really only secondary (or even less important than that).

    I can see why applications should not differ too much from device to device, but larger organisations with a lot of content may wish to use this kind of technique to help the user pick out the primary content over the rest.

    I shall continue to play with responsive text as a learning exercise at the very least :)

    0
  42. 83

    I have used this technique in the past.

    I also find the idea of using this in body copy to be impractical for the most part. But I did find it helpful for certain UI elements.

    For instance, on a fundraising site I had a row that was a big part of the masthead design that said something like…

    There is only 36 days left until the Children’s Memorial Dance Marathon!

    …which became…

    Only 36 days left until the Dance Marathon!

    …and…

    There is only 36 days left!

    The best thing was that a similar percentage of the real estate was used for this element at each size, maintaining its relative importance without simply scaling it. I don’t think anything super critical was lost at the smaller sizes. We just gave up one nice to have (reinforcing/restating the event name) for another (maintaining the reminder in place with a similar share of space/importance).

    0
    • 84

      Marc Haunschild

      March 14, 2012 8:56 am

      Again: who on earth is brave (and some might say, people who seem to be brave often are just stupid) enough to decide, which information I would like to have?
      Maybe I want to know, how many days are left until WHAT?

      0
      • 85

        Well, as the stupid producer of the site, don’t I decide what information you get regardless? Copywriters and interface designers decide which information you get as part of their task.

        You may as lament the other information I was brave enough to omit from this line regardless of size. Maybe you want to know WHO the Marathons supports, eh? And then maybe you want to know WHAT they do. Ad Infinitum.

        So think about what I wrote.

        “There is only 36 days left until the Children’s Memorial Dance Marathon!”

        Now picture this. This line appears just below the Dance Marathon logo. The Children’s Memorial logo is in the footer and other copy. So the critical information to retain from this line is *36 days left*. Right? The what and who is really covered elsewhere.

        So why include it to begin with?

        On a large viewport I felt that the line is a reasonable size, not too big and not lost either – and it is nice to have the conversational tone. But as things get tighter that line starts to get intrusive. At some point the cost is more than the benefit. Then as it gets more extreme the main take away even starts to get lost in what has become a largish block of copy.

        And why do I get to decide what is the ‘critical information’?

        It seems like that point is what is sticking in your craw. But that is exactly your job as a content creator! If you are not brave enough to decide, then you aren’t doing your job.

        0
    • 86

      “I also find the idea of using this in body copy to be impractical for the most part.”

      My comment about it ‘abridging text for size’ in another reply got me thinking. All the outrage is centered on the idea of CUTTING text from the site where space gets tight.

      However you could use this technique in concert with a MORE > link that is revealed when the text gets abridged. So in the full size you get everything in one huge page, but smaller sizes show an abridged version with access to the full text on a separate page (or even right there – though I think that might require some JS.)

      This way you get responsive text and a page that isn’t miles long, AND access to the full text.

      0
  43. 87

    I see that smashingmagazine.com doesn’t recognise my Nokia 6630, so whoever said that it caters for a 320px width is wrong. Exactly how is it “responsive” then?

    0
  44. 88

    I’ve been toying with the idea of digital textbooks that are actually written for all age groups. So this type of technique could come in handy. It wouldn’t be based on screen width but be activated by the user selecting a specific age group. For example, if the user was reading a geography textbook at a high school level, it would have full text using higher level language. If they were to click a middle school level option, the content would automatically be scaled down as well as certain words being substituted with simpler words. The elementary option would be scaled even further.

    For example:

    Plate tectonics (from the Late Latin tectonicus, from the Greek: τεκτονικός “pertaining to building”) is a scientific theory that describes the large scale motions of Earth’s lithosphere.

    to

    Plate tectonics is a scientific theory that describes the large scale motions of the earth’s crust.

    to

    Plate tectonics explains the motions of the earth’s crust.

    0
    • 89

      Marc Haunschild

      March 14, 2012 8:50 am

      As a teacher for grown-ups I know, that even adults are NOT able to decide on which level they are.
      If you want to address pupils or students on different levels, do your job and write books for each of them. Give them options to chose from, if they want detailed information (for example offer detailed textual explanations, an audio or video file, animations and so on). Of course this is not “responsive”, but good old practice.
      Besides: As a writer I can not imagine to focus on the needs and expectations of my readers, if I have to change the perspective all the time. Addressing your audience is so important and even the examples you gave here are showing, that this can’t work.
      You can not just leave out explanations for a younger audience, instead of explaining things in a an age-appropriate way.
      Give them the whole information, using a language they understand!
      My advice: Responsive texts are not a way to deal with this (right now, I have no idea, for what to use them at all!).
      I’m afraid, the way you want to teach things will leave members of each level unsatisfied and maybe even frustrated.

      0
      • 90

        “You can not just leave out explanations for a younger audience, instead of explaining things in a an age-appropriate way.”

        Totally agree.

        “..Responsive texts are not a way to deal with this…”

        I agree. Responsive text would be for abridging text for space.

        I could imagine some kind of user adjustable setting to control the age level of the displayed text, but he’s right. That would probably take more than hiding details.

        0
  45. 91

    I hate seeing crippled sites on my mobile device – even more: I have serious problems with responsive design. As a user I want to find all functions and texts at the places I know from my desktop experience! Smartphones have easy-to-use zooming functions. It’s a piece of cake to read any part of a page designed for an ordinary screen, as long as I am able to find it. So please leave the search form on the top right, don’t hide the nav at the bottom of an endless column of articles (which I for sure do not want to read completely!) – Why do I have to scroll for hours, when I want to leave a page?

    Because someone said – and unfortunately wrote it in some well visited blog – that this is good user experience? To hell with that guy!

    As a user a want to scream:

    GIVE ME THE LAYOUT I LEARNED AT MY DESKTOP; THE LAYOUT I AM USED TO AND GIVE ME ALL THE CONTENT – EVEN IF I DO NOT HAVE A DESKTOP OR LAPTOP AT ALL!

    As a developer I say:

    “Thank you” to all the marketing monkeys that gave me one more feature to sell – although nobody needs it…

    0
    • 92

      “It’s a piece of cake to read any part of a page designed for an ordinary screen…”

      Good for you. I have a work Blackberry. The zoom is total crap.

      “Why do I have to scroll for hours, when I want to leave a page?”

      The designer sucked?

      0
  46. 93

    not needed, delete this 22

    0
  47. 94

    A better way of achieving this without javascript or duplicate html is with attributes:

    Very long text goes here

    h4[data-short-text]{font-size:0}
    h4, h4:before {font-size:1rem}
    h4:before {content:attr(data-short-text}

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top