Translucent Elements with CSS

By admin

From the Opera Developer Community, the talented folks who managed the Web Standards Curriculum, comes my latest colum.

This article covers the method for varying the opacity of elements in a Web document:

There are two general methods for creating partially transparent elements on a Web page. The first method uses transparent PNGs with the opacity pre-set through a digital imaging application. While this technique works, making it cross-browser compatible is a bit complicated. Internet Explorer 6 and below don’t support PNG alpha-transparency natively, so you need to incorporate Microsoft’s AlphaImageLoader filter and some scripting to correct for this deficiency.

The second method for creating translucent elements—the technique we’ll explore in this article—is to use CSS properties to directly control the transparency of an element.

To read the rest of the article, head over to the dev.opera.com Web site.

American Flag in CSS

By admin

What better way of commemorating 230 years of American independence than by creating an American Flag in pure CSS? Oh. Fireworks? Well, yeah, you can do that, too, I guess. But let’s stick with the CSS flag idea for now.

The goal of this exericse is to create a flag that is not only visually appealling, but is also useful: so that clicking on any of the stars will take you to a different state’s main government page, and clicking on any of the stripes will take you to—where else?—the government sites of the original thirteen colonies. 

This task, while daunting, will nonetheless flex our designing muscles. 

The Basic Markup

First, let’s lay the groundwork for the flag by constructing our HTML. Let’s include a title for our page, as well as the 50 states represented in the American flag. The title is wrapped in a header tag. A semantically fitting way to markup the 50 states is through a list. 

So, enclose the states with an ordered list tag, and each state in a list-item tag:


<h1>
 <a href="http://www.usa.gov/">United States of America</a>
</h1>
<ol>
 <li><a href="http://www.alabama.gov/">
  <strong>State of Alabama</strong>
  <i></i>
 </a></li>
 <li><a href="http://www.state.ak.us/">
  <strong>State of Alaska</strong><i></i>
 </a></li>
 [...]</ol>

Note that we’re also linking the title, as well as each individual state, to their respective government sites. We’ve also included an extra set of italics tags within each link, which we use a selector for styling later.

We also want to distinguish the thirteen colonies from the rest of the states, as these comprise the thirteen stripes of the flag. Let’s do this by emphasizing them, wrapping them in the em tag, e.g.:


<li><a href="http://www.ct.gov/">
 <em><strong>State of Connecticut</strong></em>
 <i></i>
</a></li>

So far, what we have doesn’t look very much like a flag! That’s where the CSS comes in. Now that we have the basic markup down, let’s begin styling our page.

Creating the Easel

First, we want to create the “easel” upon which we draw our flag. We do this, by, first, further structuring our HTML. Wrap all of the page’s content within a div tag; assign it an id attribute with a value of easel:


<div id="easel">
 <h1>
  <a href="http://www.usa.gov/">United States of America</a>
 </h1>
 <ol>
  <li><a href="http://www.alabama.gov/">
   <strong>State of Alabama</strong><i></i>
  </a></li>
  [...] 
 </ol>
</div>

Next, we need to style this div to create a canvas. How do we do this? Take a look at the CSS:


body {
 margin: 10px 0 0 0;
 padding: 0;
}
#easel {
 width: 955px;
 margin: 0 auto;
 position: relative;
}

We want to first, set the width of the canvas, and, secondly, center it.

To center the canvas for our flag on the page, we, first, set the margins on either side of the “easel” div to auto. The browser automatically splits the margin in half and assigns it value to the left and right.

Now, we want to clear the text from our easel, i.e., create a blank canvas on which to “paint” our flag. To do this, add the following CSS:


#easel ol {
 list-style: none;
 margin: 0;
 padding: 0;
}
#easel strong {
  display: none;
}

First, we’ve gotten rid of the preceding bullets as well as the default margins and padding. Second, we’ve hidden all of the text within the strong tag, which includes all of the list items.

Creating Stripes

Now, to begin painting our flag, let’s begin with the stripes.

Remember that the thirteen colonies, which make up the stripes on the flag are distinguished from the other states through the em tag.

So, we can create the stripes by styling this selector:


#easel em {
 width: 955px;
 height: 50px;
 display: block;
 background: #BF0A30;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

At this stage, we have set the width and height of our flag. And, after setting a background color, we’ve turned the selector into a block-level element so that we can position it on the page. We’re absolutely positioning our stripes, which means that we’re offsetting it against the edges of the parent element. 

Relative positioning, alternatively, places it relative to the element’s default position on the page. So, here we’ve placing it in the upper left-hand corner of the parent element, the “easel” div: we’ve placing it zero pixels from the top, and zero pixels from the left of the edges of the containing element.

The z-index property governs the “third dimension” of the elements on the web page. That is, it specifies the elements’ stacking order. The higher an element’s z‑index number, the higher it is in the stacking order. 

E.g., an element with a z‑index value of five is placed on top of an element with a z‑index value of one. We want the stripes to be placed beneath the blue field of stars, so we give that a low z‑index value of one. 

Thus far, it looks like we have only one stripe! Actually, all thirteen stripes are on the page, but they are all placed in the exact same position—and they are all red. To distinguish our thirteen stripes, we have to position and color each stripe individually.

How do we pick out each specific stripe for styling? To do this, first note what attributes individuate each state in the markup:


<li><a href="http://www.ct.gov/">
 <em>State of Connecticut</em>
 <i></i>
</a></li>

Each state is marked uniquely with a different link address. We can use the href attributes to create selectors for each stripe:


#easel a[href="http://delaware.gov/"] em {
  background: white;
 top: 50px;
 left: 0;
} 
#easel a[href="http://www.georgia.gov/"] em {
 top: 100px;
 left: 0;
}
[...]

Since we originally set the background color for the em selector as red, we need to change this color for all the white stripes. 

Then, we just need to move each stripe from the top of the page into its designated spot. Each stripe is 50 pixels high, so the second stripe, in this case is Delaware, needs to be placed 50 pixels down. The next stripe is placed 100 pixels down, and so on.

Once we’ve finished coloring and positioning all 13 stripes as needed.

Creating Stars

Now that our stripes are in place, it’s time to move on to the stars. First, we need to create the blue field upon which the stars are placed. To do this, we’re going to transform the page header. To turn the header into a blue box, we need to hide the header text, then size, position and color the anchor selector within the header element:


#easel h1 a {
 position: absolute;
 width: 215px;
 height: 175px;
 background: #002868;
 text-indent: -9999em;
 margin: 0;
 padding: 0;
 z-index: 20;
}

Absolutely positioning the element without any offset properties place the element in the upper left-hand corner of the “easel” div, which is the containing element. 

After setting the width, height, and background color, we have effectively “hidden” the header text by indenting it far off of the page. 

Finally, by setting the z‑index value to 20, we’ve stacked it on top of the stripes.

To create our stars, we employ a technique similar to the method for creating the stripes. We select each state in our CSS through their unique href attribute, and then style accordingly. 

We don’t want to style over the same element that makes up our thirteen stripes, so we have to use a different selector than the anchor. We use the italic tag as our selector for each of the states:


#easel ol li a[href="http://www.alabama.gov/"] i {
 background-image: url(stars.gif);
 display: block;
 position: absolute;
 top: 13px;
 left: 13px;
 z-index: 50;
 width: 24px;
 height: 23px;
}
#easel ol li a[href="http://www.state.ak.us/"] i {
 background-image: url(stars.gif);
 display: block;
 position: absolute;
 top: 13px;
 left: 90px;
 z-index: 50;
 width: 24px;
 height: 23px;
} 
[...]

The star itself is a small GIF image.

We point to this image in the background-image property. Then, we position this star by moving the element from the top left-hand corner of the containing div. Each state’s star is positioned differently, according to its place on the blue field. We’ve also set its z-index value to 50, to place it on top of both the stripes and the blue field it is set against.

Once we’ve finished the tedious task of applying CSS to all fifty states, we have a completed American flag.

Adding Texture

Why don’t we add some additional visual interest to our creation by adding some subtle texturing effects? This can easily be done by strategically placing some transparent PNGs as background images to our elements. 

PNGs support alpha transparency which allows portions of an image to be partially transparent. This allows for some very interesting effects, such as creating the illusion of a “textured” surface. 

Read my blog post “PNG Transparency for Internet Explorer (IE6 and Beyond)” to learn how to provide PNG support in order browsers. Note that this tutorial is geared towards browsers with native PNG support.

Let’s place a transparent image behind the elements comprising our flag. First, we place the image behind our red stripes:


#easel em {
 width: 955px;
 height: 50px;
 display: block;
 background: #BF0A30;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 background-image: url(flag_bkgd.png);
 background-position: 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

We’re placing the image half-way from the left and top edge of the element, the stripe. The background-repeat property specifies that the image is not tiled, i.e., the image is not be repteated vertically or horizontally.

Let’s do the same for the white stripes:


#easel a[href="http://delaware.gov/"] em {
 background: white;
 top: 50px;
 left: 0;
 background-image: url(flag_bkgd.png);
 background-position: 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

And, lastly, to the blue field:


#easel h1 a {
 position: absolute;
 width: 215px;
 height: 175px;
 background: #002868;
 text-indent: -9999em;
 margin: 0;
 padding: 0;
 z-index: 20;
 background-image: url(flag_bkgd.png);
 background-position: 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

This final bit of CSS results in a festive American flag masterpiece that works in IE7+, Firefox 2+, Opera 9.5 and Safari.

Happy 4th of July!

Twitter-Sized An Event Apart Presentation Summaries

By admin

I’m not one that you might call a copious note taker. I burn out quickly listening to presentations and tend to focus on note taking rather than digesting what is being said.

Rather than long notes, I go another direction. In order to help remind me of what I witnessed during the two-day event known as An Event Apart Boston 2008, I decided to run through the presentations and write-up a Twitter-sized summary of each one. 

Title Slide

Understandng Web Design by Jeffrey Zeldman
Web designers are very talented people who should get more respect. Calls user centered design something else: “Empathy Web Design”.
The Lessons of CSS Frameworks by Eric Meyer
Eric examined nine CSS frameworks, but says they all aren’t right for you. You should make your own or adapt them to your liking. 
Good Design Ain’t Easy by Jason Santa Maria, 30
Designers should be story telling. Talks about the history of print design and how that can bleed over to Web design.
Web Application Hierarchy by Luke Wroblewski
Give your users the “confidence to take actions”. Telling people visually what to do on your site is good. Learn graphic design principles.
Design to Scale by Doug Bowman
We respect proportions. McDonald’s scales, Starbucks sells experience, not Java. Quotes Paul Rand: “Simplicity is not the goal.”
When Style Is The Idea by Christopher Fahey
Quoted Paul Rand, Stewart Brand, etc. Style encourages innovation. Style sells, style happens. Fashion has a vocabulary, does Web design?
Scent of a Web Page: Getting Users to What They Want by Jared Spool
Five types of pages users encounter: Target Contnet, Gallery, Department, Store, Home Page. Users have a purpose when coming to your site.
Debug/Reboot by Eric Meyer
CSS debugging is a good way to tease out things that might be trouble. Not many people use Link Checkers. Reviews his CSS Reset rules.
Comps and Code: Couples’ Therapy by Ethan Marcotte
It’s okay to admit mistakes. Covers three projects and problems he encountered. Treat everyone on your team like a client and prototype!
Principles of Unobtrusive JavaScript by ppk
Unobtrusive JavaScript is more like a philosophy. Use JS wisely for improved accessibility and Web standards-based sites.
Standards in the Enterprise by Kimberly Blessing
To get Web standards into large companies, you need to follow the Circle of Standards: train, review, document, repeat. Buy our book!
Designing the User Experience Curve by Andy Budd
People pay for the experience of Starbucks, not for the coffee. Pay attention to detail, pay attention to your customer.
Designing the Next Generation of Web Apps by Jeff Veen
“We are awash in data.” Make data meaningful to your users. Another spotting of Napoleon March to Moscow infographic in a presentation.

The Nashville Voices That Matter Web Design Conference

By admin

I’ve recently returned from Voices That Matter in Nashville. As Jeremy noted earlier, this conference is a little different in that the common thread was that each speaker had written a book or is working on a book that will be published relatively soon through Pearson Education. If you don’t know who they are, I’m pretty sure you might have heard of New Riders or PeachPit books. 

This approach created a rather eclectic and engaging mix of topics in the crowd. One morning you are watching Steve Krug on stage having a conversation about usability and books. Then in the afternoon you have sessions from Kimberly Blessing talking about managing internal standards for Web development. 

As someone who is more of a generalist, working on almost every part of a site’s development, Voices That Matter was a refreshing change of pace on the conference scene. In fact, when I saw the speaker listing earlier in the year, I made a point to stay for the whole conference. 

In addition to the wide range of topics, the attendance is way lower than SXSW. So, if you wanted to follow up with someone at the conference, you could. You didn’t, like I had to for SXSW this past year, send an email to friends to haggle meeting locations and times. 

To help promote PeachPit’s Adapting to Web Standards, I was humbled to be one of the three CSS speakers that includes Charles Wykes-Smith and Zoe Gillenwater, I took the opportunity for my session to be a bit inspirational and showcase how several everyday CSS techniques, applied at the right time can create something visual interesting. 

Speaking of inspiration, there was the city itself, Nashville.

In taking it’s lengthy nickname “The Athens of the South” to the extreme, there’s a full-scale replica of Parthenon. As a reformed high school Latin geek, visiting the replica was a little bittersweet. If only the National Junior Classical League held their National convention there, I might have studied more for the Certamen.

Then there was Hatch Show Print, a printing house that’s been making music promotional posters since the late 1800s. The letter blocks they use today or pretty much the same ones they still use in music posters for R.E.M., Modest Mouse, Dave Matthews, Willie Nelson and so on. 

So, looking back at it, Voices That Matter was a wonderful, intimate conference. Hope to be back next year.

CSS Text Shadows and Background Sizing

By admin

The Opera Deveoper Community published a recent article of mine about CSS3 properties text-shadow and background-size.

If both properties were implemented across mainstream browsers, I believe we would see a lot more visually engaging and bulletproof Web site designs. (Of course, the Spider-Man caveat still exists: with great power, comes great responsibility.) Here’s a snippet from the article:

CSS3 offers advancements in how Web designers can apply design touches to their designs. One of the most often wished for properties — text-shadow, which allows easy creation of drop shadowscode — looks to be popular as new versions of popular browsers are starting to support the property.

I will also look at background-size — this is a CSS property that will let Web designers set the backgrounds of elements so that the background images can stretch or fill the entire background image, if widely implemented.

Together both CSS properties can add unique twists to everyday Web design with minimal effort. In this article I will explore both of these, showing how they work with some simple examples. Read More

Adapting to Web Standards Contest and Interview

By admin

It’s been sometime since the Adapting to Web Standards book contest, but I wanted to give you an update now that the holidays are way past over.

In short, the winners were picked and notified of their winnings. To help things along, I picked three random numbers and matched them to the comments to the contest blog posting. I sent out books to the winners Wayne and Michael, except for Vincent–still waiting on him to reply to my email. (That’s a hint, Vincent!)

In other news co-author Kevin Lawver was interviewed by Frank Gruber. Kevin does a great job in talking about the book, the development of AOL.com, and the role of Web standards in an organization. It’s a great little interview, I encourage you to check it out.

If you’re going to SXSW Interactive this year, be sure to drop by the PeachPit/New Riders booth. Also, I hear one or two co-authors maybe doing a book signing, too.

The Kimberly Blessing Interview

By admin

If you haven’t heard the name Kimberly Blessing, which is indeed a failing, you might have heard of some of her work.

Around the turn of the millennium, Kimberly started as an Interactive Developer for AOL. While there she was instrumental in the standards-based training of the developers as the Acting Director/Senior Manager of Studio Development. 

She currently works for PayPal as the manager of their Web Development Platform Team. 

Lending her expertise in managing Web standards within a team environment she learned from AOL and PayPal, Kimberly authored the “The Circle of Standards” chapter to the book, Adapting to Web Standards.

She’s also a co-leader of the Web Standards Project, an organization which played a key role in getting Microsoft and Netscape to adapt standards like CSS in their browsers. Recently AOL, which bought the Netscape Browser, announced on December 28th that support for the browser is coming to an end.

I’m pleased she is able to spend some time to talk about Web standards, of course, but also being an introvert, HTML emails, and Duran Duran. 

Kimberly Blessing

CS: How would you describe yourself?

KB: Personally, I’m the eternal student I love to learn and to read. I’m a geek at heart, so I’m constantly tinkering, coding, and playing with new technologies. I love music. I love color. I love to be silly. I love to eat candy. And I’m an excellent napper.

Professionally, I call myself a reticent standards evangelist. Why reticent? I’m extremely introverted but I care so much about standards that I’m willing to battle my natural tendencies to help change the Web.

CS: I’m actually somewhat surprised. I’m an introvert as well and I’ve known you for a while and I haven’t really thought of you an introvert. It seems you’ve made some steps to overcome the natural tendency to withdrawal from social settings? It’s been an ongoing battle for me.

KB: If you put me next to an extrovert, you’ll see a big difference! I definitely prefer to interact in small groups or with people one-on- one, which I think works extremely well when it comes to coaching and mentoring designers and developers who are just learning about standards.

And while I’m an introvert, I’m not a recluse! Yes, I tend to stick with the social situations I’m most comfortable with, which usually involves people or environments I already know. My problem is that I greatly dislike idle time, which is what new social situations often feel like—you know, when you’re the wallflower and everyone else seems to be best friends? So I have to prepare myself for that idle time, by figuring out what I can talk to people about, by not bringing my smartphone along, etc. It sounds incredibly nerdy, I know, but that’s me. And I’m OK with that.

CS: If I may ask, how do you handle popular Web geek events like SXSW Interactive? There is almost something going from the moment the conference starts until the last closing party. As an introvert, I get burned out fairly quickly and need to recharge with solitude. Which I find also mentally taxing since you get to see people–your peers, colleagues, friends and soon- to-be-friends– for some people this one time of the year. I should be out there interacting with people, but I know my limits.

KB: That’s exactly it—knowing your limits. I don’t even try to do everything that’s on the SXSW agenda. Conferences that I regularly attend, like SXSW, are for me relatively equal parts of meeting new people and catching up with friends. Catching up with friends is kind of like downtime, since that’s generally one-on-one or small-group stuff. At other times I make myself go meet new people… and then I generally retire to my room for some quiet time. I sometimes push myself a bit beyond my limits, but not too far—that always causes burnout.

CS: What’s your academic background?

KB: I earned my bachelor’s degree in computer science at Bryn Mawr College, a women’s liberal arts school near Philadelphia. Bryn Mawr’s computer science program is increasingly being recognized for its groundbreaking techniques in teaching computer science, including use of personal robots in the classroom, and incorporating research in the undergraduate experience. I did my senior research in autonomous robotic agents, while I was also working for the College as their first Webmaster.

I received my master’s degree in computer science from The George Washington University in Washington, DC while I was working full-time at AOL.

CS: What was your first exposure to the Internet/Web?

KB: Well, it wasn’t the Internet or the Web, but in 1984 my elementary school set up a network of TRS-80 computers. We had the ability to message other computers on the network, and we used software to track attendance and library book checkouts. About two years later I used Q‑Link—Quantum Link—for the Commodore 64. I guess that I never really experienced a time when computers couldn’t be networked and used for one-to-one, one-to-many, or many-to-one communication!

In high school I regularly used FTP and Gopher to do research for the school paper. Then around 1992, I started using Prodigy and CompuServe. During my first semester in college, I started using the Web, and in 1994 I created my first Web site.

CS: How did you first get involved with Web design?

KB: Every time I say this, people laugh but it’s true! I first got involved because of Duran Duran. I’m a huge fan, and I have a huge collection of their music. In the early 1990s, there was a fan mailing list called Tiger-List and a number of people were working on a comprehensive discography. I started a ‘zine to publish the work, and as soon as I got my hands on a Web hosting account, I put the information online. Of course, there was little “design” online at the time, but I watched what other sites did, learned by reading their source code, and tried things out for myself. Still, when I go back to look at that site circa 1997, I’m impressed by elements of the design. The official Duran Duran site currently doesn’t look all that different!

CS: The first Web site I did was for a music group, too, namely U2. It seems that people resonate well when building sites about topics they love or are passionate about. Do you still work on a Duran Duran site or other sites around a similar passion?

KB: I stopped working on the Duran Duran Web site in 2000, but I’ve been thinking about restarting it as a wiki… but we’ll see.

Since 1995 I’ve worked on a Web site for Chris Connelly, the former industrial music god turned indie singer-songwriter. I even helped him published a book, Confessions of the Highest Bidder, Poems and Songwords 1982–1996. We’ve built up such a community around the Web site that now there’s little for me to do on a day-to-day basis, because the fans drive the content.

Besides music, I’m passionate about attracting and retaining women in computing and technology. For the past three years, I built and maintained the Web site for the Grace Hopper Celebration of Women in Computing. This year’s conference not only featured an impressive list of presenters from industry, academia, and government, but also featured many social media tools, including Twitter, Flickr, and a wiki for note-taking! Now that I’ve handed off maintenance of this site, I’m planning something new, of course. Sorry though, I can’t give you more detail yet!

CS: Let me get your thoughts on this topic. We’ve both built fan sites and probably have used them in our research for our respective interests. There’s this Wikipedia effect on fan sites or anything of some remote popularity: it completely removes the need for basic fan sites. I can search Wikipedia for information on summaries of obscure television shows that have gone off the air faster than I could at someone’s usually poorly designed fan site. Even official sites have a problem dealing with this problem. 

While I love their music, U2’s official Web site can’t compete with Wikipedia and the internet. If I ever have a question about the band or want to find the latest news, I go to other resources rather than paying a forty dollar subscription fee to see the official video on their site or get a stale press release. If someone is going to build a fan site, I believe the site needs to be modeled like Whedonesque where there’s an embracing of fellow fans and the community. It’s almost as if Wikipedia has replaced what Web 1.0 was all about. Web sites need to jump start to Web 2.0 mean anything these days.

KB: This is a really interesting question for me, right now. I got away from the hardcore Duran Duran fan crowd (and Web sites) when I was in grad school and I’m now having to catch up with many of them. I’ve noticed that no one site—not the band’s official site, not their community fan club site, and not even Wikipedia—has all of the information that I’d expect to be in one place. But Google clearly makes finding resources amongst those sites very easy! 

So I think that fan sites may still have a place, if they’re providing information that’s unique or if it’s presented in a way that’s easier to find and crawl than an official site.

I think that people will always want to create their own basic fan sites, just to express their fandom. But the more advanced fan sites can put a lot of pressure on an act to step up their investment in their Web presence!

CS: How was working for AOL? What were your positions and their respective responsibilities throughout your tenure there?

KB: I started at AOL in 1999 as a Web Developer and was promoted to Senior Web Developer in less than a year. I was the technical lead for the eCommerce division during a time of rapid growth it was very exciting! I also took on the technical lead role for the AOL@School project. 

When you first start working on Web sites that easily get upwards of a million hits a day, it’s a little intimidating, but it gets you to think very differently about your work. Organization and planning become key factors in how smoothly site changes or a redesign gets launched. You have to think about the smallest segment of your audience, as well as the majority. You never want the division Senior Vice-President, who’s still using some ancient machine and browser and is awake at 3 AM monitoring the site launch, to call and complain.

While I was leading these development teams, I came to realize that regardless of how good our tools were, we needed coding standards in order to keep everyone on the same page with how we approached our work. I started writing coding standards for individual projects, but then I also took on writing standards for the entire Web development organization. This effort led me to push for the creation of a team wholly dedicated to standards. 

In 2002, I teamed up with the head of the design standards and the nascent QA team, and we worked as the Product Integrity group. I managed both the design and technical standards, provided training, performed code reviews, and worked closely with high-profile projects to ensure they met our standards for design, code, optimization and browser- support.

Around this time I also became aware of the Web Standards movement. I’d been working with CSS since about 1998 not in any professional capacity but more as something to tinker with in my spare time. I realized that, given our systems at AOL, and our browser requirements, we wouldn’t be adopting semantic markup and strict separation of presentation and content very quickly but the seed was planted.

In 2003 I was given the opportunity to serve as AOL’s representative to the W3C CSS Working Group. By this time, the eCommerce code, which I always stayed close to, was largely Web standards compliant. Joining the working group gave me the fuel I needed to push for better Web standards compliance and the redesign of the AOL.com home page in 2004, which was 99.9% compliant, closed the deal. The coverage we got for making the switch was just a blip, but it had quite an impact. Kevin Lawver and I were proposing an internal Web Standards group around this time, and I think we partially got the OK because we were able to demonstrate that we’d get positive coverage for other conversions.

In April of 2004, I took over the Web Development organization. I launched a major training initiative for the developers, bringing in people like Molly Holzschlag and Eric Meyer, and we rolled out a new publishing platform that was completely Web standards-based. The CSS grid system we built for that tool was just remarkable in its browser support and in its flexibility. Only recently have other systems started to match what we did back then.

I left AOL in February 2005 to do consulting work. I joined PayPal in November 2006.

CS: How is your position now at Paypal different or similar than at AOL?

KB: My role at PayPal is most similar to the work that I did as part of the Product Integrity group at AOL though I have dedicated staff working for me now! Because the design and development organizations are very separate at PayPal, I’m not managing the design standards which is great in terms of allowing the team to focus, but tough in terms of getting people with the right mix of skills on cross-functional tasks. We’re still working on that, though, through training.

One challenge that is very similar, between AOL and PayPal, is getting people to recognize the importance of our transmission medium the Web. AOL was a walled garden for a long time, and getting senior management to understand the benefits and challenges in breaking out of those walls. At PayPal, I find that senior management thinks of the application first as a financial system, then as Web site. I’m working to help people understand that we first have to think of PayPal as a Web application to put the user experience and the front end on equal, if not greater footing, than the back end.

CS: I’m assuming PayPal, like AOL, didn’t embrace Web standards immediately. We all weren’t validating HTMl 4 documents in the mid 90s. What made them realize the need for Web standards?

KB: At AOL, it was very easy to demonstrate the ROI of standards, especially when it came to saving time and money on redesigns. Nearly every channel on AOL underwent a yearly redesign, and in a table-based world, redesigns took at least 6 months—so you finished launching a new design and almost immediately went into planning for the next year! With CSS-based layouts and stricter internal content standards, that time table shrunk dramatically. The clincher was the ability to tie Web standards into a new content management and publishing system that was built in 2003: when that went live, a large chunk of AOL content was then standards-compliant, and what wasn’t was easily migrated over.

I wasn’t around at PayPal when the Web standards conversation got started, but I do know that standards-adoption was largely a one- man mission that started in 2005 when Steve Ganz joined PayPal. Again, I think the ROI of standards speaks to the company’s leadership, but the focus on the financial side of the business makes the standards-conversion effort less important. The responsibility to realize a standards-compliant site is fully on the shoulders of the Web developers themselves. Nearly all of them understand the benefits of Web standards—thanks to Steve’s evangelism efforts. Now it’s just a matter of growing skill sets and empowering people to affect that change!

CS: So, your primary mission for PayPal as a group is to train other departments?

KB: My team is pretty equally split between developing our internal standards—working with the user experience and design org to create interaction and visual design standards, as well as common, reusable code solutions—building and improving internal processes and tools in support of developers, and providing training.

CS: It seems to me, maybe because I’m used to usability to be tied to accessible and standards-based design, that for a company like PayPal to be more willing to embrace a more user-centered approach to their Web site. In your opinion, how can one or a group of people in other companies in a similar situation as yours convince upper management or stake holders to change their focus to be more focused on user experience?

KB: I’ve found that when you directly ask any senior management person if they care about the user experience, their answer is always going to be “yes”. The problem is getting them to dedicate money and resources to improving that experience. This is where data—analytics and user research—becomes crucial. In a company that’s large enough, there’s probably someone looking at this data, so it’s a matter of getting a hold of it and interpreting it for management. In a small shop, getting that data might be more difficult to come by—but there’s sufficient information in the public domain that could be compiled to make a case for funding of a project to get site-specific user data.

I say this all of the time, and I’ll repeat it here: getting a stakeholder to buy in to your position on anything largely a matter of understanding what language that person speaks. Do they speak in numbers, statistics? If so, don’t go in to a meeting with stories—prepare charts to convert those stories into numbers. Do they like dollar signs? Convert that story and those numbers into dollars, then. Do the leg work so they don’t have to put extra thought into the subject. You’ll do a much better job of making your case, which greatly increases your chances of getting approval.

CS: You’re co-lead of the Web Standards Project. What’s the purpose of the Web Standards Project for those that might not know?

KB: The Web Standards Project is a grass-roots effort, founded in 1998 by Jeffrey Zeldman, to advocate for Web standards. Initially the group’s focus was on browser manufacturers, to get them to follow the W3C standards. 

Since that battle is largely won, we now work on a variety of fronts: we continue to work with browser manufacturers and also authoring tool developers, but we also work with educators to help understand where educational programs today are doing their students wrong by not teaching Web standards—still a large problem, prevalent in most programs that teach Web design and/or development. 

We also have teams focused on topics like accessibility, to help bring clarity to the specifications and laws and to help research questions and issues. I don’t think that even our closest followers understand all of the fronts we’re addressing simultaneously! This can be somewhat of a problem, as observers tend to think that we’re dead and irrelevant. 

We agree with critics that our mission is a bit outdated and non-specific, but we’re trying to find time to revamp that, amongst all of the other work we’re doing.

CS: So, since the battle for Web standards has been largely won, when’s the victory party? Usually I’m told my invite got lost in the mail.

KB: I think that some battles have been won, but the war isn’t over yet. Some of the W3C working groups are acknowledging that they need to improve specs. The major browser manufacturers still have some work to do. And, sadly, based on the resumes that cross my desk, I’m not seeing the skill-level of the large majority of Web developers improve.

That’s not to say that there aren’t reasons to celebrate: every improved spec, browser fix, site conversion, or designer/developer “a ha!” moment is a reason to celebrate.

But from my vantage point, there’s still much work to be done. 

CS: How did you first hear about the Web Standards Project? And when did you first join?

KB: I probably first heard about the Web Standards Project when I read Zeldman’s book, which honestly wasn’t too long before I was invited
to join in March 2004.

CS: There are several groups called Task Forces like the DOM Scripting Task Force, Dreamweaver Task Force and so on. So, the Web Standards Project has been, not fractured so much, but more focused on several fronts? It seems like a sensible approach to make evolutionary changes.

KB: When WaSP was a single, centralized group, you knew that there were people that specialized in specific areas related to standards. But those people weren’t always available to lead initiatives in those areas or able to comment about those areas—after all, everyone had some other full-time job to do. So creating task forces around certain areas of interest, where a WaSP member could head up a group of interested WaSPs and other individuals from the community, certainly helped in terms of distributing the work. It also has helped breathe new life into WaSP: most of the recent new WaSP
members came to us through a task force.

CS: As the co-lead for Web Standards Project, do you see the “problem” now not so much with the browsers implementing standards, but the standards not being finalized in a timely fashion? CSS3, I know, has been under development for quite some time now.

KB: No, I don’t think it’s strictly a problem with the standards not being finalized, but now that the browsers have caught up considerably, it’s the logical place to look for greater progress.

What does everyone expect and need from any set of standards? Perfection. Browser manufacturers and developers alike need error- free, misinterpretation-free definitions and explanations. The only way to get that level of detail is through the dedication of knowledgeable people who have quite a lot of time to focus on the standards. Now I can’t speak for any current W3C working group, but I can say from my experience on the CSS working group that not everyone in the group had the time, given that more than half of us had other jobs to tend to. While we were all knowledgeable, we weren’t all properly equipped to dive in to crafting standards. And with relatively little meeting time, even if everyone had been cranking out working drafts, there wasn’t ever enough time to discuss everything.

In my mind, whether you’re talking about browsers or standards, I see a set of management problems, in varying degrees: a lack of knowledgeable, interested, dedicated resources; inefficient and potentially un-changing processes; and less-than-effective or no leadership. The problem here is that you can’t just solve one of these problems and see drastic change!

CS: And these are the issues you addressed in our latest book, Adapting to Web Standards, right? The introduction and management of Web standards in large companies.

KB: Yes—and it’s in the context of the enterprise Web shop because that’s what I know best. However the methodology I introduce, the Circle of Standards, can also apply to an agency or smaller Web shop or educational institution.

CS: Do you felt like you nailed the topic in the book or is there more to cover? 

KB: Oh, there’s always more! I’m constantly learning from my experiences. But the Circle of Standards—the concept and process behind driving standards adoption and managing them for the long term—just gets reinforced over and over.

Even if I had the chance, though, I don’t know how much more I could express in a book, other than providing more examples — it’s kind of like learning most managerial concepts: you can read all of the literature out there, but at some point you have to try the concepts yourself in order to get the real learning experience. Still, it might be interesting at some point to add some case studies related to organizations adopting the process. 

CS: Wasn’t it also part of your talk at the recent An Event Apart in San Francisco? How was the reception to your talk there?

KB: Yes, I’ve been presenting the Circle of Standards—and promoting standards evangelism as a career—for a whole year now! The reception has been great. I’ve found that many designers and developers still feel like they’re alone in their pursuit of standards and they’re looking for a way to make a greater impact. Even in organizations where everyone is on-board with standards, I still have people tell me that they’d never spent much time thinking about how to coordinate and communicate about standards. So I hope that everyone’s able to take something away from the process and use that knowledge to change their organization for the better.

CS: Is there a potential for the Web Standards Project to have a task force for the W3C then? Not to be annoying like wasps, but more helpful in troubleshooting specifications and proposals?

KB: I won’t say no, but I’d say that currently we don’t have what we would need to fully support such a task force. Like I said before, dedicated resources are necessary, and WaSP already struggles with that issue. I wouldn’t want to hamper the W3C in any way.

That said, some WaSPs are or have been on some of the W3C working groups, and I’d like to see that trend continue! 

CS: What are some of the issues in regard to accessibility that the Web Standards Project is tackling?

KB: The Accessibility Task Force has mainly been focused on two efforts: how some of the microformat design patterns affect accessibility and what the implications are for some of the HTML5 proposals.

CS: As with education and Web Standards Project, how is the Web Standards Project working with educational institutions? I’ve often found that universities, as an example, are usually five years behind the curve. And in our industry, that’s ancient times. I remember the sites I was working on five years ago, but I would build them differently if I had to start working on them now.

KB: We also have the Education Task Force, which works with higher education institutions to help raise awareness of standards. This task force hosts the EduTF-PP mailing list, for educators, administrators, and students to come and discuss their challenges and success stories related to creating change in their institutions. This information, along with data collected in a recent survey, is key to helping the members of the task force prepare materials that interested parties will be able to download and use to present the case for Web standards in the academic environment.

CS: Recently the Email Standards Project was launched. While email itself isn’t associated with the Web and I believe there is a standard for ASCII text-based email, the goal of the project is to drive home support for Web standards support for HTML-rich emails. What are your thoughts on this initiative? Is this a taskforce that should have been a part of the Web Standards Project?

KB: Personally, I dislike HTML e‑mail. But since we’re never going to convince marketers that they should stick to plain text, I think that using and supporting HTML and CSS in e‑mail is the next logical step and the best solution.

I’m glad to see others starting up their own efforts around the issues they care passionately about. I often field requests for the Web Standards Project to take on new initiatives—which, as I’ve said and will continue to say, we just can’t cover everything. But not everything needs to be under the auspices of WaSP, and not everything should! 

So I’m in full support of there being an Email Standards Project. It’s quite an honor to be associated with an organization that others see as having been impactful, and that others want to replicate in order to successfully change their own areas of interest.

CS: What are your thoughts about the future of the Web?

KB: Pass!

Seriously, I’m not a futurist. My hope is that browsers and devices continue on the path toward and eventually converge on true interoperability. I want to see designers and developers hone their craft and produce top-notch sites and applications. Innovators must continue to open new avenues to us, and standards bodies must keep up with evolving the underlying technologies. Ultimately it all comes down to collaboration—and, as we’ve seen thus far in the history of the Web, collaboration online leads to collaboration offline, and vice versa.

Other than that, I love being in an industry that is still so young that one must constantly read and learn to keep up with things—and, in large part, that means staying close to the work that needs to get done. We need to watch one another for burnout, so that we don’t lose any great contributors, and we need to coach and mentor new talent, so that we get them to contribute their talents in our arena.

CS: Finally, I want to say thank you for sharing your time, Kimberly. It’s always a pleasure to talk with you. And I want say also, thanks for the work you and your multiple teams—Web standards project and its respective task-forces, AOL, now Paypal—do to help out Web developers build better sites for their users.

KB: Christopher, it’s been a real pleasure on this end as well. Thanks for giving me the opportunity to contribute to Adapting to Web Standards, and for writing so many other great books and articles about design and development!

The Dave Shea Interview

By admin

Are you into Web design? Then you might have heard of a little site by Dave Shea called CSS Zen Garden. By changing the look-and-feel, but keeping the same markup, Dave Shea and designers all over the world showcase the power of CSS as a design technology.

In my eyes, it was one of the sites that came out and destroyed any remaining pretense that HTML tables could rationally still be used for designing engaging, quality Web page layouts over a CSS-only approach (even as browser inconsistencies hinder development).

With Dave Shea’s eye for quality design, he cultivated the site for the best examples of CSS-enabled designs for his Zen Garden. 

But Dave didn’t stop at nurturing a Web site.

Several years later after the launch of Zen Garden, there was the book about the Zen Garden, of course. There are now happy clients of his own, a set of icons, a second edition of the popular Web Directions North conference, and much more, I’m sure, in the future of Dave Shea. 

Today, however, I’m happy that Dave Shea joined me for an interview to discuss what’s on his mind. We talk about design, clients, the upcoming Web Directions North conference and whether or not he considers himself a foodie.

Dave Shea

Christopher Schmitt: What’s your name and what you do?

Dave Shea: My name is Inigo Montaya, and you killed my… Wait, wrong movie.

I’m Dave Shea, and I do a little of this and a little of that. I still consider myself primarly a visual designer, web and UI being my specialties, but with things like Web Directions and the icon sets I’ve done in the past few years the question of what I do day to day is getting a bit murky.

CS: How would you describe yourself?

DS: Hmm, it’s been a while since I’ve done a Meyer-Briggs, but ISFJ feels about right. Otherwise, I’m happiest when either creating or exploring, and most of the stuff I do relates back to those two in some way. Cooking, coding, traveling, designing, and so on.

CS: What are some of the best places you’ve been? Any surprises?

DS: Well, I’m a huge fan of England, but I was a little surprised at how non-foreign it felt to me. I’ve been to plenty of former British colonial cities, so maybe that gave me an idea of what to expect. Still, when taking a train from Paris back to London feels like going home, it makes you wonder. 

Otherwise I really liked Australia, Melbourne in particular—maybe even moreso than I liked Sydney. And Reykjavik was a challenging city to visit; the landscape is like another planet, the culture is somewhere halfway between North American and European, and the food was either great or horrible with little in between—really good Indian, bloody awful Mexican. All the small differences added up to unsettle me near the end of my trip in some odd, undefinable way; still, I’d definitely go back. 

CS: What do you like about cooking? Would you consider yourself a “foodie”?

DS: The satisfaction of eating something I just created. The act of creation draws me to it, but having something immediately practical and pleasurable like food at the end of process, that’s just icing on the cake. 

I’m not sure I’ve quite reached foodie status, but it’s borderline.

CS: Did you have any jobs besides ones related to design?

DS: Haven’t most of us? In past lives I’ve worked in construction, sales, support, and burger-flipping.

CS: What did you you have to do for those jobs?

DS: In order: dig holes and carry heavy things from spot A to spot B. Sell people internet connections, then put on a happy face and tell people why their internet connection isn’t working, and then get it working. Flip burgers. 

CS: When did you work those jobs? Was it right after school?

DS: Pretty much. Some during, some after. 

CS: What was your first exposure to the Internet/Web?

DS: I was a bit of a late bloomer, I finally signed up for a connection around 1997. Okay, that’s earlier than lots, but given that I was big on the last dying days of the BBS scene in the mid 90’s, I still find it a bit surprising it took me so long. I’d known about the web for years, and actually built my first web page in 1996, but didn’t really get involved until I finally had my own connection the following year.

CS: Did building Web pages prompt you to get your own Internet connection?

DS: I’d say it was mainly for the communications side of things. Keeping in touch with people in other cities via email. Browsing web sites. IRC.

But building web sites probably did have something to do with it. I was doing a lot of single image graphics work at the time. Images rendered in 3D and Photoshop, illustrations, photo manipulation, etc. I was basically just learning the ins and outs of working digitally, so I thought a Web site would be a good place to put all of that. 

CS: What was your first Web site for? Was it for yourself?

DS: The very first was probably a class assignment, though I think it was pretty much your standard “look, this is my web page, there’s nothing on it, but here I am anyway” type of page. Later on, the first full site I built was the digital gallery for myself. 

CS: What’s your view on design or graphic design? Do you have a mantra?

DS: Seems like there are have been an awful lot of attempts lately to define what design actually is. I feel pretty strongly that it’s changing; almost as long as I’ve been building web sites, I’ve been thinking about things like usability, accessibility, information architecture, interaction, and so on. Fifty years ago graphic design was mostly about assembling imagery and type on a flat piece of paper. I’m over-simplifying of course, but it just feels like there’s more “stuff” you need to get a handle on to be any good at doing this.

I still describe of myself as a graphic designer to laypeople as a way of avoiding lengthy discussions about the subtleties, but I think the terms UI designer, interaction designer, and web designer all equally apply. The latter might still be the best term for it, too bad about the leftover stigma from the late 90’s.

CS: At one point did you realize you wanted to be a designer?

DS: I used to do a bunch of programming. Nothing serious, just screwing around in Basic and later a bit of C. At some point I realized I liked doing the imagery and graphics for the programs I was building a whole lot more than I enjoyed the programming itself. So a flip switched in my brain and I realized design was the way to go. 

CS: What kind of training have you had as a designer?

DS: Not as much traditional training as I’d have liked. Fine arts and photography classes, design foundation stuff, a bit of business and strategy. The rest of it I’ve picked up along the way. 

CS: What are your design influences?

DS: That changes week to week, project to project. When I redesigned my personal site last year, I’d been flipping through magazines and noticing common design elements I really wanted to work with. I’ve come up with design ideas while out in nature, in a forest or on a beach. I’ve been inspired by design elements on various sites and used the ideas to come up with similar treatments. Sometimes it’s just a matter of seeing a site, studying what I like about it, and mentally filing that principle of design element it for later use. I’ll tell you right now that whoever’s behind all these fantastic Tennessee tourism sites better watch out, I’ve been scrutinizing their beautfiul new one for as many tricks as I can.

Tennessee Tourist Site

CS: What specifically about that site appeals to you? What are the tricks have caught your eye?

DS: I love how they’ve balanced the sheer amount of stuff they’ve had to cram in there with generous margins and removing bounding frames and boxes. It flows really well, with lots of breathing room. The type work is solid. And it’s rich with details — an evocative blue gradient background, drifting snow, white cutout landscape shapes in the footer, etc. etc. etc. 

CS: What aspect of Web design appeals to you the most?

DS: The job is different every day. Some days I spend the entire day working on page layouts in Photoshop. Other days I’m designing icons in Illustrator. I flip back and forth between various coding languages in Coda, be it PHP, a custom CMS template language, or even plain old HTML & CSS. I even get the opportunity to design logos and take my work to print from time to time. There’s no such thing as a usual project, they’re all unique. That keeps me interested.

CS: Your work has appeared in numerous publications and you won Best in Show in the SXSW 2004 Interactive conference. In your view, what separates mediocre web design from award winning design?

DS: What happens after you’re “done” the design. You could launch it, but you could also come back and put in more detail work, and spend time obsessing about the things others might take for granted. If you carefully plan your column layout and where elements will be placed on the page, your result will invariably be more polished than a design by someone who slaps a bunch of elements together and moves on to the next project.

It’s a tough balance when you’re working under deadlines, but I find the more time I make to refine a design after “finishing” it, the better the results. I’m working on one at the moment where I’m well into the 4th revision because I wasn’t happy with the previous versions. I think I’ve finally got it, but it’s been stressful. Usually I get better results quicker, but some designs need that extra attention.

CS: That raises an interesting question: How do you know when you are done or “finished” with a design?

DS: I think that’s learned. There’s no way to quantitatively measure it, you just keep working at it until you’re personally satisfied that the design you’ve come up with is the best to match the criteria of the project. 

CS: What’s the most important lesson you’ve learned in doing projects for clients?

DS: That it’s give and take. I’m being paid for my skills and my ideas, but also my guidance. Clients often ask for things they don’t really need or want, things I feel would ultimately work against them. Those are the ones where I sharpen my rhetoric skills and tell them precisely why they’re wrong.

But there’s a balance. I’m not going to win every time, and sometimes my ideas are born out of assumptions that prove to be wrong. I have to remain open to that sort of feedback, and sometimes kill the ideas I’m particularly attached to. It’s hard, but if they don’t ultimately fit in the design or meet the needs of the project, they need to die.

CS: So this, what would you call it, “managing client relationships”, the most important thing? Not letting designer’s own views override the goals of the project or sour the client-designer relationship?

DS: That’s a pretty good way of summarizing it. When I first started out, I was personally attached to everything I did. I was always right because I was the designer, it must be the client who’s wrong. Time passed, and now I realize that a healthy design process involves ample opportunity for stepping back and assessing the project with a detached view; it’s surprising what you’ll discover when you set aside your preferences. 

That said, I’m still often the one making the call in the end. Not every project results in work I’d want to showcase, but it’s up to me to make sure it’s at least competent, and that involves arguing it out with the client from time to time. 

CS: What would you say is the project has given you the most satisfaction?

DS: Hmm. I have a few to choose from here. I’ve really enjoyed working with Lou Rosenfeld on Rosenfeld Media over the past few years — we’ve tackled a lot of diverse challenges, and I’ve had to stay on my toes to keep up with it all. It seems every new project we work on adds new tricks to my toolbox.

Then there’s the icon family I’ve been working on. It’s been gratifying having high-profile companies buy them, there’s a sense of legitimacy when that happens. But more than that, it’s the sense of accomplishment of having created that many custom pieces of illustration. I said one day hey, I’d like to start doing some illustration again, and a year of off-and-on work later I had 700 icons.

But I guess the one I’d pick if I had to pick any would be, inevitably, the css Zen Garden. Even 5 years later, I’m still amazed at how far its reach has been and how many people have been influenced by it.

CS: Zen Garden has and is in still having a huge impact. When I speak on CSS at workshops or conferences, people still mention that site as having a profoundly inspiring. And like you mention, it’s been years since it’s been around. Do you still get submissions? If so, how often? How do you manage the site?

DS: Yep, I might get anywhere between 10 and 20 new submissions a week. Even after five years. I’ve recently made a few changes to get the queue moving again since it was hard to keep up with.

All designs submitted go into a database. I built a lightweight publishing system on top of that which allows me to adjust submission details if I need to, grab the files, and automatically generate the files for publishing. There’s a bit of manual work involved in grabbing the files and FTPing them up to the server, but that’s not much work. 

CS: In early next year, February, it’s another year for Web Directions North, a web conference in Vancouver which you are integral in putting on. Can you tell me about the conference and how it came to be?

DS: This could have also been an answer to the previous question; I’ve been really proud of the work the four of us running Web Directions North have been doing, the feedback after last year was fantastic, and it was a really fun time. I don’t want to say something obviously biased like it was in my top 3 conference experiences of all time, but, well, it was.

So, how it all started. Back in 2004 John Allsopp and Maxine Sherrin helped put together Sydney’s first web design and development conference, and I was invited to come down and be a part of that, which is where I met them for the first time. Derek Featherstone went down in 2005 and 2006, and of course Derek is a fellow Canuck so we had previously connected as well.

When John and Derek started talking about possibly doing an event in Canada, I was looped into the conversation and somehow we came up with the idea of doing it in my hometown. I think I was of the feeling that it would have been fairly simple to run something in Toronto, since most “big” events in Canada will naturally default to the city with the most people. But when we decided to do it in the winter, Vancouver seemed like a better idea with Whistler just around the corner and all…

This year since the label “Web Directions North” allows a bit of transience, we did consider moving it to another city. But Whistler was such a great experience for everyone that came along, it seemed inevitable that we’d do it here again. And so we are.

CS: What goes on in planning and behind the scenes in order to put on this conference?

DS: We started this year back in June. Our entire to-do list ends up looking something like this: Find out where to hold it. Contact a bunch of venues with our needs, find out if they can accomodate us, work through the details about how they’ll meet our needs, and select the best of the bunch. That’s just an entry point really; once you have the venue, you then have to have a whole lot of conversations about room usage, technical setup, catering, guest rooms, etc. 

Figure out what topics and speakers you want on stage. We build our program on content; we chose subject matter first then figure out who fits the bill. Then you’ve gotta start contacting them. And picking alternatives. And contacting them. And getting bios and talk information. And work out flight details. 

Build supporting materials. Registration, web site, printed stuff like the program and name badges, etc.

Get the word out and sell tickets. This is hard. Really hard. Of everything, I’d say this is the hardest part. There’s a seriously big sales and marketing commitment in running a conference, which is something I didn’t understand before I got into it. If you don’t have a huge advertising budget, you really have to work to fill seats. 

Line up sponsors. Arrange evening and extra-curricular activities. Answer incoming inquiries. 

There’s a lot more I’m glossing over, but that gives you a good idea of the wide variety of stuff you have to bring together to pull off a conference. 

CS: Seems like you are doing a lot: books, icons, conferences, client work and so on. What do you feel most comfortable doing?

DS: I don’t really think about it like that. I know my limitations; I’m a crappy programmer and I’m not a salesman, so those are a couple of things I stay well clear of. Otherwise I just try things out to see if they fit, and if they do, I’ll run with them.

CS: You’ve stated perviously that you’ve switched to Mac as your platform of choice. How was that transition? Was there any problems in how you work in one operating system?

DS: That was quite a while ago, five years maybe. The big things were not much of a problem; most of the apps I run are cross-platform, and the Finder wasn’t hugely different from Explorer, so actually getting work done didn’t involve much of a transition.

It was the little things that got to me though. I’m pretty big on keyboard shortcuts and time savers so learning to use my thumb instead of pinky for everything (Cmd vs. Ctrl on a PC) took a bit of effort. I’ve still never really adjust to the idea of a personal home folder, I create a separate partition for my data and throw everything on that. Though to be fair, I was never using the Windows equivalent of a home folder either.

CS: What’s your setup like? What kind of hardware do you use?

DS: I go back and forth between an iMac and a white MacBook. I’m over the G5, I want Intel everything at this point, so the iMac may not last much longer. It’s tempting to replace both with a single MacBook Pro and external monitor, but my previous Powerbook ended up corroding; my body chemistry and aluminum are not friends, apparently. 

CS: I imagine you couldn’t part with Illustrator or Photoshop, but what other tools do you use?

DS: InDesign quite a bit. I do enough printed stuff and PDFs that it’s pretty indispensable.

Otherwise I’m a big Coda fan. Coda for developing, Firefox+Firebug for testing. I use Camino as my primary browser, but I develop in Firefox. 

CS: What you would like to see happen in Web design in the next couple of years?

DS: Tech-wise: IE6 dying a quick death. CSS3 getting finished and implemented. All mobile browsers going the Safari route and running capable rendering engines.

Design-wise: cross-browser vector would be nice. Font embedding too, but it has way too many licensing issues to ever take off. As a compromise, it might be nice to have two or three large companies sponsor the creation of widely-available, free web fonts, ala Microsoft of 1995.

CS: There are plenty of free fonts out there–granted some are of varying quality–but would the concern be more about having the fonts be pre-installed on copies of Windows and Apple operating systems?

DS: Without embedding, yes, that would be critical. No way you’ll get end users to install a font. With embedding it’s less relevant an argument, but it would still be nice to have a wider variety built into the platforms. 

CS: How do you feel about sIFR being a substitute for font embedding?

DS: I’ve played with it quite a bit, but I don’t think that I’ve ever actually deployed it on a real site. It’s a clever hack, and you can count me as a fan, it just never worked its way into my standard toolbox. I’m also not sure it has lasting power as an alternative; even if we don’t get an official way of doing embedding any time soon, will people still be using sIFR in three years? It’s been a few years since it came out and as a general rule, it’s not being used a lot more than it is being used, right? 

Still, it’s nice having alternatives that actually work today.

CS: Indeed! Thanks, Dave. I appreciate you taking the time to talk.

(Photo: Scott Beale / Laughing Squid)

Adapting to Web Standards Book Contest

By admin

With copies of Adapting to Web Standards hitting the bookstores, I decided to follow Dan’s book giveaway contest and have another one of my own.

How to Enter

The idea is that three winners will be picked randomly from the list of comments to this very blog post. Please note that anonymous comments don’t count and only one comment per person.

How to Win

I’m going to generate a set of random numbers and match them to the comment number for this blog post. (Note that comment numbers are generated automatically and sequentially.)

If one of the generated random numbers equals the number of your comment, you win.

Comments need to be posted before 11:59am ET by Friday December 21st. After that, the comment thread will be closed and the drawing will commence.

The Prizes

Each winner gets the following a copy of Adapting to Web Standards.

After the numbers are picked, I will follow up with the winners directly to get a mailing address to send out the prizes.

Sounds good? Best of luck!

Adapting to Web Standards

By admin

One of the items I agreed with Ethan Marcotte in our interview was the need for comapnies to include Web standards in their workflow. Over the past year, I’ve worked with some amazing people on a book that specifically addresses that need.

Adapting to Web Standards cover

Adpating to Web Standards: CSS and Ajax for Big Sites features a stable of talented people to help Web agencies and large companies with their own Web teams learn how to incoporate Web standards into their workflow.

Published by New Riders in December 2007, the book is divided into two parts: the theory and the pratical case studies. The first part covers chapters by Rob Cherny and Kimberly Blessing on HTML, CSS, JavaScript, Web Applications and Web Standards Worflow. The second part by Meryl K. Evans and Kevin Lawver covers Tori Amos’s official Web site and AOL.com.

Bonus Material

After you’ve rushed out and bought your copy, be sure to register your copy of this book at peachpit.com to download a bonus PDF containing an interview by Mark Trammell with Jimmy Byrum, a Web designer at yahoo.com. To get the interview, go to this Web site and click the “Register this book” link. You’ll be prompted to log into your peachpit.com account (or create one if you don’t already have one). After logging in, you’ll be taken to the “Register a Product” page, where you should enter the book’s ISBN number (found on the back cover of the book or, perhaps, on an online bookseller’s Web site) in the field provided. Click Submit and you’ll be shown a list of all of your registered products; find the entry for “Adapting to Web Standards” and click the link “Access to protected content” link to be taken to the download page.