Summer of Web 2008

I’ll be in Florida baking in the warm weather and humidity of August as part of the Summer of Web 2008 at the Unversity of Florida. More information comes from their official Web site:

Summer of Web 2008 is a half-day conference created to bring the UF Web community together and back to Web basics. Food and drinks will be provided, and there will be several prize drawings.

Summer of Web’s full intent is to bring speakers, both internal and external, to discuss the daily issues seen across the Web community. Topics will include the Print to Web initiative, effective writing for the Web, evaluating analytics and the importance of Web standards.

Speakers will come from a variety of Web backgrounds including consultants, developers, instructors and communications specialists. Among the speakers are Web professional and Gator alumnus Carl Smith and other members of the nGen Works team, UF’s associate vice president for marketing and public relations, Joe Hice, instructional designer Jennifer Smith, and expert CSS developer and author Christopher Schmitt.

When & Where?

The event will be on August 8th, from 8:30 a.m. to noon at the Emerson Alumni Hall Teaching Classroom.

Who is attending?

This event is for University of Florida Web professionals of all types. If you are someone who writes content, moves pixels, develops Web applications or falls anywhere in between, you’re welcome to attend — just make sure you RSVP as spaces are limited.

Validated Ampersands in HTML Links

When dealing with the W3C’s HTML Validator, you know that the error messages try to be helpful. But when you are new to HTML and Web design in general, the messages can be hard to decode.

One such error a student of mine recently encountered. When they ran a Web site through the HTML validator, she found an error message that confused her:

general entity “FID” not defined and no default entity .

This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.

Error message from HTML validator

HTML Character Entities

When dealing with a markup language that has markers like and > to indicate the start and end of tags is fairly simple. But when you want to actually use characters like and > when you want to talk about tags or you want to demonstrated how much greater this part of this sentence is > compared to this side.

It turns out that HTML has a method for handling these cases. You use a series of characters typed out in the right order in the HTML code to represent one character. For example, typing out & lt; and & gt; the HTML file will produce and >. Other examples include copyright (& copy;) and em-dashes (& em;).

The ampersand character is a trigger that tells the browser that a character entity is about to be formed and should be transformed when it is rendered on the screen.

But what happens when you want to present an actual ampersand and not tell the browser it’s some other character? Well, in this case, the only way out of this situation is through! There’s a character entity for ampersands and it looks like this & amp; if you were to write in HTML code.

For more information on character entities, check the listing of XML and HTML character entities.

But What About the HTML Error?

The “FID” error the student found is a little confusing, especially since it’s not really an error in the sense we have a malformed tag called “FID” that we need to fix.

Rather what’s happening is that the long link has an ampersand in its query string that is not properly formed. Since ampersands are supposed to be escaped and they aren’t in the long link in the source code, the browser is expecting the characters after the ampersand to be one of those special HTML characters it knows. Since it’s not, it’s throwing up it’s hands and giving up.

So, when placing links with query strings in your Web document, be sure to write out the character for ampersand in the href value:

add-cart.html?isbn=9780470177082& amp;id=023

That removes the error and allows you to get on with life™!

Getting More Out of the W3C Validator

When checking out sites with the validator, you can click on an option called “Verbose Output” which will give you more insight into error or probable cause of the error messages you are receiving.

However, I’ve found that most people don’t know about this option even though Zeldman made W3C put it in way back in 2003, a magical time when we didn’t have to be told to leave Britney alone.

To help with that, I’ve made a bookmarklet which sets Verbose Output on when testing a page for validation.

To use it, first drag this link to your browser’s bookmark menu: 

HTML Validation (Verbose)

Then surf over to a site you want to check out and press the “HTML Validation (Verbose)” bookmark in your browser’s menu.

You are automatically taken to the validation report with Verbose Output and, as an added bonus, Show Source already turned on. 

Kimberly Blessing Voices That Matter Interview at SXSW 2008

Before she rocked An Event Apart in Boston, Kimberly Blessing was at South by Southwest like everyone else was in the Web design and development crowd. While there the publisher of our book, Adapting to Web Standards, asked her if she would do an interview with fellow New Riders author, Richard Harrington.

Below is the video the publisher made of the interview along with the transcript I’ve recently produced to go along with it.

Richard Harrington: Hi. My name is Richard Harrington. I am a blogger as well as an author and we are here today at South by Southwest, taking look at some of the things happening over in the interactive space. We have joined by Kimberly Blessing, who is a co-author of a new book called Adapting to Web Standards.

Why is there the need for this book? What was really the motivation behind it?

Kimberly Blessing: Oh, so, I think, what happened was a number of different authors, who have worked on really large sites that have made successful conversions to Web standards came together and said, “we need a document of what we have done, because there are other large companies out there where perhaps there are standards evangelists that are having trouble convincing their companies that they need to make this leap.” 

I also think there are some companies out there that are kind of struggling. They need to know that there is success. You know there is a light at the end of tunnel, more or less. So, kind of bringing together people who have been successful at this and documenting those experiences as a way to educate, encourage and just document for others. 

RH: Now, many people when they hear standards think of it as a negative thing. What are some of the benefits of putting in good standards that are usable, effective? Describe some best practices or why I can’t be should doing this.

KB: I think the biggest benefit especially when you are in the enterprise the most company see are the dollar signs. The fact that there is lot of savings that come from utilization of standards. 

If you take a Web site with about a thosand Web pages and each page has been developed by a different coder, has been designed by a different designer, and none of them are hearing to any common set of those practices or standards, like you said, then you are essentially spending money for one-offs every single time you create a new product or a new page. 

And, so, utlimately to the big business there is a lot of savings by establishing a set of standards, ensuring that your teams are following them and kind of having review process to ensure that and then reaping the savings from that. 

Of course there are benefits to the user on the opposite end. 

Once they access a website that has been consistently designed and coded, they are going to have how much better user experience. It becomes much more simple to upgrade the website, to ensure that other standards are supported on an ongoing fashion. 

Sojust for example you mentioned accessibility. You know if today your Web site is coded in one common fashion, even if it has no accessibility features to go back and add those it should be relatively simple because you are not looking at upgrading a completely different codebase. You are looking at one common set of code then just need some couple of fixes. 

RH: Now, you’ve been in the trenches when it comes to standards for some very large companies. Why do you think there is a resistance to standards? Not necessarily the companies you’ve worked with, but. you have seen this. Why do people resist this?

KB: I think folks typically resist this for one or two reasons. 

Either they think it’s going to limit their creativity or it kind of means that, you know, The Man is—and I hate to use that term, but— you know, the man is kind of holding them and telling them what to do.

But I think that if you take a look at some of what those large companies are doing, in particular the technology based companies. They have realized that they need to have this process, they need to have this documentation and it becomes an essential part of being a quality technology company or producing a quality Web site. 

And on the design front when people feel like its kind of boxing them in, you know, I kind of put it in the way that you have to design a better box set. If this particular box is too constraining, in the next revision of those design standards of those design patterns, what should the box should look like like next?

RH: So, do you really see that, I guess, for standards to be effective, it is not just top down standardization. How does the whole team or what should a company be doing to involve others in the creation of standards? 

KB: So, I am typically used to more of a gross roots, a kind of bottom up approach, to standards where people who know about our web standards typically come together first and say, “hey, lets’ try to get the company on the same page.” 

So, when you start with that model, I think first of all, you get very passionate people who want to collaborate. So right there a kind of removing any of the barriers because the people know they want to achieve success and they want to do something together. 

So, I think that really helps in terms of making for a very successful process. 

And then what those folks typically have to do is evangelize and outreach and look for those key executives who they can then sell that message to. And then one those executives latch on then they can really become top down process change and then enforces standards throughout. 

If you start it out with an executive or with some kind of top-down mandate to achieve standards, I think that’s great, sometimes what I have seen happen though is that is kind of like forcing teams together, “you have to come up with standards.” 

You don’t always get the same level of passion and commitment, you know, and wanting to break down the boundaries, but if you can find the right team and the right leader for that team, really there shouldn’t be much of a problem. 

RH: Now, we talked about large companies. Is there room for using standards for small developers, smaller teams and, if so, how is that help out?

KB: I actually think that there is a place for standards for small teams. I say in the agency environment especially with some of the smaller consultancies that are out there where you may be only have three to five people on a design or a development team, typically what you want to do is still ensure that everybody is coding in the same manner. 

Just because you create a site today for a client doesn’t mean that somebody else in the future won’t have to comeback and maintain it. And that typically it won’t be you, it could be somebody either with the company today or somebody who is not even yet with the company. 

So, if you are all working against one common set of standards or set of principles for your designing and development work it should be really easy than to go back in later on, make changes, ensure that something new is being developed is in line with the design aesthetic or with the coding structure thus making it that much easier to share.

RH: Last question for you. What’s the one thing you have learn that really drives the standards? If a group is having trouble getting in place, what can they do to turn the corner to really get standards accepted?

KB: I guess I would say its really is that comes down to people. Its all about the people there involved. 

And I guess I can say that I have seen teams that really do struggle where these some more of dead weight on the team, somebody who isn’t fully bought into the idea, isn’t towing their part of the overall package and that can be really difficult for a team. I think what has to happen in those cases, you have to have an honest conversation. 

And when it comes into evangelism the best thing to do is to have that one-to-one conversation and convert each person one at a time rather than trying to talk to a big audience and not being able to customize. 

RH: Thank you Kimberly for joining us. The book is Adapting to Web Standards with Kimberly Blessing. Hope you guys enjoyed it.

KB: Thanks, Rich.

Related Interviews

The Stephanie Sullivan Interview

Stephanie Sullivan is always in motion. As a CSS expert, international speaker and corporate trainer, she is in demand and shows no signs of slowing down.

We recently wrapped up an interview in which we covered a lot of ground. We talked about women in our industry, her perception of education, the CSS layouts she built for Dreamweaver, her travel tips, her geek romance with Greg Rowis and much, much more.

For full disclosure, she’s also a co-lead with me on The Web Standards Project Adobe Task Force. So, “how does she put up with me” was one question I didn’t ask.

Stephanie Sullivan

Christopher Schmitt: How would you describe yourself?

Stephanie Sullivan: Oh me? I’m a dork. 

I’m not sure if you’re asking me to describe myself in the business, or personally. 

Personally, I’m pretty high-energy and active. I’ve always been involved in sports. I’ve got a fairly quirky, nutty sense of humor—which is where my dork comment comes from. I’m an extremely compassionate people-person. I can’t stand suffering, which likely explains my reason for continuing to give free help on forums. I’m pretty ADD as well. Meaning—I have a hyperactive brain that requires near constant stimulation. 

It also seems to be quite attracted to multi-tasking, which is not always the best way to function! 

A little more focus would likely do me well. Business-wise, I’m pretty tenacious, driven and I constantly challenge myself to learn new things. I don’t believe there are boundaries on what I can do—unless I set them myself. 

I refuse to believe, unlike some in my industry, that being a woman affects my ability to succeed. I am constantly looking for opportunities. There are few glass ceilings here—but there are many glass hats.

Women and Our Industry

CS: A few glass hats is an interesting comment. Do you feel that women, generally speaking in our industry, are holding themselves back? Possibly blaming others for a lack of whatever success?

SS: The term “glass hats” came up in a discussions with Jeffrey Zeldman recently. I really liked it, so I borrowed it from him—thanks Jeffrey! 

I do think it summarizes what happens to some people, including women. Obviously, this entire subject is huge and we could write a book on it. I’ll try to summarize my thoughts since I’ve spent a good deal of time mulling it over recently. 

I led a panel of five women at this year’s SXSW Interactive called “What Women Need to Succeed.” Obviously, I don’t speak for all women everywhere. I am coming from my own perspective based on what I’ve seen, learned and experienced. 

I eluded to my study of the brain, personality, etc over the years. And speaking in generalities—likely using the 8020 principle here: 80% of women are like I’m describing, but 20% are not—many women tend to have different dominant personality traits than men. In fact, there are scientifically proven differences in the structure. 

Undoubtedly, women are every bit as smart and talented as men. But the way we process information is sometimes different. 

One example is that the corpus callosum of a women’s brain is larger—for those of you that have forgotten anatomy class, this area is located between, and connects, the two hemispheres of the brain. I’ve heard it compared to a “superhighway” where we can easily dash back and forth between the two hemispheres of the brain—multitracking.

The smaller corpus callosum in men’s brains is likened to a one lane road causing them to do all they can in one hemisphere before moving to the other side to work from that perspective. This doesn’t make one of us better or worse. This makes us different. 

For those that have had children like I have, this may explain the mother’s ability to do ten things at once while the dad feel’s frustrated and overwhelmed by it all. But, as usual, I digress…

I believe the “trouble” some women have in this industry is really no different than any other industry—in fact, I think ours is likely better in some ways since it’s a newer industry with many younger people. In general, the men in our industry are intelligent—how many non-intelligent people really want to be, and love being a geek, right? And I say that in a most loving, admiring way with all the respect that term should elicit. 

My guess would be that if we ran the numbers, the median age would be lower than many other industries. And these men, for the most part, were raised by working mothers. Few of them are bigoted or controlled by a major dose of sexism. I believe what is more likely at play here is related to the differences in the way we interact and promote ourselves.

Many women are less aggressive. Women tend to do good work and then expect to be recognized for it. Most do not want to have to do “that locker room thing” where you tell people what you’ve done—some would call that a form of promotion—at times exaggerated. 

For the same reason—waiting on the earned recognition—women don’t tend to ask for what they want. We wouldn’t want to make someone else feel bad. 

Women are not generally taught how to focus righteous anger in the workplace when they feel a door has been closed. Many lapse into victimhood or get visibly angry instead of focusing that anger on doing more and doing better—like an athlete does. I’m not referring to anger based on something done that’s inappropriate—that absolutely should be shown as anger. 

In other words, many of us have self-limiting beliefs and behaviors—and this can certainly include men as well. As women, we can learn to use these difference as strengths—multi-tracking can be a wonderful thing. And we can also learn to change the areas we choose to change. I’ve chosen to confront and defeat many fears along this journey.

One place many women excel is in creating and maintaining relationships. And that can certainly be a big plus in the business world. But I’ve also noticed—at conferences which I obviously attend a lot of—that many times the women there don’t interact as much with the men. They hang back and don’t introduce themselves. And from the men, I see the same thing toward the women. 

To be blunt, some have told me they don’t want to be seen as “hitting on a woman” because they’re being friendly. So this is where our sexes can come into play. 

In truth, I’m uncomfortable when I meet new people. I’m rather loud, so many don’t realize this. When I’m at an event where I don’t know people, I’d much prefer to just sit back and observe. But I recognized early on that there are as many deals made over a beer as in the board room. Thus, I push myself to walk up, introduce myself, and get to know people. This is what I mean by “choosing to change.” When you need to bring someone in as a sub-contractor on a job, who do you think of? It’s not the people you don’t know—so forming relationships is important.

All this is not to say that every woman will succeed to the level she desires. Nor will every man. I’ve often wondered what men’s self talk is when they don’t reach the level of the company they envisioned. They can’t blame it on their sex, so where do they focus. 

Sometimes, you can do all the “right things” and still not make it to the place you wanted to be. Sometimes people are in the right place at the right time with the right opportunity—and yes, it could have been you instead. But it was them. That’s just life. 

But I think women can learn behaviors that will give them more opportunities to make it happen. Opportunities to create the life they want to live and career they want to have. Being successful in work is not the only thing that means we’re a successful person—I certainly took it slow at the beginning due to raising my boys.

I used to collect quotes. They were randomly attached to my signature file. One of my favorites from Thomas Edison said, “Opportunity is missed by most people because it comes dressed in overalls and looks like work.” 

And another which Earl Nightingale quoted, but I don’t know if he originated it is, “Luck is when preparedness meets opportunity. And opportunity is everywhere.” 

We need to take the opportunity to meet and talk to people—to form relationships. We need to take the opportunity to go above and beyond what’s expected of us in our work—and we need to give back. To help other people expecting nothing in return. Those things have never let me down—they’ve always come back to me. 

I’ve always loved the last line of the song “Can’t Stop” by Red Hot Chili Peppers, “This life is more than just a read through.” That it is. Live it and make it happen. You don’t fail till you quit.

CS: In 2005, there was a panel that addressed the issue of “Where Are the Women of Web Design?” which seemed to be a telling point about the industry’s gender slant. But what underscored that panel was, I believe, the 2007 A List Apart survey. In the survey only 15% of the people who filled it out were women. There really aren’t that many women here. Pretty much like Georgia Tech, if you ask me. 

Realizing that there are fewer women in the industry by a wide margin, do you think the lack of women in the workplace gives an appearance that women can’t succeed in this industry? Is there a cultural barrier that tells women to stick away from geek-related industries that is at fault?

SS: When I meet women and they ask what I do, I can get some really odd looks while explaining. Responses vary from the incredulous, “You write code? How in the world did you get into that?,” to the woman that finds it interesting that a woman would work in such an industry, to the ones whose eyes just glaze over and roll back into their heads. End of conversation. 

Women do culturally look at certain types of jobs. When I was younger, I wouldn’t in a million years have thought of doing this. But I grew up in a different era obviously. I’m older than many here. I would hope that at this point, it’s a bit different. That said, I have a son in college and I don’t know that any of his female friends are considering geekdom.

I’m not sure many schools encourage kids to look at their brain type and make career decisions based on that. Yes, I took a test in college and they gave me a list of things I might like—but none of them interested me at all. So either the test sucked, or my knowledge of myself was so lacking that the results were skewed.

I recently asked a friend of mine, whose 21st birthday is today, her take on this. This is one woman’s comment, of course, but she’s “of this generation” so her comment was interesting to me. To quote her, “I hear girls chat about it. They’re turned off by nerdy men and dont want to be thought of as nerds by men.” 

Wow. That took me back! Clearly, this generation of women does not realize how sexy smart geeks are. 

I don’t know about you, but I’m certainly bothered by the perception that women will be thought of as “nerds” if they work in this industry. I personally prefer to be called a geek. 

So today, are we still fighting with the “Cosmo girl stereotype” within this age range? It certainly gives one pause. 

Learning Web Design

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

SS: Well, it’s probably not the usual story. 

When I was a teen, my dad talked me out of trying to be a brain surgeon. I did quite a few things after thatnurse, model, travel agent, corporate image consultant—but nothing I loved. 

After taking 10 years off to raise and homeschool my boys, I was ready to re-enter the work force. But there was nothing I’d done before that I wanted to do again. 

I have always studied the brain—brain quadrants, personality traits, brain lead. I decided this time, instead of just “trying something,” I’d look at some of the things I knew about my brain, and find a career that utilized them. My brain loves puzzle-type thinking—detective work, figuring things out, research. 

I thought maybe code would take advantage of those things. The only code I’d ever heard of was C++. I decided I’d learn that—until I mentioned it to a friend and he told me I was crazy. 

He said C++ would probably bore me and suggested I learn the code they build the web with—HTML. I’d never heard of it.

I took one class and figured out a classroom wasn’t my preferred modality to learn in—too fast or too slow. I learn well on my own so I bought books and did online tutorials for about 15 hours a day for well over a year. Did I mention I’m driven? 

I also took advantage of forums where I’m sure I drove people nuts with questions. And that’s another reason I now run a forum—to give back to the community and bring other people along. I vacillated between design and code over that time, since I enjoy both—but I found that even though I had previously done traditional art on paper, illustration and design on the web were different. I felt I had to focus on one or the other. 

Since I’m a major tweakaholic—I can never leave a design alone—I found I could save money by hiring someone else to do the design and simply art directing. But that’s probably more than you’re asking. Did I mention I’m blabby?

CS: Heh, that’s quite alright. Honestly. 

What interested in you in becoming a brain surgeon? How much convincing did your dad have to do to keep you from being a brain surgeon?

SS: My father was a family practice physician, so likely the attraction to medicine was because that’s what I was exposed to all my life. 

Due to my interest in the brain, I was really drawn to that particular specialty of medicine. Sadly, the reason he talked me out of it was very sexist—and yes, he has since apologized. 

He basically said that with the number of years I would have to go to school, with internships, residencies and such, by the time I was ready to practice, I would be about 30. 

He supposed that about that time I would want to have children, that I would likely raise my children myself and since medical school was so hard to get into, I should leave that spot for “a man that would use it.” 

I thought it sad to give up that goal, but yet logical at the same time. It was a big mistake for me though. I had no goal outside that and became a nurse instead. I took nursing in a special program offered to four students my senior year of high school. I didn’t love that at all and later left the medical field altogether. 

CS: And you eventually found your way to Web development. A year long, self-imposed Web education seems quite an unusual route to go. When was this?

SS: I lean toward the unusual. Or maybe, I lean toward the intense. Either way, it was about 1999.

Perception of Education

CS: You must have an interesting perspective on our industry than a typical design student going through college might have. What perceptions do you have about this industry that others might typically have? How does it compare to the other industries you’ve been in or exposed to?

SS: Well, likely my perceptions are different coming from a non-traditional path. 

Quite frankly, my overall perception of education itself is probably different. I believe that life is about learning. The day you stop learning is the day you start dying. 

My reason for home schooling my boys was not to sequester them from the world—they had plenty of friends—, but instead to create thinkers. School is great if you have the type of brain that can memorize well—and spew back accurately. You’ll be seen as brilliant. But what if you’re more of a non-traditional learner or thinker? 

Like Einstein, you could be thought of as almost retarded. My boys don’t have learning style challenges, but I still wanted them to learn as part of life—not as part of sitting down at a book because someone made you.

My older son was 11th in the nation in debate one year. When he was about 12, because he loves writing, he was published almost weekly at a website for kids called Neopets.

My younger son, at 11, was trying to invent a maglev elevator for the new, super tall buildings in Asia. Nowadays, he’s in public high school—says it’s boring—and does lots of online research and reading about physics and science on his own time. I believe this is because he likes to learn and challenge his mind. And before you think he’s too boring and geeky, yes, he loves video games and plays WoW and other games regularly with friends.

That train of thought obviously colors my own thinking about this industry. I don’t believe that because someone got a degree in something related to our field they know any more than someone that did not. In fact, I hear all the time how behind many of the programs in schools are. 

Our industry is fast-paced. Large institutions, like schools and universities, find it difficult to change rapidly enough. For this reason the WaSP EduTF, SoDA and Opera are all working on curriculums that schools can use that are actually useful for the graduates using them. Being self-taught, as long as you’re thorough about it, is not a bad thing at all.

CS: What activities did you do with your own children that you found worked best in facilitating this desire to learn rather than memorize?

SS: My approach was to use life as a learning tool. 

For instance, there is a lot of pressure put on parents to “make their kid smarter” than the other kids on the block, in the grade, wherever. As evidenced by things like, “I’m the proud parent of a honor roll student” bumper stickers, etc. 

When my boys were young, it was very difficult not to succumb to parent peer pressure and grab the flash cards so that Cameron could recite more letters, colors, read first, whatever. As other parents brag about how their child can already read certain words at four, you get an intense feeling of, “Hey, my kid is smart too!” and you really want to prove it.

However, brain studies show that, especially in boys, brain development of speech and reading areas can be slower. Pushing them to read before their brain development in that area is complete can make them feel that they’re stupid. The fact is, it will develop.

There are signs to watch for to know when they’re ready for it. If a child is kept out of school, not taught with books and just plays in nature till they’re 10 years old—within that first year in school, they typically catch up with all the other kids. So pushing them younger, to me, is not the answer.

For that reason, I waited—sitting on my hands—until Cameron started asking me things about the sounds letters made. Until he was asking me what certain things spelled. Only then did we dive into it all. But it was still just done as a part of life. I didn’t own a single phonics book or flash card. We simply read lots of books—we always did. We talked about the road signs and everything around us. Life was his phonics lesson. Both boys are tremendous readers and writers now.

I typically followed their interests. I let their inquisitive minds lead our learning. Books—not curriculum per se—and the internet contain everything you could want to know. Learning how to find it is key. 

I have a funny story about learning English that I love to tell. It’s about Cameron again—probably because he’s the oldest and all my experimenting was done on him. In second grade, all he wanted to do was math. Constantly. He did tons and tons of math on the computer with learning games and in little work books I’d get at the book store. At the end of the year, as expected, he tested 99th percentile in Math and about 75th in English. 

I wasn’t bothered by it. I figured that in third grade, we’d just do more English and catch up. Who says that doing every subject every year is the way it should be done?

I got a little English workbook from the bookstore—one of those that parents can use for supplemental learning—and sat him at a table with it. Sitting with a book was not really our usual way. And especially with something he was showing no desire to learn. But I was afraid he’d get too far behind, so I made him. 

After three days of this, he was in tears while I tried to force him to do it. And I thought—this is not why I home school my kids. When he’s ready, when he sees the value of it, he’ll learn it. That’s always worked before. I closed the book and put it away never to be seen again.

About two months later, he was playing one of his favorite games on the computer—Escape Velocity Nova, I think—and he discovered that there was a message board where all the players were talking to each other. He got really excited and he called me in. “Mom, I want to post here. I’ll tell you what I want to say, ok?” I said, “Nope. You type it. You spell it. You use proper grammar. When you’re all done, you call me in. I’ll spell check and proof it and then you can send.” 

He would have liked me to do it, but he was so excited by the prospect of discussing this with other people that he saw the value in doing those things. Every day, he would type up his posts and I would use them as his English lessons. Within about six weeks he was above grade level and within about three months he didn’t need me for that at all anymore. It was only a couple years after that when he started writing for Neopets.

That was the long answer to your question about what worked best for us. It was using their desires and interests. Using life as it happened around them. Exposing them to different things like the month we spent in Italy traveling by car in the countryside. Teaching them how to find the answers to their questions. That’s what creates an inquisitive, but self-sufficient mind in my opinion.

CS: I definitely agree with that. How about your own Web education? What kind of tutorials and books did you find the most useful?

SS: When I was at the very beginning, I got a Visual Quick Start Guide for every program I had. I found them to be a great reference allowing me to jump around and easily find what I needed—I rarely read a book cover to cover. 

For code and design though, I found myself using Web tutorials more. Much of my learning came from talking friends into letting me build their business a Web site, and then figuring out how the heck to do what they needed. And generally, after I had exhausted other options for figuring things out, I went to forums for help.

In fact, that’s how Community MX came about. We wanted to quickly disseminate information—instead of wait for a publishing cycle—as well as provide forums to point people to further information that might help. 

We’ve tried to create what we wished was there when we were learning. It’s been going for over five years now, and at this time, we’ve got over 2,600 tutorials on Adobe-related products as well as the Web in general.

CS: What’s the forum that you run?

SS: The forum where I’m a list mom is called WebWeavers. It’s Dreamweaver-related, but we don’t ban any general web-related question there either. It’s a great group of folks, many of which have been hanging out there a long time. I also work the forums at Community MX.

CS: How did you get involved in speaking at conferences, workshops?

SS: I started by writing at Community MX and Adobe’s DevNet Center. Then Ray West asked me to speak at TODCon and later, I spoke at Macromedia’s MAX conference. 

The past 18 months, I’ve been on the road almost non-stop due to writing the 32 CSS layouts contained in Dreamweaver CS3. I’ve had a lot of opportunity to talk about that, and CSS in general, in a large variety of settings all over the world. I’ve also been traveling doing training for corporate web departments.

Built-in CSS Layouts

CS: For those that might not know about layouts, can you describe what they are and how one can use them in Dreamweaver?

SS: The CSS layouts in Dreamweaver are simply solid, structural layouts accessed through the File > New menu. They contain no design—they have grey backgrounds on the div’s to show their placement—and no graphics.

Most sites online are basically either one, two or three-columns with or without headers and footers, so those are the types of layouts you can choose from. They come in 5 flavors: fixed, liquid, elastic, hybrid and a couple absolutely positioned—not my fault—they made me do those. 

Since there are so many ways to skin the proverbial CSS cat, I commented them heavily so users would understand issues they might encounter as they adapt them to their design. 

It’s a great learning tool for someone just starting with CSS for layout and a quick start for those that are already comfortable. I used to have custom snippets I used as quick starts, now I simply use these.

The CSS layouts don’t come with a user manual and for that reason, Greg Rewis and I wrote a book last year. Mastering CSS with Dreamweaver CS3 was published this year in New Riders’ Voices that Matter series. 

Greg is the Group Manager, Creative Solutions Evangelism for Adobe and past product manager for Dreamweaver—though he was originally one of the founders of GoLive.

It’s a project based book with six chapters. The first chapter is simply a review of the CSS principles that we felt were important for people to understand if they’re going to build sites with CSS. I call it a review, because there are entire books written on what is contained in that chapter. 

Each of the other chapters uses one of the CSS layouts to complete a web project. We teach Dreamweaver and CSS as you progress through the book. The projects are progressively more difficult and build on each other. 

We found that most CSS books used text editors. Most Dreamweaver books have a small chapter devoted to CSS. But there was not a book showing how to use Dreamweaver to its fullest potential to create standards based, accessible web sites. 

Since Dreamweaver has the majority of the WYSIWYG market, we wanted to fill that gap for people. To teach them how to use it for good and not for evil. We’re getting great feedback from people using it.

CS: How did you come about to writing the 32 CSS layouts?

SS: I was asked by Macromedia—now Adobe—to bid on the project. I was extremely busy that day, but wanted to respond in some way before the weekend. I quickly read the spec and shot back an email that said something like, “Off the top of my head, here’s what I see.” 

And then I listed things in no particular order as they came to me—A, B, C, D… M, N, O, P— I didn’t expect the list to be so long, but as I mentioned before, I do so much support for CSS and Dreamweaver on lists that I have a good idea of what trips new users up. And that’s basically what I was quickly throwing at them. 

I have no confirmation, but I would guess that my knowledge of the product, and what can confuse its user base, contributed to winning the bid. There are plenty of people that know CSS.

International Speaker

CS: I would say that’s a pretty good reason to pick you for the project! 

You’ve just come off a long speaking tour overseas. What events were involved and where did you go?

SS: I was in Cologne and Amsterdam for Adobe Live. London, Birmingham, Edinburgh and Newcastle for the Creative License tour. Barcelona and Chicago for Adobe MAX.

I did four dates in Scandinavia where part of my responsibilities included a short session for agencies on the business value of Web standards. I had the pleasure of speaking again at MultiMania in Belgium and just got back last week from Sydney, where I did two sessions at WebDU.

CS: Your passport must be blistered with stamps by now. I hope you love traveling. Have you picked up any tips when flying?

SS: Always fly business class!

Yes, I do love seeing new places. Edinburgh and Munich were two of my favorites this year—though nothing has yet surpased Tuscany for me. 

The things that work for me are to have:

  • an extra computer battery,
  • a power cord that works on a plane ,
  • a pillow clipped to my backpack—since I don’t always fly business,
  • an airline blanket—it’s hard to get those in coach these days,
  • my iPod—to avoid annoying seat mates as necessary—always put the earplugs in the moment you sit down, even if the iPod is off. No one knows and you can always remove them, 
  • Bose noise canceling headphones,
  • eye drops for my contacts as the air in the plane is dry,
  • lip balm, for the same reason,
  • saline for my nose—I actually started having nose bleeds from the dryness,
  • business cards in case you meet someone cool, and 
  • a book—though sadly, I nearly always work instead of reading.

The other thing I learned by flying so much is that even when the day is overcast, or dark and stormy, once you take off and get through the clouds, the sun is shining and it’s gorgeous. 

I was talking to a friend who does photography about it and she put my quote on one of her photos: “It’s always a sunny day—sometimes it’s just hidden behind the clouds.

I try to keep this in mind on crappy days.

CS: Definitely something to keep in mind as you go through airport security these days. I’ve recently begun speaking in countries outside of America, but not as much as you have. I’m wondering if your experience have you found that audiences are different in these different cultures?

SS: I have to speak slower in some countries due to the language barrier. And the “personality” of audiences in some countries is much more reserved—Finland and Australia come to mind. 

But the questions and enthusiasm for our craft don’t vary that much. Especially once people ask questions after the session.

CS: Do you speak mainly about CSS and CSS layouts? What do you find are the common themes in the questions from your audience?

SS: I do speak a lot on content, CSS and semantic XHTML—with a little bit of SEO as well. And yes, this year has given me many opportunities to talk about the CSS layouts I built. What I tend to cover a lot in my talks is basic CSS principles. I get a lot of compliments for my ability to make these concepts more clear. I find, again based on how much online support I do, that people are using CSS—but many honestly never learned it thoroughly or properly.

They started “trying some things,” maybe by pulling someone else’s page off the internet and mucking about, and now, oh dear it’s broken and they have no clue why. 

So I enjoy “cementing the cracks” in their CSS foundation. I like speaking on more advanced topics as well, but there really is so much that people need to learn about the basics.

Even when I train in a corporate environment, I find they nearly always choose to start with basic principles and work from there. For those switching from tables for layout, there’s a paradigm shift that must occur. 

The same thing applies to the many designers in the print industry that are being forced to move into designing for the web. Though they don’t all need to know how to code, they do need to understand how it works and what’s possible. 

There’s a great lack of understanding in our industry, which leads to a lot of frustration. Starting at the beginning and working into more advanced concepts gets you past that.

A Geek Romance

Stephanie and Greg

CS: Your co-author, Greg Rowis, isn’t just your co-author, but also your fiance. How truly geeky was his proposal?

SS: Well, it was geeky enough to make the cover of wired.com. Does that count? 

Greg and I didn’t start out as “fiances writing a book.” We talked at a couple conferences, felt our skills were complementary and that we could write a better book together—the one that wasn’t written yet—than we would write alone.

Through the course of the year of writing and speaking together, we found that we have great compatibility—we’re both dorks—as well as complimentary personalities. Since our relationship was “major long distance”—I live in North Carolina and he’s in Phoenix—we use a lot of tools to stay in touch. Everything from cell phones, of course, to Skype to IM to Twitter. Telepathy isn’t quite as reliable.

Having him propose on Twitter was, for me, extremely romantic. People pay big money for the billboard in Times Square. Twitter is free and all my geek friends are there. It was like the geek billboard proposal. 

CS: So, Twitter is a natural venue, if you will, for a proposal for the both of you?

SS: Oh, gosh yes. Probably too much. I thought Twitter was the stupidest thing when I first heard about it. “What are you doing now” in 140 words or less? I didn’t get it at all. Left. Then a few months later I heard more about it and that time took the time to understand the way friends and followers worked and such.

Since then it’s been the greatest way to get to know people a little better. People you met briefly at a conference. People that you wouldn’t really IM with or call. Or people you’re going to meet at a conference. 

By the time I meet them, I actually feel like I know them a little bit. The ice has been broken. You learn who has a really quirky sense of humor, what’s going on in people’s lives. I absolutely love it since my office is in my home. 

I’ve tried other social networking applications, but I haven’t found any to be as useful and interesting as twitter. I’ve decided it’s because too many of them try to do too much. Or the interface is complicated. Twitter is clean and simple.

As far as a natural venue goes—yes, probably. Greg and I see what the other person is doing when we’re not in the same place using twitter a lot. I can see, while I slave away, that he’s in Munich in the beer garden enjoying a Hefeweizen. 

So the proposal was appropriately on Twitter and then he surprised me with the ring on the plane to South by Southwest—we connected in the same city.

Both, for me, were perfect for our relationship and very romantic. The criticism on some blogs—in response to the wired.com story—regarding the fact that he wasn’t “down on one knee in person” I find just silly. They don’t live my life and they’re obviously “just not geeky enough to get it.” It was lovely.

Web Standards and the Adobe Task Force

CS: How did you first get involved with the The Web Standards Project?

SS: I have been on the Dreamweaver beta for years now. I enjoy working with the engineers there testing, and helping to shape the product I use daily. 

At some point, I was invited to join WaSP and be a part of the Dreamweaver Task Force. Basically, I was told I was already doing what needed to be done—making a lot of noise—so just to keep it up.

CS: What kind of noise did the WaSP DWTF make about Dreamweaver?

SS: Oh, mainly Web standards and accessibility workflow stuff. It’s not like the engineers don’t want to make a more standards-compliant product. It’s just that they’re engineers. They’re into creating a product, and we’re into writing the code, so they appreciate us noisy folks giving them feedback about it. They’re really a great group of folks over there. Very open and willing to hear us. 

CS: What is your role there within WaSP?

SS: I’m the co-lead of the newly formed Adobe Task Force (AdTF). Adobe—Macromedia, originally—was so responsive to, and appreciative of our input, we’re now overseeing all Adobe products that go to the web in some way in light of web standards, best practices and accessibility.

CS: Can you point to the changes that AdTF has made to the product over its history? 

SS: I honestly can’t point to the entire history—you’d have to talk to Drew or Rachel about that—since I wasn’t involved the whole time. 

But the biggest changes I saw were related to web standards and accessibility. Moving Dreamweaver into rendering standards, writing cleaner code, removing deprecated elements and program “features” and giving people things like accessibility prompts so that it actually helps educate them on best practices. 

Dreamweaver had accessibility options for a while, but now they’re on by default instead of requiring people to discover them. Basically, we’ve tried to lead Dreamweaver into being a program that will write clean, semantic, accessible code and make it more difficult to write program or browser-specific crap so that new developers don’t get tripped up.

The newly formed Adobe Task Force is taking that one step further. We are working with Adobe on all products that go to the web in some way. We also hope to have some best practices articles about using Adobe products to write standards based sites in the WaSP Learn section this year.

Guilty Pleasures

CS: You’ve stated your guilty pleasure is 80s music. What are some of your favorite styles and artists from that decade?

SS: Heh… there are tons. Everything from Bronski Beat, Nina Hagen, Lene Lovich, The Cure, Oino Boingo, Bauhaus, Depeche Mode, Simple Minds, The Divinyls, Thompson Twins, and so many more. 

When I was younger, I was more into the punk version of the 80’s, but now that I’m old, I lean toward the New Wave stuff. Age… it’ll getcha.

CS: So, is 80s music in your iPod rotation constantly? Do you listen to other styles or, er, eras, he asks politely?

SS: Oh, heck, yea. 

I love the 80’s, but I’m not “stuck there.” Most of the day I listen to contemporary music. My personal ipod was recently wiped out by my 16 year old who thought he was loading his iPod with all the songs on his computer. So I lost a lot of my favorite playlists. 

Yes, smart people synch their iPods. But not me. 

A lot of my music is on my old computer—now used by my sons and containing a lot of music I don’t listen to. In light of that, I just drug what I wanted over to my iPod and handmade the playlists. It seemed like a good idea at the time.

I have rather varied and eclectic tastes in music. I like everything from Damien Rice, The Dresden Dolls, Shiny Toy Guns, NIN, Drew Grow, Finger Eleven, Greg Rewis, Korn, Melissa Ferrick, Hellsongs, El Perro Del Mar, The White Stripes, PJ Harvey, The Killers, Sarah McLaughlin, Red Hot Chili Peppers, Tori Amos, Death Cab for Cutie and sometimes I listen to Mark Trammell or Keith Robinson’s mix tapes and muxtapes.

CS: How long have you been into beach volleyball? Do you find it it’s a nice balance to work life?

SS: I guess I’ve played for about five years. I really wish I’d found it when I was young, but back then I mostly did free weights and played racquetball. 

Beach volleyball is an awesome sport. I play at a sports bar here in town where we have nine sand courts and year round leagues. Before I started speaking and traveling so much, I was in great shape due to playing three times a week. But now, I’m playing one league a week—when I’m in town. 

It’s not so good for the body. I’ve got to do better.

CS: I assume by doing better you mean setting up volleyball leagues to all the countries you visit! Otherwise, you would be racking up those frequent flyer miles.

SS: Actually, by “better,” I meant joining a gym and/or working out on the road. 

I’m only here so much anymore—though I did just sign up for another year of volleyball leagues. But maybe just having a few more shots of tequila on the court would work just as well.

CS: Thanks so much for your time, Stephanie!

SS: Thank you, Chris!

Further Reading

Christopher Schmitt’s past interviews:

Setting the Start Number for an Ordered List

Last week when Chris Mills and crew announced the release of their Web Standards Curriculum, the table of contents was buried away from their front page. Making it hard for visitors to get to the content.

So, to help people get to the content better in a small way, I placed the table of contents on my site with direct links to each of the articles that make up the first version of the curriculum. While I was marking up the content, I noticed a little problem on Opera’s table of contents.

If you look at Figure 1, the table of contents has two markers: a bullet and a number appended to the side of each list item. What’s actually happing behind the code is that the list is marked up with an unordered list, which auto-generates the bullet, and there is a hard-coded number for the article:

Figure 1.


<ul>
 <li>12. <a href="http://dev.opera.com/articles/
view/12-the-basics-of-html/" title="HTML basics 
article">The basics of HTML</a>, by Mark Norman 
Francis.</li>
  ...
</ul>

All that coding seemed a bit odd. I had a quick email exchange with Chris Mill after I posted my table of contents that they needed to work on increasing visibility (or “scent” as Jarod would say) to the content. 

I checked back on the site a few days later in and noticed that the double markers in the table of contents were gone as shown in Figure 2.

Figure 2.

Curious as to how they did the markup for the list, I pulled up trusty View Source and noticed something a bit shocking:


<ul style="list-style:none;">
 <li>12. <a href="http://dev.opera.com/articles/
view/12-the-basics-of-html/">The basics of HTML</a>,
by Mark Norman Francis.</li>
  ...
</ul>

The markup for the lists was the same as before, however, inline CSS was made to remove the default markers. 

As Ted would say, “woah!”

I shot over an email to Chris informing him of the start attribute that can be used with ordered lists.

This rather simple attribute allows one to set the start of an ordered list with any integer and has the added benefit of fitting in rather nicely with the breaks of the curriculum’s table of contents:


<ol start="12">
 <li><a href="http://dev.opera.com/articles/
view/12-the-basics-of-html/">The basics of HTML</a>, 
by Mark Norman Francis.</li>
 ...
</ol>

He wrote back saying, “I honestly didn’t know you could do this!”, and has promptly fixed the markup as shown in Figure 3.

Figure 3.

It doesn’t surprise me that Chris didn’t know about this attribute because a lot of my HTML books I own don’t even cover the attribute. (Some online HTML tutorials don’t as well.) The first book in my collection I found with this attribute listed was Molly Holzschlag’s Special Edition Using HTML and XHTML published in 2002! 

Note there is a minor down-side to the start attribute: It doesn’t validate with a XHTML Strict Doctype, but it does for XHTML transitional.

Other than that, I believe the start attribute is a handy bit of HTML knowledge to know even if you are just starting out with Web design or, you know, working on a Web standards curriculum for others. (Just kidding, Chris!)

The Cindy Li Interview

One of the first thing you get to know about Cindy Li is her tendency to get to the point of things. Be it her work, playtime, her relationships, she cuts to the quick while I’m just starting to get out of the basic framework of a situation.

Add on top of that her unique illustration and design style which has been put to use for clients like AOL, Yahoo! and Ma.gnolia, Cindy is a very sharp Web designer and illustrator.

She donated a moment of her time (actually, she took pity on me and gave me a couple extra) so I could ask her questions about her design background, her American assimilation story, what it was like to win an Emmy, and many other issues. Read on and I believe you will, like me, find Cindy to be one of our industry’s treasures.

Cindy Li

Christopher Schmitt: How would you describe yourself?

Cindy Li: Currently? I’m feeling like a workaholic, photo junkie, human ping pong ball and trying my best to be a person my nieces can look up to as an example of what a woman in the workforce can be.

CS: You were born in Taiwan. How did you find yourself in America?

CL: My Dad’s the youngest of three boys and the older two were already in the USA. My grandparents would never move unless my parents, my sis and I moved. Since I was five, I didn’t have much of a choice in the matter. I remember the boxes and having to give away my cherished bike that looked like a motorcycle, it was orange.

CS: What was the motivation for moving to the United States?

CL: My parents thought it would be easier for my sister and I to attend college in the U.S., plus we were both women so it was another consideration because for all of the complaining about the sexes not being even, it is still better here than in other countries.

CS: English wasn’t your first language and getting used to a new culture, I can only imagine, can be daunting. What was your experience?

CL: We first moved to San Diego, that’s where my dad’s oldest brother and wife live. I remember Mr. Roger’s Neighborhood—my favorite show till was 12—and, Captain Kangaroo, and Sesame Street. Those shows were one of the ways I learned English. We moved to Jacksonville, FL—where my dad’s other brother lived—a year later because it was more affordable for us. 

The drawback was it wasn’t diverse and growing up which made me really want blue eyes and blonde hair. There was a lot of self hate for years.You’d laugh, but I had a southern accent til the age of 12. 

Then I realized I shouldn’t have one so I worked on getting rid of that but you’ll hear me say “y’all” every now and then. Most people think that I was born in the USA and if you just heard me speak I think you would agree that. It was all part of trying to fit in.

CS: I think hearing you give off a “y’all” would be great, but I was born and raised in Florida. Was it hard to get rid of the accent?

CL: I have a karaoke video online where I’m singing off key but I worked in the southern twang so you can laugh at that. It was easier to get rid of than the torture of not fitting in.

CS: Aside from PBS shows, how else did you go about learning English?

CL: From my classmates, of course! I would come home with words I had learned from class that day and teach my parents the correct pronunciations.

Plus growing up there was the Superintendent’s reading program in Duval County. I can’t remember if there was a prize but it made me fall in love with the “Boxcar Children” book series.

CS: How did you know you wanted to be in graphic design?

CL: I wanted to draw the moment my grandfather—mom’s dad—did a caricature of me. He was great at it and I begged my parents to enroll me in a drawing class. I think I was about 7 or 8? Memory’s fading me with each passing year.

Art was only supposed to be a hobby though. Being an immigrant kid my parents were very focused on my sister and I attending college and being an “artist” was never part of the plan. 

I started testing myself in the 10th grade by entering poster contests. I would stay up til 4am—with mom yelling at me for staying up late—but I wanted to prove that it was something I could do. I placed in most of the contests or won so I was feeling like this was something I was able to accomplish. I was also enrolled in the two Advanced Placement courses that my high school offered me.

Keep in mind my parents immigrating to the USA and having a kid go to art school wasn’t the big plan they had in mind, or the rest of my family for that matter. I defied them and it took years for them to understand. They were worried I’d starve or not be able to make ends meet. 

My entire college experience was working on my projects, interning at a magazine and a part time job. I know UF gets a reputation for being a party school, but I wouldn’t know. I was on a mission to prove to myself that I could do it if I wanted it bad enough.

While most people I knew were going to Daytona Beach for the summer break I was working on my final project. When I turned in the project my professor Brian Slawson told me I was beyond Type A. 

My dad was working 6 days a week, 12 hour shifts at his job earning overtime to put me through college. The deal was that I go to school and they’d pay for it. Failure was not an option, and sometimes I forget to slow down.

CS: With all that pressure, it sounds like you grew up fairly quickly and were clearly motivated. Do you find yourself still intensely motivated?

CL: I do. I am not one to sit idle and wait for things to happen. I believe that you have to work for the things you want and things don’t just fall into my lap—well, not all the time.

Things like winning the lottery or the stock option windfall don’t happen for everyone and my best asset is me, that is the only thing I have control over. There is no sense of entitlement here. I have worked the 5am-4pm shifts, the weekends, and late nights. I do what I need to do get where I want to go (even if it isn’t always clear where that is).

I went to SCORE.org for advice—they are a free service of retired lawyers/accountants/business owners—because I prefer to do research on my future and I’m a bit of a worrier. The advisor said I could just marry well and not worry so much. I laughed and responded to him and said that was a crap shoot too.

I am a firm believer in working hard for the american dream, maybe that was instilled in my head too much who knows. I want to be able to look at the person in the mirror and be proud of the person I’ve become then I’m happy that I’ve treated people fairly and created work I’m proud of.

CS: You seem to be doing well with your American Dream so far. What important lessons have you picked up so far or have stuck with you the most?

CL: Take care of yourself. While you may have partnered with friends that you think are watching out for you—that isn’t always the case—so pay attention.

Put away money each paycheck for taxes. Figure out what is deductible if you are freelancing.

Save at least a 6 months for living expenses, put away money for times when there aren’t a ton of projects going on.
Start your 401k early and keep at it. I prioritize what things I want. I’ll spend money on a MacBook Pro but not $400 on some new purse/wallet that my girlfriends are crazy about.

Never carry a balance on a credit card. If you don’t have money for it today, then save for it.

CS: What intrigues you about the graphic design profession?

CL: It mixes in the artist inside me, but pays better. I loved to paint and draw growing up but with being a fine artist your painting your view of the world, with graphic design your describing to the world someone else’s view. I’d like to draw for a children’s book or have a line of cards. The fun thing about graphic design is it also mixes in my love of Macs—cool gadgets. My first Mac was an Apple IIGS with an Imagewriter II.

CS: What cool gadgets do you have know?

CL: Let’s see I’m probably a poster child for Apple. I’ve got the iPhone, AppleTV, Apple G3—it’s a backup server—, Airport Extreme, and of course an iPod. I just picked up the Skull Candy Link backpack—it’s a great design, it has speakers on the arm straps and controllers for your ipod—, a 60″ tv (keep in mind I’m only 62″ tall), Nintendo Wii, HD Tivo, harmony remote to control the tv setup things. My Canon Rebel Xti—and three lenses—, Canon A95 with the waterproof casing and a Garmin Nuvi GPS.

CS: Wow. That sorta reads like a computer nerd’s James Bond wish list. What’s your current work setup now? I hope it’s not the same Apple IIGS.

CL: No, it’s my Macbook Pro 17″.

CS: You went to the University of Florida—over Florida State University, for some weird reason—and picked up a BFA. Why UF? And why a BFA? And just so that people that are reading and might not know, I went to FSU and our two schools have something of a rivalry.

CL: I was actually torn between those two colleges once I turned down Savannah College of Art and Design—had a presidential scholarship—and Maryland Institute College of Art. I had to make a choice as I said earlier between defying my parents and choosing my path. My parents were begging me to go to a university, I picked UF because it had a stronger academic record than FSU. When I went to the FSU campus I spoke to a professor there and showed her my portfolio she said I was a shoo-in for the program, but UF was harder to get into. I figured if I was going to go for my dream then I’d pick a harder program to get into.

CS: Why the BFA? 

CL: I figured having a degree was the way to go because of my upbringing, you must have a degree in something. That and I didn’t want to be a doctor! I am way to squeamish. Ask any of my friends who have watched movies that aren’t rated PG.

CS: That’s great that you went for the harder, more challenging path at UF. What kinds of lessons did you learn while you are at college?

CL: I learned who my friends were and who I could count on.

Another lesson I learned was that attending a University that was large enough to have all the different ethnic groups were great, for a while. It cleared up a few things for me. When the kids in Jacksonville were teasing me for being Asian, I dreamed of going back to Taiwan because I thought it was easier. I dreamt of it because I wanted to fit in. 

I joined the Asian groups to fill the void but discovered that it wasn’t what I wanted at all. I didn’t enjoy only having “Asian” friends, I liked having a diversity in who I spent time with. Just because you may look like the rest of the group doesn’t mean you only belong there. Plus life is boring if we only stayed within the same social circles.

I watched friends drop out of college because of drugs. I never had a desire to even smoke a cigarette. That Adam Ant song, “Don’t drink, don’t smoke…”, I thought was about me!

I learned that earning is way more valuable than being handed something on a silver plate. I watched one friend’s parents pay for everything and watched that friend squander it all by barely passing classes. I watched another friend work super long hours to pay for college succeed. No one owes you anything and you are lucky if anyone offers you so appreciate any help you get.

CS: Do you feel you would or could go back and get a higher degree?

CL: I thought about an MBA at one point, couldn’t help it because of my parents goals for me but I’ve just been too busy working to take that financial hit and probably attention span. 

CS: What did interests did you pursue during your time at UF?

CL: UF had a very diverse campus, there were a lot of Asian clubs. In my freshman year, I joined the Chinese American Student Association which performed dances each spring—fan dance, buddha dance, and, no, I’m not putting it on You Tube.

Eventually became the Secretary of the Asian Student Union in my sophomore year. We did skits to welcome incoming freshman, and put together a conference. Then in my junior year I got a part time job at the sound and lighting crew, Spinal Tech, and an internship my junior/senior year at JAZZIZ magazine.

College was a bit of a blur for the last two years, I was running on about four hours of sleep most nights between the internship, part time job and projects for the degree. In my Senior year I was president of VoxGraphis—UF’s graphic design organization.

CS: What was your first exposure to the internet or Web?

CL: I think the first time I heard about HTML was via my second cousin, Raymond. He told me about it I think when I was in high school. 

The first time I played on the “internet” via IRC in the labs at UF. My first email account name was figment—I love Disney a bit too much and I felt like a figment of someone’s twisted sense of imagination. 

My first web page was a mock project I did in my junior year for a project for the design program. I may even have it on an Iomega Zip disk somewhere with, wait for it, iframes.

CS: Well, I hope you get it off your Zip disk soon, might be near impossible these days. Can’t recall the last time I needed to use a parallel connector to hook up my old Zip drive. Otherwise past works might get lost. Do you feel that our industry is too fluid? 

CL: Even though we can reach a lot of people all over the world with our designs and words, it depends on making sure a server is plugged in somewhere and people have a browser that can render the pages. Yet with a book, it’s just there waiting for enough light and someone to turn the pages.

Our industry is very fluid like a hummingbird. You see it for a split second and then its gone into another direction. You have to pay close attention to see what direction it is going in. Books are great, but things are changing quicker than it is in the educational sector.

CS: Books can’t all be bad. You’ve recently had a chapter published with other Web designers in Professional CSS. What was the goal of the chapter? What did you want the readers to take away after reading it?

CL: That they can take what is existing out there and repurpose it for themselves. There are plenty of hacks out there for whatever and its okay not to be the person to create the latest “sliding door” by Douglas Bowman.

CS: How was the experience of writing for a book?

CL: Painful. I was worried about something living in print forever—or, at least on my parents’ bookshelf—that wouldn’t be up to the level of the other writers in the book. Everyone else spends a lot more time on code and my strength is in design.

CS: I think painful is an apt description. So, when did you join AOL? What was the feeling of working there?

CL: I joined AOL after NetChannel—internet television—startup in Norcross, GA—just outside of Atlanta—got bought out in 1998.

I loved working at AOL, most of the people I’ve worked with are great amazing, talented people. I grew up in the AOL family, sure we had our disagreements but at the end of the day my coworkers just wanted to do their best. I know there’s a lot of rumors and layoffs going on, that part was never easy to digest. You have good days and really bad days, but like anywhere you do the best you can and plan for the worst. Always having a savings plan just in case, that’s for anywhere you work.

CS: What kinds of projects did you work while you were with AOL?

CL: My first project was AOLTV it launched in 2000. It was shut down in the fall of 2001.I worked on the AOL Channels: Health and Fitness, Personal Finance, Shopping, AIM Pages, AIM Lite, AOL.com, Mac Development, and Ficlets.

CS: Do you have any screenshots of these works?

CL: I have some on my designrabbit.com site, but some of those are like high school yearbooks great when it first comes out but looking back at them you cringe.

Cindy Li holding an Emmy Award

CS: In 2005, AOL covered the Live 8 concerts. It was the first time that a multi-city, around-the-planet event had been broadcast live through the internet without any breaks. For that achievement, AOL received an Emmy for the “nontraditional broadband delivery platform” category. While it is definitely a group achievement, how did you feel about receiving the award?

CL: Ari Kushimoto and I were the designers on the AOL.com team at that time so we were taking shifts covering the entire event. The award was a complete surprise, we were just doing our jobs.

CS: Just doing your job is probably the easiest, honest way of getting an Emmy I’ve ever heard. 

In 2005 you stated you got into Web standards by visiting the SXSW conference in Austin. What about the conference do you feel turned you on to Web standards? 

CL: AOL’s past was to have the walled garden for their content. They were moving away from that and I was getting out of my depression from a breakup. I was looking for a new path because I felt that I wasn’t always going to be at AOL and I had to start figuring out a plan for the next chapter of my career. 

It was because of my friend, Elsa Kawai, that I met Jeremy Keith and the rest of the Brits that year. Jeremy was telling me I needed to blog and I showed him my dot-mac account—where I posted pics of my trips/events and comments under each of them—he was also the one that told me about flickr. I blame him for that addiction. There was one night in particular at 4am where Patrick Griffiths—Brit Pack member—yelled out, “Liquid vs Fixed” to Jeremy Keith and D. Keith Robinson. There was a lot of noise and arguing. I met Molly Holzschlag that next day at breakfast. All of the people I met that year were really motivated and it was hard not to be curious about what made them passionate.

CS: Aha! Jeremy’s the one to blame!

CL: Totally!

CS: So, you realize that you need to get serious about Web standards after the conference. What was your educational path? What resources did you use?

CL: Well I started reading htmldog.com, but it was mostly Veerle Pieters, Geert Leyseele and Jason Garber that were my mentors and resources.

Having people around who are willing to play the roll of teacher/code checker when you are starting out was great.

CS: If a woman designer would to come up to you and ask you for your advice on how to succeed in this industry, what wisdom would you impart to her and why?

CL: I would say network when you don’t need to. People can tell when you just want something from them, its nice to talk to someone just to get to know them, not what you can get out of them.

Be a team player, designers are part of an ecosystem just like developers if one part gets stuck—or is stubborn—then a project won’t work.

It’s great to be assertive and to explain your view but you are part of a team.

Check out other designers, design is like fashion. There is always some new trend and you should take a look at what’s going on even if you have your own style.

CS: In 2007, you took part in Web Directions North. What was your role for that conference?

CL: I was the stage manager. Everything from unpacking things, stuffing bags, running microphones, getting the speakers to be there on time, making sure the volunteers were where they were supposed to be and that the speakers were finishing like clock work. It’s more glamourous than I make it sound.

CS: How did you find snowboarding? 

CL: You mean how did I find eating snow?

CS: Ha! I think that’s a good stopping point. Thank you for your time.

Christopher Schmitt’s Past Interviews:

Kevin Lawver Voices That Matter Interview at SXSW 2008

Co-author of Adapting to Web Standards, Kevin Lawver, was interviewed by Michael Nolan from Peachpit at South By Southwest 2008 as part of a podcast series.

I noticed the interview didn’t come with a transcript. So I decided to write up the dialogue from the interview, which is posted below the video. Enjoy!

Michael Nolan: Hi, I am Michael Nolan, a senior acquisitions editor for New Riders and we are coming to you from the 2008 South by South West Interactive festival and conference here in Austin, Texas. 

And I am speaking with Kevin Lawver who is one of the co-authors of our book, Adapting to Web standards: CSS and AJAX for Big Sites.

Now, Kevin, of course, is very familiar with big sites because he works at AOL, but before we get to that, tell me about the International Day of Awesomeness.

Kevin Lawver: (Laughter.) It is a holiday that I invented that started started as a joke at work and it slowly built. I threw together a website for it and send it to some friends and everybody thought that it is a funny idea, but I actually started taking it seriously. My kid came up with the tag line. 

MN: Which is? 

KL: “Nobody is perfect, but everyone can be awesome” and— 

MN: That’s a great tag line. 

KL: It became the start of, the idea is to do something that you wouldn’t normally do. 

MN: Then how did you do that, observe the International Day of Awesomeness? 

KL: I dyed my hair bright blue which is something I always wanted to do. My friends and in high school and they had bright blue hair and I was always very jealous, but never had the guts to actually do it myself. So, this morning in my hotel I ruin two hotel towels putting it in myself.

MN: I bet they will be unhappy when they come in and pick up those towels.

KL: I will pay for it.

MN: (Laughing.) Looks outstanding. It’s awesome, in a word.

KL: I would hope so. 

MN: Yeah, yeah.

KL: Would be a failure if I didn’t.

MN: So, your presentation you say you’ve been coming to SXSW for several years. How long? 

KL: This is my fifth. 

MN: Your fifth year at South By. And what you have seen change in South By in those five years?

KL: It’s so much bigger now. That we have—They just opened the third floor for panels last year and this year there are 12 panels going on at the same time and you have to give up all hope of meeting everybody. When I was here on 2004 my first one— 

MN: Still possible.

KL: Yeah, I met, you know, a good 150 to 200 people and I felt like I had met pretty much every one there and that was open to being met and this time there is just no way.

MN: There is no way. One of my authors compared it to drinking from a fire hose and I thought that was a good metaphor for what SXSW has become, but, still, it’s fabulous. It’s like the best conference in the Spring, at least— 

KL: Easily. 

MN: —for Web designers and developers. I mean I just always come away with new insights and excitement. 

KL: It’s a really good mix. It’s not a super technical conference and it’s not in a cubby hole. You got everybody together. You got designers and developers, entrepreneurs and writers, just lots of creative folks. So, for me the overlap is what is interesting. 

MN: Have you attended any good parties?

KL: I don’t do the parties. 

MN: You don’t do any parties?

KL: Because I just don’t handle being crushed by people. I am good with nerds because I am one, but, you know, in a bunch you cannot hear anyone talk. 

So, we decided there are two types of people in the world. There are Bar People and Dinner Party People. I am much more a Dinner Party Person.

MN: So, we probably have had nice dinners with folks here.

KL: Yeah.

MN: So when we talk about this book, Big Sites, that’s what you are presenting about here at South By this year. Tell us a bit about your presentation.

KL: I did a panel with Thomas Vander Wal, Cindy Li, Jason Garber, and Leslie Jensen-Inman about working for big companies and then making a transition to maybe start-up life or doing your own thing or educational stuff. And we talk a lot about coping mechanisms and— 

MN: What are some? What are some?

KL: I only ever worked for AOL. It has been my entire professional life. 

MN: Yeah, that’s a big company.

KL: It’s, yeah, huge. Fluctuates a bit, but it’s a very large company. 

I think the biggest one is to to know what your strata is and know what your role is and you can kick all kinds of butt within that role and within that strata and make a big difference. But, above that or maybe below it or to the sides of it, you have to decide to let that stuff be. And you don’t have much control. There is all kinds of stuff that happens above you that you can object to and, you know, make sure that your objection is noted. But they are going to go and make their decisions without you and there is nothing you can do. You can either. You have two choices, you either get over it and move on or you leave. And I have done a pretty good job over 13 years of getting over a lot of different stuff—

MN: Moving on, yeah.

KL: And you sorta cannot affect that anymore.

MN: And who on your panel represented the freelancer or the small company?

KL: Both—Jason Garber now works for a start-up. He worked with me at AOL for a while. He works for start-up of 10 people. Thomas Vander Wal works for himself. He is a single-person company. Cindy Li does freelancing and works in a small design firm and Leslie Jensen-Inman is a professor at The University of Tennessee, Chattanooga. We had, they all had broad experience in different size organizations. So, Cindy Li has done the start-up thing and AOL—

MN: So, what are the particular challenges for a Web designer or developer in a large organization?

KL: If you work at, you know, mass market Internet scale building things it’s a totally different exercise. You have to go out of the door being able to handle millions of request a day and you can’t really cut corners. 

Like, if you are start-up, you can sort of just throw something out there. Slap it together, throw it out there and see what happens and then worry about the scale when you get there. If you get that network effect of, you know, an AIM, an AOL, a Yahoo or Google, you can’t do that. 

You can’t just like say, “okay, eeeeeh, lets push it out and see what happens,” because it will melt without getting even half the traffic that it possibly could. 

MN: Yeah, understandable.

KL: So, you have to think a lot more about infrastructure and even, even on the frontend side you have to think a lot more about caching, geo distribution of content, you know, edge caching of assets and that kind of stuff. There aren’t books on it. 

And so when we, when Christopher, brought up the idea of doing the book. Well, lets do, you know a real explanation of how this works and how something in a very large company goes from beginning to— 

MN: So, it’s about applying Web standards to, for a large Web presence. 

What have you heard people talking about? What’s the buzz at South By this year that’s new. Is there anything new that’s caught your eye?

KL: There is a lot more talk about OpenID this year. There seem to be a lot more business panels. There is one this afternoon on bootstrapping, which we have never had a panel on bootstrapping your own start-up before. 

Honestly, I’ve been so busy doing my panel and a product that I built was up for a Web award last night, so I was little stressed out. 

MN: Did it win?

KL: We won in the CSS Category. It’s a site called Ficlets. Speaking of a scale, it was the complete opposite. AOL let us go off as an experiment last year. 

MN: Oh, so it’s an AOL site and you won a Web Award. 

KL: Yeah, for the CSS category.

MN: That should be a nice thing to go back to Virginia with and tell them. 

KL: Yes, it’s a little statue.

MN: Great. That’s wonderful. It’s really nice taking with you, Kevin.

KL: Yeah, thank you.

MN: And thank you for coming by.

KL: Yeah, no problem, it was fun.

Opera Web Standards Curriculum Released

This morning Chris Mills annonced that he finally launched the Opera Web Standards Curriculum. Chris has gather a fine list of authors to bring you the basics of solid Web education.

It’s just a start. There are a little over 20 articles that make up the curriculum, but what a start it is.

I’ve given talks across the country and around the world. Companies and businesses are clamoring for potential employees that “get it” regarding Web development. This curriculum should be a welcome sight. 

In addition, the content is wrapped up nicely with a Non Commercial — Share Alike license. As long as you site the source and don’t make any money off the material, people like university professors or corporate standards evangelists can use these materials to help spread the good word.

My only concern is that I believe the table of contents or a portion of it should should have been squeezed onto the front page. This would allow visitors to quickly dive into other portions of the curriculum without having to go. It’s hard to gauge the depth of the articles or the content on the first page alone. One has to read the introductory article first and then read down to the bottom.

So, I took the list of articles that make the up the curriculum, found in the introduction, and put the list below:

The Web Standards Curriculum
Table of Contents

The beginning

  1. Introductory material, by Chris Mills

Introduction to the world of web standards

  1. The history of the Internet and the web, and the evolution of web standards, by Mark Norman Francis. 
  2. How does the internet work?, by Jonathan Lane.
  3. The Web standards model—HTML, CSS and JavaScript, by Jonathan Lane
  4. Beautiful dream, but what’s the reality?, by Jonathan Lane.

Web Design Concepts

  1. Information Architecture—planning out a web site, by Jonathan Lane.
  2. What does a good web page need?, by Mark Norman Francis.
  3. Colour Theory, by Linda Goin.
  4. Building up a site wireframe, by Linda Goin.
  5. Colour schemes and design mockups, by Linda Goin.
  6. Typography on the web, by Paul Haine.

HTML basics

  1. The basics of HTML, by Mark Norman Francis.
  2. The HTML element, by Christian Heilmann.
  3. Choosing the right doctype for your HTML documents, by Roger Johansson.

The HTML body

  1. Marking up textual content in HTML, by Mark Norman Francis.
  2. HTML Lists, by Ben Buchanan.
  3. Images in HTML, by Christian Heilmann.
  4. HTML links—let’s build a web! by Christian Heilmann. 
  5. HTML Tables, by Jen Hanen.
  6. HTML Forms—the basics, by Jen Hanen.
  7. Lesser–known semantic elements, by Mark Norman Francis.
  8. More HTML articles to follow…

Supplementary articles

American Flag in CSS

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!