DailyDev: Fixing Orphans With CSS

For my next DailyDev, I’m working on cloning ProPublica’s ChangeTracker mashup to track changes to the campaign websites of Maryland’s governor and his challenger.

To make sure it works and to have something to show, I’m waiting for the pages I’m monitoring to be updated. So, I’m in a holding pattern on that.

In the meantime, here’s a simple CSS technique I used to get rid of orphans in a blog post on my portfolio site.

If you don’t know what orphans are, have a look at the screengrab below:

You got it, the orphans are the last lines of each list item. Not pretty, right? Fortunately, I happened upon this CSS tutorial showing how to use the overflow property to get rid of them.

Following the tutorial, I wrapped each of the problem list items in a new div with the id “noOrphans,” like this:

<div id="noOrphans">
<li class="blogItem">
<strong>Here's the scoop: You can't scoop yourself:</strong>
Stop thinking in terms of print versus Web, us versus them. Start thinking in terms of one multi-platform news organization. To promote this culture, get your print/broadcast and Web staff interacting and crossing over into each other's roles.
</li>
</div>

I then created a new CSS rule for that div setting the overflow property to hidden, like this:

#noOrphans {
	overflow: hidden;
}

See, I said it was simple. Here’s the

Finished Product

• I could have accomplished the same thing with a class rule, but, as you can see from the HTML, I already had a class applied to the list items.

Pros

• Really simple to do.
• Can be accomplished with minimal extra markup.

Cons

• If every other list item or paragraph requires an orphan-canceling div or class, your markup will start to get cluttered.

Tip

• If you have lots of orphans, tweak your design and leverage the CSS cascade to keep your markup clean. In my example, for instance, if most of my list items had orphans, I might consider increasing or decreasing the padding or margins of their parent elements, or just forget about having the text wrap so each list item automatically squares off.

Recommend?

• Yes.

Running Backward

No, not that kind of running backward. Though, in my previous city, there was a dude you’d see doing that all the time. Seriously.

On a whim today, I reversed my regular running route. The route I’ve jogged dozens of times in all kinds of weather. The route, in the standard direction anyway, I could probably run in my sleep. Boy, let me tell you: It was like running it for the very first time.

Physically and visually, it was a completely different experience. When the start of downhills become the end of uphills, you change how you manage your workout. When the near side of the street becomes the far side of the street, you notice landscaping, architecture, entryways you’ve never noticed before. The best part: I expect today’s experience will help me better manage and better enjoy the route in its regular order.

The novelty won’t be as great next time but I’m sure to reverse the route again. I also will try to make a point to run backward, so to speak, in other areas of life, turning habits, routines, workflows on their collective heads.

I’ve already been doing this vocationally. In fact, one of my favorite parts of the interactive media master’s program I just completed was how telling stories on unfamiliar platforms improved my storytelling across the board — even in traditional print pieces, which I’ve been writing since high school.

Yes, running backward will move you forward.

DailyDev: Custom Twitter Background

I’ve been meaning to take a stab at a custom Twitter background for a while but was always unsure what dimensions would be best to accommodate varying screen resolutions. This Mashable post, which I used as my guide, recommends 1600px by 1200px. The left column where text popularly goes should be less than 240 pixels wide, the post suggests.

While branding is typically the main motivation behind custom Twitter backgrounds, I was going for function more so than form here.

I have two Twitter accounts, a personal account and one I created for school. I maintained both during the first part of my grad program but have since started feeding all my everyday tweets to my personal handle, reserving my old school account for live tweeting.

I wanted the custom background to convey this so that anyone who stumbles upon my school account doesn’t miss that it’s not my main handle.

Finished Product

• I used Photoshop to create the image. I employed a gradient background and some basic layer effects on the text and icon to achieve some depth. The Twitter bird is from this free set.

Pros

• Give your Twitter page a personal touch or communicate important information with minimal extra effort.
• Brand yourself or your organization across multiple spaces by matching the look/feel of your website, print campaign, etc.
• Non-designers can outsource the job to free online background generators.

Cons

• Since you’re dealing with a fixed image, it’s impossible to get the dimensions perfect for every resolution.
• Mobile users, a fast growing segment of your and any audience, don’t benefit from your custom background. Nor do your established followers, really. Once I start following someone, at least, it’s not often I click through to his or her page.
• You can’t hyperlink the text. A good use of Twitter backgrounds is to promote your other online spaces, but, whenever I see this I have to fight my instinct to click on the words.

Tip

• Don’t make your background too texty. It’s against the 140-character spirit of Twitter.

Recommend?

• For organizations, definitely. It’s a can’t-miss opportunity to extend your brand and get important information in front of your audience. An attractive background that efficiently communicates what your org is all about can make all the difference when a user is deciding whether to become a follower.
• For individuals it can be beneficial for the same reasons, but, to me, overly packaged personal backgrounds often come across as pretentious — especially those with large photos of the user identical or similar to his or her profile picture a few pixels away.

I’m a fan or more subtle personal backgrounds — especially large landscape or cityscape photos — that serve a design function and reflect the user’s personality but let his or her tweets, profile bio and website link speak for themselves.

DailyDev: HTML5 Video

Editors delight in turning this

Macbeth was very ambitious. This led him to wish to become king of Scotland. The witches told him that this wish of his would come true. The king of Scotland at this time was Duncan. Encouraged by his wife, Macbeth murdered Duncan. He was thus enabled to succeed Duncan as king.

into this

Encouraged by his wife, Macbeth achieved his ambition and realized the prediction of the witches by murdering Duncan and becoming king of Scotland in his place.

(If the example looks familiar, it should. It’s from Strunk and White.)

Developers delight in turning this

<object type="application/x-shockwave-flash" height="320" width="480" data="http://stephencearley.com/video/interviewing.swf" type="application/x-shockwave-flash">
<param value="http://stephencearley.com/video/interviewing.swf" name="movie"/>
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://stephencearley.com/video/interviewing.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>

into this

<video src="http://stephencearley.com/video/interviewing.ogv" controls>
</video>

That’s the markup for HTML5 video. Beautiful, isn’t it? (Be sure and soak it in before reading on. You’ll see why.)

The above code will display a video in the latest versions of Firefox, Opera and Chrome. But that’s it. You need to append the markup for the video to display in recent Safari, iPhone or Android releases. You need to append it further — with that busy Flash object embed from two boxes up — for the video to show in earlier versions of the above browsers, and, crucially, until Internet Explorer 9 comes out next year, in the world’s most popular browser.

If you’re using Firefox 3.5 or above, Opera 10.5, Chrome5 or recent Safari, iPhone or Android browsers, go ahead and check out the

Finished Product

• This page includes an annotated version of the full markup as well as the actual video.

If you’re not using one of the above browsers, download one! Firefox, Opera, Chrome and Safari are each free.

If you want to try this yourself, I strongly encourage you to read this chapter from the “Dive Into HTML5″ online book. It’s long but totally worth it. It’s extremely informative, covering basics about digital video — starting with the difference between containers and codecs — as well as the HTML5 stuff, and doing it all in a way that’s accessible to n00bs without being condescending.

Pros

• Even before HTML5 as a whole is officially supported, developers can publish video in a clean, plug-in-free, standards-based format.
• It’s a way to display video on the Flash-less iPhone/Pad.
• Videos can be controlled with Javascript for some real nifty interactivity.

Cons

• Not supported on all browsers yet. No standardized codec.
• Having to develop for multiple codecs, still create a Flash backup, decreases the net benefit to workflow efficiency.
• Lots of accessibility potential. But right now, it’s mostly just that, potential.

Tip

• Use the poster attribute to customize the preview frame. This can be any image — it doesn’t have to be a frame from the video.

<video src="http://stephencearley.com/video/interviewing.ogv" poster="http://stephencearley.com/video/poster.jpg">

Recommend?

• Yes and no. For the average developer, it’s worth waiting until some of the issues mentioned above get worked out. But, make no mistake, especially with <video> tag support coming in IE9, HTML5 video should be ready for primetime soon. If you choose, you can already view most YouTube videos in HTML5. Vimeo also has an HTML5 player in beta.

DailyDev: Timetoast Timeline

This is the first of what I hope is many posts in my DailyDev (for development, not devotional) blog series. I plan to try out at least five new (to me) Web tools or techniques a week and share my experiences and finished products in this space.

To kick things off, I made a timeline version of my resume using free online tool Timetoast. While Timetoast is free, registration, or, a log-in via your Facebook account, is required.

Finished Product

• Timetoast outputs a Flash timeline (above) and html list version of the timeline (below).

Pros

• Super easy to use. If you can fill out online forms, you can make a simple interactive timeline in minutes.
• Shareability. Each project gets own permalink, embed code. Built-in social media sharing, comments.
• Basic HTML  tags including <a>, <b> and <i> allowed within descriptions.

Cons

• Very limited design, formatting options.
• Can add images only to title, events, not to timespans.
• HTML formatting counts toward per-box character limit.

Tip

• Take the time to add images to each event. It helps make the timeline appear a lot more visually interesting.

Recommend?

• Yes. If you’re short on time, money or development expertise, Timetoast is a functional alternative to scratch-making Flash or CSS/jquery timelines.

The Inverted Pyramid: Legacy Media’s Ultimate Legacy

This is one in a series of posts based on or inspired by research for my Contemporary Media Issues class on how the challenges and opportunities associated with presenting news online are affecting journalistic values.

It was invented in the age of the telegraph yet is as en vogue as ever in the age the iPhone. It’s perhaps legacy media’s ultimate legacy. I’m talking about the inverted pyramid.

The inverted pyramid is the structure virtually all breaking news stories, and many other hard news stories, follow: Important stuff up top, less important stuff at the bottom. The form means that readers who don’t make it to the end of the story — either because the telegraph line went dead, the typesetter ran out of space, the businessman’s lunch break ended or the Web surfer received an instant message — can still make sense of what they read and walk away with the main gist.

“Journalism has a love-hate relationship with the inverted pyramid,” the Poynter Institute’s Chip Scanlan wrote in 2003:

Its supporters consider it a useful form, especially good for breaking news. The inverted pyramid, or at least its most substantial element “the summary lead,” is used widely and is one of the most recognizable shapes in communications today. You’ll find it on the front and inside pages of most newspapers, as well as in stories distributed worldwide by The Associated Press, Reuters, and other news services elsewhere on the Internet.

Critics of the inverted pyramid say it’s outdated, unnatural, boring, artless, and a factor in the declining readership that newspapers have been grappling with for decades.

The inverted pyramid, its critics say, is the anti-story. It tells the story backward and is at odds with the storytelling tradition that features a beginning, middle, and end. Rather than rewarding a reader with a satisfying conclusion, the pyramid loses steam and peters out, in a sense defying readers to stay awake, let alone read on.

Love it or hate it, the inverted pyramid itself is not going to peter out anytime soon. It’s tailor-made for the way people consume news online, where they really could exit a story at any moment.

• People consume a lot of their online news at work, either on their lunch or coffee break or when they should be working. Either way, they’re more likely to be skimming rather than thoroughly reading.

• It’s well documented that, even if they have the time for it, people dislike reading long articles on computer screens. It strains their eyes and, unless they use the AutoPager Firefox extension, they have to keep clicking to get to the next page.

• There’s a whole “world of interactivity,” as a college professor discussing laptops in the classroom recently put it during a panel discussion, competing for audiences’ attention.

• For people out and about on mobile devices, real life insists upon itself more so than if one’s curled up on the couch with a newspaper or in the computer chair browsing RSS feeds.

Since it is sticking around, there’s something else journalists should know about the inverted pyramid. Scanlan hinted at it when he cited critics’ complaint that it “is at odds with the storytelling tradition.” The inverted pyramid format, it turns out, is extraordinarily difficult for the human mind to process.

The structure asks journalists to largely ignore the chronological, spacial and social relationships according to which our brains naturally organize information and instead organize information according to newsworthiness, something none of us is hardwired for. One researcher called it “one of the most unstable architectural forms the mind can conceive.”

The mind has a much easier time with narratives, as they mimic the way we naturally perceive and communicate about events.

While journalists should seek out more user-friendly story structures, often this is not realistic. No one’s going to start a story about a killer hurricane, “A little over a week ago, several thunderstorms converged off the cost of Africa.” While journalists might be boxed in — pyramided in? — for the text portion of their coverage, they still have options when it comes to which multimedia pieces they pair with this text.

A study published last year by four University of Missouri journalism scholars found that the cognitive stress audiences experienced when reading an inverted pyramid article carried over to accompanying video presentations. Users who had just read an inverted pyramid story, they found, remembered less about a video than users who saw the same video but had just read a narrative story.

Journalists would be wise, then, to pair with narrative pieces videos that contain a lot of information that’s not included in the corresponding article. Videos that are largely supplementary and repeat a lot of the information contained in the article, meanwhile, are probably OK to match with inverted pyramid pieces. If journalists must pair videos with a lot of new content with inverted pyramid stories, perhaps appending videos with a narrative caption might help minimize the damage.

Sit Back, Relax, Enjoy the News

How Active Users Let Others Be More Passive

This is one in a series of posts based on or inspired by research for my Contemporary Media Issues class on how the challenges and opportunities associated with presenting news online are affecting journalistic values. It is cross posted on the blog for my Citizen and Participatory News class, where it was published March 5.

Forget for a second everything you’ve been told about the participatory news consumer. All that talk about the Web empowering people to lean forward. Minimize that window. And open this one: The Web’s also enabling people to lean back.

Not the most obvious conclusion to draw from a report subheadlined “How internet and cell phone users have turned news into a social experience.” I’ll explain. And I’ll explain how it might make news organizations’ jobs easier. (The report also, by the way, announced that the Web has overtaken newspapers as Americans’ No. 3 news source.)

Like countless Web research reports before it, Pew Internet’s “Understanding the Participatory News Consumer,” released March 1, reflects the power law distribution math popularized by authors Chris Anderson and Clay Shirky. Simply put, a subgroup of news consumers is doing most of the participatory heavy lifting spreading, curating and creating content. Yet, many more are benefiting from the “serendipitous discovery” of news these behaviors make possible.

For instance, three-quarters of online news consumers report receiving news links from peers through e-mail or social networks, according to the report, while about half take credit for forwarding them.

Considering Web users at large, “participators,” as Pew dubs netizens who create, pass along or transform content, form an even smaller minority. Thirty percent of Web users in Pew’s landline and mobile telephone survey say they’re accessing news-related content on social networks, while a little more than half that proportion say they’re creating content. A quarter of users had commented on stories or blogs, 11 percent had tagged content and 9 percent had created their own article or multimedia piece.

Being steered to information by others is part of the “foraging and opportunism” by which the report says modern audiences access their news. Indeed, an even 50 percent of Americans say they rely on others not just for interesting information but for news they “need to know.” Users also unwittingly steer themselves to news. Some 80 percent of online news consumers say they regularly stumble upon news while completing other online activities.

It’s never been easier for news just to fall into people’s laps. Sure, offline a friend might photocopy you a magazine piece or you might glimpse an interesting article in a newspaper a stranger left behind, but these instances are rarer, and considerably more delayed than online interactions. It used to be, if you wanted news, you had to go get it. The Web lets us go get it like never before, and that’s generally what people pay attention to, but it also enables those who want to to sit back and let it come to them.

In this environment, it would seem wise, then, for news outlets to take Malcom Gladwell’s advice and go about trying to influence the influencers. Knowing they can no longer be everything to everyone, this clarifies their mission. Even if influencers’ influence is less than anticipated, college-educated, in their mid-30s and earning earning $50,000 or more, as Pew’s survey describes them, by themselves they’re a smart market to pursue.

So, what do the participators want? According to Pew, they want more stories about science and technology, health and medicine, and state government and they want those stories presented interactively. Smart wish list. Science and technology are taking over our lives whether we pay attention or not. Health is slated to be one of this half-century’s biggest stories as the baby boomers age. And state government coverage needs rebuilding after legacy media cutbacks gutted capital press corps. Interactivity, meanwhile, is much less appreciated by the broader population. I would argue, however, that this is so because most users are basing their opinions on inferior interactive experiences. The participators have seen the real deal, and they want more.

Pew’s data are based on a random sample of 2,259 adult land line and mobile phone users surveyed by Princeton Survey Research Associates International between Dec. 28 and Jan. 19. The poll’s margin of error was plus or minus 2.3 percentage points overall, with confidence falling to plus or minus 2.7 percentage points for the 1,675 respondents identifying themselves as consumers of online news.

Photo credit: http://www.flickr.com/photos/oldpatterns / CC BY-NC 2.0

After Hostile Comments, One Source Says ‘No Comment’

This is one in a series of posts based on or inspired by research for my Contemporary Media Issues class on how the challenges and opportunities associated with presenting news online are affecting journalistic values.

The previous post mentioned how abusive comments can scare off other commenters. A recent blog post by a Washington Post reporter told of how they can scare off sources as well. This is no small matter. The institution of journalism is built on the premise that sources trust that what’s published about them represents them fairly. If this trust is lost, we all lose.

Post reporter Christian Davenport told how a few insensitive comments burned a bridge he had spent weeks building with a reluctant source. The source, a debt collector named Michael Sutherland, was one of the few in his industry to even consider speaking on the record for Davenport’s story about debt collection during the Great Recession. Patience and assurances that “he was committed to being fair and accurate” won Daveport access. Of course, no matter how committed Davenport was, the cumulative tone of the Post’s coverage was dependent on how well commenters shared his commitment. These two comments, which still appear under the original article, provide an indication of how they did:

griffmills wrote:
What scum….Scam-acne-face-Sutherland and all his little minions, scum….special place in Hell for them
2/14/2010 8:57:18 AM

billdinva2 wrote:
Debt collectors are the scum of the earth. They should be hung up by their private parts and shot. Hint: Ignore them. Don’t answer the phone. When they sue answer and bury them in discovery. The debt collection industry runs on default and goes after the weak.
2/14/2010 4:31:58 AM

When Davenport e-mailed Sutherland seeking feedback on the story, Sutherland replied that he was upset about the way he and his colleagues were portrayed in the comments. He swore off ever speaking to a reporter again. True to his word, he didn’t return Davenport’s e-mail seeking comment for the reporter’s blog post.

In his post, Davenport discusses the obligation journalists feel to protect sources from “an outfall that might result from agreeing to go on the record.” That’s now harder for them to do. More ominously, there’s the potential that the threat of harassing comments will discourage would-be sources from ever talking in the first place.

Searching for Civility

How One Upstart’s Rebranding Online Comments

This is one in a series of posts based on or inspired by research for my Contemporary Media Issues class on how the challenges and opportunities associated with presenting news online are affecting journalistic values.

Hawaii online news upstart Civil Beat is attempting to build a brand around intelligent, value-adding conversation between its journalists and audience. Reflecting this, it doesn’t call its reporters reporters. It calls them reporter-hosts. Anxious to show off his venture’s progress at the end of its first week, founder Pierre Omidyar — yes, the eBay guy — tweeted: “When is the last time you saw thoughtful comments at a news site?” linking out to the latest user dispatches.

The comments indeed were atypical of what’s normally found on local news sites. Missing were the ignorant, hate-filled, lazy comments that discourage serious participation. In their place were informed, respectful, crafted comments that encourage more like them.

It’s early yet, but how is Civil Beat doing it? First, it’s erected costs to participation. Commenters have to surrender both a monthly subscription fee as well as their anonymity. Second, it’s made responding to comments part of reporters and editors’ regular duties. If the person who wrote the story is hanging out on the comment boards all the time, users are likely to be more respectful. Compare it to how students change the tenor of their conversation depending on whether the teacher’s in or out of the room.

We’ll see whether Civil Beat can sustain this over time. We’re dealing with early adopters here, civic and news junkies accustomed to conversing diplomatically. As more everyday people join the audience and attention moves from the novelty of Civil Beat to the tenuous, emotional issues it covers, the tone could change.

The Five Gifts of Sharing

Everything You Need To Know About the Future of Education You Learned in Preschool

Sharing. In preschool, our teachers wouldn’t shut up about it. The rest of our school careers, it’s like they never learned it themselves. Think about it. In grade school, high school, even in college, what happened to all that great content you produced? That “Where the Wild Things Are” diorama? That coming-of-age introduction to film screenplay? That term paper on electoral reform? Very likely, three things:

1. Your teacher reviewed it, thoroughly if he or she possessed the motivation or time, less than thoroughly if he or she didn’t.

2. Your teacher assigned a grade to it, and, sometimes but not always, provided written or verbal comments.

3. You paid more attention to the grade than the comments and filed the assignment away to gather actual or virtual dust — or simply trashed it.

With the Web all but eliminating the production and distribution costs of content sharing, education is becoming more participatory, but not to the extent it could be or should be, according to members of the “The Future of Learning is the Web” panel at last week’s FutureWeb conference in Raleigh, N.C. Even many e-learning programs, they said, are little more than traditional lessons dressed up in online clothes. The trick, panelist Tony O’Driscoll, professor of the practice of business administration at Duke University, said, is to go from using technology as an engine for automating the classroom to using technology as a network for liberating learning.

The trick is to go from using technology as an engine for automating the classroom to using technology as a network for liberating learning.

— Tony O’Driscoll, professor of the practice of business administration, Duke University

O’Driscoll and his four panelmates, also Duke University professors, argued that sharing the educational process on blogs, social media, discussion forums, crowdsourcing sites and elsewhere online benefits students, teachers and society alike.

• Sharing’s first gift is motivation. When students know their work is potentially being judged by their peers, experts or even just anonymous Internet users, they take their work up a notch. The extra eyes likewise motivate teachers to maximize the quality and relevancy of their assignments.

• Sharing’s second gift is feedback. Constructive criticism affords students a chance to improve their work before turning it in. Praise in the form of a comment, repost or adaptation validates their scholarship in a way an arbitrary letter grade never could. Meanwhile, if students aren’t reacting the way teachers expected, teachers can see this and call an audible.

• Sharing’s third gift is understanding. The public and even other educators often dismiss divergent teaching approaches as lacking earnestness or structure. Why tell critics your allegedly easy class is actually challenging when you can show them by posting the final exam question online, as panelist Mark Anthony Neal, black popular culture professor, recently did?

• Sharing’s fourth gift is what O’Driscoll called “double-loop learning.” External audiences absorb students’ knowledge and respond in kind with their own, which students fold back into their work. This cycle additionally addresses what panelists criticized as academia’s lack of urgency.

• Sharing’s fifth gift is efficiency. Rather than over-extending themselves trying to become an instant expert in something they’re not, teachers can outsource the job to the real experts. The organizing power of online networks further frees up teachers to teach — and, critically, the panelists said, to provide context for the deluge of information modern students must manage. This benefit applies to organizing people — think about those hundred-plus-student freshman classes at public universities — as well as information.

Given that education has long been a pet interest of mine, that many from my family work in or have worked in education and that I used to cover education as a newspaper reporter, I found this panel especially engaging. There’s a fourth reason, however, that it spoke to me so. And that is how closely the changes taking place in education resemble the changes taking place in my own industry: news. In both education and journalism, the process is becoming a product. In each industry, successful practitioners will leverage this new process-product to improve the traditional product.

Neal, author of the NewBlackMan website, and O’Driscoll, co-author of “Learning in 3D: Adding a New Dimension to Enterprise Learning and Collaboration,” spoke alongside Duke colleagues professor of interdisciplinary studies Cathy Davidson, the panel chairwoman and writer of the widely circulated blog post “How to Crowdsource Grading;” professor of history and romance studies Laurent DuBois, a French colonialism expert who also blogs about the politics of soccer; and associate professor Negar Mottahedeh, best known for organizing the Axis of Evil and Twitter film festivals and for her commentary on last summer’s Iranian election protests. Video from the panel is available on the conference’s YouTube channel.

BONUS: Noteworthy links mentioned by the panelists:

• The Haiti Lab project DuBois is helping to run
• HASTAC’s Digital Media and Learning Competition
• Henry Jenkins’ Social Media Classroom
• Classroom collaboration tool Hotseat