Adam Darowski » Microformats

New Portfolio Addition: The Small Business Web

Adam Darowski — Tue, 21 Apr 2009 04:50:08 +0000

I recently added a new project to my Portfolio: a one-pager for The Small Business Web (visit site). I designed it in just one day, but I liked it enough to put it in. Here she is:

I figured I’d share some markup & style for a couple of page elements. Hopefully you’ll find it useful.

“Tweet this page” button

In this day and age, “Tweet it” buttons are becoming more and more important. Not only does a Tweet it button give users the ability to quickly post a page to Twitter, it reminds them to do so. There are online services out there that will make Tweet it buttons for you. Might as well roll your own. Here, clicking the “Tweet this page” button will send you to Twitter (if you’re logged in) and prepare a message that says “Small businesses are taking over the Internet! The Small Business Web is here. http://thesmallbusinessweb.com”. That’s actually super easy to do. The markup:

Tweet this page

(I’ve added line breaks for cleanliness.) Basically, the hardest part is typing a “+” instead of a space.

Here’s how I styled it:

p#tweet-it a { display: block; position: absolute; top: 0; left: 20px; background: #004A8D url(logos/tweet-it.png) no-repeat 4px 50%; color: #FFF; margin: 0; padding: 3px 10px 5px 44px; text-decoration: none; } p#tweet-it a:hover { background-color: #333; }

I wanted the whole blue box to be a link instead of just the text. So, I applied display:block to the link. Next, I absolutely positioned the link to it sticks to the top of the page. That’s where the top: 0 comes in. I added some space to the left, hence the left: 20px.

Next is the background. This encompasses the color (#004A8D), the birdie graphic [url(logos/tweet-it.png)] and the positioning (4px from the right of the box, 50% vertical positioning within the box). And of course, we don’t want the bird to repeat, so no-repeat. Then, I set text color and padding and yanked the underline from the link. The hover state simply changes the background from blue to gray. Pow, yer done.

“Business card” footer

Seriously, aren’t they cute? Here’s the markup on one of those little guys:

Sunir Shah: Chief Handshaker; FreshBooks; sunir@freshbooks.com

Yes, Microformats! This is the perfect case to use hCard—and it’s so easy. Each business card gets it’s own “vcard” class (that’s the class that says “hey, everything inside this element is one set of contact information”).

If you’re not familiar building an hCard, it’s all about applying the right class names to certain bits of data. Definition lists are great for this because you can basically throw a class on any single definition. The “fn” class means “full name”. The “title” class means “job title” while “org” means “organization”, or company that the person works for. I doubled up “org” and “url”, applying both classes to a link. That’s because the text that is hyperlinked is the org and the href is the url for that org. A two-fer!

Finally, the “email” applies to “email address”. I could have hyperlinked Sunir’s name with his email address using the same process above (Sunir Shah), but in this case I wanted the email address visible (like a business card!).

That was fun. Let’s style it:

div#contacts dl { border-top: 1px solid #CCC; border-left: 2px solid #CCC; border-right: 2px solid #CCC; border-bottom: 6px solid #CCC; float: left; padding: 5px 5px 5px 52px; margin: 0 1% 0 0; } div#contacts dt { font-weight: bold; } div#contacts dd { font-size: 85%; margin: 0; padding-top: 2px; } div#contacts dl#shah { width: 11%; background: #FFF url(photos/shah.jpg) no-repeat 5px 7px; }

Each definition list (each business card) gets these fancy borders set, is floated left (so they all line up nicely), and gets some internal padding. The padding-left is set to 52px to accommodate our 40px thumbnail images. There’s a 1% margin-right to give them a bit of breathing room.

Next, we simply bold the definition term (in this case the person’s name). Each definition (bit of contact info) is set to 85% with a bit of padding on top. Finally, each definition list is given it’s own thumbnail image thanks to the unique ID. I also gave each list a unique width (since some names are short and others are much longer).

So, there you have it—a new portfolio piece and a couple little markup & style examples. I’m curious what you think of the page.

My Favorite CSS Techniques

Adam Darowski — Fri, 14 Nov 2008 18:11:55 +0000

I’ve been creating websites for 12 years. I started using CSS many years ago, but for a long time (like many designers) I only used it for text formatting. It wasn’t until 2006 that I took the plunge into pure CSS for layout. Since then, I’ve developed some favorite techniques that I use over and over again. Here, I’m finally putting them in one place.

These techniques don’t require any acrobatic wizardry or anything. They mirror my design approach—simple, clear, minimal, and (hopefully) easy to follow. It is because of this approach that my cross-browser fixes are usually quite minimal. That’s why you won’t see many IE tweaks here.

Before I start…

How did I learn CSS?

I’ve only picked up a few CSS books over the years, but I’ve leaned on those books heavily. They are:

Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
Bulletproof Web Design (1st edition) by Dan Cederholm
HTML Mastery by Paul Haine
CSS Mastery by Andy Budd

What? No Zeldman? I know, I know. I started with the local protégé, Mr. Cederholm. He’s taken me far.

Of course, I also read a ton of web design blogs and online publications. The key ones (for me) are:

SimpleBits (Dan Cederholm)
456 Berea Street (Roger Johansson)
A List Apart
Vitamin
Email list from the Web Standards Group

Now that you know how I learned to do this, here’s what I find myself using over and over again:

Image Replacement on Headers

Headers (h1, h2, etc.) are very, very important. For starters, search engines love them. When Google crawls your page, it first asks “Okay, where’s the h1? That will tell me what this page is.” If you don’t include headers, then you’re making Google guess. Why make Google guess?

This is what the h1 of Darowski.com looks like:

`Adam Darowski’s Traces of Inspiration`

And here’s how it renders with no CSS:

Of course, that just ain’t gonna do. Here’s how it renders with the rest of the design:

So, how do you do that? With image replacement. We’re taking the h1, then giving it a background image and height & weight (using the dimensions from the background image). For the text itself, we give it a negative indent so that the text doesn’t appear on the page. It’s still there for screen readers and search engines, but the typical user won’t see it.

Here’s the CSS:

h1 { margin: 0; } h1 a { display: block; background: url(darowski.png) no-repeat 0 0; height: 103px; width: 449px; text-indent: -9999px; }

Why is most of the code applied to the link inside the h1? Because if you apply the negative indent to the text inside the h1, the clickable link actually appears off the page. If you indent the text inside the clickable link, the link itself still appears on the page—only the text inside is hidden. I know, weird. But it works!

Implementing types and values using Microformats

Using Microformats to mark up an email address is pretty easy.

adarowski@gmail.com

becomes:

adarowski@gmail.com

And that’s it.

But what if you want to add more information to that email address, like if it is a home or work email address? In that case, inside of the object with the class of “email”, you need two more objects: one with the class name of “type” and another with the class name of “value”. The “type” is where you define home or work while “value” is the actual email address.

Here’s an example from my About page:

Work Info:





  Website: http://batchblue.com/


  Blog: http://blog.batchblue.com/


  Work Email: adarowski@batchblue.com


  Work Phone: (888) 402-2824

So, inside the li (which has the “email” class) lives two spans—one “type” and one “value”. The HTML renders like so with no CSS:

But you’ll notice that in this case, I have a “hidetext” style on the “type”. That’s because I only want to display it as “Email”. I simply add this style:

span.hidetext { display: none; }

and I’m done. It renders like so:

I don’t always hide the types, though. On BatchBook’s contact detail pages, the type works very well into the layout:

Custom icons on list items

Here’s one I use A LOT. Unordered lists are wonderful. I use them all the time. But that bullet that denotes an unordered list by default can be a bit boring. Here’s what I did to spruce up the bloggers list on the BatchBlue Blog:

And here’s the markup:

`Bloggers`





  Keri Calhoun


  Adam Darowski


  Will Larson


  Pamela O'Hara


  Sean Ransom


  Michelle Riggen-Ransom


  Stephanie Sweeney

As you can see, we gave the list an id of “bloggers” and each list item an id of the blogger’s last name. That allows us to apply a different icon to each blogger’s list item.

But first, here’s the CSS to get the list looking the way we want (correct padding, left indenting, removing the default bullet):

ul#bloggers { margin: 0; list-style: none; } ul#bloggers li { padding: 4px 0; margin: 1px; padding-left: 24px; } ul#bloggers li a { text-decoration: none; }

Next, here is the CSS for each of the individual line items:

#calhoun { background: url(../images/keri-calhoun-icon.jpg) no-repeat left 2px; } #darowski { background: url(../images/adam-darowski-icon.jpg) no-repeat left 2px; } #larson { background: url(../images/will-larson-icon.jpg) no-repeat left 2px; } #ohara { background: url(../images/pamela-ohara-icon.jpg) no-repeat left 2px; } #ransom { background: url(../images/sean-ransom-icon.jpg) no-repeat left 2px; } #riggen { background: url(../images/michelle-riggen-ransom-icon.jpg) no-repeat left 2px; } #sweeney { background: url(../images/stephanie-sweeney-icon.jpg) no-repeat left 2px; }

If you look around any site I’ve created, you’ll probably see a lot of these. The footer at Darowski.com uses it:

Creative use of definition lists

As much as I love unordered lists, there’s one thing I love more. Definition lists!

I admit, I had never even used one before reading Web Standards Solutions, but now I use them all the time. All contact info within BatchBook is laid out in definition lists. Think about it… what better defines the home email than the email address itself? The definition list is an unordered list with even more semantic meaning.

When we launched the new personas section of BatchBlue.com, I went with a definition list. The names of the personas are the definition terms (dt) and the person used in the persona as well as the information that person is likely to track help define it (dd).

Here’s the complete markup:

`Who needs a CRM anyway?`





  

    Sales professionals


    PC4Media.net


    Customers, leads, conversions…


  


  

    Freelancers


    Big Ring Design


    Clients, partnerships, invoices …


  


  

    Virtual assistants


    ChelPixie


    To-dos, schedules, executives…


  


  

    Entrepreneurs


    ThoughtCap


    Opportunities, partners, VCs…


  


  

    Editors


    KidoInfo


    Writers, deadlines, articles…


  


  

    Consultants


    CRM Essentials


    Clients, vendors, proposals…


  


  

    Event organizers


    Chris Brogan


    Speakers, attendees, sponsors…


  


  

    Non-Profits


    National Wildlife Federation


    Donors, fundraisers, volunteers…


  


  

    Real estate agents


    RealtyMan.com


    Buyers, sellers, referrals…


    Custom version available


  


  

    Designers


    lamikey.com


    Projects, clients, deliverables…


    Custom version available


  


  

    Marketers


    Saul Colt


    Press, bloggers, social media…


  


  

    Super Heroes


    Super Heroes


    We know you’re out there!

An abbreviated version of how that looks unstyled:

And here’s how I got that to look:

I’ll admit… I’m a bit proud of that one.

So, the CSS. There’s a lot of it. Let’s start with the basic definition list:

#personas { border-top: 1px solid #CACACA; border-left: 1px solid #CACACA; margin-bottom: 10px; width: 688px; } #personas dl { float: left; width: 163px; padding: 4px; border-bottom: 1px solid #CACACA; border-right: 1px solid #CACACA; margin: 0; } #personas dt { font-family: Georgia,serif; font-size: 120%; color: #004A8D; padding-bottom: 2px; } #personas dd { margin: 0; }

So, the whole thing is in a div (with an id of “personas”) that has a top and left 1-pixel border. The reason I did this is the individual definition lists inside the div will have bottom and right borders. That means we don’t have any double borders on any side.

Above, I’ve also set the width for each dl and floated it. The dt simply has some text formatting while the dd has its margin eliminated.

Here’s some more styling done to the definitions:

#personas dd.track { color: #666; font-family: Georgia, serif; font-style: italic; font-size: 110%; line-height: 120%; } #personas dd.track span { display: block; } #personas dd.custom { font-size: 80%; margin-top: 3px; padding-left: 22px; background-position: left 50%; } #personas dd.custom a:link, #personas dd.custom a:visited, #personas dd.custom a:hover, #personas dd.custom a:active { color: #F88C17; text-decoration: none; } #personas dd.custom a:hover { color: #F88C17; text-decoration: underline; } #personas dl.realestateagents dd.custom { background: url(../images/icon-realestate.png) no-repeat; } #personas dl.designers dd.custom { background: url(../images/icon-designer.png) no-repeat; } #personas dl.designers, #personas dl.realestateagents, #personas dl.marketers, #personas dl.superheroes { min-height: 95px; }

First, we are styling the text of the “track” definition (that’s the one we use to explain what each persona will track). I threw a very non-semantic span on the middle item in each of those. The reason I did that is so I could make it display as block (force it to a new line) to make sure they all line up the same.

A couple items in the bottom row have another definition with the class “custom”. This is to denote we have a custom version of BatchBook for this persona. First, I adjust the font size, margin, and padding. Then, I set the background position of the icons (in the same manner as explained above). Next, I set the link styles. Then, I set the background images for the Real Estate and Designers version. If you’re a designer, you just may find BatchBook for Designers handy.

Finally, I set the minimum height of the bottom row to make room for that “custom” style, even if it isn’t there. That way the boxes all line up on the bottom. (I realize this isn’t completely bulletproof, but these boxes will all have the exact same text in them so box height is easier to plan for.)

Finally, we have the thumbnail photos, which I’m actually going to cover in the next technique.

CSS sprites

I’ve recently been turned on to the wonder that is CSS Sprites. What are they? Well, for examples like the personas box above, I’d need to call 12 graphics. Instead of creating twelve graphics, I’ve created one that looks like this:

Now, I just call the same graphic and only expose part of it, depending which persona it is. Sure, the file is bigger, but calling one image and caching it is a LOT easier on the server than fetching twelve smaller images.

And this is only a small example. Every button in BatchBook is now in one single graphic file (it’s pretty darn big). I just call that one graphic and adjust the background position.

So, here’s how the CSS works for the personas table. First, here’s how we style each photo:

#personas dd.photo a { float: left; display: block; height: 45px; width: 45px; text-indent: -9999px; background: url(../images/personas.jpg) no-repeat; margin-top: 3px; margin-right: 8px; }

So, we float it, set a height & width, indent the text (like covered earlier), set a background image, and give it some margins. Right now, we’re calling the same image and position for each. Here’s how we adjust the positioning for each photo:

#personas dl.sales dd.photo a { background-position: 0 0; } #personas dl.freelancers dd.photo a { background-position: -45px 0; } #personas dl.virtalassistants dd.photo a { background-position: -90px 0; } #personas dl.entrepreneurs dd.photo a { background-position: -135px 0; } #personas dl.editors dd.photo a { background-position: -180px 0; } #personas dl.consultants dd.photo a { background-position: -225px 0; } #personas dl.eventorganizers dd.photo a { background-position: -270px 0; } #personas dl.nonprofits dd.photo a { background-position: -315px 0; } #personas dl.designers dd.photo a { background-position: -360px 0; } #personas dl.realestateagents dd.photo a { background-position: -405px 0; } #personas dl.marketers dd.photo a { background-position: -450px 0; } #personas dl.superheroes dd.photo a { background-position: -495px 0; }

So, with each dl, we change the horizontal position by 45 pixels (which makes sense, since the photos are 45 pixels wide!). If I need to add more personas, I just add them to the image, save it again, and add a few lines to the CSS. Done!

Auto-clearing with .clearfix

I use this one all the time, too—including in the personas example above. Say you’ve got a div and you put two elements in it. You float one left and float the other right. You need to clear that div so everything lines up correctly under it and nothing crashes together.

You could make sure the element after it uses a clear: both; style. But, you’d have to remember to put that in every single time. And what if you insert something in between them? It breaks. It is much cleaner to get the divs to clear themselves.

You can do with using the clearfix class. Here’s how it looks:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Now, “after” the element with the class “clearfix”, it will render a “.”, display it as block (forcing a new line), set the height to “0″ (I believe this is to make Firefox behave), hide it, and—of course—clear both!

In your IE6 and IE7 stylesheets, you’ll just have to add this:

.clearfix { height: 1%; }

That will trigger “hasLayout”. I’m not even going to try to explain hasLayout. I’ll leave it to this guy.

Font sizing: keywords & percentages

One of the first things you need to decide when you design a site with CSS is how you’re going to size your text. You’ve got (essentially) three options:

Pixels (px)
Ems (em)
Keywords (small, medium, large, etc.)

Pixels are fine for sizing text. It’s probably what you’re used to. But, there’s a problem.

It is quite common for users to increase the size of text on web pages. Let’s face it, a lot of sites are built by 20somethings with perfect eyesight. I wouldn’t be able to read many sites I created in college. I’m among those that will bump up the font size on sites occasionally.

But, as always, the problem is Internet Explorer. IE won’t adjust the size of text rendered in pixels. Kind of kills the #1 accessibility feature right there.

Ems are a perfectly usable workaround. But as you can see, they can be a bit difficult to grasp. I’ll be honest… I never bothered. I always thought it would be neat to create a completely em-based design so that the entire site zoomed in and out along with the text size. But now that modern browsers are replacing the text sizing option with a full-page zoom, that type of functionality is being handled by the browser. So, it’s a lot of extra work that, quite honestly, I’m glad I didn’t do.

So, what do I use? I use those silly keywords that come with HTML. You know… small, medium, large, etc. That’s me. Well, I actually only really use small. Because I use that as the baseline for my entire site. I then use percentages to adjust sizes accordingly.

First, what does it look like? I start off by establishing small as my baseline.

body { font-size: small; }

Then, in BatchBook I drop that down to 95% right off the bat to shrink it ever so slightly.

div#content { font-size: 95%; }

I actually leave this step out on BatchBlue.com. I guess that’s because when you’re actually inside the app, every pixel is roughly 5% more valuable.

This becomes the default font size. I then use percentages to scale headings up and supplemental text down. So, for example, if I’m adding a little note to a section that I want to appear a bit smaller, I’d mark it up as:

p.note { font-size: 90%; }

Then, to style my headings I scale it up:

h1 { font-size: 180%; } h2 { font-size: 140%; } h3 {font-size: 110%; }

With the increase in prominence of full-page zoom, I’ve considered going back to pixels. I still wouldn’t do a completely em-based design, though. I just don’t have the urge to show off my math skills that much.

Override iPhone text adjustment

I’ll finish with a very simple one. I like to make sure things look good on my iPhone, so I was delighted to find this on the Apple site:

Safari on iPhone adjusts the text size so it’s more readable after the user double taps. After a double-tap, Safari on iPhone gets the width of the block of text and determines the width after a double-tap. Safari on iPhone then determines an appropriate multiplier that is applied to the layout.

Sometimes you might find that automatic text size adjustment doesn’t produce ideal results. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look their best. In these cases, you can override the text size adjustment.

Use the -webkit-text-size-adjust CSS property to override Safari’s default text size adjustment. The values for -webkit-text-size-adjust are:

none:

auto:
multiplier percentages:
Only thing is… I find the results from -webkit-text-size-adjust can make things look weird. You just never know. Sometimes a paragraph will appear half the size of an unordered list for no apparent reason. So, on BatchBlue.com and BatchBook, I’ve added this:
html {-webkit-text-size-adjust: none}
And we’re in business! Everything looks like it does on regular ol’ Safari.
Dassit!
So, there you have it. That’s certainly not everything I use. And I’ve certainly used more complex solutions than those. But, the more complex something is, the less likely I am to use it again.
So, tell me dear reader, what are your favorite CSS techniques?
Or, what are you having a hard time wrapping your brain around (in regards to CSS)?

NewBCamp08 Presentation: Introduction to Web Standards

Adam Darowski — Sat, 23 Feb 2008 19:22:04 +0000

| View | Upload your own

Today (a couple of hours ago, actually) I gave a presentation called “Introduction to Web Standards” at NewBCamp08, a new unconference in Providence. I’m pleasantly surprised by the turnout, considering it was a first time event with minimal marketing used to spread the word (Twitter played a hand, I bet).

Here’s my talk about Web Standards, microformat goodness, and some URL as UI craziness. The talk seemed to be pretty well received and had a decent turnout with some excellent questions asked.

BatchBlog Post about Microformats

Adam Darowski — Tue, 16 Oct 2007 04:51:57 +0000

Just wanted to say I upped a post over at the BatchBlog about Microformats. The focus is really on how this simple technology can help the small business owner with one of their tedious (if not difficult) tasks—collecting and managing contact information.

A Few Things I Learned About the vCard Spec Tonight

Adam Darowski — Thu, 19 Jul 2007 03:12:57 +0000

Today I spent some time coding my most complicated hCard (yeah, I know—it’s not supposed to be hard). Well, I wanted to create an hCard that had EVERYTHING in it—this hCard needed multiple locations, which I haven’t done. So, enter the “type” parameters of the hCard.

Actually, it goes back a bit further. hCard is essentially just an XHTML markup version of the vCard format, so I spent some time reading the vCard spec so I could understand it better.

So, I’m trying to code this hCard so I can run it through Operator or the hCard parser on Technorati and then pull that vCard into Address Book. So, I code it, but I notice that I’m having issues with the mobile phone number, websites, and email addresses. Mobile was importing as “Other”, websites were all importing simply as “home page” (not part of the spec), and all email addresses were importing as “work”. This was frustrating because I could then edit them in Address Book to be home, work, mobile, whatever. But I wanted it to happen automatically when converted.

So, after digging deeper, I am happy (or maybe not) to report these tidbits I found out about the vCard format:

It’s not “mobile”, it’s “cell”. This was the easiest fix. Just change “mobile” to “cell”. Blizam. Fixed.

There is no “type” for web pages. You can’t denote in a vCard that at web page is someone’s personal site or their work site. Kind of a bummer. Would be nice to be able to list batchblue.com as my work web site and then a few as personal ones, like this one, my Flickr, the TWML maybe. I don’t want those mixed up with work accounts. However, no way to do it—with keeping with the standard. I guess in development, we’ll allow them to set those types in the application, but when the data is exported it will have to revert to the type-less general web page.

There is a type for email, but it’s useless. So, email does have a type. But they are INTERNET, x400, pref, and “other IANA registered address types”. Wowee, internet. That helps. So, there’s no work or home, so it’s no good to me. The “pref” means “preferred”, so that could be of some use. But I’m planning to have a primary contact set on the work/home level, not for each individual contact means.

So there you have it. A few things I ran into that you may at some point.

Finally, Aptima’s First Microformats

Adam Darowski — Tue, 15 May 2007 19:58:30 +0000

I’m sorry to say that Aptima.com doesn’t have any Microformats, but I recently put together a small site for a Visualization Workshop that Aptimist Cullen Jackson is going to chair. I took the opportunity to put the event in hCalendar while marking Cullen up hCard. Small, quick, but fun.

SXSWi: The Growth and Evolution of Microformats

Adam Darowski — Mon, 12 Mar 2007 20:04:33 +0000

I’m not going to go into too much detail on this one. I’m here mostly for the great company. I’ve written a lot about Microformats before, and it is great to see so many people in the panel.
Panelists:

Frances Berriman, Volume

Michael Kaply, IBM

Glenn Jones, Madgex

Tantek √áelik, Technorati

Special Guest: Jeremy Keith, ClearLeft

Some extremely brief notes:

Microformats in Firefox 3 not yet definite

But, how would it be built in? Just throw the Operator toolbar in there?

We all should communicate that Microformats should be part of the browser

Random blog post idea: In RSS for Marketing, the question of terminology was raised. What will we call it? Feeds? Live bookmarks? RSS may be similar to SMTP. We all use it, but we call it email. What will Microformats be called?

Good question: If marking fictional content up (for example, for a game played out on multiple web sites) is it okay to use Microformats? If you mark up that you have magical potions available, it will turn up in hListing searches.

Me: Perhaps in this case a proprietary Microformat is okay? It could even be a Save As from other Microformats. Perhaps you can hack the current tools out there to find it, if you’re interested. Build it into a game interface, somehow? I’d hate to see fictional content mixed in with the real stuff.

Jeremy Keith: Microformats can be used as a read-only API.

That sounds a little more reasonable than the general API declaration.

This panel was about 50% Q&A, which is always nice to see. Great roundup and the HUGE crowd seemed to enjoy it.

SXSWi: New Webtech and Science Publishing: (Re)Constructing the Scientific Article

Adam Darowski — Sun, 11 Mar 2007 05:31:26 +0000

Many SXSW vets recommend attending a panel outside of your comfort zone. This was that one. I also was covering it for one of our projects at work. Here’s the abstract:

New publishing technologies challenge the traditional structure of peer-reviewed scientific journals. For hundreds of years the “article” has been the primary vehicle for conveying scientific information – but semantic markup, tagging, and wiki are reconstructing scientific publications into a flexible and evolving concept. This panel will look at the social and legal implications of “Web 2.0″ and “Semantic Web” as they impact science and scientific knowledge.

Some of this was a bit over my head, but I’m just going to toss up my notes and then follow up with my impressions.

Panelists:

Moderator: John Wilbanks, Creative Commons

Matt Cockerill, BioMed Central

Melissa Hagemann, Open Society Institute

Timo Hannay, Nature Publishing Group

Amit Kapoor, Topaz/PLoS One

Notes:

We used to communicate scientific information by sending it to someone and having them publish it

Definitions:

Timo: Web 2.0:

Multi-faceted concept

Architecture by participation (network effects, harnessing collective intelligence)

The Long Tail

Open APIs, Mashups (Open Data and Open Access)

Interface Issues (AJAX, web apps)

Development process (perpetual beta)

Web as a platform

Matt: The Semantic Web

Web pages no longer electronic paper

Robots/machines reading them along with humans

Defining standards for allowing computers to read information

Flood of data, more info that humans can possibly read

Need semantic web tools to sift through it

Help scientists publish work in a way that captures semantic structure

Melissa: Open Access

Free online availability of scholarly content

Defined 5 years ago – Budapest open access initiative

Open Access Journals are freely available online and don’t rely on subscriptions for revenue

Apply combinations of new business models

Article processing fee

Fee paid by researcher or research grant

Many researcher agencies are mandating Open Access for their researchers

Measure impact of article by citations in other articles (much different than hyperlinking)

Citation specifics have been a monopoly, still publish the definitive numbers

Starting to become available from other sources (Google Scholar)

Scientists don’t blog or comment very much

Those things don’t get credit for them

Very competitive

Connotea: Del.icio.us for scientists

Standards are being developed for web usage of scientific sites

Citation-based metrics—takes too long to get the data

Ancient history by the time everything is published

Amount of info that has to be dealt with is absolutely amazing

Lack of standards, lack of formats

Semantic Web played huge role

It is an evolving concept

Start with a concept, modify it over time

Text annotations

Attach a note to an article that says specific research is wrong

You can later search for all opposing theories

Trying to put out a release every two weeks

At about version number 0.5 now

All journals now (whether they like it or not) are databases

What is missing is the standards for the different types of data to be interwoven

No way BioMed science can move as quickly as it could if data is not open

OpenAccess makes this possible

Facilitates exchange of information

Nature relies on reader subscriptions

Nature rejects 92% of papers submitted

NatureJobs : Scientific career service

Web 2.0 science tools don’t generate any revenue yet (like Connotea)

History of policy pressures from government

OpenAccess – government funders didn’t want to pay for information twice

One funder provided a grant of 250,000 pounds to pay for research then he himself couldn’t access it

Wondered how much impact the research will have if nobody can access it

Semantic Web

Everything needs a permanent URI

What is the vocabulary of the community?

Bottom up AND top down approach to establish vocabularies

Wikipedia approaches have great value because otherwise nothing will ever happen

Bookmarking can become much more than keeping a list of favorite articles

As someone bookmarks and tags articles of interest, they can assemble a collection of scientific knowledge that is intresting and trustworthy

Can be used to recommend other research

RDF and ontologies have their place, Tagging and Microformats have their place

Tagging gives noisier data

Microformats are not the same as a formal ontology, but can be very useful

Defining things like what a gene is should be left to scientists

Things like defining an author can be done by the community

Question: Total divergence of solving the same problem (Tagging vs. Semantic Web)

Tagging: Assign keywords, let the Googles of the world figure it out

Semantic Web: Each document filled with tons of data

Amit: Tagging is a way of classifying objects

Tagging is a small subset of what the Semantic Web is all about

Tagging is the first step

The cost of putting in semantic web info is very high

Who is going to bear that cost? The author? The distributor?

Great second question from Amy, but a bit over my head. Must get from podcast when it comes out. The gist was how about how user-generated content can feed The Semantic Web.

Very effective ontologies have been extracted from user generated Wikipedia content

I work with many scientists that publish papers, but a lot of this is still so very foreign to me. I personally have a lot of faith in “Web 2.0″ tools such as tags and Microformats. I struggle a bit with some of this Semantic Web stuff.

I guess if I was trying to record my life by using Semantic Web technologies, I’d have to somehow go back and record everything I’ve ever said, where I said it, who I said it to, what they said back, what other thoughts I had without speaking them aloud, etc. If I use “Web 2.0″ technologies to record my life, I’d have my blog posts, Flickr photos, Del.icio.us links, YouTube videos, Twitter tweets, GMail, and any other social tools—plus the tags, timestamps, and (perhaps) GeoCodes that go with each. I could go a step further and do a desktop crawl for files, local photos (I haven’t thrown all 2500+ photos of Ella into Flickr), perhaps POP email, timestamps, folder names, etc.

Would this second approach be perfect? No. But could it be done? Yes. To me, the Semantic Web just feels too much like a dream that is unachievable. The panelists were definitely giving me that vibe, too. There is already so much scientific information out there. You can’t go back and put all this meta info on it. And for all the information that’s coming out, it’s hard to force people to follow a strict process of extracting certain data for the Semantic Web purposes. You can, however, track how that information floats around the web, how it is tagged, sorted, commented, annotated, etc.

One thing that didn’t sit well with me is the fact that scientists won’t blog because there’s no “credit” for that. They need to release their info in an environment that can be tallied up to rank them against their “competition.” Well, does writing a book directly help a blogger’s Technorati ranking? No, not directly. But with that book out there, more discussion about that person will ensue. Even though links are not being made to the book, the book is causing more discussion. I would like to think that a scientist that shares by blogging and commenting would gain notoriety in other ways. Perhaps not, but I’d like to think that.

But what do I know? I’m just a web hippie. I know many Semantic Web folks turn up their noses at things like Microformats. But to me, that feels a bit too much like someone that complains about small size of the in-ground pools that one person is digging as he is trying to dig an ocean. Only problem is, he’s been digging for ten years already and there’s no swimming in sight.

I’m Out of Shape

Adam Darowski — Mon, 19 Feb 2007 13:13:34 +0000

In case you haven’t noticed, Brian Oberkirch’s blog has become my #1 must read lately. Well, I say “read”, but I guess I have to say “listen”, too. Brian interviews… pretty much exactly the same list of people that I’d like to hear from. (In the tech world, that is. If Brian suddenly posted an interview with Earl Weaver, I’d have to tell him to get out of my head.)

So, Brian’s latest interview is with Guy Kawasaki of Garage. I touched on my long fascination with Guy before when Jennifer Jones interviewed him. One thing that I like about Brian’s chats is that he often is doing his interview subjects as much of favor as they are doing him by granting the interview. A lot has to be said for a good brainstorming session with a fresh set of eyes and ears. I’ve taken part in a few of these lately and I love the feeling of being helpful and being helped.

When Brian was talking to Guy about the possibility of blogging his next book chapter by chapter, Guy made an interesting analogy. He compared blogging to working out every day and blogging to going on a binge Jenny Craig diet. Frequently blogging keeps your writing—and your thought process—in shape. I noticed I’ve been slipping a little over the winter (an analogy for my physique as well?), so it’s time to start “working out” more.

Here’s a few things I’ve been doing/have done lately:

Getting ready for the release of Aptima’s CogBlog. We will be launching February 28. When I say “launch”, I mean changing our URL from https to http. Then, of course, we’ll post our first content again so that our trackbacks and pingbacks can work properly. I recently wrote my first post for the blog. It is called “Distributed Learning for the Army: Cost Effective or Just Plain Effective?” I’m consciously trying to make sure the subject matter between my two blogs don’t overlap too much. I’ll be one of four bloggers when we kick off, along with Daniel Serfaty (our brilliant and engaging founder who I have been working on “alternative” blogging methods with), Jared Freeman (our VP of Research), and Webb Stacy (our VP of Technology). Then there’s me. The web kid.

Working on TRACE-SE. TRACE-SE is the project that really kicked off this blog. It is a community resource site for cognitive systems engineering, so I started this blog to document what I was learning about community and Web 2.0. Well, we’re back into some serious development on that project after a bit of time off, so I’m quite excited. Late last night I was getting my kicks doing an Andy Budd-esque CSS-based image map. Woo!

Chatting with some interesting folks. As I mentioned above, I’ve had some good brainstorming sessions. I’ve also “met” a guy named Nick Peters, who has been writing some about Microformats and OpenID. One post of his that particularly smacked me upside the head was one about the iPhone and Microformats. As I wrote in the comments on that post, the iPhone (being a mobile device with a real, usable web browser) has the potential to really make use of microformats. Code marked up as phone numbers can be instantly detected and called. Code marked up as an address can be sent directly to that sweet Google Maps widget. Contact info can be added to your address book and synced back to your Mac or PC. Sweet.

Playing with the new MacBook Pro. Oh god I love this thing. One other thing I’ve noticed… don’t listen to what they say about Rosetta. Office still opens as soon as I click on it. Going from PBG4 to MacBook Pro is insane, even on non-native apps. And the thing is just so sexy. The key to great computer hardware development is making something people just want to touch. When they’re touching, they’re typing. When they’re typing, they’re getting shit done. When they’re getting shit done but still thinking they’re just touching this extraordinary piece of hardware… well, then they become a fanboy.

Securing everything for SXSW. Hell yeah, I’ll be there. Also, I saw that Webvisions 2007 is going to be in May. I was pretty sure I wasn’t going to make it this year. But that’s when it was in July. May… that could be a different story. Two days? Cheap price? Gonna do my best to swing it again. It was life-changing last year.

Man, all that typing while getting back into shape? I’m gonna be sore.

How Do I Test an hListing?

Adam Darowski — Sat, 27 Jan 2007 03:59:34 +0000

Hrm… I’m trying to go overboard again with Microformatting content for the NEATTA site. I just marked up my first hListings ever for the new classifieds page. Now, when I mark up an hCard or hCalendar, I can use a variety of Microformat plugins (such as Operator) to test the exported content in a variety of formats (such as sending the calendar event to Google Calendar or adding the contact info to Address Book.app).

As seen in the snap above, Operator doesn’t even have an option for hListing. Is anyone using hListing besides Edgio?

I Have a Problem

Adam Darowski — Tue, 23 Jan 2007 04:33:20 +0000

I have reached a new high in the blogosphere.

I have a “problem” named after me.

When I was chatting with Chris Messina a while back, he was telling me about how OpenID can solve the problems I brought up in my post hCard Overflow: Could We Use rel=hcard?. My homie Brian Oberkirch referenced that post in a recent post of his own titled OpenID, Portable Social Networks, and The Darowski Problem.

Darowski problem? WTF? That’s awesome!

I’m not sure what technically makes someone an “A-list” blogger, but to me, Oberkirch certainly is one. I gotta say, I’m honored to have the contact info overload problem be associated with me (a line I never thought I’d say when I was in design school). Then he emails me with a cryptic message that just says “Check it”, and a URL. ~~He’s~~ We’ve been picked up by ZDNet blogger Eric Norlin on a post called Brian Cracks the Identity and Web 2.0 Problem. After getting over the “Darwoski” spelling in Norlin’s piece, I’m pretty psyched. I literally have a problem.

So, back to OpenID. My god, this is needed. Read Brian’s article for a great summary of what the problem is and how OpenID will address it. Chris had told me to put OpenID on my to-do list for 2007 and Brian just gave me a bit more of a kick in the ass.

NEATTA.org: High Tech for the Low Tech

Adam Darowski — Mon, 27 Nov 2006 16:23:26 +0000

Today I launched the latest collaboration with my brother: The New England Antique Tractor and Truck Association web site.

Some background.

My father’s latest obsession has been acquiring and restoring antique tractors. I was raised in pretty rural Rehoboth, MA (where he still lives) and he and many of his contacts have formed NEATTA, the new England Antique Tractor and Truck Association. At a meeting, my brother and I were “nominated” to design the web site (“Hey Ed, your sons do that ca-raaazy web stuff, right?”).

While my time has been pretty thin lately, I took it as a challenge. My portion of the site (design, XHTML, and CSS) took about a grand total of ten hours—very important since I was paid the going rate of zero dollars per hour. (Hey, it’s a dot org.)

But in that amount of time, I was able to use the site as a sandbox for some cool technologies. You might say a little too cool for the target audience. I mean, how many blind tractor operators are there? If there are some, though, they will be greeted at NEATTA.org with open arms.

Some highlights:

Microformats: Yes, an antique tractor site has Microformats. I microformatted the upcoming event in the sidebar as well as the contact information on the Contacts/Links page. I don’t have much contact information yet, though, so all you get are titles and phone numbers.

Web Standards: It is a 100% CSS-based design.

Semantic Markup: All the underlying code is very easy to understand. We use H’s 1-4, a bunch of definition lists (loving these lately), and of course the unordered list for navigation.

Accessible and Usable: Links have semantic title attributes (and warn you when a new window will open), images have their alts, none of that “click here” junk, you are warned with a file format and size when opening a PDF, abbreviation tags are complete, etc.

Bulletproof: This was the biggest for me. It’s bulletproof in a few different areas:

Content areas: It will expand just fine as the text expands.

The DigDug test: Blowing up the text will expose more of the banner. None of the layout breaks.

Images off: Alt tags are shown with images off. The banner disappears and is not replaced by text (though you will see an h1 and h2 in the unstyled version). Is this an issue? I think not because the first sentence of text tells you exactly where you are in the event that the banner is not visible.

Pretty: Simple, but pretty (at least I think so). I don’t ever use red, so that was another nice challenge.

There will be more features added over time, such as:

A Style Switcher: Right now, the look mimics the old school red Farmall tractors. I’d like to throw in a style switcher that will change the look to green and yellow for the John Deere fans.

Classifieds: We’re going to implement some lo-fi classifieds soon (no backend). If it is popular enough, we will automate it.

Message Board: If they think they want one, I’ll put one in.

Blog?: Heck, I think we’re pushing it with the user base already. Give ‘em time to digest!

I’m very pleased with how it turned out. I’m looking forward to seeing member feedback. Their old site was just a sliced up image, so this should improve things big time.

hCard Overflow: Could We Use rel-hcard?

Adam Darowski — Mon, 06 Nov 2006 02:42:58 +0000

I’ve been writing a lot about Microformats lately. The Microformats community is pushing hard for more and more developers to adopt Microformats in their semantic code. I’ve been wondering, though… are we “overmicroformatting”?For example, if you go to the Microformats search engine at Technorati and search for a very “connected” individual, you’re going to get inundated. Searching for me reveals a whopping total of one hCard. And that’s the hCard I’ve put on my About page. However, if you searched for Brian Oberkirch, you’d get 258 hCards. That’s a lot of hCards. In fact, I’m concerned that we may be over hCarding.

The first result of the 258 Oberkirchs is the Syndicate 2005 speaker list hCarded on Tantek’s site. This hit helps back up my two issues with overhCarding.

1. Incomplete Data

Brian, like all of us, has a lot of bits of contact information. Among them, he has a phone number. He has an email address. Heck, I’m sure he even has a mailing address. But none of them are included in the hCard on the Syndicate list. Should that data be included? Well, there’s really not much of a need for someone to care about the phone numbers and mailing addresses of every single speaker at a conference. But then, what’s the point of setting it in hCard if you aren’t collecting the person’s entire collection of contact information? There are likely some uses that I haven’t thought of, but the extraction example usually given for hCard is to convert to vCard and add the person to your address book. What good are vCards in your address book without proper contact information? But at the same time, what good is being inundated with contact information on a conference speakers list?

2. Data Evolves

The hCard downloaded from the Syndicate speaker list has Brian’s organization as “Weblogs Work” and his title as “host of the Slidell Hurricane Damage Blog and CEO”. Well, Brian is no longer with Weblogs Work. He’s gone solo. And while he was the host of the Slidell Hurricane Damage Blog, that is still hosted with Weblogs Work, with whom Brian is no longer associated. So, when someone changes jobs, email addresses, or phone numbers, all of this hCarded data on the web is then obsolete.

What to do?

A Solution?

I’m no Microformats expert, but I wanted to brainstorm a potential solution to go with this question I’m raising. The solution I came up with is:

rel-hcard

Rel-hcard would be very similar to rel-tag, rel-nofollow, or rel-license in that it is simply an attribute of a URL. Rel-hcard would allow developers to link an appearance of a person’s name on a web page to his/her own personal hCard on his/her own site. This way, if the person’s contact information changes, the site always links to the most recent information. Also, you don’t have to provide information about that person that really isn’t needed on that page. You can simply list the name and a link to that person’s hCard.

On the Syndicate 2005 speaker page, each speaker is marked up as a row in a three column table. The first column contains the speaker’s name linked to the speaker’s bio on the Syndicate site. The second column contains the speaker’s title and the third contains the speaker’s organization. Like so:

So, one flaw that I see with my approach is that it requires a separate link. So, since Brian’s name is already linked to his bio page on the Syndicate site, we can’t link to his hCard with his name. I can think of a couple of ways around this.
The first involves creating a second link that we then hide with CSS (using {display: none}). Like so:
You’ll notice a couple of things. First, I stripped out the class names for the title and organization. That’s because if we’re using a rel-hcard, there would be no need to mark up this information. The HTML would basically be a timestamp of the person’s contact information at the time it was published. The current, up to date hCard would provide the most recent contact information in the correct hCard markup.
You will also notice the second link in the first column (Contact Info). It is given the class “contactinfo”. That class can then be styled to display as none. So, is it bad that it’s still in the markup but not displayed on the page? Personally, I don’t think so. Those viewing unstyled content are probably not going to have Microformat parsers available to them. This way they can see that there is a link to the person’s complete contact information.
Alternately, the speaker table could be modified so that the speaker’s name is linked to contact information (with rel=”hcard”) and another column is added with that speaker’s sessions (and links to them). The title and organization columns could stay, though I wouldn’t mark them with “title” and “org” Microformat classes. I’d leave that to the hCard we’re linking to.
Does this make sense? Has this already been brought up in the Microformats community? Is there already a solution? This is similar to rel=”url” except that this would specifically tell parsers that the link contains an hCard. Perhaps this is encroaching on some of the work underway with OpenID, but this solution is one using pure Microformats.
Update: Brian Oberkirch has dubbed this “The Darowski Problem”.

Bulletproof Notes (A Day with Dan Cederholm)

Adam Darowski — Fri, 03 Nov 2006 02:59:53 +0000

Today, I spent the day at a small 40-person class with Dan Cederholm, titled “Bulletproof Design with XHTML and CSS”. My notes:

Reception:

It was raining in Boston today, so I headed into the Museum of Science and wiped my glasses clean. As I looked up, there was Dan Cederholm getting coffee. So, I went over to say hello, and to my surprise, he said “Hey Adam.” Now, I met Dan once, in late July. Apparently remember names is a skill much needed in this business. So, it’s always nice when your “web design superhero” knows you by name. I guess if I was a kid and walked up to Nolan Ryan and he said “Hey Adam”, it would be a similar type of thing. Okay, maybe not quite… but still…

For those wondering, Dan’s son Jack was a monkey for Halloween.

With Dan was Ryan Carson of Carson Systems (they’re puttin’ on the show). So, I was able to meet him as well. I got to thank him for making the Future of Web Apps podcasts available for us that were not able to go. I rode the elevator with the two of them until we got to the conference room, and then I realized I was the first one there. Not bad… got to lay claim to a spot on one of the few power adapters. Also got to meet Gillian Carson, Ryan’s wife and partner in Carson Systems. Carson Systems also runs the wonderful web design resource, Vitamin.

I also had coffee and muffins (or for me, tea and a gooey cinnamon bun thingie) with Scott and Justin of Dealer.com. They’re from Burlington, VT and are applying CSS designs to the automotive industry. Kind of a similar situation to me, I suppose—implementing modern web technologies in an industry that generally isn’t associated with them.

Part 1: Introducing the Bulletproof Concept

Timeline: W3C, Web Standards Project, Box Model Hack, Zeldman’s Designing with Web Standards, Wired News redesign (with all CSS), CSS Zen Garden, Blogs/Corporate Sites/etc. using standards.

Bul•let•proof (adj.)

Worse-case scenarios

Embracing flexibility

Design that is difficult to “break”

Future-proofing

Making it easier to hand off templates to teams and clients

Accessibility from semantic markup

“Working yourself out of a job”

You can hand it off and not have as much follow-up work

Bulletproof vest is not 100% protection.

Guideline #1: Turn off images. Turn off images to ensure the page is still readable in the absence of graphics.

Bulletproof Paths:

Content

Text size

Content amount

Editing

Content changes

Maintenence

Environment

Device/browser

Scenarios

Guideline #2: Let go of pixel precision. Take a deep breath. Realize you’re not in complete control. This is OK.

Using pixels for font sizes: IE6 and below, users cannot resize.

font-size keywords

body {font-size: small}

h1 {font-size: 130%}

setting a base in ems

body {font-size: 62.5%}

sets a base of 10px

Guideline #3: Provide a flexible base for text. Try using keywords or ems for sizing text. Allow users to adjust as needed.

IE7 allows pixel resizing. So, pixels should be fine for sites that don’t rely on IE6 and older very much. However, keywords do add a semantic quality to it (“small” on whatever device). Ems just seems like a hack for px.

Guideline #4: Use the ‘DigDug Text Test’: Resize text a few notches to see what happens. (get actual text from Dan’s slides)

Vitamin uses em based layout. The entire site adjusts when you increase text size. Everything in the entire site is scalable.

Dan then went through many specific examples: The bulletproof arrow, the tabs from Cork’d, the NetFlix expanding box. They are examples I’ve seen before, but always good to see again.

Guideline #5: Accept the box. Look for simplistic ways (get rest of text)

More examples: ClearLeft, Hicksdesign, Odeo, Cameron Moll…

Guideline #6: Reuse/recycle. Plan for multiple instances and uses for a particular style.

Cork’d ornamentation, Tundro…

Microformats.org:
hover (doesn’t work in IE6 and below)

Break #1: Sat with the guys from Dealer.com again. They’re looking to hire HTML/CSS designers, BUT in the Burlington, Vermont area. So, if you know anyone…

Dan started the second session with an indepth look at redesigning the navigation of Lance Armstrong’s site navigation with an unordered list and CSS instead of images. {display: block} is something I hadn’t used. That makes the entire tab clickable instead of just the link. I’ll have to look into this some more because I didn’t use it on my last site but the whole box seems to still be a link.

Internationalization: using more code and less images makes translation much easier.

Great design does not always equal great web design.

Part 2: A Design Uncork’d (Markup)

Styleframing (Wireframing with CSS):

Saves time if IA and designer are the same person

Clickable, usable

A head-start on template code

Realistic Environment

Don’t need to worry about cross-browser CSS issues

Worry more about markup structure than optimal CSS

Iterative Prototyping:

Sculpting an Interface

Combination of CSS and image editing

Semantic markup:

Choose HTML elements based on meaning

Separating presentation and content

Search engines love it

greater importance to headings, etc.

Understood by a wider variety of browsers and devices

Markup once, redesign more

Describe what something is, rather than what it should look like

“left” or “right” are not semantic for class names

Leverage inheritance

Use link title attributes to further explain

divs and spans = empty calories

Now it’s time for a closer look at the markup of Cork’d. We just combed through the site, also discussing things like Derek Powazek’s site. Some nice semantic discussion ensued.

Break #2 (Lunch): Had a very good lunch just now, setting with folks from a bunch of different companies. The bunch included Carson Systems’ own Gillian Carson, who educated us all on the UK and gave us some dirt on Ryan (of course).

“Post lunch… it’s always ‘that time’, you know…” Dan says…

Microformats for Designers

Dan’s definition of Microformats:

Person 1: “I’m going to mark up a contact like this.
Person 2: “Cool. I’ll do it that way too.”

Man, some of Dan’s logos for Microformats that weren’t used are simply gorgeous. I do like what the final logo conveys, though. The three parts are XML, XHTML, and Microformats (gradually from larger to smaller).

Dan then show the different tools for identifying and using Microformats (using Technorati’s converter, John Hicks’ user style sheet, and LeftLogic’s bookmarklet).

I then asked a question I’ve had about Microformats for quite some time… Dan seemed to think it was a valid concern. However, I think that’s a blog post for another time.

Part 3: A Design Uncork’d: (Style)

Style property order: I haven’t worried about this much. Maybe I should…

Guideline #7: Build for moder browsers first. Future-proof your designs by developing and testing in modern browsers. Later, adjust with patches for others.

Multiple style sheets:

Markup calls screen.css

screen.css calls master.css and ie.css (for all the damn hacks)

Article by Molly about management of hacks

Filtering CSS by Doug Bowman

Guideline #8: Master floats. They can be tricky—but critical for creating independent modules.

Containing Floats by Eric Meyer

Self-clearing floats:

Using div.box:after, can self-clear the float

Position is Everything bug fix for IE6 and older

IE7 requires “*:first-child+html div.box”… ugh.

Think modular

CSS Typography

Core fonts:

Verdana, Arial, Georgia, Times, etc.

Lucida Sans, Trebuchet, Helvetica

Good for headlines:

Georgia

Trebuchet

Helvetica

Arial

Next, we went step-by-step through styling the Cork’d layout.

For the h1:

Dan put an image in the header that would look good if the site was unstyled.

In CSS, he positioned that 9999 px off the screen.

He then served up a background image (that blended with the background color of the header) within the tag.

For the wine table on the home page:

For the wine’s region, Dan used an with the class “region” that he could then style and display as block (forcing it to a new line).

Also, he used
to alternate the row color.
He uses
to remove the final border to the last item in the table. (this part added in the Rails portion by the developer)
Part 4: Beyond Template Design

Fixed vs. Fluid

When executed well, fluid layouts can be betterproof

Can have drastic effects on page design.

Each has their place

Framing by percentage can give you a manageable line width (along with max-width)

Sliding Faux Columns:

70% column, 30% column

anchor at 70% from left, 0 from top

can’t have one pixel frames (will slide off screen)

might want to set max width for over 2000px.

What about 3 columns?

Uses two background images with Sliding Faux columns technique

Attach background images to two divs (#wrap, #wrap-inner)

wrap image is orange (right column) and white

wrap-inner image is green (left column) and transparent (so they don’t cross over each other)

Variable fixed-width layouts:

Wider layout for wider browser windows.

Javascript swaps class or serves alternate stylesheet when window is narrowed.

Predictability for designers, increased flexibility for readers.

an example from collylogic.com

Em-based layout (elastic):

Based on text size (not window size)

Guideline #9: The 10-second usability test. Routinely check your pages with CSS turned off, quickly gaugeing its semantic structure.

Guideline #10: Validate. Validate markup and stylesheets as you’re building to avoid baffling display issues.

Bulletproof dashboard:

Disable styles

Turn off images

Validate your markup and stylesheets

DigDug Text Test

In Conclusion: Fantastic. The full-day session and interactivity provided a level of detail you can’t get elsewhere. Dan is a great presenter… modest, quietly humorous, and extremely knowledgeable. I’m glad I built on his WebVisions session with this full day crash course.

Meeting Ryan and Gillian was also damn cool. Ryan was very excited to talk about what’s in store for Carson Systems—and rightly so. I agree that it is very exciting. I hope to meet up with him at an event in the future.

And of course, the other attendees were really cool. I talked quite a bit with Scott and Justin of dealer.com—very cool guys. They picked the right place to look for help on the XHTML/CSS front. I hope they find their designer.

So, in a word… awesome. I am now bulletproof.

Here are some photos taken from the balcony…

Is That an hCard on Your About Page?

Adam Darowski — Fri, 27 Oct 2006 02:24:29 +0000

So, I finally hCarded my About page. It’s not that I didn’t know how to do it… I just wasn’t really using an About page yet. But here it is.

Oh, and what’s that saweet overlay in the image above? Left Logic provided a bookmarklet for identifying Microformats. Not only is this great for tiding me over until Tails is ready for Firefox 2.0, it could replace Tails. I do like the look of it and the functionality better than Tails. But Tails does have the auto-detection. So, I can imagine using both together.

Either way, Microformats is starting to get all growed up. Crissakes this is developing quickly. Heck, I even had to make a blog category for Microformats because I’m talking about it so damn much.

Microformats vs. The Semantic Web (Big S, Big W)

Adam Darowski — Wed, 25 Oct 2006 12:15:30 +0000

Dan Cederholm recently linked to an article called Can Your Website be Your API? by Drew McLellan. In that article, Drew linked to his presentation of the same name that he gave at the Web Standards Group London Meetup (podcast feed linked on that page) on October 19. Naturally, I downloaded all of the podcasts and listened to just about all of them on my way home last night and way in this morning.

Drew’s talk was one of three related to Microformats. The first was by Mark Norman Francis (of Yahoo) and the second was by Jeremy Keith. Drew’s came third. The theme of the three was a past, present, and future of Microformats and the applications of Microformats.

Drew talked about how simply adding Microformats (the formal name for adding semantic, standardized class names to your HTML, essentially) could open your site up to many of the benefits an API gives. Your plain HTML content then becomes machine readable and agents can use your data with very little difficulty.

I have explained Microformats to colleagues as somewhat of a “band aid” between “semantic markup” and “The Semantic Web” (the latter being Tim Berners-Lee’s vision of a machine-readable and -usable web). But Microformats seems to be encroaching on some of the ground established by the Semantic Web. The first speaker, Mark Norman Francis, gave a compelling and provocative case for adopting Microformats as a replacement for much of what the Semantic Web is trying to accomplish.

First, Mark quoted the Semantic Web’s entry on Wikipedia:

For example, with HTML and a tool to render it (perhaps Web browser software, perhaps another user agent), one can create and present a page that lists items for sale. The HTML of this catalog page can make simple, document-level assertions such as “this document’s title is ‘Widget Superstore’”. But there is no capability within the HTML itself to unambiguously assert that, say, item number X586172 is an Acme Gizmo with a retail price of ‚Ç¨199, or that it is a consumer product. Rather, HTML can only say that the span of text “X586172″ is something that should be positioned near “Acme Gizmo” and “‚Ç¨199″, etc. There is no way to say “this is a catalog” or even to establish that “Acme Gizmo” is a kind of title or that “‚Ç¨199″ is a price. There is also no way to express that these pieces of information are bound together in describing a discrete item, distinct from other items perhaps listed on the page.

Mark immediately follows with:

Those people have never heard of the hListing microformat, which does pretty much exactly that.

This is the problem we have—visible metadata. All of the information on the web should be visible to you as a human. The moment you take this information, whether it is already on the web page or about the web page and put it somewhere else, it becomes invisible to you. You then have to go and use other software to extract it. This is bad, from my point of view anyway.

Mark then continues to go on to slap around the Semantic Web some more, as well as things like XML namespaces. He certainly makes a case. I’m not going to pretend I know enough about the Semantic Web to say all of the associated technologies can be replaced by Microformats, but it seems that some aspects of both the Semantic Web and APIs are simplified by Microformats.

I highly recommend listening to the podcasts. Mark’s is quick—just 21 minutes. Here are the links:

Mark Norman Francis | audio | slides

Jeremy Keith | audio | slides

Drew McLellan | audio | slides

More Microformats resources:

Official Microformats site and wiki

Their post on the WSG meetup

Microformatique, a blog about Microformats started by John Allsop

Microformats Primer by Garrett Dimon on Digital Web

Microformats Search Engine @ Technorati

Microformats @ Wikipedia

Dan Cederholm’s use of microformats on Cork’d

WHOIS?: Brian Oberkirch

Adam Darowski — Wed, 18 Oct 2006 18:56:28 +0000

It says a lot when Brian Oberkirch interviews a successful entrepreneur like Ted Rheingold of Dogster and Catster and Ted seems just excited about hearing what Brian has to say. Brian is that good.

So, who is Brian Oberkirch?

The About portion of Brian’s website describes him as “Social media consultant. Writer. Marketer. Dreamer & tinkerer.” Basically, to me, he is an idea factory. Forget about just social media and marketing, he has great ideas on tech subjects such as microformats and mashups, too. Brian does a series of interviews under the name “Edgework” and he recently rattled off three good ones in a row.

In the most recent episode, as I mentioned, he interviewed Ted Rheingold of Dogster and Catster. Dogster and Catster allow people to make web pages for their beloved pets. So, quite the community has grown around these pages. They talk about how the sites fill niche, passion-centric markets. General social networking sites don’t tend to do so well. It helps to have a common interest that the users rally around. Flickr revolves around photo sharing, for example.

MySpace started off as a site where users discussed unsigned bands that they were fans of. Now MySpace is far more general, but it is sustaining itself—probably because it is so damn ubiquitous. Facebook is now trying to do the same. They were a community that were bonded together by academia. You needed a .edu email address to be admitted. So, there was a sense of community because everyone had something in common. Now Facebook is letting more users in, and some existing users don’t like it. It will be interesting to see what happens there.

Before Dogster, Brian covered Kiva, a nonprofit founded by Matt Flannery. What is Kiva? Let me just let the site explain it:

Kiva lets you connect with and loan money to unique small businesses in the developing world. By choosing a business on Kiva.org, you can “sponsor a business” and help the world’s working poor make great strides towards economic independence. Throughout the course of the loan (usually 6-12 months), you can receive email journal updates from the business you’ve sponsored. As loans are repaid, you get your loan money back.

There just aren’t many sites out there like Kiva… it’s a great idea. Not only community marketing, but community financing—for a cause. Kudos to Matt.

Finally, before those two episodes Brian talked to Chad Dickerson of the Yahoo Developer Network. The main topic was Yahoo’s Open Hack Day. Yahoo used to hold internal contests to see what types of cool hacks and mashups their developers could come up with. Recently, they opened it up to the outside world. Check out the winners here.

Brian provides a lot of great ideas about the mashup culture, which is nothing short of fascinating. To see more examples of mashups, check out ProgrammableWeb.

To find out more about Brian, check out an interview by Shel Israel on Naked Conversations. I recommend checking it out. One quote from that interview that stuck out to me was when he was talking about how old school marketers will need to be cognizant of the new school “unmarketing” techniques, though it will be a gradual process:

I know we talk a lot about dinosaurs and how everything is changing, etc., but I think it will be gradual. If you don’t eat well, keep smoking, never exercise, eventually that will catch up to you. Same thing will apply. You’ll be able to get away with it for a while, but there will be a tremendous opportunity cost.

I thought this exact quote could relate very well to what will happen if old school table-based web designers don’t pay attention to web standards.

Not to be bandwagonesque, but Jeremiah Owyang also recently had a post about Brian.

So, lastly… I need to ask a question. Brian… when are you going to write a book on all of this? Personally, I can’t wait.

WebVisions 2006 Recap: My Presentation

Adam Darowski — Thu, 24 Aug 2006 18:12:07 +0000

Two days ago, I gave my brown bag presentation titled WebVisions 2006 Recap. It was an internal Aptima presentation shared over video conference (Woburn, MA and Washington, DC). The talk lasted about 38 minutes and included topics such as web standards, semantic markup, microformats, community marketing, corporate blogging, decentralized living, bulletproof web design, and social information architecture (all related back to the sessions I attended).

The feedback from the presentation has been quite good—it was my first presentation while flying solo (did one as a duo before… another as a quartet). To give you an idea of the audience, most of these technologies were absolutely brand new to folks within Aptima. So, some of it may be a little high level. But I find all of it very interesting and it was a pleasure to make the presentation.

View the Presentation (audio with slides… 18.7 MB Flash file)

Listen to the Presentation (audio only… 17.4 MB mp3 file)

I wanted to throw some thanks to Brian Oberkirch, Erin Julian, Nick Finck, and Will Pate for the use of their photos in the presentation. Also, big thanks to Aptima for sending me to the conference!

WHATIS?: Microformats

Adam Darowski — Wed, 19 Jul 2006 01:54:42 +0000

Okay, so I’d been hearing about Microformats quite a bit. Dan Cederholm talked about how he used them for his latest site, Cork’d.

The other day, I came across a nice introduction to Microformats that you should check out if you’ve never heard of them.

Sorry to pass you off to others’ sites, but I’m busy packing for the WebVisions 2006 conference tomorrow! The aforementioned Dan Cederholm is going to be presenting on Bulletproof Web Design. Can’t wait! Expect more posts from the conference.

Brian Oberkirch host of the Slidell Hurricane Damage Blog and CEO Weblogs Work

Brian Oberkirch (Contact Info) host of the Slidell Hurricane Damage Blog and CEO Weblogs Work

Brian Oberkirch	host of the Slidell Hurricane Damage Blog and CEO	Weblogs Work
Brian Oberkirch (Contact Info)	host of the Slidell Hurricane Damage Blog and CEO	Weblogs Work