I love Twenty Ten. (Really, it’s what I was thankful for this Thanksgiving). The theme’s structure, typography and general functionality make my mouth water. It’s more than “just another WordPress theme.” The best part: It’s so damn versatile. With just the addition of a file or two (a stylesheet and sometimes a loop-index.php), the theme can be transformed into a whole other animal. Here are some of the ways I’ve tweaked Twenty Ten for freelance projects and for friends/family to quickly make WordPress sites that are compatible with all of WordPress’s awesome features.

This right here blog: laurenmichell.com

My best friend’s blog: denyabeaudry.com

A fundraiser website: waterintowinebenefit.info

Andy Smith for Freeholder: andysmithnj.com

CGI Initiative for Collaborative Government: collaborativegov.org*

*Note, this one took significantly more tweaking than just a css file and loop-index.php at the request of the client’s specific needs. It’s still a child theme, nontheless.

I want to see other uses of Twenty Ten. If you know of ‘em, share your links in the comments. And if you aren’t using the theme, try it. Child themes are fun and easy, and Twenty Ten has all the basic features you could possibly want for a simple blog. As shown in the examples above, you can even use it for more complex sites. It saves serious amounts of time and always looks slick, even if you don’t make any modifications.

As always, the redesign is a continual work in progress.  We have chugged away at it for a full month, but know there’s still much to be done.

Mine and David Cohn's sketches for the contributors page after our first meeting in early January at the SF Public Press offices.

You’ll notice the header and footer have been significantly cleaned up. We ditched the old, typewriter keys logo for a simpler, cleaner one. The big buttons from the header are replaced with clear, bold text links.

The pitch pages — at the heart of our redesign– are much more usable now. Instead of having trailing sidebars cluttered with links and widgets and sharing options, you have only the important stuff: Donors, amount raised, and buttons for funding or earning credits. The progress bar, unlike the old dinky one, is strong, prominent and awesome. There are tabs at the top right of every pitch that let you navigate through details, discussion, updates and other elements related to each pitch.

From a product perspective, our goal was to simplify. We wanted to move everything higher so there was less wasted space above the scroll. Spot.us is built in rails and the code needed some spring cleaning. There was a class applied to almost every div, too many divs (where there should have be unordered lists) and tons and tons of templates. We cleaned that all up by using a grid CSS framework (not a column-grid system) and cutting down the number of templates. We only applied classes to containers and re-used as many containers as possible.

Some sketches from a Spot.us brainstorm with David Cohn and Erik Sundelöf.

A huge shoutout to Erik Sundelöf, the CTO of Spot.us, who served as a great mentor and teacher to me for learning SEO tricks, CSS efficiency, and the basics of rails. He sat with me on Skype through hours of apache and mysql fails and fixed the Spot.us code when I broke it.

Also a shoutout to David Cohn for keeping us on our toes, pioneering this whole redesign, and making Spot.u into the awesome project it has become.

As for the next steps, we have to take a close look at the profile pages, which are largely untouched from the former design. We plan to make the profile page more interesting and useful, so if you have any feedback to share, fire away.

After you take a look at the redesign, donate $5 to any story for free (i.e., no money from your own pocket, just a few minutes of your time) by taking a survey about how teen pregnancy is portrayed in the media.

As time has gone on with Spot.us and new features have been added, the pages have become a bit cluttered. We’re redoing the header, pitch page, and browse pages with the goals of:

1. Condensing redundant views
2. Simplifying content display
3. Creating more consistency

For example, take a look at the current pitch page vs. the soon-to-be pitch page:

Also, see the detailed view below of the old vs. new community page, which will now be integrated into the browse pages:

David released the mockups to the public yesterday for you to provide us feedback. See the whole set on Flickr and leave feedback there.

My latest 10,000 Words post outlines the latest news design trends in the Google Chrome app store, many of which I believe could be pointing at a future of news design.

Notably, I point to:

• Grid layouts
• Keyboard shortcuts
• Full screen glory
• Multi-column text display
• Multi-paneled layouts
• Big, beautiful video and imagery
• In-browser notifications
• Offline reading
• Customizability

And, of course, the shortcomings:

• Lack of permalinks. If you want to link to a story within an app, the resulting URL leads to the standard website URL.
• No rich media. Aside fro the apps that are based entirely on video or audio, I have yet to see any apps that integrate video and audio within stories.
• Based on episodic storytelling. These apps work great for a news format based on tons of articles being reproduced every day. But what about stories that are told in format of data or long-living stories that could be built in wiki format? Sticking with episodic story display discourages newsrooms from thinking of new ways to tell stories.
• Where are the comments? Although this is a point of debate in the news industry, the inability for commenting and direct user interaction within the sites is worrisome.

Read the full post, complete with screenshots, at 10,000 Words.

1. When editing your child themes in wp-admin (not via FTP, not locally), the directory on the right also lists files from the parent theme. When you edit those files (even if the child theme is selected in the dropdown), you’re really editing the parent theme files.
2. When you upgrade to 3.0.2, the Twenty Ten theme reverts back to default settings.

What does this mean? I edited files from the parent theme, then deleted those changes when I upgraded. And because this was a project for work (not just leisurely fun), I panicked.

Thankfully, the second time around I was able to code everything much more quickly and efficiently, but I won’t make that mistake again thanks to WordPress core developer Andrew Nacin‘s latest commits:

When editing a child theme, there’s no way to know whether you’re editing a parent theme file or a child theme file. This could be disastrous, as you could later lose your changes on an update of Twenty Ten when you thought you were doing everything right.

A little warning just above the Save Changes button should be enough as a sanity check until we can more thoroughly overhaul the theme editor in potentially 3.2.

With 3.1, you’ll get a warning if you’re editing the parent theme of the current theme and you won’t even be able to access those files unless you manually select that theme from the dropdown (as shown in the screenshot above).

So thanks, Nacin, for rockin’ my Friday night.

Yes, that’s right. A Master’s in Social Design program.

This is the first time a master’s program has intrigued me to the point of actually considering going back to grad school someday. The premise is exactly what I seek to achieve through entrepreneurship (social good), but with a focus on my other passion– design.

The flash ad scrolls through the following points about the program:

• Social design can contribute positively to our world
• Social design relies on a community-focused approach
• Social design focuses on working with, not for, a community
• Social design develops socially-responsible designers

The description from the program’s site:

There is a growing interest and understanding in the world of design related to the designer’s role and responsibility in society, specifically the belief that social change can happen through design. The Master of Arts in Social Design (MASD) prepares students to play a vital role in positively impacting our world through collaborative, hands-on opportunities supporting a range of community-defined objectives.

I tried to find other similar programs but a brief stint of Googling produced few results. Maybe someday I’ll go to Maryland and give it a shot.

I know everyone raves about how amazing Twitter is for building connections within your niche. If you’re reading this post on my blog, you probably have already experienced it firsthand and probably only know me through our niche on Twitter. But that won’t stop me from sharing yet another anecdote of how Twitter has brought great opportunity to my life: I am officially a contributing blogger for 10,000 Words.

I have been a reader of 10,000 Words for a few years. In college, it helped me get a start in multimedia and develop an enthusiasm for web-based reporting tools. I shared Mark’s posts with the reporters I trained and the professors who needed training. (Scroll to 22:39 in this video where someone asks me what my favorite blog is… my response: “10,000 Words!”)

Last week, Mark sold 10,000 Words to MediaBistro and asked me if I’d be interested in contributing. Of course, I sprang to the opportunity. And here I am. My first post about kinetic typography as a storytelling technique will be up later today was published today (it’s a topic many people have personally asked me about after my CoPress video series. I thought it would make a good starting point).

I am a designer with her roots in journalism. 10,000 Words is a blog about tools for storytelling. You can expect that most of my posts will be focused on how we use design to convey narratives. That’s my specialty and that’s the niche I want to carve at 10,000 Words.

I’m honored to be a part of the whole new and improved blog and a new challenge always gets my adrenaline pumping. I hope to influence a wave of journalists in the same way Mark influenced me. So thank you to Mark for reaching out to me, to Media Bistro for hiring me, to CICM for giving me a start in regular blogging back in college, and to all the new readers and followers I will gain from this experience. Let’s do this.

Update: I want to give a quick shoutout to Ethan Klapper (@ethanklapper) and Chris L. Dunn (@christhedunn) who will also be contributing bloggers! Great to have a circle of young, smart people on board!

My BCNI experience finished with a bang thanks to Major Highfield‘s roundtable discussion on news site design and mobile news design. For those of you who don’t know Major, the former newsie is now the mobile tech lead for ING Direct. His roundtable was an open discussion about what works and what doesn’t in current news design, and a look forward at new ideas and trends.

He identified the following most common types of design we see in news:

Column Design (NYT)

Very reminiscent of print design, “column”-based news sites have thin vertical modules. The most well-known example is the New York Times.

Grid view (CNN)

The grid news design has less emphasis on hierarchy and gives equal balance to story display. Although Major used CNN as the example, I’ve included Newser as a more ideal example of the grid layout.

Buckets (MSNBC)

Bucket designs group stories by topic beneath a main header.

Lists (Digg)

Timeline view or “river” view are also common terms for a list layout which is as it sounds: A list of headlines, like Digg.

Combo package (Toronto Star)

The Toronto Star combines these different possibilities by offering the user different modes of viewing news, although Major noted that this isn’t ideal UI. The Toronoto Star manages multiple layouts from which the users can choose their favorite:

Major said you should push out the best user experience and not force the user to choose. Based on the heavy emphasis the Star’s designers put on evidence-based design, I’d venture to guess that they’re collecting data about which display is used most often in preparation for something radical. But that’s just a guess.

Combining advertising with editorial design

Traditionally, display ads thrown into random columns and headers of news sites was the preferred advertising style online, as adapted from a print model. The new type of advertising comes in the form of embedded ads (i.e. ads displayed inline with the rest of the editorial content). We see this manifesting in LA Times’ decision to sell keyword ads within articles this week. A bad example of this can also be seen on CNN.com:

A good example of embedded advertising is in the free desktop version of Tweetie:

I think the reason CNN’s embedded ads fail is because CNN isn’t being honest with its customers. Tweetie clearly labels its ads as such and implements them elegantly into the design of the app. It also helps that the ads are very targeted at the user. CNN’s embedded ads try to look like editorial content and it’s deceitful. They’re also not very useful or pretty.

Takeaways

So the point of all this is that news sites still suck. One nugget that really stood out was in our conversation about news site navigation. We still categorize stories under sports, arts, news, opinion, etc. because this is how the print product was laid out. But is that what’s relevant to readers? I know that when I browse news, I don’t care about the topic. I care about the timeliness and its relevance to me, no matter what “section” it falls within. I don’t necessarily want to read about crime and sports, but if it’s happening within a three block radius of me, then I do care. So maybe instead of categorizing news sites into traditional categories, we can make the main navigational elements more relevant with categories like “time” and “location” (see the Spokesman Review for a great example of this).

One revelation that came about for me during this discussion (which might ironically deem this entire blog post irrelevant) is the fact that news design doesn’t matter at all when we’re all subscribing to news via RSS. Is there really any type of news site experience that will be more convenient and relevant? Am I ever going to want to visit 40 different sites each day, all of which are designed differently, and hunt down news that’s relevant to me within each of those sites? Or would I rather leave my Google Reader extension active in the browser, open in it in between tasks, quickly be presented with news I already know is relevant to me (distraction-free), and carry on with life? The latter is the news consumption pattern that fits best into my daily routine and allows me to consume the most news in the least amount of time. The fact that Google Reader’s social features push me the most relevant news being shared by the people I follow only increases its relevancy.

So maybe the question we should be asking ourselves as news designers isn’t how to make our sites better, but how to create an experience that surpasses that of the Google Reader experience. And maybe that’s the topic of another post. Stay tuned…