CSS Dev Conf Call for Speakers is Open

The CSS Dev Conf is an annual gathering of the best and brightest minds in CSS, the design language of the web.

Continuing the tradition of holding the event in unique settings, this year’s CSS Dev Conf is situated in the Rocky Mountains of Colorado at beautiful The Stanley Hotel, which is part of the History Hotels of America.

The event is two days devoted to CSS and its super friends, including JavaScript, Sass, Compass, and more. Topics range from case studies, responsive web design techniques, infographics, automated testing, cutting edge CSS specs, to much, much more.

Featuring amazing speakers like Eric Meyer, Nicole Sullivan, Jonathan Snook, Estelle Weyl, Tab Atkins, the CSS Dev Conf speaker list is only just beginning to grow.

You could join the CSS Dev Conf speaker line up as the call for speakers is open right now.

Voting on speaker proposals is done through double-blind voting setup. It’s a popularity contest for great CSS content.

So, if you are someone who breathes CSS, I encourage you to submit a talk.

Or maybe you know someone who is CSS ninja?

Help spread the word and let them know about the CSS Dev Conf call for speakers.

CSS Workshops at SXSW 2010

This past Summer I worked on chairing the CSS Summit through Environments for Humans.

The CSS Summit was an all-day, one-track, online conference dedicated to everyone’s favorite web design technologywith seveal experts in the field including Stephanie Sullivan, Jason Cranford Teague, Nicole Sullivan, and other great speakers on CSS.

It was a big hit and I think one of the reasons it was more of a focused effort to get past the basics of CSS and dive into more advanced, focused material.

It’s no one’s fault really that CSS isn’t delved deeply at many conferences and there isn’t one reason why it happens. CSS doesn’t work in a vacuum. It is only one part of what makes a great Web site.

Also as a speaker, sometimes you don’t know your audience skillset and tend to cater to the basics so as not to risk losing people.

So, when Hugh from SXSW asked me if I would be interested in chaperoning part of SXSW, namely the CSS workshops, I jumped at the chance.

Looking through the CSS submissions in the panel picker, I picked out what I believe are some real gems.

Workig with the speakers of these panels to make it the best possible workshops, I believe we have a solid line up of CSS goodness:

CSS Frameworks Shootout by Beau Smith.
Joined by Nathan Smith, Joshua Clayton, Chris Eppstein, and Nicole Sullivan, the Smith moderates a discussion covering the different flavors of CSS frameworks as well as address the merits of SASS.
CSS and Fonts: Fluid Web Typography by Jason Cranford Teague.
Doing a solo workshop, Jason covers the latest news about Web typography and how the make the most of the new developmenets. (After having tech edited Jason’s book, Fluid Web Typography, I know he is perfect for this presentation.)
CSS3 Design with HTML5 by Stephanie Sullivan, Zoe Gillenwater and myself.
In this workshop, we intend to cover the latest in cross-browser CSS3 development (typically involving patching up IE until the next promised version) as well as see how web developers can use HTML5 for engaging user experiences.

It’s nice to see the rise in popularity and buzz of CSS3. Thanks in a large part to browser vendors implementing parts of the spec before its even finished, but I digress.

If you intend to come to SXSW Interactive this year and have a hand in CSS coding at your place of work, check out these panels Saturday afternoon.

And if you can’t make it to Austin this year and still want to learn more about CSS, I’ll be giving an online CSS3 workshop next week.

What I Did During My 2009

As the year winds down to a close, it’s time to take a look back and figure out what I did with those 12 months in terms of Web design.

Web Form Elements

I wanted to take a look at how browsers render form elements. I mean really take a look. Over 5,000 screenshots later, the problem of consistent browser rendering of web form elements looks nowhere near happening.

This is in large part due to three areas: the specification not dictating the design, the browser vendors not feeling they need to adopt a standard, and the different operating systems’ UI.

Planning Conferences

I did something I thought I would never thought I could do: I put together a Web design conference. During a conversation with Kimberly Blessing in 2008, we thought we should put together a conference “of our own”.

Thus the idea for the first ever AIGA In Control Web Design Workshop Conference took shape and it took place in Cincinnati this past June.

Assembling the conference was one of my main responsibilities as a board member of AIGA Cincinnati and it came together in such a great way thanks to the speakers, the attendees, volunteers, and fellow board members.

After never thinking I would organize one conference, I ended up helping to run three more this year. Thanks to my partner, we were able to put on three online conferences: The CSS Summit, The DIY Summit and The jQuery Summit. (And right around the corner are the online Workshop Summits in mid-January and the AIGA In Control Web Design Workshop Conference in Orlando this February.)

Thanks to people like you attending these events, we raised close to $20,000 for non-profits while helping spread best practices and saving thousands of lbs in CO2.

Third in a Series

In the middle of those events, the third edition of the CSS Cookbook was written, edited and (as of yesterday) published.

Almost three times the size of the first edition, the new edition sports new solutions to common CSS problems, updates to the new browsers, and how to work with HTML5 and CSS3.

Technical Editor

I did something else I always wanted to do, but hadn’t had the opportunity: tech edit a book.

After writing ten books and dealing with several tech editors, I was itching at a chance to work on a book. This year I got the honor of editing David McFarland’s CSS: The Missing Manual, Jennifer Niederst Robbins’ HTML and XHTML Pocket Reference, Fifth Edition and Jason Cranford Teague’s Fluid Web Typography.

While the subject matter was different, the attention to detail from all three authors were the same. (I also felt a little sorry for Jason as he had to rewrite a chapter due to the breakneck speed in which the possibilities of Web typography exploded in the last half of the year.)

Also, the authors had something else in common: they both have done great work in moving the Web forward. They’ve been doing this Web design thing since it was possible to do Web design. It was an honor to play a small role in their books.

Releasing Web Education

In March, I did a small part in helping out the Web education curriculum. Announced during SXSW Interactive festival, the InterAct curriculum is a series of 10 courses under creative commons for Web educators to incorporate however they wish: they can take the whole thing or use only parts of it.

Why give it away for free? The goal is to get fresh, Web educational materials into the hands of educators. And being a teacher is hard work. By helping out with some free resources, we help raise everyone’s awareness of quality Web education.

Speaking

I even managed to keep up a brisk speaking schedule:

  • University of Cincinnati
  • The CSS Summit
  • SXSW Interactive Festival
  • In Control Cincinnati
  • eduWeb Conference
  • July 4th presentation of the CSS Flag
  • Miami University
  • Georgia University
  • Spring BR/ Conference
  • Web Visions

I’m always looking for venues to speak. So, if you are looking for a speaker in 2010, please let me know.

Happy New Year!

Even though no one appears to have added any new days, 2009 was definitely long year.

As we transition to the next one, I wish you all the best for 2010.

May it be a happy and joyful one for you and your family and friends.

Announcing the In Control Orlando Web Design Workshop Conference

In Control Cincinnati Web Design Workshop Conference was a huge success. One of the best compliments we received was from an attendee who they felt that they were being overserved throughout the two nerd-filled days.

For 2010, we dcided to take the show on the road to Florida. In conjunction with AIGA Orlando, we’re having In Control take place on Feb. 22-23rd in, well, Orlando.

I’m humbled to have such a great number of talented speakers for In Control Orlando:

While the surroundings may change, the formula for In Control hasn’t:

  • Longer sessions by speakers to dive deeper into the material
  • Wrap-up sessions each day with that day’s slate of speakers
  • One-track conference so everyone shares the same experience
  • Capping registrations to 100 people so not to have your voice drowned out
  • Comparitively priced to other conferences plus lunch and snacks throughout the day

And the last item to the formula is that In Control needs to be a conference I would not only would want to attend, but I would put down my hard-earned money to pay to see myself.

The early bird discount makes it affordable–and if you are an AIGA member, you get an even better break on the price. If you want the discount code and are an AIGA member contact your local chapter’s board.

If you aren’t an AIGA member, feel free to use my discount code, INCSCHM, and save an additional $50.

(If you are a member of AIGA, you can get a separate, better additional discount, too. Be sure to contact your local AIGA board for the discount code!)

Just like we did in June, we are going to have a great time this February in Orlando and I invite you to join us.

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:

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!

An Event Apart: Understanding Web Design

The first talk of An Event Apart in Boston was delivered by Jeffrey Zeldman. He talked about the difficulties of our profession and the lack of respect we receive since the dot-com bust days.

  • Zeldman asks for a moment of silence for George Carlin, who passed away the night before.
  • Jeffrey talks about what Web designers need, asks for laugh
  • Empathy. “If you look it up a dictionary…”
  • Puts forward example of bad web sites
    • Real.com
      • Has two competing goals for the site, which makes it hard for a single message to get out.
      • Link colors don’t have to be blue and underlined
    • ConsumerSearch
      • Site contains great articles on consumer product research
      • however, Web site is hard to use.
      • “No one figured out how to make the front page sexy.”
      • Figure out what content is important to the consumer and make them want to click that link.
      • Recommends guerrilla, cheap user testing. [Ed. note— See Steve Krug.]
    • Failure of Empathy to get yourself into the mind of the user
  • “The unmotivated need not apply.”
    • Main education courses come from product/software companies that build Web-related products.
    • “Teaching Excel is not the same as teaching business.”
    • They don’t teach you strategy in Web design courses, but they will teach you the software. [Ed. note—This is so true.]
  • You have to keep on learning.
    • Worked on creating Web design survey since they wanted facts on our profession
    • 33,000 all over the world took the survey.
    • Education is mostly relevant 53%
      • The more money you make, the less your college education matters.
      • Project managers need the less educatin’
  • Web designer
    • Gets no respect
    • It’s disturbing that in a profession that demands so much knowledge and skillsets, that we don’t get respect
    • One reason is there isn’t respect is because there isn’t a standardized title
    • Different kinds of organizations, have different breakdown of
      titles
  • Who owns the Website?
    • The Web site IA should not be reflective of org charts
    • [Ed. note—Lawyer joke warning.] Lawyers spend a lot of time on work on communication. So naturally they should be in charge of the Web site.
    • “Creative people are at work, but are being beaten down.”
  • Web designers don’t get paid very well.
    • A lot of people are making 20k
    • Women who think there is bias against women in the industry, you do better.
  • In Search of Excellence
    • “They take people who have achieved.”
    • Communication Arts is about graphic design, not about usability, not about Web design
    • This particular Web design is graphic design intesnive,
    • Journalism talks about real estate not architecure–who ever is making the most money.
  • We have to avoid “guitar solo” approach
    • Forget the showing off, but focus on the empathy of the clients.
  • “Empathetic Web Design”
    • Sounds better than “User Center Design”
    • Used more and more around Zeldman’s studio in talking about what they do and how they differentiate themselves from other shops

Twitter-Sized An Event Apart Presentation Summaries

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

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

Title Slide

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