Extra! Extra!

Todd tells us that Microsoft released the public beta of Internet Explorer 7 today, and he sent us this link to the Beta 2 developer checklist, including these items (among others):

• Verify your User Agent string detection detects Internet Explorer 7.
• Check your website for the use of CSS hacks that may have been turned off in Internet Explorer 7
• Verify that transparent images on your website are rendered correctly
• Verify that your website hasn’t been adversely affected by Internet Explorer 7 Security changes.
• Verify that your website doesn’t get flagged as a Suspicious or Known Phishing site per Microsoft’s Anti-Phishing White Paper.
• If you would like to add/implement access to your site’s search provider, implement the window.external.AddSearchProvider(URL) call in your webpage to prompt the end user (see the Internet Explorer blog).
• Utilize the Internet Explorer 7 Developer Toolbar to explore the DOM tree and find elements on the page, disable Internet Explorer settings, view information, outline elements, control images, view the toolbar, resize pages to common screen resolutions, and have a powerful ruler that lets you measure pixel perfect content on your page. It also will help you to validate against existing standards and provides pointers to W3C specs.

In Home Page Goals Derek Powazek explains why he designs the deepest pages of a site first before working his way back to the home page:

Before I get into those goals, here’s a grain of salt. Every site I’ve ever worked on has had strikingly similar traffic trends, and one stands out. Remember that smallest, deepest element…? This is the atomic element - for a news site, it’s the story page; for a search engine, it’s the search result; for a store, it’s a product page. This page accounts for 60 to 75 percent of all page views on the site. The rest belong to the home page.

He goes on to stay that a home page has four main goals (and I think, for the most part, he’s correct in his analysis):

1. Answer the question, “What is this place?”
2. Don’t slow down repeat visitors
3. Show what’s new
4. Provide consistent, reliable global navigation

He goes on to recommend making part of the home page dynamic to address the first three priorities: “That area can show an explanation to newbies. But once the user is logged in, replace the explanation with some information specific to that user (which also meets goal three).”

Works for me.

This turned out to be a lot easier than I’d anticipated!

A recent site design called for a list displayed in multiple columns. I’m building the site entirely in CSS and so I encounter the columns within columns, within columns, within columns problem fairly often. It’s tough to get these things looking right in so many different browsers and Firefox in particular seems to stumble on floats within floats.

The quick and dirty solution to a multi-column list is to wrap each list in an individual div. This is impractical however because it unfairly restricts the content owner to a set height and width for these block elements or even a set number of items per column.

The end solution was to set an absolute width on the UL, an absolute width on the LI and then to float each LI left. It won’t work in every situation (such as when the line-height of a list item spans two rows) however it works swimmingly for this project I’m in the process of coding out and can be modified to accomodate other layouts.

Here’s the CSS code:


.box {
display: block;
width: 600px;
}


ul {
list-style-type: none;
margin: 0;
padding: 0;
}


ul li {
list-style-type: none;
margin: 0;
padding-left:15px;
display: block;
width:160px;
float:left;
}


ul.liblu li {
background: url(img/li-blu.gif) top left no-repeat;
}


Some explanation:

The first line (.box) defines a width to contain the list.

The second line (ul) removes the bullets and margins for the list.

The third line (ul li) removes the bullets and margins for each list item, adds 15 pixels of padding to account for the arrow gif, sets each item to be a block element, contrains the widths and floats each item left.

The fourth line (ul.liblu li) adds the pretty background gif.

Here’s the HTML code:


<div class="box">
 <ul class="liblu">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum dolor </li>
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum dolor </li>
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem amet</li>
  <li>Lorem ipsum </li>
  <li>Lorem ipsum sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>
</div>


Here’s the resulting list (screen cap):

This has been tested in:

Windows XP
Internet Explorer 6
Netscape 7.1
Firefox 1.5
Opera 8.51

Windows 98
IE 5.5

OSX 10.2.8
Safari 1.0.3

This is it. The Firefox Extension I’ve been looking for. As a site developer I spend a great deal of time switching between IE and Firefox to test browser support. This extension completely removes that need and brings it all home. I haven’t tested it extensively however one of my other gripes has been the slow response time for Yahoo! Mail in Firefox. Loading Yahoo! Mail in an IE Tab using Firefox is the solution. MMmm… the best of both worlds!

IE Tab - Firefox Extension

This stuff’s all over my head, but it seems to be talking about tricks to get the performance of Ajax applications in the browser without trading off the standard browser experience your users (and Jakob Nielson) have come to expect (Developing Ajax Applications That Preserve Standard Browser Functionality):

To provide the traditional Web usability features, the Ajax application therefore needs to handle URIs client side in much the same way as the server does in traditional Web applications. The Ajax application needs to:

• Generate a URI and send it to the browser when a client-side state change occurs
• Recreate state when a new URI is requested by the browser

Anil Varma of Refinery makes some intuitive points regarding success factors for implementation of a Content Management System in this white paper (Four success factors for a Content Management System).

As I frequently work with Extractable’s clients during the early stages of Content Management System evaluation, I strongly believe that understanding the business and user requirements driving such a purchase are paramount. Once we have a good understanding of those requirements, Extractable provides an objective point of reference for our clients, helping them to navigate the yet-to-consolidate Content Management System vendor market to select a solution best paired with their needs.

We’re pleased to announce a successful site launch: American First Credit Union. Congratulations to the team that designed, developed, and deployed the site!

The folks at Google Code have published some interesting analyses of HTML markup statistics and trends, complete with nice bar charts for us visual learners (Google Code: Web Authoring Statistics):

In December 2005 we did an analysis of a sample of slightly over a billion documents, extracting information about popular class names, elements, attributes, and related metadata. The results we found are available below. We hope this is of use!

They have separate reports covering a large number of categories (elements in pages, attributes in elements, classes, metadata, the body element, link rel microformats, the a element, custom markup from web editing tools, and more). Each of the separate mini-reports is well worth reading, with a lot of amusing “stupid markup tricks” revealed.

(via reddit: what’s new online)

One of the oldest rules of Search Engine Optimization is the importance of meta description and keyword tags. They help search engines understand the content and context of each page they query. On my drive in to work today I thought a bit deeper about a strange occurrence I’ve begun to notice. I recently spent several months recoding two of my personal sites (more sites = more experience) and the result has been a steep spike in referrals to both sites from search engines. Each site ranks very high (top 5 results) for related queries and yet the strange thing I’ve noticed is the description for each result is the meta information rather than content from the page itself. This is true for both sites.

An example query for “Sony Launches Music With a Twist” produces some 500 thousand results. My recoded site Jungle-Life is the 2nd result just below About.com and above Sony’s own music blog. This proves the power of the new method which I’m using to code websites, and after this experiment I’ve begun applying the methods I used on my personal sites to the sites I code here at Extractable.

Check the screenshot below (I’m using Firefox’s handy Google Preview extension btw). Pay special attention to the description beneath each title. The first result produces a contextual summary for the article as does the third and fourth results. The second result however is only the meta description. What is it about my site that causes this to happen?

Digging deeper I find that About.com is using content directly from the article as meta description information (a clever SEO tactic) and the article title for meta keyword information (equally clever).

Checking the Sony blog I see that they are using neither meta keyword or description tags and have left out the title tag altogether. The summary Google is using appears on Sony’s page only after the second sentence of the fifth paragraph!

Continuing my quest I check the QueerDay Magazine site to find that they too are lacking meta tags. It appears that Google has used the document title as the search result link and portions of the second and third sentences as a summary.

So what can we learn from this? It seems clear from this expirement that the importance of meta tags can surely be downplayed. A site will show up in relevant search queries regardless of meta diligence. How high they will rank may require further research (both the About.com and Jungle-Life websites use meta tags) but whether they are something worth investing time and money implementing on each page is something else.

On the one hand, I like seeing content summary results for the other sites, it allows a person to quickly scan the content for relevance. On the other hand, the simple meta description displayed on the Jungle-Life query allows you to see if the site itself has what you’re looking for - not just the search result.

In the end, the jury is still out and while the major search engines are constantly changing their techniques, Search Engine Marketers scramble to keep pace. One thing is for sure: Content is still king. Provide quality, relevant content and the customer will find you both organically and through search engine referrals. No amount of search engine optimization can trump a person’s desire to find accurate results. They may find a black-hat SEO marketer’s website first - but does that website provide the results they seek or does yours?

In the meantime, I will continue to monitor search engine, site analytic and referral statistics. Perhaps I will consider implementing the content-as-meta trick for better search summaries. Or maybe the best idea is not to mess with a good thing. Either way, research is key and the more we know the more we can offer our clients.

Addendum: After all that, I’ve just discovered that the anomaly appears inconsistently. So a search for “free encryption softwar” (the ‘e’ is deliberately missing since that is how it appears in my referral stats) returns contextual summaries while the earlier query does not. See the screenshot below… Will have to explore this further!

Graham is right that Web 2.0 started off as a brand invented for an O’Reilly Conference. He says now it means something along the lines of “using the web as an application,” “Ajax,” or “doing things the way they should be done” on the web.

Here’s his take on Ajax:

One ingredient of its meaning is certainly Ajax, which I can still only just bear to use without scare quotes. Basically, what “Ajax” means is “Javascript now works.” And that in turn means that web-based applications can now be made to work much more like desktop ones.

As you read this, a whole new generation of software is being written to take advantage of Ajax. There hasn’t been such a wave of new applications since microcomputers first appeared. Even Microsoft sees it, but it’s too late for them to do anything more than leak “internal” documents designed to give the impression they’re on top of this new trend.

Both this link and the previous one come from Semiologic.