So, here’s the deal with <section> and <article>. There is a very handy one-sheet from the HTML5 doctors called the “HTML5 Sectioning Element Flowchart” that outlines this in an attractive graphic format, so this more wordy explanation is focused really on just <section> and <article> as we use them in our builds.

<section> and <article> are both semantic tags vs. the <div> which carries no meaning, and they both require a heading (<h1>). The main difference between the two is that an <article> is self-contained and, as such, could be dropped into an RSS feed and still make sense. For the site we’re developing right now, all of our “blurbs” or “touts” listed on a page are <article>s that contain enough content to be understood all by themselves:

<article>
   <img/>
   <h1>heading</h1>
   <p>short description</p>
   <a>link</a>
</article>

The really cool thing about both <section> and <article> is that they create a new node in an outline. So the following HTML creates an outline just as if “heading2″ and “heading3″ were wrapped in <h2></h2> <h3></h3> tags! How totally great is that?!?

<section>
   <h1>heading 1</h1>
   <article>
      <h1>heading 2</h1>
   </article>
   <article>
      <h1>heading 2</h1>
         <section>
            <h1>heading 3</h1>
         </section>
   </article>
</section>

Google likes it, screenreaders like it, outlining tools like it (but who cares, really?), and most importantly of all, I like it ;). When you think about it, this is really cool. The problem of having an object with an <h2> in it that works great in one place, but is no longer a child of an <h1> when dropped elsewhere is no longer an issue. The outline just works! Our html code objects are now really and truly modular and can move all over the site.

So when do you use a <div>? Well, <section> and <article> both require a heading, they have semantic meaning just like <p> and <li>. <div> has no semantic meaning at all, so if you need to wrap something in a container for styling or scripting purposes only…that’s a <div>.

Will there ever be <h2>s and below on a site we build? Sure…but mostly in the RTE by authors where they belong (we’re definitely not going to start training site authors to use these fancy new tags…it just won’t happen, and doesn’t really need to.

So, when building a site, a pretty good rule of thumb is this:

If you find yourself using an <h2> or lower, chances are that it’s the wrong tag to be using unless you are authoring content. If that <h2> or <h3> you are using is the first heading inside a <section> or <article> container then it’s absolutely definitely wrong and we’ll be more than happy to help.

“But wait!” you say, “Doesn’t that mean that all the headings on the site will be styled as <h1>s? That, my friends, is a post for a different day. Suffice to say that there are a variety of approaches, all of which are partially cool, slightly irritating, and each suited to solving different problems.

Next issue: <aside>

On May 17th, Beaconfire will be participating in Salsa Labs “Speed Learning:  List Growth Strategies for Nonprofits,” an interactive event where participants will learn about about how to grow your list to reach those important goals.

After the speed session, we’ll walk back to the Salsa office where you’ll have a chance to network with other nonprofit do-gooders from the area, and talk to your friends from Salsa as well as our partner community.

Will we see you there?

Time:
Discussion starts at 4:30 PM
Networking Happy Hour to follow at the Salsa Office at 5:30 PM

Place:
FHI360
1825 Connecticut Avenue Northwest
Washington, DC 20009

REGISTER HERE: http://action.salsalabs.com/p/salsa/event/common/public/?event_KEY=70628

I have a confession to make. I’m a total pain in the ass. Like, professionally. As a creative director, being opinionated, tenacious, demanding, eccentric & snarky comes with the job.

Or could it be a cover for my super secret identity?

Yes, it’s true. Beneath this black turtleneck beats the heart of an idealistic and humble creative soul, trying to save the world through meaningful design for nonprofits & good causes. No, I’m not a tree hugger, a red-paint tossing activist or even a vegan. I’m just your friendly neighborhood superhero. And I’m not alone out here.

As a member of the Design Avengers (Local 202), we make incredible things happen in the world every single day. You may recognize us by the bad color theory jokes, an overabundance of quirky desk toys, or the “Got White Space?” sticker peeling off our MacBook Pro. We move semi-stealthily within agencies & organizations, creating purpose-driven visual experiences that put a human face on important issues. Our well-designed calls to action may look unassuming but they can mean the difference between life and death for causes like breast cancer, disaster relief & childhood hunger.

Nope, none of that’s easy. But neither is changing outfits in a phone booth under a time constraint so let’s keep some perspective, shall we?

Of course, it takes more than jumping into spandex and leaping tall design challenges in a single bound to be a true creative superhero. If you’re just in it for the accolades & navel gazing, hang up those tights right now, baby. This ain’t the gig for you.

But if you’re passionate about using your skills to create real change in the world, may I offer 5 basic rules to get you started on your path to superhero-dom.

Be Selfless
As creative communicators, our job is to serve the needs of our clients, and help them achieve their goals. Ego is anathema to that lofty mission. Putting personal preferences aside in favor of altruistic design solutions won’t dim the glow of your talent one teeny bit, I promise. But every time you make it all about you, a fluffy little kitten dies. Don’t be a villain. Think about the kittens.

Be Authentic
Make creative decisions driven by the greater good, not the latest trend. A decent designer can smell bullshit a mile away but a true superhero won’t let garbage stink up the joint in the first place. Practice what you preach and always tell the truth (even if it hurts). Believe me, you’ll be more successful by being genuine. Anyone who says otherwise is selling something.

Be Smart
Do your homework and always think before you draw. Just because designers “play with pictures” and have a weakness for the Crayola Big Box doesn’t mean we ride the short bus. You can defeat the Legion of Design Foes with brains, not brawn, but do yourself a favor and never admit to eating paste as a child. You’ll thank me for that tip later.

Be Brave
Fight for what you believe in and be ruthlessly fearless no matter what. True superheroes don’t wait until they see a signal flash in the sky to do the right thing, but intuitively spring to action when they’re needed. Don’t let doubt or disbelievers be your kryptonite, and never take no for an answer (unless it’s in reply to “Does this utility belt make my ass look big”).

Be Bold
Stand out from the crowd by using your powers for good, especially in the face of uncertainty. World-changing design doesn’t happen by accident. Don that cape and mask with purpose and throw yourself headlong into the crusade for truth, meaning and creative justice with everything you’ve got.

At the end of the day, remember that with great design, comes great responsibility. With these rules firmly in place, now it’s your job to raise awareness (and funding) through engaging visual storytelling that drives people to act instead of consume.

Welcome to The Good Fight, my friend. We’re all counting on you.

While it’s easy to discount “traditional media” in a world migrating toward “new media” (see: online, mobile, social, gaming, etc.), direct mail and telemarketing still play a significant role in fundraising for non-profit organizations. Not to mention TV, radio and print ads, and even out-of-home advertising on bus shelters and billboards. What has changed is the method of response, with calls to action pointing to .com’s and Facebook to take action, learn more or make a donation.

The explosion of the number of channels doesn’t mean having to choose one off of a menu and worrying if you made the right choice. Rather, it means thinking holistically about how to develop your message to work across multiple channels, playing off one another and supporting one another. It has been shown that SEM and display advertising have a 1+1=3 effect on conversion – enhanced performance in each channel by leveraging a campaign across both.

While “cross-channel” marketing is the hot term now, “attribution” will be the next hurdle. Sure, a user made a donation after receiving an email, but did they first see an ad on TV which reminded them to open the letter they got in the mail which inspired them to check the website to learn more before going back to the email they got a week prior? Maybe. But they also could have been really touched by the email. Analytics dashboards of marketing touch points will be a fundraiser’s best friend if it isn’t yours already.

Are you doing cross-channel marketing? How has attribution helped shape your future programs?

1. Five Simple Ways to Create a Content Marketing strategy for brands
2. John Utia’s article on Responsive Web Design lists 5 “building blocks”
3. Ehren Foss offers 5 methods for optimizing your site for mobile (Sort of misses the boat in that “five” is not in the title nor are the items numbered but in fact there are FIVE methods)
4. Give It Five Minutes (A blog post providing advice for hotheads.  Not naming names, just sayin’) and…
5. Five Effortless Postures that Foster Creative Thinking

Photo by Flickr user dougwoods and used with Creative Commons license.

After reading Sandra Ordonez’s MediaShift post “7 Ways to Get Programmers to Stop Hating You,” my first thought was: Wow, good advice. My second thought was: How can we programmers get people to stop hating us? After 13+ years of working as a technologist — from a junior developer to the manager of a couple tech departments — I’ve seen first-hand that “tech hating,” to use Sandra’s phrase, is sometimes justified. Put simply: Sometimes techs deserve to be hated.

And so, I offer this list to you, fellow techies, in the name of Office Peace. Let’s show the world that the stereotype of the rude, uncommunicative programmer is as outdated as the 15″ CRT monitor issued to me at my first job. Let’s earn some love. (Note: Please don’t think that I’m holding myself up as a perfect example here — these aren’t things that I do every day, although I try, but they are good reminders for all of us.)

1. Add a new language to your resume: Human

Chances are your resume has a list of programming languages you know. As important as they are to your job, the language you use when you communicate with your co-workers is every bit as important. Being able to discuss the ins and outs of tail call optimization or the pros and cons of statically typed languages with regard to metaprogramming might make you a great programmer, but if you’re not able to communicate meaningfully and respectfully with non-technical people, you won’t be a great co-worker. And you’ll be doing yourself a disservice; how are you going to get recognized for the great work you do if you’re not able to explain that work to anyone who’s not a programmer? And how are you going to change anything about the place where you work if you’re not able to turn a complaint into a constructive suggestion? The answer is: You aren’t. So do yourself a favor and start boning up on your human-to-human interface communications.

2. Remember your operating context

Make it your business to learn more than just the technical specifications for your projects. The more you can get a sense of the big picture, the more you can understand the context within which you are expected to make your brilliant technical decisions — and the more likely it will be that those decisions are the right ones for this unique situation. When you’re able to keep the big picture in mind, you become more than just an implementer — you become a problem-solver.

3. Think like a client

No, I don’t mean change your deadlines for no reason, call yourself at 5:00 on a Friday for technical support, or forget your password to the CMS. What I do mean is to try to put yourself in your clients’ (or co-workers’) shoes. Maybe they don’t know the right terminology for everything, but they still need help; maybe they’re under time and budget constraints that you don’t know about (and that affect their decision-making); maybe they have a million things going on right now and the code you’re writing is just one of them. In short, try to remember that you may not know every variable, and that you’re not the only one with a difficult job.

Photo courtesy Anthony Will photos and used with Creative Commons license.

4. The power of positive thinking, or at least speaking

Here’s a ripped-from-the-headlines-of-my-job (well, my old job) scenario: Say your company’s client has already signed a contract with the vendor of a terrible CMS before your project starts. You can say “that was a stupid choice” and await further instructions. Or, you can say “OK, they’ve made a choice that we wouldn’t have advised them to make; now here’s how we can work within that constraint to build them a great site.” Saying “no, we can’t do that” is easy. Saying “yes, we have constraints, and here’s what we can do” is harder — and about a million times more useful.

5. Would you like a side of Value with that?

Let’s face it: Most clients (and non-technical managers) don’t care how elegant your code is as long as that code works. And while truly great programmers are a rare breed, there are plenty of “good enough” programmers who can get the job done — maybe not as well as you can, but good enough that your client can’t tell the difference. So how can you set yourself apart? Ask questions. Specifically, ask the right questions to help you figure out (and build) what your client/boss/teammates really want, as opposed to simply what they are asking for. You probably know about tools, solutions and approaches from your past work that a client (or a co-worker) has never even heard of — here’s your chance to fully leverage your technical knowledge and skills to help them meet their goals in ways they didn’t know were possible. Delivering what someone really wants is a great way to add value and differentiate yourself in a marketplace where any college kid can bang out a Drupal site and call it “programming.”

6. Get involved

Raise issues and ask questions at the beginning of a project, not when it’s too late. If technical staff aren’t typically included early on in the project process at your company, start making the case for why they should be, because it will save time, money and frustration later on. The more you can involve yourself during the early stages of a project, the more you’re setting yourself (and your co-workers) up to succeed by identifying pitfalls before you’re staring up from the bottom of one. But pointing out danger is only half the battle; use the time at the onset of a project to make suggestions, add value (see above), and demonstrate your worth to your employer. Making that killer feature work right is part of your job; suggesting a way to make it better/cheaper/faster/reusable/etc. is what will make them love you.

Photo by Flickr user asparagus_hunter and used with Creative Commons license.

7. Mind the gap

Technical people and non-technical people often suffer from a “failure to communicate” due to the ineffable nature of many tech words and terms. When a non-technical person asks you a tech-related questions, simply coming back at him or her with a string of tech-speak doesn’t actually make you look smart — it makes you look like someone with no communication skills. It pigeonholes you. It reinforces the stereotype of the unhelpful technical person who can communicate well with computers but not with humans. It makes you look less useful, and less useful employees aren’t the ones who get the best assignments — they’re the ones who get cut when times get tough. Albert Einstein said, “If you can’t explain it simply, you don’t understand it well enough.” Explaining something in a non-technical way doesn’t mean dumbing it down, it means proving that you’re smart enough to do your programming job in reverse: Take a set of technical concepts or instructions and turn them into ideas a non-technical human can understand. Brilliant!

Conclusion: Try a little tenderness

This list is a good start, but in the end if you still have the attitude that all non-technical staff are idiots, you’re never going to justify their love (and you’re going to hurt your career prospects in the process). You didn’t learn everything you know the first time you heard it, so be forgiving when your non-technical co-workers sometimes ask you the same question over and over again. It’s OK to tell them where to find the answer that you already sent them, but if that doesn’t work, look again: Maybe you’re not explaining the issue well enough so that it sticks. Practice transparency. Provide detail. Put a friendly face on the big, scary technical stuff. Remember that you are an ambassador for techs everywhere. So give us all a good name — and earn that love.

What do you think? If you’re a techie, what do you do in your job to try to keep the haters at bay? Is this list useful? If you’re non-technical, what would you add to this list? What you are you doing to help inter-office relations? Tell us in the comments.

Stop by our booth during the science fair and throughout the conference. And see Beaconfire at their best at these workshops and presentations:

• Eve Simon, whose panel at South By Southwest had a snaking line out the door, reprises her role as a design superhero. Join Eve,  Katya Issaeva of the Ad Council and Gopika Prabhu of Elefint designs as they discuss ways to overcome design villains.
• Scott Lenger will be giving a talk on Engaging Mobile Design. Scott’s ideas and ingenuity will have you making a mobile presence that will get your constituents’ forefingers itching to swipe across your website.
• Marissa Goldsmith will be conducting the workshop on Passing the Test: Landing Page Testing Made Easy.  So what if it’s a three hour workshop at the end of the conference. In this fun, exciting and productive workshop, you will leave with a test plan in hand. Dan Siroker, the CEO of Optimizely, and Elizabeth Nielsen of Feeding America will be there to make sure your plans go as planned!

Marissa and Food and Water Watch’s Jo Miles will be hosting an Data and Analytics Afternoon Tea.

If you’re going to be at NTC, let us know.  Stop by and say hello.

Twitter’s Promoted Products were developed to organically penetrate a Twitter user’s experience, in one of three ways:

• Promoted Tweets, the original paid promotion, help extend your reach on Twitter, ensuring your Tweeted message is in front of the right user at the right time.

• Promoted Accounts are designed to scale followers, adding more advocates and influencers to your community.

• Promoted Trends create awareness driving buzz and engagement at scale.

Just like any “traditional” marketing campaign, it’s important to think about the goals of a Twitter campaign – what are you trying to accomplish? Build a following? Promote an action? Raise money? Gain attention for an upcoming event or rally support for a piece of legislation?

The power of ads on Twitter lies in the power of Twitter itself: urgency, immediacy, and relevance. Twitter is proud to boast that the killing of Osama Bin Laden was broken (and confirmed) on Twitter hours before President Obama made his official address. Planned Parenthood activated an emotionally charged nation through a Promoted Tweet to get donations during the Susan G. Komen/Planned Parenthood funding controversy. As 1.3 million Tweets referencing the situation sped across the internet, Planned Parenthood’s Tweet asked for donations.

Based on a second-price auction structure, Promoted Products are bid for in a way similar to Google AdWords, but the placement you’re bidding for is the perfect follower/user based on the Twitter Interest Graph, a way to find people that are a match for your organization through demographics, past Tweets or people they follow. This ensures your Tweets aren’t wasted. And, you only pay for clicks, follows or Retweets (model dependant).

It’s compelling to think about how one platform of engaged users could be mobilized to make a difference using a platform they already use and love.

Have you thought about advertising on Twitter? What are your questions/concerns?

Not everyone actively tweets, but 100% of users are listeners, according to Twitter.  Those are your constituents, your current or future activists and donors, who see or seek your tweets and can immediately share your news, information or desired social action with their network, exponentially building the reach of your message effortlessly. If what you’re saying or asking is compelling.

How do you reach those people to begin with? How do you build your Twitter following in the first place? A few quick tips:

• Search for your organization’s name using Twitter Search and follow anyone talking about you. It’s common Twitter practice to “follow back” anyone who follows you so this is a natural way to get people to pay attention
• Search for relevant terms that surround your mission and follow people talking about that
• Follow your followers’ followers! Most likely, the people following you have friends that share similar interests, so connect with them, as well!
• Tweet using “juicy” terms that users may be searching for, and include them in your Twitter bio. SEO is important in Twitter, as well.

Once you get your audience building, Tweet with a purpose – share articles about your cause that would interest your constituents, ask how your followers feel about a certain topic, or ask them to take action  such as tweet at their congressmen, visit a certain website or make a donation. Tweet and ye shall receive followers, retweets and action. The key for marketers is making and fostering “connections” – immediate and actionable bits of information and calls to action that are seen by and shared amongst millions and millions of users every second of every day.

There are other ways to get attention for your organization including paid “promoted” products that I’ll share with you in my next post!

AFL-CIO’s new sites showcase an inclusive movement that puts the voices of working families’ front and center. The new design is more visual than its text-heavy predecessor allowing AFL-CIO’s content and calls to action the opportunity to shine.

The redesign was a result of a year-long collaboration between Beaconfire and AFL-CIO teams.  Beaconfire led the Discovery, IA, and Creative phases and then led Development with AFL-CIO’s tech team taking on about half of the implementation work. The site was deployed on the eZ Publish CMS platform.

Highlights of the new site include:

• Streamlined navigation and improved search functions help visitors find content more efficiently
• A new Action Center offers a one-stop source for supporting workers, finding local events, contacting Congress, signing petitions and mobilizing through social media
• The updated AFL-CIO Now blog allows users to comment and share via Facebook and Twitter, highlights “most popular” features and aggregates user-generated content from across the movement.
• En Español, a robust and important resource for the Spanish-speaking community,  is now more prominent and has expanded content
• New sections that spotlight younger workers and the union movement’s partnerships with low-wage and immigrant communities
• Seamless integration of popular features from the previous site such as CEO PayWatch, coverage of working family issues, and the comprehensive Your Rights at Work (in English and Spanish).

The co-development effort between the Beaconfire & AFL-CIO tech teams worked beautifully with the tech leads on both sides doing a fantastic job with overall management against schedule and budget.

Jared Schwartz, Director, Digital Strategies, AFL-CIO, says, “The organization and labor movement now has a modern, innovative online face that it can be proud of.  Thank you all so much for guiding the AFL-CIO through the redesign and congratulations to all the amazing staff at Beaconfire who helped make this happen.”

Site launches are a special time at Beaconfire, because not only do we fulfill our commitment to our clients, but also we feel a sense of sharing in their cause and their mission.  We definitely feel that way with this one.