Along with these design changes, Twitter is also unveiling the ability for developers and bloggers to easily embed tweets, simply by clicking a link on the particular tweet’s permalink page.

“Every Tweet has a story that’s more than just 140 characters. It has an author, mentions @people and #topics, contains media, and has actions you can use to share or join the conversation. It’s a dynamic piece of media, and we believe that everyone should be able to view and interact with Tweets on the Web in the same ways you would from any Twitter client,” said Twitter’s Brian Ellin in a blog post.

Here’s what the new option will look like on the individual tweets:

And here’s the lightbox that will pop up. It allows for a little bit of customization and provides the full HTML code for the tweet as well as the shortcode (for applicable platforms) and the simple URL:

Finally, here’s how the embedded tweet will look on your site:

The embedded tweets will allow you to reply, retweet and favorite them as well as follow the tweeter directly from the third-party site.

Much like the “nofollow” tag, the “standout” tag belongs to the HTML rel category, and much like it suggests, it’s intended for the most pop-worthy content, although, there’s nothing to stop people from putting the rel=”standout” tag on all of their content. One would guess Google is prepared for standout tag spam, and the inclusion of the tag doesn’t guarantee first page status on Google News. According to the Google News blog, the tag exists as a suggestion:

If you put the tag in the HTML header of one of your articles, Google News may show [emphasis added] the article with a ‘Featured’ label on the Google News homepage and News Search results.

The blog entry also suggests using the standout tag — which looks like this: — while linking to content being referenced as well as on your own:

Standout Content tags work best when news publishers recognize not just their own quality content, but also the original journalistic contributions of others when your stories draw from the standout efforts of other publications. Linking out to other sites is well recognized as a best practice on the web, and we believe that citing others’ standout content is important for earning trust as you also promote your own standout work.

While that stanza contains a “we believe” in reference to trust-earning, it’s clear Google is relying on this trust when it comes to picking which content is actually standout worthy. If you run a content spam site, one that survived the Panda purge, and you’re making liberal use of the standout tag, it’s doubtful it will make much of a difference in how the content is perceived, especially as Google refines the weight it gives links containing the tag in question.

In what looks like an effort to proactively address standout tag spam, Google suggests news organization only use the tag once per day:

At this point, we ask news organizations to use the Standout tag to cite their own content at most seven times in each calendar week. If a site exceeds that limit, it may find that its tags are less recognized, or ignored altogether. A news organization may cite standout stories from other news sources any number of times each week.

In other words, don’t spam with the standout tag, otherwise, we’ll ignore you; but please, use it when you’re linking to quality content.

Pretty simple, right?

With that in mind, how long will it be before we see the first “Standout Tag Spam on Google News” article? Before the end of the coming week? Once again, for those who may have missed it, the syntax for the standout tag is as follows:

link rel=”standout” href=”http://www.example.com/scoop_article_2.html”

Thoughts on the standout tag? Let us know in the comments.

“Fresh from the work that we’ve been doing with the HTML Speech Incubator Group, we’ve added support for the HTML5 speech input API,” explained Google software engineer Satish Sampath. “With this API, developers can give web apps the ability to transcribe your voice to text. When a web page uses this feature, you simply click on an icon and then speak into your computer’s microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for you.”

You can talk to search, just like you can on your phone. I’m not sure how often this will be preferable from the desktop, but it’s a cool feature nevertheless.

With the new announcement, Google uses translation through Google Translate as an applicable example.

“Speech input through HTML is one of many new web technologies in the browser that help make innovative and useful web applications like Google Translate’s speech feature possible,” says software engineer Josh Estelle.

In other Chrome-related news, Google has been working with Adobe (and others) on transparency and controls for Flash Player’s local storage.

So what is Microsoft doing about the problem for the upcoming release of Outlook 2010? One word, nothing. Sigh, you’re killing us Bill.

Do you wish Microsoft would use IE to render HTML in Outlook 2010? Tell us.

Microsoft has confirmed that they plan to continue using the Word rendering engine to display HTML in Outlook 2010. (Please keep in mind that EVERY OTHER mainstream email client currently used anywhere uses a web browser to render HTML.)

For those of you asking, "What’s the big deal?" Remember Outlook 2000? It used Internet Explorer to render HTML. To help jog your memory, check out the image below from the Email Standards Project.

Based on the image above, you can see that Outlook is NOT evolving with the web – they’re de-evolving.

The ESP have put together a very well designed website entitled Outlook’s broken – Let’s fix it. The site is really quite nice, it consists of a rolling wall of tweets, which shows the design community’s real-time response to Microsoft’s continuing stance on HTML rendering in Outlook 2010.

At the time of this writing 21,107 have joined the cause, and it’s growing very rapidly.

Below is the site’s description of their cause…

Microsoft have confirmed they plan on using the Word rendering engine to display HTML emails in Outlook 2010.

Join 21,107 others asking Microsoft to improve standards support and make sure you include fixoutlook.org in your tweet. We’ll pull together every tweet that includes the link here to give Microsoft a unified message from the community.

Microsoft has become aware of the Twitter campaign, and "appreciates the feedback". William Kennedy, Corporate Vice President, Office Communications and Forms Team, addresses the issue in a post on the Outlook Team Blog…

"Microsoft welcomes the development of broadly-adopted e-mail standards. We understand that e-mail is about interoperability among various e-mail programs, and we believe that Outlook provides a good mix of a rich user experience and solid interoperability with a wide variety of other e-mail programs. There is no widely-recognized consensus in the industry about what subset of HTML is appropriate for use in e-mail for interoperability. The “Email Standards Project” does not represent a sanctioned standard or an industry consensus in this area. Should such a consensus arise, we will of course work with other e-mail vendors to provide rich support in our products. We are constantly working to improve our products and the experience that they give to our customers."

icrosoft sees and hears complaints… but still has no plans of fixing the HTML rendering problem at this time.

To add your input on the Outlook situation, simply click the button below, or have the http://fixoutlook.org/ in your tweet.

Microsoft has no foreseeable plans to fix the HTML rendering issues with Outlook. Will this cause you to switch to an alternate email client, if you haven’t already? Leave a comment below if you plan on switching from Outlook.

The National Federation of the Blind (NFB) sued Target, and they settled for $6 million in damages. That’s a lot of money for not including some "alt" tags, which was the  biggest problem with Target’s site. Dave Chartier at Ars Technica explains, "Specifically at issue in Target’s case is a lack of ‘alt’ tags throughout its site, tags which are used by screen reading technology to help disabled users navigate web sites."

As part of the settlement, Target will have to make employees responsible for coding its site attend periodic accessibility training sessions conducted by the NFB. Target has to pay them for this as well.

This case will likely have a large impact on eCommerce as a whole. More lawsuits will probably start coming out of the woodwork. Online retailers will scramble to get their sites within compliance. Accessibility experts will start getting exponentially increased business for their consulting services. The blind will no longer be ignored on the web.

Here’s the step-by-step process of embedding a YouTube video into a TypePad blog, even if the YouTube video is too wide.

Step 1: Create your TypePad post. When you’re ready to embed the video type in a place holder where you want the video to go. I use "xxx" but you can say "video goes here."

Step 2: Go to YouTube and find the video you want to embed. To the right of the movie you’ll find some HTML code under the word Embed. Copy this code.

Step 3: Return to your blog post. Click on the Edit HTML tab above the post box.

If you’re not an HTML jockey you may find this intimidating. Don’t worry. Find the "xxx" or "video goes here" in the code. Replace it with the embed code from the YouTube video. If you click back to Compose Post and you don’t see your video, don’t worry, it’s there. Finish up your post and hit publish, then go check out your work…you’re done!

Dealing with Wide Videos in a Narrow Column

Unless, of course, your video looks like this:

Where the video is wider than the blog column. Many people don’t care about this, but if you’re anal like I am, you want everything to fit nicely. If so, you’re going to need to take a few extra steps.

Extra Step 1: Determine how wide your column width is. There’s probably a few different ways to doing this. One would be to get a microscope and count each pixel. Probably not the best use of your time or your eyesight.

On Macs you can command-shift-4 and do a screen capture of the width of the column. On newer Macs as you click and drag the cursor over the column it will tell you how many pixels wide your selection is. If it doesn’t, you can take a screen capture of the column, open it in Preview, hit command-i and get the info for that document, including it’s width. That’s the width you’re playing with.

If you’re on a Windows machine, go to your local Apple Store and pick up a Mac.

Extra Step 2: View the source code of your movie embed. Do this by again clicking on Edit HTML in the top right corner of the post window. Scroll down and look for code like this:

<object width="425" height="344">

You’ll need to change the width and height. If you’re like me–mathematically challenged–you may hurt your head trying to do the math. Instead, do this. Create a new image in Photoshop (or other image editing program) that’s 425 x 344 and resize it to your width, say 396. That will give you the new correct height as well, in this case 321.

There are TWO places in the embed code that need to be updated. Make sure you make changes to both.

Extra Step 3: Write down the correct width and height somewhere so you don’t have to go through this again. Then you’ll have a YouTube video perfectly formatted for your blog and your visitors. Enjoy!

Comments

Panelists will discuss the cut corners, the non-underlined links, the freaky mouse-overs, and other code beautification techniques. HTML, on the other hand, has moved closer towards XML and feeds. Our panelists will discuss how to update your code to match what is evolving on the web.

Moderator:

• Ted Ulle

Speakers:

• Ted Ulle, Partner, The MEWS Group
• Marc Juneau, Founder, Nolagraphics.com
• Bryan Gmyrek, President, Traffic Programming LLC
• Rainer Ahlfors, VP of Engineering, Wildcat Software

Many of the speakers were unable to make it. Nevertheless, Marc Juneau, the founder of Nolagraphics.com is here to speak first. It seems he started with GoDaddy.

Marc begins by giving a history of the web. What began with 1 site now has over 160 million websites. Initially it was all text, now it has graphics, Flash you name it. In 1996, problems started to show when all websites used for aesthetics were images and Flash.

Why are Flash, images make it hard for websites?

• Search engines only see HTML
• Sites were coded in HTML
• Most of the times, there was more code then content

Marc says W3c Gets seen. There are two schools of thought for this. While designing make it look good no matter what the HTMLis. Keep high standards while designing.

This proves advantageous as when many people are working on something, everyone is aware of the standards.

Next up is Ted Ulle, a partner with The MEWS Group. Ted feels that XHTML is a misstep. He feels XHTML should not be use. In this regard, there is a thread in Webmaster World which should be read.

• HTML has semantic Meaning
• CSS has visual rendering

Under used CSS, there are quite a few common elements that deserve their own default style rules, such as p tag, h1, and so on.

CSS Toolkit gives you flexibility

• .c – text align center
• .s – is a small font
• Line-height
• Set ratio (1.25) not px or pt
• Better with readability and comprehension
• Plugs Usability News and how it is a must read

Abused CSS

• Hidden Anchors
• Avoid aesthetics from trumping communication
• Use redundant link cues
• Color/background-color
• Font variations
• Hover behaviors
• Links are the core of the web

Span Tag should be used extremely rarely as it exposes a weak CSS plan. In terms of H1 and H2, avoid it during presentations. Use an imitation style for H1 and H2.

In a presentation, Ted shows what a standard CSS menu is. Also shows a dynamic sample that can be written in PHP, Perl, ASP or any other language.

Advantages

• Less code
• Less storage
• Faster download of CSS

Comments

Tag:

Lay off my snippet: Webmasters can prevent Google from showing certain text in the search results by using a simple "nosnippet" tag. Not that you wouldn’t want your snippets showing – just that there may be a reason for it out there somewhere.

Caching out: The "noarchive" tag stops Google from showing a cached version of a webpage.

Limited time only: Jill seemed pretty excited about a forthcoming tag from Google called "unavailable_after" which sets a self-destruct timer on page information. This is good for coupons, limited time offers, articles intended to be viewed as previews only.

Step 1: Create a New Blog

When I was first looking at how to create the page that I wanted, it seemed that custom creating a new page within Typepad was certainly possible, but would require me to get into the coding and modification of CSS files (not really how I wanted to spend a weekend).  Typepad offers wonderful tools, however, to create new blogs – so that’s how I started.  My Social Media Bio page is actually set up as a second blog within Typepad.  To set the theme for the new blog, I chose a three column template with two sidebars, and matched all the typefaces and color choices to my current blog template (very easy to do because I originally started with a standard Typepad template for my blog anyway).

Step 2: Remove Blog Features

In order to get the page to look different from a blog, I had to remove many of the standard features, such as date headings for posts, or the "posted by" notes in the footer.  Once I did that, I had a custom view that didn’t look like a blog – even though the "My Bio" section of my Social Media Bio is actually a blog post.  The bookmarks from del.icio.us posted underneath are a second blog post.

Step 3: Customize the Look

In any new blog, you can always change the header to use an image of your choosing, which is what I did.  To get the header to be thin rather than the regular height, I had to use an advanced template (see Step 5).  I also created custom logos in Photoshop for the sites I contribute to and awards logos and uploaded them as files into my Typepad account – but once I did that, they were easy to link to as cut and pasted HTML.

Step 4: Use Typelists for Content Buckets

Since first creating my blog, I loved the idea of Typelists letting me create widget style features that I can add to my sidebar on my blog.  All of the content in either sidebar of my Social Media Bio has been created as a separate Typelist.  For those who haven’t done it, creating a Typelist in the format of "Notes" allows you to paste any raw HTML into the description field and totally customize the content.  I 

Step 5: Convert to Advanced Templates (Optional)

For those of you who have Pro level memberships with Typepad, you can also convert your templates to Advanced.  This does require some coding effort and is not necessary if you are happy with the regular format.  For me, there were a few things that I wanted to do, including making the page wider and using an extremely thin header graphic.  These were only possible using an advanced template. 

Below is a document that includes code that I used for my Social Media Bio which may be useful for you to cut and paste as you create your own.  Also, if you do create one and use this template (or create one using another format), send me an email at rohitaustralia [at] gmail [dot] com and I’ll include a link to it in this post (or just leave a comment with the URL of your Social Media Bio).  Good luck!

Download Code Samples [Word Doc - right click to "Save As"]

Comments

Tag:

So whats new with version 3?

• Site targeting: AdWords Editor now provides full support for site-targeted campaigns.
• Negative sites: Add or edit negative sites for keyword- and site-targeted campaigns.
• Edit while you wait: If you manage multiple accounts with AdWords Editor, edit another account while your changes post.
• Count your selection: The status bar now displays the number of rows you’ve selected in the data view.
• Pause or resume ads, keywords, and sites: Use the Status menu in the edit panel to change the status of selected items.

The new editor also has a number of updated features which include -

• Export to HTML: Your HTML export will show or hide deleted campaigns, depending on how you’ve configured your preferences. The HTML export is ideal for showing your account to someone who doesn’t use AdWords Editor.
• Export to CSV: In addition to account, campaign, and ad group snapshots, you can now export custom views. The CSV export is ideal for spreadsheets or other applications that can read structured data files.
• Paste to multiple ad groups: Select multiple destination ad groups via the Edit menu > Paste Special.

You can download Editor version 3 here.

Is the new version still missing features you want to see? You can send your thoughts over to Google using this form.

Comments

Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews: