Skip navigation
Help

Opinion column

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

  

I don’t think anyone can deny that the Web has changed the way people teach, learn, and do research. Of course, this doesn’t mean that everything we read online is true and accurate—far from it. But I believe that through honest discussion and objective collaboration, accurate and useful information is much more likely to be the end result of any educational endeavor.

In the final week of November 2011, a smart group of developers launched a project called Move The Web Forward, which you can read more about in Addy Osmani’s Smashing Magazine article.

For this post, I want to focus on one piece of advice given by those developers in that project, under the heading “Write”.

The advice is: Publish what you learn.

As soon as I read that exhortation (which originated with this tweet), I knew this was a project made by a group of people who cared about the Web and that they understand what it takes to move forward as developers, and as an industry.

Let’s explore those four simple words, because I believe that concept is at the heart of how much progress has been made in the front-end development niche. And it’s something that could help almost any industry, in any field.

Just Do It

Very few blogs start out with much traffic at all. Unless the blog is based on an already existing brand that has a lot of exposure, most blogs will begin with very few readers. Even Smashing Magazine, who now has millions of readers, subscribers, and followers, started out with nothing.

CSS-Tricks is another good example of a blog that started out as nothing, and has grown into a thriving, collaborative community. Its founder and curator, Chris Coyier, certainly couldn’t have predicted how much that website would grow. And I’m sure we could come up with additional examples of websites that went from zero to hero in a relatively short time.

Why did they become successful? Because they published what they learned. At one time I somewhat favored the view that too many blogs were being launched. But I think the benefits of so much being published in so many different places outweigh any drawbacks.

Of course, this is not to suggest that the reason you want to publish your thoughts is to “make it big”—that should be secondary, if considered at all. In fact, what you publish doesn’t necessarily have to be on a run-of-the-mill monetized WordPress blog. It could be a GitHub account, a Wiki-style website, a Tumblr feed, or even a bunch of quick tips on a simple Twitter account.

Which brings us to another important supplement to this theme. Immediately after the folks at Move The Web Forward told us to publish what we learn, they made an equally important statement.

Don’t Be Afraid To Make Mistakes

You might be thinking: “Wait. What? Me? Publish a blog? I’ve been coding websites for a measly six months (or some other ostensibly short period of time). Even if people visit my website and read it, my articles will probably get torn to shreds!”

That doesn’t matter. What’s important is that you recognize the value in researching, teaching, collaborating, and correcting mistakes. That’s why the Move The Web Forward folks went on to encourage writers to “keep your posts updated.”

And that’s why Rebecca Murphey, when discussing how to get better at writing JavaScript, said:

“The number one thing that will make you better at writing JavaScript is writing JavaScript. It’s OK if you cringe at it six months from now. It’s OK if you know it could be better if you only understood X, Y, or Z a little bit better. Cultivate dissatisfaction, and fear the day when you aren’t disappointed with the code you wrote last month.”

In this case, Rebecca was talking about actually writing code, not writing about code. But the same principle applies: you will get better when you make mistakes and correct them.

And if you think you’ve made some progress and you have something unique and educational to share, don’t be afraid to offer it to one of the many design and development blogs that will gladly pay you for content.

Comments Are Part Of The Content

There are too many websites that view the readers’ comments as secondary content that is not nearly as valuable as what the author has to say in the main article. Every website should continually make changes or updates to content that is clearly shown to be incorrect. This shows that the publisher wants to provide accurate information, and that they respect the views of their readers.

In fact, you could make the argument that without reader comments, the quality of content on many design and development blogs would not be as strong as it is today. On my own website, I’ve written so many things that were just downright wrong. In some cases, things can be a matter of opinion and personal preference. But in other cases, they’re just factually incorrect. In indisputable cases, I’ve always tried to post updates to articles and credit the commenters who pointed them out.

Teachers Learn By Teaching

Randy Rhoads, a popular rock guitarist (who died in a plane crash in 1982), was well-known for being a guitar teacher. He once said:

“I’ve been playing about 18 years and I started to get a style when I started teaching.”

In other words, he believed that his success as a guitarist was largely impacted by the fact that he spent time teaching his skill to others. The same can be true for any one of us.

I’ve learned so much from readers’ comments and from doing research on stuff that I plan to publish. I’ve even learned from content I never actually did publish. The Move The Web Forward project, once again, summarizes this point quite nicely:

“Teaching is a great learning tool as well. So, even if you are getting started in an area, you’re helping yourself by writing about it as well.”

GitHub Gets It Right

The collaboration level on many projects from the “social coding” website GitHub is truly amazing, and is something that shows how revolutionary the Web really is.

GitHub's method of social coding is revolutionary

Think about a large project like HTML5 Boilerplate. When that project was first released, many front-end devs were amazed at how much front-end knowledge had been packed into a single starting template. Many were even intimidated by it. But what it is today is nothing compared to what it was when it first launched.

Why? Because from the get-go the contributors to the project had the same attitude that Paul Irish expressed in the launch post of his blog:

“I’m very interested in your contributions… what else deserves to be in this base template?”

With those words, Paul began what might be the most important front-end development project in the Web’s short history. And the collaboration continues today. In fact, there have been over 1000 issues opened and closed on that repo. All because Paul Irish—who has every right to never solicit feedback, because he’s so dang smart—encouraged collaboration.

Blog Posts Should Be Like GitHub Repos

The collaboration on apps like GitHub should be exactly what happens on blog posts. The readers posting comments should read the entire article, and should offer constructive, polite criticism and suggestions, without any unnecessary negativity.

An end to negativity

If the author feels the advice is not accurate or best practice, than he should explain why. If it’s established that the point needs clarification and/or correction, then he should humbly accept this and post an update, crediting the person or persons that brought it up. Personally, I’ve seen too many posts where the author doesn’t make corrections, even when clear technical or factual errors are pointed out.

This doesn’t mean that “majority rules”—that would be ridiculous, and would probably cause more problems than it solves (particularly in matters of opinion, where often there are no hard-and-fast rules).

But if it’s a technical matter, then the author has the responsibility to make updates and keep the information fresh, practical, and relevant. This is especially important if readers are finding the article via search. The “copy-and-paste-but-don’t-read” mentality is common among developers looking for quick solutions. We all face tight budgets and even tighter deadlines, so the last thing we want to do is verify a piece of code’s quality by reading a 900-word accompanying article along with 50+ comments.

If you notice a lot of search traffic coming in for older articles on your website, that might very well be incentive to update those older posts, and ensure you’re not promoting something that you no longer believe is accurate or best practice. And this has a twofold benefit: It will get you even more traffic, and your readers will have accurate information that they can trust.

So let’s do our best to imitate collaborative communities like those found on GitHub and StackOverflow, and continue making progress by correcting our errors. This will help all of us overcome the fears inherent in publishing what we learn.

The “TL;DR” Conclusion

If you don’t read this entire post, or if you take nothing else away from it, then just remember these points:

  • When you learn something, write about it, and don’t do it just to make money off it.
  • Don’t be afraid to make mistakes.
  • Teaching others will help you learn.
  • Encourage collaboration by allowing a free flow of constructive comments.
  • If you make a mistake, fix it.

I think this is a winning strategy for all those who are involved in design or development blogging, as well as tutorial writing.

When we’re willing to put ourselves out there, listen to what our peers have to say, and improve as needed, we will become better developers, and will help each other solve design and development problems in a more effective manner.

As this article suggests, your voice is just as important in this discussion. What do you think? Are you motivated to publish what you learn? Do you think collaboration and constructive feedback is an important part of moving the Web forward? We’d love to hear your thoughts.

Image used on frontpage: opensourceway.

(il) (jvb)

© Louis Lazaris for Smashing Magazine, 2012.

0
Your rating: None

  

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 Roberto. Another is the navigation menu on the website for Sifter App. 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 App
Altering the tabbed content in the navigation menu at Sifter. Large view.

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 demonstrates 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 Web.” 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 assumption 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 screen
Roberto’s full content, on a desktop screen.

Responsive text demo on a small screen
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 (@frankieroberto) 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 out 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)

© James Young for Smashing Magazine, 2012.

0
Your rating: None