View Source RSS Feed View Source RSS Feed http://www.oaktree.com/blog.aspx http://backend.userland.com/rss Considering the ROI of social media <p>Increasingly, the buzz is that every company--regardless of its industry focus--is a <em>media</em> company*. That reflects what we are hearing from clients as well. In working with a City of Portland agency whose focus is urban development, a company executive described the agency as a <em>media-producing organization</em>. That's a change from the recent past where this agency was largely concerned with financing City development projects. But given the changing business landscape, to achieve and maintain relevancy, organizations understand that they must be content-producing or else fade away.</p> <p>In recent years, social media has been positioned as The Answer for any number of business challenges. Want to enhance your company's brand? Social Media. Want to drive more interest? Social Media. Interested in customer loyalty? Social Media. Why is this? Partly, it's because everybody is engaging in social media, so it stands to reason that online tactics must adapt to these trends somehow and participate in this sort of discussion or get lost in the crowd. Partly, it's because of data. Some data show increased site traffic following social media programs, or certainly an increase in brand awareness can be resonably assumed from a well-executed social media program. On the other hand, social media effectiveness can also be considered to be anecdotal. If end users are tweeting about your company or product, it stands to reason that this buzz will contribute to more leads...and more leads to more business. But is that the case?</p> <p>A study recently done by LeadForce1* indicates that website traffic referred from a tweet is more likely to be concerned with content (like blogs) versus product information, or the completion of a contact form (see figure below from LeadForce1).</p> <p><img width="573" height="383" alt="Percentage of visitors from Twitter" src="http://www.oaktree.com/Libraries/Portfolio/twitter-visits.sflb.ashx" /></p> <p> </p> <p>So when it comes to social media, one must consider the source to determine what end users actually will do when they visit your site. In some instances, it seems that a well-crafted tweet will result in increased interest in your content. In other cases, a social media source like LinkedIn may result directly in a lead.</p> <p>Does this mean that social media that don't result directly in leads are ineffective, or don't contribute to your ROI? Not at all. But it is worth noting that some effective social media will only result in increased engagement in your content. That's not a bad thing, especially if your objectives are to enhance your brand value and to be perceived as a thought leader in your space.</p> <p>What's the takeway here? The social media landscape is still very new and emerging and ROI can be murky, depending on how you measure it. It is important to understand your business goals before embarking on a social media initiative and keep ROI in mind. Better yet, understand the results that you seek before you start so that you have a more concrete way to measure once your program is underway.</p> <p> </p> <p><strong>* References:</strong></p> <ul> <li>Mashable: <a href="http://mashable.com/2010/07/15/social-media-business-leads-fail/">Is Social Media Failing to Produce Leads</a> </li> <li>LeadForce1: <a href="https://www.leadforce1.com/social-media-for-b2b-lead-generation/sm-b2b-report.html">How Effective is Social Media for B2B Lead Generation?</a> </li> </ul> http://www.oaktree.com/View-Source/10-07-16/Considering_the_ROI_of_social_media.aspx OakTree Digital http://www.oaktree.com/View-Source/10-07-16/Considering_the_ROI_of_social_media.aspx 18d37786-88bf-4902-9b25-55b3ce0c45d9 Fri, 16 Jul 2010 21:04:10 GMT What's wrong with this picture? <p>&nbsp;Google Local result showing a coffeehouse in results for "Web Site Design near Portland, OR."&nbsp; I haven't looked to closely for reasons yet, but (a) the cofeehouse's page not only says nothing about any of the searched keywords; and (b) the page is actually created using images rather than html text, so it just plain doesn't contain text at all.&nbsp; Glitch?</p> <p></p> <p>&nbsp;</p> <p><img src="http://www.oaktree.com/Libraries/Portfolio/ss.sflb.ashx" alt="Google local/maps result for &quot;Web Site Design near Portland, OR&quot; erroneously includes a coffeehouse." />&nbsp;</p> <p>&nbsp;</p> <p>- Lawrence W. Gallick</p> http://www.oaktree.com/View-Source/10-06-25/What_s_wrong_with_this_picture.aspx OakTree Digital http://www.oaktree.com/View-Source/10-06-25/What_s_wrong_with_this_picture.aspx 1d4dd8f0-3c8c-45f2-9ab0-55dff78d6511 Fri, 25 Jun 2010 13:24:09 GMT Getting Real About SEO <p>It is certainly tempting to try to box up SEO as another project with a beginning, middle, and an end.&nbsp; However, the important stuff never ends.&nbsp; As you can see in this report by SEOmoz on <a href="http://www.seomoz.org/article/search-ranking-factors" title="search engine ranking factors">search engine ranking factors</a>, external links (links to your site from other places) remain the gold standard for improving organic search engine rankings on your site.&nbsp;&nbsp;</p> <p>&nbsp;The first three factors all relate to backlinks:</p> <ol> <li>&nbsp;Keyword Focused Anchor Text from External Links</li> <li>External Link Popularity (quantity/quality of external links</li> <li>Diversity of Link Sources (links from many unique root domains)</li> </ol> <p>What this means is that any successfully "SEO'd" site not only must be optimized for SEO and your target keyphrases, but must also (a) conduct an ongoing campaign to build inbound links from other sources; and (b) be consistently creating new content that third parties would want to proactively link TO.</p> <p>&nbsp;</p> <p>Lawrence W. Gallick</p> http://www.oaktree.com/View-Source/10-06-11/Getting_Real_About_SEO.aspx OakTree Digital http://www.oaktree.com/View-Source/10-06-11/Getting_Real_About_SEO.aspx 0630e363-a543-4bf8-86c2-4931569b8184 Fri, 11 Jun 2010 16:55:42 GMT Some love for DC P2P defendants <p>Turns out maybe you can't just name a large pool of defendants who don't have any formal relationship vis a vis the sued transaction.&nbsp; Score one for the Constitution and due process.&nbsp; It can't be good to <a href="http://tinyurl.com/3ycw4d3" title="Judge may dismiss 4,576 of 4,577 P2P defendants from lawsuit">sue 4500 unrelated defendants</a>...except from the plaintiff's perspective.&nbsp; This is the latest information on this issue in D.C., where US Copyright Group has been taking on P2P defendants.&nbsp; Amicus briefs by the ECLU and EFF may have influenced the judge's decision here, it seems. </p> <p>The situation came about when a group of lawyers convinced plaintiffs to sue various defendants, while also setting up a website where named defendants can settle <a href="http://arstechnica.com/tech-policy/news/2010/06/the-riaa-amateurs-heres-how-you-sue-p2p-users.ars" title="The RIAA? Amateurs. Here's how you sue 14,000+ P2P users">via an online transaction of a couple of grand</a>.&nbsp; Something just doesn't seem right about that; it seems to really be just a moneymaking scheme for a group of lawyers.&nbsp; But what do I know?</p> <p>What does this mean for the rest of us?&nbsp; This is good.&nbsp; This means you can't be ganged up on by companies that are well aware that they are arbitrarily singling out defendants in a pool that is extremely large.&nbsp; Plus, P2P is here to stay, and illegal use does not permit any of the interests (lawyers and production companies) represented here to herd defendants together in order to make a lawsuit much easier for themselves while diminishing the unique character of any given defendant's alleged misuse. At least that's how I'm seeing this one.</p> <p>Lawrence W. Gallick</p> <p> </p> http://www.oaktree.com/View-Source/10-06-10/Some_love_for_DC_P2P_defendants.aspx OakTree Digital http://www.oaktree.com/View-Source/10-06-10/Some_love_for_DC_P2P_defendants.aspx cea3835d-ead9-4281-93e5-a1401797c628 Thu, 10 Jun 2010 18:43:01 GMT Your short attention span <p>Studies suggest that the average website visitor will spend somewhere around 4 seconds evaluating your website to determine relevance. You read that right: <strong>4 seconds</strong>. So this means that given the very likely scenario that a user doesn't see what they want in 4 seconds, they will leave. In the language of website analytics, this quick departure due to lack of perceived relevance is called a "bounce." Using tools like Google Analytics, we can measure the percentage of bounces. A site like ours, with a domain like ours (oaktree.com), attracts a whole lot of folks looking for...what would you guess? Oak trees! As a result, we have a higher than normal bounce rate.</p> <p>For everybody else, there are a few simple lessons to make the most of the 4 seconds that a user will spend on your site before deciding to bounce:</p> <ul> <li>Keep it simple: your home page is no place to wax poetic. Ensure that your page is clean, scannable and offers a limited number of choices </li> <li>Ensure that links and menu labels correspond to language that your target end users actually use when searching. This sounds like a head-scratcher, but you can invest a little time with Google researching search terms that describe your products or services. Better, hire someone with expertise in SEO (search engine optimization) who can use analytics software to identify a list of terms that fit your content best. </li> <li>Prioritize your messaging so that a user is able to easily find key content. "Key content" means content that you consider key, as well as your end user. Hopefully, these are the same. </li> <li>Avoid clutter: question the addition of "eye candy," or graphical content that doesn't add value, that doesn't help you achieve your business goals. Every element on your page must meet specific objectives. </li> </ul> <p>4 seconds is little more than the blink of an eye. So the fact that you are still reading this post suggests some success--that this content was relevant to you. But the norm is drastic: we have precious little attention, and patience for content that doesn't add immediate value. Take the time to design yours so that your site will capture the attention you expect and translate your website in a valuable tool for your organization.</p> http://www.oaktree.com/View-Source/10-06-04/Your_short_attention_span.aspx OakTree Digital http://www.oaktree.com/View-Source/10-06-04/Your_short_attention_span.aspx a9613080-e95c-4f58-8379-0f62d5062e7f Fri, 04 Jun 2010 23:47:16 GMT Who is this website for anyway? With few exceptions, most all of our clients have a pretty solid notion of audience segmentation insofar as who is purchasing their products or services. In fact, it's not unusual for some of these clients to produce impressive documentation detailing demographics, drilling into quite a lot of detail around audiences. Even so, when it comes to the design of websites, it is very common that website navigation, or information architecture (IA), ignores what we know about the end user. Instead, the website often mirrors the organization itself, from departments to products, with navigational labels that reflect the culture and language of the organization. For many reasons, this sort of organization has had appeal for many years...because it may be logical, accurate and convenient. But increasingly, the leadership at companies expect tangible results from websites--whether these results are about increased revenue, engagement or brand loyalty. It begs the question: what is it that we want the end users of our websites to <em>do</em> anyway? <div><br /> </div> <div><strong>Who is this website for anyway?</strong></div> <div>It seems like an obvious place to start, but in addition to understanding the objectives of a website, how about defining who the website is for, and after that, what we want these users to do. A user-centered website design methodology is one that seeks to accommodate the needs and desires of the primary audiences of the website. This methodology can be empowering for the team that practices it, because so much of the emotions and politics of defining navigation are put aside, while content is organized and developed to serve the interests of the user. As a part of this process, user profiles are often developed, which establish "stories" for primary audience members, including likes, dislikes, and a limited set of tasks that he or she wishes to complete on your site. User profiles like these are invaluable during the design process, when subjective feedback starts to pile up. You counter, "Yes, but what would Lisa think of that decision?" The user profile takes on a life of its own and serves as a guide for making good decisions that will yield the right sort of results.</div> <div><br /> </div> <div>If you are embarking on a website redesign project, we're hoping that this post strikes an intuitive chord. Spend time upfront defining your project objectives, identifying the users of your website, and learn what they want to accomplish once on your website. Make it easy for them to find what they need, and let them get on with their lives. In doing so, there is a good chance that you'll achieve your business objectives as well.</div> <div><br /> </div> <div><br /> </div> http://www.oaktree.com/View-Source/10-06-01/Who_is_this_website_for_anyway.aspx OakTree Digital http://www.oaktree.com/View-Source/10-06-01/Who_is_this_website_for_anyway.aspx 844eac66-fab8-4399-96d4-16cba0fea032 Wed, 02 Jun 2010 00:18:36 GMT How much is too much information? <p>I think we all know a few people within our social networks that like to share a bit more than we would care to know about, and often times they are repeat offenders.   A  few smart entrepreneurs have found a way to launch companies from this addictive need for people to share their every move.  First, we knew that you got a new chicken on your fictional Farmville farm and now we know you treated yourself to a Caramel Frappuccino in real life afterwards.  Thanks to sites like <a href="http://blippy.com/">blippy</a> people can share their every purchase to the world and this has venture capitalists very interested.  blippy is getting around 125,000 hits a month and has closed an initial investment round of $11million.  Investors are betting that big consumer brands will be very interested and willing to buy this type of information.</p> <p>Check out the <a href="http://www.nytimes.com/2010/04/23/technology/23share.html">New York Times</a> for the full article.</p> http://www.oaktree.com/View-Source/10-05-21/How_much_is_too_much_information.aspx OakTree Digital http://www.oaktree.com/View-Source/10-05-21/How_much_is_too_much_information.aspx 2ea60dd1-7d83-4c88-b3b8-e1d5027b9621 Fri, 21 May 2010 18:02:11 GMT OakTree's AFB/LPB ready for Oregon Primary <p>In support of the State of Oregon's ongoing commitment to making it easier for voters to cast their ballots, OakTree Digital's Alternate Format and Large Format Ballots will be used for the upcoming May 18th Primary Election.</p> <p>The Help America Vote Act (HAVA) of 2002 included provisions to ensure that voters with disabilities are provided the opportunity to vote privately and independently and have equal access to the process. </p> <p>OakTree's Alternate Format Ballot is an HTML ballot that works alongside Oregon’s vote by mail process to enable individuals with disabilities, including non-visual accessibility and visually impaired to vote in much the same manner as all Oregon Voters: independently and privately from home, on an assistive computer in the election offices or another place of the voters’ choosing.</p> <p>OakTree Digital’s AFB application converts election data from HP’s Oregon Centralized Voter Registration (OCVR) system into a W3C compliant HTML coded ballot. The ballot works with several assistive devices as well as <a href="http://www.aisquared.com" title="Link to Ai Squared's website">Ai Squared's ZoomText</a> product. The AFB was first used for the 2008 May Oregon Primary..</p> <p>The Large Print Ballot follows the same data path but produces 11" x 17" or 8.5" x 14" with specialized 18 point typeface ballots in PDF format. These are mailed to voters who have requested large print format to assist them in voting independently. The ballots are folded and submitted in the secrecy envelops like any other ballot.</p> <p>OakTree Digital is marketing the AFB/LPB products to other states looking to meet the spirit of the HAVA requirements. More details see <a href="http://www.oaktree.com/Libraries/OTD_Documents/OakTree_Digital_AFB_Product_Brief.sflb.ashx">OakTree Digital AFB Product Brief</a>.</p> http://www.oaktree.com/View-Source/10-05-01/OakTree_s_AFB_LPB_ready_for_Oregon_Primary.aspx OakTree Digital http://www.oaktree.com/View-Source/10-05-01/OakTree_s_AFB_LPB_ready_for_Oregon_Primary.aspx 802a4c15-8b44-4558-9f27-56f3ef4edee0 Sat, 01 May 2010 20:03:19 GMT After a mock funeral, will IE6 die already? <p>What did Internet Explorer 6 do to deserve a <a href="http://www.cnn.com/2010/TECH/03/04/ie6.funeral/index.html?hpt=T2">mock funeral</a> attended by over 100 smirking developers, adorned symbolically in black? Put bluntly, it didn't die when it should have. Morbid? Sure. But IE6, which was released in 2001, still commands nearly 10% of the browser market (as of February 2010), even though Microsoft released version 7 in 2006, and version 8 this time last year. For website developers, IE6 had been a thorn in the side for years, but in recent years, that thorn wound has abscessed as workarounds to ensure compatibility have grown more complex, and costly. Yet, with usage numbers in the neighborhood of 10%, it has been hard to justify neglecting IE6.</p> <p>Finally, however, the browser tide appears to be turning. <a href="http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html">Google announced on January 29th</a> that it would stop supporting IE6 in its applications starting March 1. Others have, and will, follow. With this announcement, the cheers from the message boards were nearly audible as all the little guys showed enthusiastic support for what should have been done long ago.</p> <p>Unfortunately, bidding IE6 a permanent farewell won't be so simple, especially during a recession. In so many corporate and large organization environments, IE6 is in lockstep with the operating system, and without a dire need, IT departments are loathe to upgrade its users unless it must. Therefore, Google and other leaders in the web community will need to responsibly persuade its constituents to upgrade to modern browsers to ensure consistent experiences across the web. Until that time, some web developers will continue to support this bitter relationship with IE6, while others, like those attending the mock funeral today, will be relieved to say goodbye to this geriatric relative that lived far too long.</p> http://www.oaktree.com/View-Source/10-03-04/After_a_mock_funeral_will_IE6_die_already.aspx OakTree Digital http://www.oaktree.com/View-Source/10-03-04/After_a_mock_funeral_will_IE6_die_already.aspx 26d1feca-dec4-4912-a2e0-3653602ce6d6 Thu, 04 Mar 2010 23:10:16 GMT The death of subtlety <p>T-mobile commercial - they show a priest and he says "what - you don't think we [meaning priests] text?  We text."  Then a couple of people later, there's a young designer who lifts up a mannequin's arm and leg and says "I don't want it to cost one of these and one of these [pause]  An arm and a leg." </p> <div><br /> </div> <div>In both cases, the writing isn't exactly award-worthy, but what really hammer me over the head are the explanations.  The writer obviously isn't sure if the audience will be able to make the small leap between the statement and its explanation.  In the first case, there is almost a fear of not answering a question which is transparently rhetorical (or the absolute lack of faith by the writer in his/her audience) - obviously, within the world of the commercial, the only answer is that yes, priests do text.  In the second case, there is an equally evident fear that the audience cannot jump between the images of an arm and a leg and the expression they stand for.  This is not a case of the writer thinking that perhaps the audience won't know the expression, for the ultimate explanation still functions within its paradigm.  Rather, the writer is manifesting a distrust for the viewer's grasp of basic analogical and semiotic modes of communication.</div> <div><br /> </div> <div>The only other argument you could make is that those explanations enhance the commercial from a creative or marketing perspective.  It isn't even worth seriously addressing.  They don't - and as implied above, it is an absolute failure of the use of expressions and rhetorical devices to have to constantly explain them.  They <em>exist</em> to communicate through a shared basin of knowledge, to shorten the path to meaning and in doing so add an extra dimension of meaning in the process.</div> <div><br /> </div> <div>Sad.</div> <div><br /> </div> <div>Author: Lawrence W. Gallick</div> http://www.oaktree.com/View-Source/10-01-04/The_death_of_subtlety.aspx OakTree Digital http://www.oaktree.com/View-Source/10-01-04/The_death_of_subtlety.aspx ef869e23-7f85-4266-a1cb-1d8c37cbfab3 Mon, 04 Jan 2010 15:36:24 GMT WhiteHouse.gov Moves to Drupal I had written a blog post a little more than a year ago called <a href="/View-Source/08-10-30/President_2_0_Best_Internet_Strategy_Wins.aspx?ReturnURL=/View-Source.aspx">President 2.0</a>, concerning Candidate Obama's superior internet strategy, which translated into some advantage at the voting booth. As a candidate, Obama made extensive use of social media, including Twitter, RSS, wiki pages and Facebook, and with tools and methods like these, his campaign team was able to be more nimble, communicate more effectively, and ensure that voters were more intimate with issues. <p>&nbsp;</p> <p>More recently, the Administration has made another significant technological stride forward, moving its website platform to the Drupal CMS. This move is significant, even symbolic, as it represents an administration that is making a demonstrable effort to govern in a more transparent way, allowing the public to participate and collaborate in the government in a way that hasn't been possible until now. Further, because Drupal is modular, scalable and supported by an immense community of global developers, the new <a target="_blank" href="http://www.WhiteHouse.gov">www.WhiteHouse.gov</a> site can be updated quickly and efficiently to meet changing public needs. This also translates into a more robust system that costs much less to maintain. In many ways, the website platform itself is consistent with the promise of the Administration and its particular view of how government should behave.</p> <p>The following video clip is from the November 2009 DC Drupal Meetup, and includes leaders from the White House New Media team. Check it out.</p> <br /> <embed width="400" height="265" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://vimeo.com/moogaloop.swf?clip_id=7669508&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"></embed> <p><a href="http://vimeo.com/7669508">White House New Media Team on Using Drupal</a> from <a href="http://vimeo.com/developmentseed">Development Seed</a> on <a href="http://vimeo.com">Vimeo</a>.</p> http://www.oaktree.com/View-Source/09-11-18/WhiteHouse_gov_Moves_to_Drupal.aspx David Martin http://www.oaktree.com/View-Source/09-11-18/WhiteHouse_gov_Moves_to_Drupal.aspx de5fd979-b71d-49e6-a23b-bc9ac1baba89 Wed, 18 Nov 2009 22:54:16 GMT The real-time web reconsidered My coworker recently posted about the real-time web, some of its great potential, and some of the challenges in integrating it into business websites.&nbsp; I have to say though, to me some of the promise of that buzzword threatens to exclude some of the things that make social media sites so different than their predecessors.&nbsp; <p>&nbsp;</p> <p>Here's what I mean: one of the things I like most about Facebook, for example, is its ability to construct impromptu sidebar conversations.&nbsp; In one sense, this is nothing new, as it is really just forum functionality - I make a post, someone comments on it (and possibly signs up for notification), someone else makes a post, perhaps the author chimes in again, etc.&nbsp; It is a little node of conversation that gets placed into a conceptual room on the server.</p> <p>&nbsp;This is different with Facebook due to the timeliness of the communication, but more importantly due to improvisational threading.&nbsp; Rather than rely on someone proactively posting a "thread," they use a basic element of social interaction - a general post to everyone you know, and as people comment on it, two things happen.&nbsp; (1) A collaboration of your "friends" and the poster's "friends" is created ad hoc.&nbsp; This can create interesting synergies, yet the conversation remains fairly civil as these people have some relation to you, albeit once removed (2) The original post slowly becomes buried as the overall churn of posting in the main "feed" continues.&nbsp; Thus like the forum, a seperate conversational space is created.&nbsp; I would argue that being "real-time" has little to do with the appeal of this functionality.&nbsp; The alure is instead a utilization of classic principles of user interface.&nbsp; Build the app for the people don't try to get the people to mold to the app...</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> http://www.oaktree.com/View-Source/09-10-23/The_real-time_web_reconsidered.aspx Lawrence W. Gallick http://www.oaktree.com/View-Source/09-10-23/The_real-time_web_reconsidered.aspx e1247882-497c-4e7e-a555-ec0696c1dea2 Fri, 23 Oct 2009 17:00:56 GMT HTML tips for handling super/subscript <link rel="File-List" href="file:///C:\DOCUME~1\BRIAN~1.WAL\LOCALS~1\Temp\msohtml1\01\clip_filelist.xml" /><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--> <style> <!-- /* Font Definitions */ @font-face {font-family:"MS Mincho"; panose-1:2 2 6 9 4 2 5 8 3 4; mso-font-alt:"Kozuka Mincho Pro R"; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:"\@MS Mincho"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"MS Mincho";} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> </style> <!--[if gte mso 10]> <div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper3' style='display:none;'>&nbsp;</div><style reoriginalpositionmarker='RadEditorStyleKeeper3' reoriginalpositionmarker='RadEditorStyleKeeper3' reoriginalpositionmarker='RadEditorStyleKeeper3' reoriginalpositionmarker='RadEditorStyleKeeper3' reoriginalpositionmarker='RadEditorStyleKeeper3' reoriginalpositionmarker='RadEditorStyleKeeper3' reoriginalpositionmarker='RadEditorStyleKeeper3'> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]--> <p class="MsoNormal">For developers, superscript and subscript formatting in HTML can be annoying, to say the least. In the spirit of saving readers of this post some headaches, I wanted to share some advice on handling superscript and subscript.</p> <p class="MsoNormal"><o:p>&nbsp;</o:p></p> <p class="MsoNormal">There are many issues with formatting in HTML 4.0 that result in an unattractive reading within paragraphs. Most of these issues are a result of the character set that the browser uses as default, or a defined character set in the document head (Ex. UTF-8). However, the issue that subscript and superscript cause is a product of vertical alignment specified within the browser's default. That is to say, a paragraph will look truncated because the superscript or subscript is beyond the line height of the inherited height of the font. For example, in the image below, you will see how the paragraph is truncated:</p> <p align="center" class="MsoNormal">&nbsp;<img src="/Images/bad.jpg" /></p> <p align="left" class="MsoNormal"> </p> <link rel="File-List" href="file:///C:%5CDOCUME%7E1%5CBRIAN%7E1.WAL%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml" /><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--> <style> <!-- /* Font Definitions */ @font-face {font-family:"MS Mincho"; panose-1:2 2 6 9 4 2 5 8 3 4; mso-font-alt:"Kozuka Mincho Pro R"; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:"\@MS Mincho"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"MS Mincho";} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> </style> <!--[if gte mso 10]> <div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper6' style='display:none;'>&nbsp;</div><style reoriginalpositionmarker='RadEditorStyleKeeper6' reoriginalpositionmarker='RadEditorStyleKeeper6' reoriginalpositionmarker='RadEditorStyleKeeper6' reoriginalpositionmarker='RadEditorStyleKeeper6' reoriginalpositionmarker='RadEditorStyleKeeper6' reoriginalpositionmarker='RadEditorStyleKeeper6' reoriginalpositionmarker='RadEditorStyleKeeper6'> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]--> <p class="MsoNormal">The answer to fixing this problem is with CSS. There are two ways to handle this in CSS, depending on your needs. One way is to simply increase the line-height of the paragraph tag so that everything has proportionately greater spacing. </p> <p class="MsoNormal">Example: using PX for measurements for simple math (you could do the equivalent with EM as well):</p> <p class="MsoNormal">&nbsp;</p> <img src="/Images/css21.jpg" /> <p align="left" class="MsoNormal">&nbsp; </p> <link rel="File-List" href="file:///C:%5CDOCUME%7E1%5CBRIAN%7E1.WAL%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml" /><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--> <style> <!-- /* Font Definitions */ @font-face {font-family:"MS Mincho"; panose-1:2 2 6 9 4 2 5 8 3 4; mso-font-alt:"Kozuka Mincho Pro R"; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} @font-face {font-family:"\@MS Mincho"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:fixed; mso-font-signature:1 134676480 16 0 131072 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"MS Mincho";} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> </style> <!--[if gte mso 10]> <div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><div id='RadEditorStyleKeeper9' style='display:none;'>&nbsp;</div><style reoriginalpositionmarker='RadEditorStyleKeeper9' reoriginalpositionmarker='RadEditorStyleKeeper9' reoriginalpositionmarker='RadEditorStyleKeeper9' reoriginalpositionmarker='RadEditorStyleKeeper9' reoriginalpositionmarker='RadEditorStyleKeeper9' reoriginalpositionmarker='RadEditorStyleKeeper9' reoriginalpositionmarker='RadEditorStyleKeeper9'> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]--> <p class="MsoNormal">This approach is usually not ideal because it makes the paragraph much longer. The strong point of this solution is that it allows the subscript and superscript to really pop out. This works well for math or scientific documentation where you want it to be obvious. </p> <p class="MsoNormal"><o:p>&nbsp;</o:p></p> <p class="MsoNormal">For a more practical approach, we can use position:relative to resolve this by setting the superscript and subscript properties to relative and adding top or bottom positioning. (Note the following example is based off of 12px font size.)</p> <p class="MsoNormal">&nbsp;</p> <img src="/Images/good.jpg" /> <p>&nbsp;</p> <p align="left" class="MsoNormal">&nbsp;...resulting in this:</p> <p align="center" class="MsoNormal">&nbsp;<img src="/Images/realative.jpg" /></p> <p align="left" class="MsoNormal">&nbsp; </p> http://www.oaktree.com/View-Source/09-09-17/HTML_tips_for_handling_super_subscript.aspx Brian Wald http://www.oaktree.com/View-Source/09-09-17/HTML_tips_for_handling_super_subscript.aspx 12e30fff-4002-46cd-a8d6-f4f8f0aed53a Thu, 17 Sep 2009 21:17:10 GMT Why care about the Real-Time Web? Of all the 2009 web trends, the so-called "Real-Time Web" has probably had the most obvious impact on our collective lives. Prior to this year, it's likely that you knew someone in your network using Twitter or Facebook. This year, it's probable that you are personally using a social media service like Twitter or Facebook, and you have family members who are as well. While Twitter and Facebook are certainly not the only examples of Real-Time Web, their popularity and usage have exploded recently and have become ubiquitous in our popular culture. <p>&nbsp;</p> For interactive agencies, we are still at a point of transition where we recognize the clear effects of the RTW in daily/personal lives, yet for our client work, these effects have not yet fully infiltrated the strategies with which we approach projects. Certainly, clients are starting to inquire about integrating social media, RSS, blogs, etc., but the notion of "real-time" still remains somewhat foreign to most marketers who tend to struggle perfecting copy that might not change for months on their corporate websites. Undoubtedly, some of the more sophisticated organizations get it: what's the incentive for an end user to return to a website when the content is stale? There is a simple answer: NONE. No matter how much spit and polish on your website copy, most users may browse it once, but rarely will again...until it changes...until it becomes relevant and timely. <p>&nbsp;</p> Many organizations still see little difference between the printed brochure and the web, but increasingly, at this point of transition, such thinking will yield only disappointing results. Normal users of the web these days are consuming information like a whale consumes plankton and have little patience for stale, irrelevant content. <p>&nbsp;</p> So maybe you aren't employed by an uber sophisticated firm that has its own Chief Social Media Officer and a team of specialists. What can you do? Here are a few thoughts: <ul> <li>Have a longterm content strategy: often, the strategy for content is to produce it to support a launch. Have a plan for the days and weeks and months following launch. Have a publishing schedule. Have resources assigned, and be able to forecast these internal costs to management.</li> <li>Put your web on a CMS: If your website isn't integrated with a <a href="/solutions-overview/content-management-systems.aspx">Content Management System (CMS)</a>, this might be Priority One. Run, don't walk. Without a sophisticated platform that allows for easy publishing of content without programming capabilities, your content strategy will be handicapped from the outset.</li> <li>Research the competition: take the time to survey how your competitors and peers are using their websites and note best practices. Look for trends, and adopt those that make sense.</li> <li>Integrate 3rd party tools strategically: consider integrating a social media service as it makes sense and complements your strategy. Twitter is a powerful platform for microblogging and some users will appreciate short bursts of relevant information versus lengthy sermons. But remember that technology is always an ends to a means, so have a plan.</li> <li>Let go of perfection: don't let perfect be enemy to the good. Your website visitors will appreciate fresh, dynamic content, even if it's not worthy of a Pulitzer Prize. Avoid analysis paralysis when it comes to content and publish, publish publish!</li> </ul> For more information on the Real-Time Web, read "<a href="http://www.readwriteweb.com/archives/top_5_web_trends_of_2009_the_real-time_web.php">The Top 5 Web Trends of 2009: The Real-Time Web</a>." <br /> http://www.oaktree.com/View-Source/09-09-14/Why_care_about_the_Real-Time_Web.aspx David Martin http://www.oaktree.com/View-Source/09-09-14/Why_care_about_the_Real-Time_Web.aspx b6692819-db3b-4de7-8b8d-41ea6f4661b8 Mon, 14 Sep 2009 20:04:19 GMT OakTree CMS build in Sitefinity showcase Telerik is featuring the website built by OakTree Digital for Mercedes-Benz of El Dorado on the <a href="http://www.sitefinity.com" target="_blank">Sitefinity CMS home page</a>.&nbsp; Scroll down to 'featured work' to see a screenshot.&nbsp; Sitefinity is a ASP .NET based content management system (CMS).&nbsp; <a href="http://www.mbofedh.com/welcome.aspx" target="_blank">View the Merceded-Benz of El Dorado website</a>.<br /> http://www.oaktree.com/View-Source/09-07-01/OakTree_CMS_build_in_Sitefinity_showcase.aspx Lawrence W. Gallick http://www.oaktree.com/View-Source/09-07-01/OakTree_CMS_build_in_Sitefinity_showcase.aspx 28dfd117-3476-435e-8729-be9375062593 Wed, 01 Jul 2009 13:10:36 GMT