Bram Pitoyo, Etc., Interlude, Read Better

Upcoming Speaking Engagements

Make Your Blog Read Better, at Blog World Expo 2009 -- Transmedia and Social Change, at Henry Jenkins' JOUR499

This Friday, I will be speaking at Blog World Expo 2009 on How To Make Your Blog Read Better. You’ve probably seen an earlier version of this presentation at Portland’s Beer And Blog, presented a year and-four-days ago—the weekend after my bike was stolen. This one will view practical steps to better legibility and readability of website text in light of what developments have occurred this past year.

Next Wednesday, I will be lecturing at Henry Jenkins’ Transmedia Storytelling and Entertainment class at USC on the topic of Transmedia and Social Change. I’ll talk about principles we can learn from disparate fields of study—specifically: video game, user interface design and architecture—to craft, design and built spaces that encourage players, users and inhabitants to do the right and ethical thing.

I will let you know if any of these two events will be made available via a live streaming channel or video recording.

Good night.

Standard
Bram Pitoyo, Etc., Interlude, Links, Presentation

If You Spent Most Of Your Workday Staring At The Terminal Window

—then it’s probably worth to make the letters you see in that window more legible, and the text more readable.

I’ll be doing a bring-your-own-laptop workshop at Open Source Bridge about this subject.

(And the best thing is, if this session sounds boring, there are seventy-some more interesting ones.)

Open Source Bridge is the first ever volunteer run, open source technology conference—based in the lovely Portland, Oregon. I am proud to have been a supporter (and helper at times) to this exciting initiative. You can be a supporter as well, by registering and/or booking a room, and donating (you can’t lose with a $2 minimum, in my opinion)

Buck back to the font business. What do you mean by making letters and text read better? you ask. You can read more about it here, but I’d rather give you more explanation here.

Legibility and readability is two different, but interrelated subjects. One concerns itself with how easy it is to distinguish individual letter. What makes an ‘a’ an ‘a,’ for instance? We claim that our eyes will instinctively know it when we see it, and know it when something looks wrong, but, really, what’s in an ‘a’ that makes it look like a proper ‘a’?

This will be addressed with many pretty pictures of alphabets and history.

Readability concerns the character set as a whole. For instance, a font that may possess legible characters—where every alphabet looks proper and distinguishable—may not be as readable because the reader can’t read it well, or fast enough. What’s the problem, then? Reductivist beware: it turns out that our eyes don’t read individual letters, but scan over the 1) letter’s top half, and 2) space between and inside the letters. This means that things like line length, work spacing, letterspacing (tracking), leading (line-height) and color all plays a role in deciding how effective you can read a piece of code.

This will be addressed with slightly less pretty pictures.

Finally, now that you know the principles behind what makes something read better, I will introduce you to tools to experiment and make your own. But making a whole font from scratch is tricky, you said, and I don’t really mind the current type that I’m using, except for a few characters. Not to worry, there is a trick to easily do this.

Oh, did you say that you want to make an entire pixel-based programming monospace font from scratch? That’s possible, too. This type of font is a good place to start designing from.

And we’re going to use open source software and free tools to do this. Bring your laptop. I’ll see you there.

Standard
Bram Pitoyo, Interlude, Links, Read Better, typography

Making Oakhazelnut.com Site Map Read Better

Oakhazelnut.com Sitemap - before and after

Perhaps a site map is one of the more rarely mentioned elements of a blog or website. Its justifications are many: for both SEO and accessibility purposes. But if they are important, then they are important enough to be read, and to be read well.

The good news: a site map is fairly easy to style. Its requirement to be machine-readable means that it has a very simple structure.

The bad news: it’s usually coded as a plain list and remains presented like this:

    Category A

  • Post 1
  • Post 2
  • Post 3
    Category B

  • Post 4
  • Post 5
  • Post 6

And if you’re using a plugin, then adding classes to individual element is rather out of the question.

Defining Our Problem

Right away, there are several issues around the way this hierarchy works that we can address. The assumption that “we think in list” is correct (ever wonder why Diggable posts are always numbered?) but while bullets help organize our thought, they must be well done or risk being unscannable to the eye. Here was what Oakhazelnut.com’s looked like.

Oakhazelnut Sitemap - before

    Note how:

  • The only difference between first level lists (the one marked ‘Category’) and second-level ones (the entries) are bold highlighting.
  • Type sizes are the same (while the reader’s visual priorities aren’t. We tend to intuitively scan categories first, then look at individual posts within that category second.)
  • Categories and entries are uniformly spaced. In body text, where long-length reading occurs continuously, maintaining a consistent line-height rhythm is a good practice. But when reading occurs in chunks, better spacing to distinguish information is expressly needed.
  • The behavior of underlining hovered links is consistent with how the rest of the site operates. But when lists are long, we need another device to show our location in a page at all times. Breadcrumb navigation that applications like Apple’s Finder has is one such device.

the path bar

Determining Our Workplan

    I proposed several solutions from knowing these issues:

  • Categories and entries need to be differentiated enough inter and intra-categorically (between and amongst each other) by ways of color, size, spacing and typography. The goal is to allow our eye to scan through the sitemap as quickly as possible to get to the entry we want, but not so fast as to miss things along the way. This problem is further amplified when we use the scrollwheel/trackpad/two-finger gesture to move about the page. Because putting more differentiating element means more comprehension to the eye, but also more distraction, this is a tricky problem to handle.
  • Create a device to aid navigation and let readers know where they are located in the long, big sitemap of lists (isn’t it ironic?) at all times.
  • Break site design and behavior conventions when it aids comprehension, but never change more than a few elements to keep consistency.
  • If possible, change the sitemap generator plugin so it outputs in columns

Getting Into The Code

Inspecting the page through WebKit’s Inspector (or hit ‘View Source’ from your browser menu) yielded this result:

<div class="ddsg-wrapper">

 <h2>Pages</h2>
    <ul>
      <li>About</li>
      <li>Contact</li>
      <li>Services</li>
      <li>Services</li>
    </ul>

 <h2>Posts</h2>

    <ul>

      <li>Category 1
        <li>Post 1</li>
        <li>Post 2</li>
        <li>Post 3</li>
        <li>...</li>
      <li/>

      <li>Category 2
        <li>Post 4</li>
        <li>Post 5</li>
        <li>Post 6</li>
        <li>...</li>
      <li/>

      <li>Category W
        <li>Post X</li>
        <li>Post Y</li>
        <li>Post Z</li>
        <li>...</li>
      <li/>

    </ul>

    So the CSS elements that we have to style are:

  • h2
    Blog categories (“Pages” or “Posts”)
  • ul li
    Page name and post categories (“About,” “Contact,” “Cyborg Anthropology,” “Ambient Findability,” etc.)
  • ul li ul li
    Post titles (“Hazelnut Tech Talk Episode 4 | The CoLab Experience,” etc.)

The Work

Here is the CSS code that I wrote, along with its translation:

#blog .entry .ddsg wrapper h2 {
This is the blog categories

    font-size: 19px;
    The size matches Oakhazelnut’s blog.

    padding-top: 25px;
    padding-left: 0;
    margin-left: 10px;
    Put vertical and horizontal spacing to distinguish it from the rest of the entry.

    text-transform: uppercase;
    Capitalizing letters are another means of headline differentiation.

}

#blog .entry .ddsg wrapper ul li {
This is the page names and post categories.

    font-size: 15px;
    Note the smaller type size.

    display: block;
    This will make sure that the list descends downward.

    list-style: none;
    The list (and all lists preceeding it) will not be bulleted, you’ll see why below.

    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 13px;
    padding-left: 12px;
    margin-top: 10px;
    More spacing is put in to distinguish the post categories from their parents.

    background-color: #f8fff5;
    This is the reason why the list wasn’t bulleted. The post categories will be “boxed” in a light-green background color to more elegantly distinguish it from the rest of the page. Had I used a bulleted list, the hierarchy will be confusing.

}

#blog .entry .ddsg wrapper ul li ul li {
This is the post titles.

    font-size: 11px;
    This type size isn’t only smaller. It’s also consistent with Oakhazelnut.com’s body text.

    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-top: 10px;
    Note how I reduced the top and bottom padding when compared to the post categories above. This is because smaller type sizes naturally require less space between them

    background-color: #f8fff5;
    This is the reason why the list wasn’t bulleted. The post categories will be “boxed” in a light-green background color to more elegantly distinguish it from the rest of the page. Had I used a bulleted list, the hierarchy will be confusing.

}

So far, so good. The text hierarchy is properly established in terms of type styles, sizes and spacing.

But I also said above that one of my goals was to:

  • Create a device to aid navigation and let readers know where they are located in the long, big sitemap of lists (isn’t it ironic?) at all times.
  • The solution here is to have two devices of differentiation:

    Background Color

    #blog .entry .ddsg wrapper ul li {
        background-color: #f8fff5;
    }

    This is the reason why the list wasn’t bulleted. The post categories will be “boxed” in a light-green background color to subtly distinguish it from the rest of the page. Had I used a bulleted list, the hierarchy will be confusing.

    #blog .entry .ddsg-wrapper ul li:hover {
        background-color: #edffe6;
    }

    When the mouse hovers over the post category box, it will turn into a darker shade of green.

    #blog .entry .ddsg-wrapper ul li:hover ul li:hover {
        background-color: #dbffcc;
    }

    When the mouse hovers over individual posts, it will turn into an even darker shade of green.

    The Result:

    Click here to see it in full.

    Wishlist

      I would’ve loved to tackle these goals if I had enough chops to get into the sitemap generator plugin and hack it:

    • Post title ordering, either alphabetical or by post year, month and date
    • A mini table of content that, much like the site map, automatically updates every time a new entry or category is added
    • Hide certain parts of the date when not needed. For example, if I could sort the post titles by month, then I would only need to display the numerical date rather than the full text.
    • Columns, for more sophisticated organization (Intel, Oracle, Apple and Business Objects have done this)

    Have More Questions?

    Standard
    Bram Pitoyo, Etc., Interlude, Links, Portland Creative/Tech Event Review

    So, You Want To Grow A Community? The Big Picture

    As we look forward to a new year for Portland’s thriving technology and creative communities, I thought I’d end this one with a big picture overview of why even the smallest community events, planned by people like you, could contribute to the city’s social and economic prosperity.

    This is the fifth of a five-part series.

    1. Introduction: why Portland is the perfect place to start, and what to do about it
    2. Plan: write a goal statement that demonstrates depth and details
    3. Manage: help your sponsors use their time wisely
    4. Measure: continue to engage after and throughout the event’s lifecycle by using a social intelligence dashboard
    5. The Big Picture: examining Portland’s capacity for creativity and innovation, making a case for more grassroots initiatives (you are here)

    Where does Portland rank in capacity for innovation and creativity? Where does it succeed, where does it lack? And how might they be enhanced by grassroots action?

    Landry, Bianchini, Ebert, Gnad, & Kunzmann (1996) pr-posed fourteen mark of a creative city, all of which play an important role in how successful can a creative, innovative and grassroots initiative survive and prosper. Portland exceeded this metric in several aspects, but fell behind in another.

    I chose to use their measures because it focuses on more ‘soft’ factors (the human–organizations–government connection) rather than ‘hard’ ones (infrastructure availability, cost.)

    1. Hard factors and facilities

    The quantity, quality, variety, accessibility of a combination of facilities are important for encouraging creative processes in a city. (p. 10)

    Portland has its State University and Health State University research center located right in its heart, a small but burgeoning metro library system and education programs that interacts with the world around it. All of which helps transform information into knowledge. Portland State University’s Senior Capstone program, one that gives its students a chance to apply their learning to work on a community project, coveted America directly’s Best Colleges Programs to Look For in both 2005 and 2006 (Portland State University, 2006)

    2. History

    On the one hand it can inspire. On the other hand it can become a burden, a weight, (Portland State University, 2006)something that holds a city back. (p. 12)

    Perhaps more true in reputation and perception than anything else, Portland had been casually called the place with a creative, idiosyncratic mind and soul of its own. The familial and sharing sensibilities left from the 60’s are still evident, though the danger of attribution of stereotyping Portland as a “tiny village where everybody loves each other” still remains.

    3. Individuals and open communications

    Innovative and creative projects are generally driven by committed, even obsessed, original and sometimes eccentric individuals. (p. 13)

    Portland positively sanctioned creative and innovative deviance of its citizens. Not only is this evident in the wealth of fringe events that many such individuals participate outside of their workdays (the naked bike ride, Pedal The Bridge, etc.) Portland Development Commission specifically dedicated the Design and Creative Services as one of its target industry (Portland Development Commision, 2002)

    4. Networking
    The network between composers, artists, art galleries, collectors has created not only benefits for the participants, but also for the city which now has an important per-centage of jobs in the cultural industries as well as image advantages from the ‘public good’ that this grouping has created. (p. 15)

    For a city of a relatively small size and close acquaintances, its design and technology sector had surprisingly wide arrays of associations and alliances, old and new alike, from PADA (Port-land Art Dealers Association) and SAO (Software Association of Oregon), to POSSE (Portland Open Source Software Entre-preneurs,) The Linux Foundation and Legion of Tech.

    5. Organizational capacity
    […] elements of creativity and innovation need to run throughout the city’s decision making processes be that public, private or voluntary institutions or be they actors in the economic, social, cultural or environmental field. (p. 16)

    Unfortunately, what Portland has in networking and open communication, it somewhat lacks in this factor. Case in point: Portland Development Commision’s Creative Services Center.

    6. The recognition of a crisis or challenge to be solved
    It is thus more difficult to generate innovation in situa-tions that are perceived to be satisfactory. (p. 17)

    Many small creative and technology communities in Portland started with relatively little influence and power, and thus be-came innovative in their initiatives. In growing over the months with a more steady base of participants, they quickly becomes comfortable and, often, complacent. This is often evident in the fact that many groups are “clique”-y.

    7. Catalyst events and organizations
    Catalyst events and catalyst organisations are one way of creating opportunities for people with different perspec-tives to come together and to share ideas. (p. 17)

    The mark represents one of the key pillars of this project: the bridge between the creative and the technology communi-ties. Currently, some events of this nature are present (and more is needed.) But this brings a clear need for the establishment of an organization that specifically addresses this issue, either from within the city (working with PDC, for instance) or in-dependently. This organization will serve as a voicebox for opinions and ideas from grassroots initiatives and individuals.

    8. Creative spaces

    A creative city requires land and buildings at affordable prices […] Cheap spaces reduce financial risk and therefore encourage experiment… (p. 18)

    Compared to nine other creative cities around the US, like San Francisco, Austin and Denver, the Greater Portland area consis-tently ranks low in cost of apartment rent, Class A office space, total industrial space cost and median housing price (Greenlight Greater Portland, 2008, p. 25)

    One other factor that’s equally as, if not more, important, is the availability of coworking space: a community-managed col-laborative work spaces for independent knowledge workers, who often needs non-traditional office space away from their homes. This can not only resolve their basic need for space for less money than a traditional office space, but also create a new work style more conducive to creativity and innovation called “coworking.” These are evident in Japan and Europe in the form of Art and Design Centers.

    Old warehouse and textile factory that are no longer used were utilized to create the Kanazawa Citizen’s Art Center […] these facilities are designed to be used freely “24 hours a day, 365 days a year” […] The buildings were remodeled to serve as space for performance as well as practice, and di-rectors of these facilities were chosen from ordinary citizens. (Sasaki, 2005)

    While a center in the true sense of the word is currently lacking, Portland possesses many coworking spaces for its size, whether they’re open/rent-anytime like Cubespace, Souk, Portland Innovation Center and ActivSpace, or closed/reservation-only, like LessDistracted and TENPOD.

    9. Breaking the rules

    …a more radical democratic approach to [incorporating creativity into city management] could turn this potential liability into an asset by creating new channels for a flow of creative ideas from the grassroots to city government. (p. 19)

    Innovation means nothing if the desire to adopt it doesn’t come from the top-down. Mayor-elect Sam Adams dedication to supporting the creative, artistic and cultural initiatives are evident in his appointing of representative to chair a Coordinating Committee in the Regional Creative Capacity Strategy Project. The project aims to “build and support a sustainable creative community through prioritized strategies with clear costs and achievable ways to fund them” and ultimately make “creativity and innovation a regional value.” It serves to address three issues: expansion/extension of access to creative tools across the state, support of existing organizations and growth/advocacy of the creative community in general. Perhaps most importantly, the Creative Capacity Strategy team is composed of nonpartisan citizens.

    By interacting directly with community members, the government unclogs the flow of creative ideas from the grassroots by removing bureaucracy. Unfortunately, there is no research-based evidence from this factor.

    10. Bringing in outsider opinion

    […] immigrants, if their contribution is seen positively and is allowed to flourish rather than engendering a xenophobic response [can bring in outside opinion and influence] (p. 20)

    Portland has seen increased influx of immigrants from across the US who seek to escape from rising cost as well as environment detriment to creativity. Citizens are usually more than happy to welcome them, and in this sense, Portland fits the definition well. But anecdotal evidences indicate that many moves here for similar reasons. This means that Portland attract likeminded individuals, with relatively few difference in mindsets, opinions and backgrounds. This means that a wide diversity necessary for any creative city to flourish in long term may be reduced.

    In addition to this, Portland’s predominantly white demographic presents another challenge to overcome.

    11. Attitudes toward risk and failure

    […] failure may contain the seeds of future success if it is analysed and not automatically punished […] Success, on the other hand, can lead to complacency. (p. 21)

    One of the ways to encourage experimentation (and thus inno-vation) and better attitude towards risk is through the planning, development and launching of city and statewide pilot projects. Portland, like many other cities, has numerous. To encourage developments of projects, it will be critical to built a convinc-ing, evidence-based argument to stakeholders, using tools like the Toolkit Citizen Participation.

    12. Approval and recognition

    Innovation is risky and can be scary, as there are few guidelines to assess whether projects are being successful. For this reason, mechanisms to show approval and recog-nition are essential. (p. 22)

    These mechanisms can best be demonstrated by citywide de-sign, architecture and art competitions. Currently, not many of these exist locally. The only notable example is the Portland Courtyard Housing Design Competition.

    13. Self-reliance

    […] it is important to encourage internally generated ideas, in order to motivate people as well as a degree of lo-cal self-reliance and independence. (p. 23)

    A report from groups conducted in Portland in February 23 and 24, 2004 by Impresa Inc. and Coletta & Company stated that “coupled with the creative climate is Portland’s independent, entrepreneurial climate. ‘People here are independent maver-icks, not part of the machine.’” and ECONorthwest’s research for PDC showed that 41% of the city’s creative services indus-try workers do so in non-employee firms, most of them as self-employed freelancers (Portland Development Commision, 2002). In addition to this, Portland also has the highest per-centage of small businesses per capita (Impresa, Inc., 2004)

    14. Paradigm shifts

    Taken seriously, the holistic, overarching concept of sustainability has implications for every aspect of urban life – [providing a] historic break at every level. (p. 24)

    Much like what the concept of sustainability has brought to the consumer society, the ultimate goal of this project is for creativity and innovation to influence every area of urban life it touches. The challenge is to improve factors that the city lacks (diversity of internal and external opinions, recognition of problem among citizens, organization capacity) and ultimately use what it already has to its advantage (forming alliances between disparate groups of creatives through formalized organizations or informal events.)

    Looking for the bibliography?

    I’m still continually revising the paper. It’s going to be available shortly as a part of the next one or two posts.

    Happy new year!

    Standard
    Etc., Interlude, Links, Portland Creative/Tech Event Review

    So, You Want To Grow A Community? Help Your Sponsors Use Their Time Wisely

    This is the fourth of a five-part series of a guide that gives you the tools to plan, manage and measure a great technology or creative event—then demonstrate that it can not only impact your community, but also the industry sector surrounding that community, and ultimately, the city-at-large.

    This guide is primarily written in the context of my experience living through Portland’s thriving technology and creative communities, and is organized in five sections:

    1. Introduction: why Portland is the perfect place to start, and what to do about it
    2. Plan: write a goal statement that demonstrates depth and details
    3. Manage: help your sponsors use their time wisely (you are here)
    4. Measure: continue to engage after and throughout the event’s lifecycle by using a social intelligence dashboard
    5. The Big Picture: examining Portland’s capacity for creativity and innovation, making a case for more grassroots initiatives

    Often, even the most generous and perceptive sponsors are dumbfounded when faced with the prospect of speaking to the event’s audience. What, for instance, should they talk about in what little airtime they have?

    In this section, I’m going to switch my gears and speak from a sponsor’s point of view.

    The answer is threefold. You, the sponsor, should know your:

    1. Sponsorship objective
    2. Company’s background, and
    3. Event expectation

    Before you start, it helps to think of this speaking engagement as a pitch. Remember: your company has paid for this, so it is your responsibility to make your money’s worth.

    The first step to building a successful pitch is to know why you or your company, sponsor this event. My personal experience, unfortunately, says otherwise. More often than not, a speaker would say something along the lines of:

    Hi. My name is [your name here.] I’m a brand developer at [this company.] We’re a full-service advertising agency with a strong PR front. And we’re trying to, you know, engage in this ‘PR 2.0’ movement. So talk to me if you’re interested. Thanks.

    This is fine if you’re a big company with a nearly limitless budget that is able to sponsor any event without breaking the bank. But you’re not them, and this event may be your only chance to get the words out this months.

    What should you do? First, know your sponsorship objective.

    For instance:

    • If your company is seeking to be the next Facebook, then your objective for sponsoring an event like Lunch 2.0, a monthly informal lunch for tech professionals, is probably to recruit developers and talents for your next big feature release
    • If your company is a design agency that wants to expand into the interactive and social media area, you probably want to discover talents and talk to as many people as possible. Maybe not necessarily to recruit them, but to see which one has the best fit.

    Knowing, for example, that your objective is to recruit, the speech now could say:

    Hi. My name is [your name here], a brand developer at [this company.] We’re a full-service advertising agency with a strong PR front, who is looking to expand into web application development. And we need talent. If you’re a Ruby on Rails, Java or PHP developers, we want to hire you. Talk to me at lunch.

    Better.

    The second step is to know your company’s background.

    Mind you, aside from the fact that you’ll be asked questions relating to this when you talk to people individually, everyone will say that her company is, in fact, unique, and occupies the number 1 spot in its category.

    So you need to change your angle.

    If your target is a talented group of developers, you must convince them as to the reason why they should work at your company. Why is your company unique? What would compel them to work there? Is it about the perks? The work environment? The in-house beer tap in the breakroom? The answer can differ wildly, but it must be there. It’s simply not enough to say that you’re “the market leader.”

    Knowing this, the speech now could say:

    Hi. My name is [your name here,] a brand developer at [this company.] You may know us from our work with Microsoft Silverlight and Nintendo Big Brain Academy. We’re a digital agency that are looking to expand into web application development. We’re searching for people who “get it,” and can get us up to speed in this wild frontier: developers, designers, researchers and anthropologists. We like to surround ourselves with smart, rock star developers. If you’re not getting proper recognition, talk to me during lunch. Thanks!

    Again, better.

    The third step is to know the event expectation.

    Is it big or small, formal or informal? Where is the venue? Is it standing room only, sit-down, or a mix of both? Who will be there? Designers, developers, PR people, a mix of any of the above?

    My experience: standing room facilitates more rapid interactions (on a Lunch 2.0 session at Vidoop, I talked to about 20 people over the course of two hours) but is also more chaotic. Conversely, a sit-down venue means slower pace, but is in dan-ger of getting stagnant quicker.

    Your speech should consider all these factors. In smaller venue, you could afford being more intimate and allow some interaction. In larger ones, you must be dynamic and move through quickly.

    Here is an example of speech for a smaller venue:

    Hi. My name is [your name here.] I’m a brand developer at [this company,] an agency who works with Microsoft Silverlight and Nintendo Big Brain Academy, but serve beer at the end of ever week and provide endless bowl of M&M’s. How many of you would consider yourself rock star developers? We’re a digital ad agency who wants you to get us smart and up to speed on web application development. And we’re hiring. So come talk to me at lunch if you’re a developer, designer, researcher or anthropologist. Thanks.”

    And a speech for bigger venue:

    Hi. I’m [your name here.] I’m a brand developer for a digital agency in town called [this company.] We usually do traditional interactive works around the web, like the ones for Microsoft Silverlight and Nintendo Big Brain Academy, but we decided to come here because we hear that all of you are smart about web application developments. We want you to get us up to speed on that. We’re hiring developers, designers, researchers and anthropologist. Like you, we like to be surrounded by the very smartest people. Talk to me if this sounds like you. Thanks!”

    Much better.

    Remember, the three rules for creating a better sponsor speech are to know your:

    1. Sponsorship objective
    2. Company’s background, and
    3. Event expectation

    With some planning and knowledge beforehand, both the attendees and your company will benefit from it. Now if only there is a way to track all the information surrounding the event…

    Standard
    Etc., Interlude, Links, Portland Creative/Tech Event Review

    Building Social Intelligence Dashboard: A Real Time Online Content Analysis Tool

    This is the third of a five-part series of a guide that gives you the tools to plan, manage and measure a great technology or creative event—then demonstrate that it can not only impact your community, but also the industry sector surrounding that community, and ultimately, the city-at-large.

    This guide is primarily written in the context of my experience living through Portland’s thriving technology and creative communities, and is organized in five sections:

    1. Introduction: why Portland is the perfect place to start, and what to do about it
    2. Plan: write a goal statement that demonstrates depth and details
    3. Manage: help your sponsors use their time wisely
    4. Measure: continue to engage after and throughout the event’s lifecycle by using a social intelligence dashboard (you are here)
    5. The Big Picture: examining Portland’s capacity for creativity and innovation, making a case for more grassroots initiatives

    This post is, in essence, a combination of methods I learned from:

    In her book Internet Marketing, Carolyn Siegel wrote that online analysis will “lead to predictive accuracy in spotting gaps in a market, product usage trends and commercial opportunities.” In fact, “Content analysis software is already used online to analyze word bursts, words or phrases that appear frequently in online communications.”

    Today, these services are available as integrated packages like Radian6, Social Radar, SM2, Brandwatch, mediasphere360, Trucast, Cymfony, Umbria and Nielsen BuzzMetrics. These packages are recommended if you’re going to work with a medium to large-sized client.

    But what if your client isn’t as large as you hope they could be, or what if the client is, in fact, you, and you just want to see how conversations can be analyzed online, in real-time, or to simply see what the internet has been talking about you, that you might not know before? You may be surprised with the result.

    (And, holy Batman, the list of software packages above sure sounds daunting.)

    Anyway, it turned out that with a combination of various technology that are already available today, you can build an environment that’s nearly as good as paid system—for free. Sure, it’s going to take a lot of research, but you’re going to learn it in small steps, from scratch. And, if you ask me, small steps are the best way to do it. For simplicity’s sake, I’m going to name this tool like Marshall, Amber, Dawn and Justin called it: Social Intelligence Dashboard.

    Establish our case

    Let’s say that I have a bottled water that I want to launch a website for. Let’s call it Steamboat Springwater. Steamboat Springwater is different from every bottled water product out there, because it’s going to be sold in recyclable tetra pak packages, and because it’s going to emphasize the fact that it comes from a single spring source in none other than Springwater, Oregon.

    Determine what information we need

    If I’m going to assemble a social intelligence dashboard for this product, then, where should I start? First of all, we know that there are several kinds of information that we need to gather. For instance:

    • What is our industry? What is the sandbox that we choose to play in?
    • What are trends that has been happening in this industry?
    • Who are our competitors?
    • What are they doing: in the news, on the conversation streams, and at events around the world?
    • Who are influentials and opinion leaders in our field?
    • What do they have to say about the industry, the competitor, and us?
    • Where do our audience live, work and play online?
    • What are they saying about us?

    As you probably know, conversations about all these subject can happen in many places:

    • Blogs
    • Forums
    • Social media channels (Twitter, Facebook and FriendFeed, just to name a very few)
    • Chatrooms, which probably couldn’t be monitored easily

    Get to know the workflow and tools

    Our information analysis process will go through this flow:

    • Get
    • Filter
    • Access

    To get this information, we’re going to use several tools:

    To filter, we’re going to use:

    And to access, we’re going to use an RSS reader like Netvibes, Pageflakes, Google. I chose to follow the example of experts I mentioned above and use Netvibes. Generally, I try to use online, Dashboard-style newsreaders, so I’m not tied to my computer, and I have a Bird’s eye view of see the information.

    Netvibes vs. Newsfire

    So, in summary, we’re going to research the industry, competitor and opinion leaders for our Steamboat Springwater product.

    Let’s get to it.

    Get

    Step 1: Gather

    Punch in industry and product related terms through various search engines to look for information sources (news sites and blogs) that we can subscribe to. In the example below, I use a very general term, “bottled water.” But as the rule says, the more specific you can make it, the better.

    Searching for the term “bottled water” on search engines BlogCatalog, Technorati, Google Blog Search and IceRocket

    Also, search for the same terms on social bookmarking sites.

    Searching for the term “bottled water” on social bookmarking websites Magnolia, StumbleUpon, delicious, digg and reddit

    And don’t forget to track conversation on social media channels like Twitter, by punching the same terms (“bottled water,” “Evian,” “Perrier,” “Steamboat Springwater”) on search engines like Twitter search.

    Step 2: Analyze

    This is the analytical part of the job. Find as many blogs and news sites that has high credibility (ie. often mentioned, cited and linked by other sites) as you can, and collect their RSS Feed.

    There are nuances to this step. For instance, this is the steps I learned from Marshall Kirkpatrick in his presentation at WordCamp Portland:

    1. Search for relevant blogs and news sites
    2. Collect their RSS feeds
    3. Aggregate them with Yahoo!Pipes
    4. Filter them through AideRSS
    5. Let AideRSS go for a period of time and see ones that are ranked higher
    6. Pick the higher ranking ones
    7. Repeat step 3

    Filter

    Step 3: Aggregate

    Grab the RSS feeds of these relevant blogs and news sites. Copy–Paste their URLs to Yahoo!Pipes, then generate a new Pipe and grab its RSS feeds. These are my steps.

    Grabbing an RSS from a blog, feeding it to Yahoo!Pipes, generating a new pipe and subscribing to it

    Step 4: Dashboard

    After that, we’ll Paste the RSS feeds to Netvibes ‘Add Content’ field, and drag the resulting Feed into an open area in Netvibes to create a Widget.

    Adding newly created pipe RSS feed to Netvibes and making it into a widget

    Step 5: Repeat

    Collect more blogs, filter more things and add more widgets to your dashboard!

    Tips

    Categorize the blogs you collect into several categories, and generate Yahoo!Pipes and Netvibes widget thusly. For example, in our Steamboat Springwater online content analysis research, we may have 4 categories that we need to analyze:

    • Industry (trends, landscape, news)
    • Thought Leader (opinions)
    • Competitors (press releases)
    • Vanity (what are they saying about us?)

    The method that I outlined above only covers searches for the Industry and Thought Leader categories.

    To do a search on Competitor

    Simply change your search term from “bottled water” to, depending on your market research (you didn’t forget to do it, right?), “Evian,” “Perrier,” “Aquafina,” and so on. Also, don’t forget to subscribe to the RSS of their corporate site. Usually, the feeds are located on their “News,” “Events” or “Press” section.

    To do a Vanity search on yourself

    Change your search terms from “bottled water” on all of those search engines to “Steamboat Springwater.” The rest of the steps are identical.

    The result

    Itching to see what the actual Social Intelligence dashboard actually look like? Since “Steamboat Springwater” is a fictional product, I’ve created, using a similar method, two dashboards for two events that I’m managing the communities of: Refresh Portland and CyborgCamp.

    Here’s Refresh Portland’s Social Intelligence dashboard, and here’s CyborgCamp’s.

    Access

    Now that you have all the data that you need in your hand, you need to monitor and analyze them for breaking news, and participate in conversations that your brand will benefit from.

    Monitor and analyze

    See that the plastic bottles are topping the list of biggest environmental waste on an information site, or a blog somewhere? Post it to your company’s blog. Hear that your competitors are launching a new ad campaign touting the taste of their water? Go against the trend and launch something viral.

    Participate

    See a blog post that rants about how plastic water bottles are polluting? Post a comment about the fact that Steamboat Springwater is packaged in fully recyclable Tetra Pak. Hear somebody on Twitter say that they’re having trouble getting bottled water where they live? Offer your water’s affordable delivery program two minutes after they post the message.

    Ultimately: why should I use something online?

    Because you’ll get up to the minute data, and thus can respond to them accordingly. The maximum delay of a feed is about an hour, and the minimum is usually several seconds after the article, post or news item is published. Compare this with your PR or ad agency’s reports and news clippings. Sure, they may do something bi-weekly, or even weekly if you’re lucky. But they won’t know that Evian is opening up a new company right by where your main natural purifying facility is next Monday, or that everyone in the industry is abandoning the plastic bottled water in favor of ones that are made from corn, starting next month.

    Up to the minute competitive informations, assembled through an online content analysis tool like the Social Intelligence Dashboard, will allow your brand to gain a competitive advantage with the ability to respond to all situation swiftly. It’ll also allow you to keep track of your social media presence—and, if you ask me, that’s pretty important.

    Standard
    Etc., Interlude, Links, Portland Creative/Tech Event Review

    So, You Want To Grow A Community? Plan Your Event By Writing A Goal Statement That Demonstrates Depth and Details

    This is the second of a five (or six) part series of a guide that gives you the tools to plan, manage and measure a great technology or creative event—then demonstrate that it can not only impact your community, but also the industry sector surrounding that community, and ultimately, the city-at-large.

    This guide is primarily written in the context of my experience living through Portland’s thriving technology and creative communities, and is organized in five sections:

    1. Introduction: why Portland is the perfect place to start, and what to do about it
    2. Plan: write a goal statement that demonstrates depth and details (you are here)
    3. Manage: help your sponsors use their time wisely
    4. Measure: continue to engage after and throughout the event’s lifecycle by using a social intelligence dashboard
    5. The Big Picture: examining Portland’s capacity for creativity and innovation, making a case for more grassroots initiatives

    In the end, I’ll have a downloadable, nicely designed PDF for you to look at.

    (Note that the title and content of the chapter is in a constant state of revision, and so may change between now and the final version.)

    Part two, here we go.


    Plan Your Event By Writing A Goal Statement That Demonstrates Depth and Details

    Unless you decide to host an event because you have nothing else to do that month, every event you plan must have a goal and objective in mind.

    For example, I like planning events that share the same spirit with Legion of Tech’s: free, volunteer run and community oriented. But I also know that my time and resource is limited. My partner’s, sponsor’s and attendee’s time and resource also are.

    To respect them, I must make sure that the event have clear enough of a value proposition so everyone knows if it is right to help out with, give money to, or spend time with, respectively. This is where the importance of a clear goal statement becomes clear.

    A goal statement is exactly what the name implies: a short document contains the things you want to see happen with your event. It can be general or detailed (the latter is generally better, though not always.)

    For example, here is a short, informal goal statement from Refreshing Cities:

    Refresh is a community of designers and developers working to refresh the creative, technical, and professional culture of New Media endeavors in their areas. Promoting design, technology, usability, and standards.

    The Refresh Manifesto

    • Let’s Gather Great Minds
    • Let’s Share All Of Our Knowledge
    • Let’s All Grow And Learn
    • Let’s Promote Local Talent
    • Let’s Be More Than We Think Can Be
    • Let’s Make Our Cities Better

    (Source: http://refreshingcities.org)

    This statement is succinct, memorable, and provides an idea of the people behind and attending the event, but does not answer the question that should come before all else: what is the event about? With this said, this statement is vague for a reason. ‘Refreshing Cities’ is a name that can be used anywhere freely to indicate the organizer’s participation in the loosely connected collective.

    A more specific goal statement may look like this:

    We are advocates, developers, and Portlanders making the world better with open source technology.

    Open Source Bridge will bring together the diverse tech communities of the greater Portland area and showcase our unique and thriving open source environment. We will show how well Portland does open source and share our best practices for development, community and connectedness with the rest of the world.

    We’re setting out to change the structure of conference planning: asking interested people to come together at a Town Hall meeting, and share their collective experience and wisdom. Following the lead of the Linux Plumbers Conference, we’re enlisting curators for our conference sessions, planning mini-confs for critical topics and including unconference sessions. The focus will always be on increasing interaction between participants and engaging everyone in the content.

    (Source: http://bridgepdx.org/about)

    Note how this statement explains exactly the nature of the event itself as well as its planning process. It identifies not only the planners, but also their goal for planning. These things will help potential sponsors and volunteers identify whether the event is right for them.

    The answer to the question “what is the event about” is implied because the idea, while minted carefully, is still open to interpretation at the micro level (ie. The conference name and intent were established, but the timeline and details were not.)

    BarCamp, an ‘unconference’ concept that had been adopted internationally many times, took an even more detailed approach:

    BarCamp: What’s this all about?

    COMMUNITY AND INFORMATION
    BarCamp is an ad-hoc unconference born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos and interaction from attendees.

    Anyone with something to contribute or with the desire to learn is welcome and invited to join.

    When you come, be prepared to share with barcampers.
    When you leave, be prepared to share it with the world.

    NO SPECTATORS, ONLY PARTICIPANTS
    Attendees must give a demo, a session, or help with one, or otherwise volunteer / contribute in some way to support the event. All presentations are scheduled the day they happen. Prepare in advance, but come early to get a slot on the wall. The people present at the event will select the demos or presentations they want to see.

    Presenters are responsible for making sure that notes/slides/audio/video of their presentations are published on the web for the benefit of all and those who can’t be present.

    BARCAMP FOR EVERYONE
    Contact us if you have any questions or want to participate. Let us know if you’re hosting your own. BarCamp is about support as much as it is about information.

    (Source: http://barcamp.org/TheRulesOfBarCamp)

    Note how the BarCamp goal statement:

    • Answers the question “what is the event about” right away (“BarCamp is an ad-hoc unconference”) then move to the ground rules (“All presentations are scheduled the day they happen”)
    • Explains in specific terms what will happen in the event (“discussions, demos and interaction”)
    • Identifies the audience (“anyone with something to contribute”), then establishes a social contract by asking them to contribute something (“Attendees must give a demo”)
    • Lays out the benefits of the event, rather than the features (“share and learn in an open environment”)

    Two subjects missing from the statement are information about the planners and their intents. This is understandable, since, much like Refreshing Cities, BarCamp is a name that one can take, modify, and establish a chapter of anywhere for free, as long as the structure remain the same.

    Let’s sum up. A good goal statement:

    1. Is specific

    It says what exactly will happen in the event and leaves no room for guesswork.
    For example, if you’re planning a networking lunch for interactive designers from advertising agencies and software development studio around Portland, so they can plan on working on a collaborative project together, don’t skimp and say “let’s get together and code something.” Be specific, so you know that the people who are going to be there are the right people (otherwise, they will save their time by not attending in the first place.)

    2. Establishes social contract

    In addition to laying out details, you must also ask your attendee to bring something to the table, and promise to provide something back.

    For example, they may bring current projects they worked on, questions they may have, curiosities, commitment to learn from each others, food, an open mind, anything. You may provide the space, food, centralized work table, wireless network, speakers, and so on. The kinds of things you expect and commit does not matter. What matters is that you set an agreement and clearly say, “If we’ll have this, you’ll bring those.” A social contract, even an informal one, helps set everyone’s expectation to the same level and could save you the trouble of dealing with group loafers.

    3. Lays out benefits

    It is very easy for an organizer to write out all the features of her event. For instance:

    • World renowned speakers
    • Invite to beta applications
    • Strong wifi signals.

    The problem is, any event you plan will only matter if it benefits you, your audience and the sponsors. Switching gears from describing features to describing benefits can help. Think in terms of their needs. Change your language from saying “here’s what we have” to “here’s what you’ll get out of this”; then start writing.

    For example:

    • Learn the principles of identity design from Jeff Fisher, a longtime, award-winning Portland designer who has been recognized by StartupNation as one of the nation’s top businesses in its annual Home-Based 100 competition in the category of Most Slacker-Friendly.
    • Make your software work faster with a free update
    • Broadcast fearlessly with a high-band wireless connectivity

    A clear goal statement will not only provide a good base for your entire planning process, it will also help you manage your sponsors wisely and measure your event engagement online more easily.

    Standard