The Graphic Design Realization

By admin

Back in 1998 in a movie theatre that doesn’t exist anymore, I looked at a movie poster. It’s the moment I realized there is such a thing as graphic design. 

Batman (1989)

As a Batman fan—more so a DC Comics fan—the poster captivated me. I remember staring at the poster in the movie theater for a long time. It’s a great piece of design, but all I knew at the time was that it was exceptionally captivating. 

The movie poster has the Batman logo, which looks sort of like an oil painting, but to this day I’m not sure how what medium it is. Also, all of the logo isn’t displayed on the poster—the logo is enlarged with the edges cut off on the left and right. And there’s a simple, understated date at the bottom of the poster informing all when the movie is going to be released.

Looking at the poster, I know this poster succeeded in communicating that a big movie event was coming and it wasn’t going to be a cheesy take on the Batman franchise. But I was perplexed as to why the movie poster had succeeded so well. 

A series of questions grew in my head: Why was the logo enlarged? Why not show all of it? Why is the only text the release date for the movie? Why not add more colors? Why gold and not yellow as it’s commonly used in the comic books?

That’s when I had the simple revelation that this poster could have been designed a different way led me to realize that the packages and products we interact with in our society don’t have to be designed in the way they are presented. 

Before this poster captivated me, I had assumed packaging and branding was a natural extent of a product’s origin. That the packaging, the logo, the movie poster and so on were shown this way because how they were supposed to look. 

It’s a silly thought thinking about it now, but that’s what I had thought till then.

And this line of thinking led me to find out “graphic design” and that there were schools that taught this sort of thing. 

It’s been many years since that moment and I’ve recently acquired a mint quality poster. The poster that started my path on graphic design and ultimately Web design is now framed and on display in my office. 

It’s a reminder of that one moment many years ago that my world expanded and I realized what I wanted to do with my life.

What about you? When did you realize there was such a thing as graphic design?

The Cindy Li Interview

By admin

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:

Twitter-Sized An Event Apart Presentation Summaries

By admin

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

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

Title Slide

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

The Web Standards Project Book Initiative

By admin

Still recovering from my month-long World Tour (more on that later) which wrapped up in Austin for the annual SXSW Interactive conference. This, I believe, is my fifth year attending SXSW, but it was the first year I didn’t speak, which was a decision I made to let me enjoy more of the conference.

One thing I enjoy is the annual Web Standards Project meeting as it’s usually as much of a Who’s Who as the first one, which I think was the largest Web design and development braintrust ever assembled. (You probably won’t see something like that anytime soon.)

3rd Annual Web Standards Project Meeting

During this year’s meeting, The Web Standards Project took ideas and questions from the audience, and announced the Street Team’s bookmark initiative:

How many outdated web design and development books are lurking in your local library, school or college, waiting to corrupt an innocent mind? Want to warn the unsuspecting of these hazardous materials while encouraging librarians to update their shelves? Join the WaSP Street Team by downloading and printing copies of these bookmarks (PDF 3.4MB). Then place these bookmarks in harmfully outdated books.

On the bookmark is a link pointing containing a list of recommend books that The Web Standards Project have approved. 

I’m happy to note that included on the list are two of my recent books: CSS Cookbook and Adapting to Web Standards. Also, all the books on the list are located on Design Library site, which also include books I also personally recommend.

So, if you’ve got an outdated Web design book or, if you happen to be going to a local library, take a few bookmarks with you and check out their Web design books. 

The Dave Shea Interview

By admin

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

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

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

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

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

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

Dave Shea

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

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

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

CS: How would you describe yourself?

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

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

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

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

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

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

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

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

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

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

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

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

DS: Pretty much. Some during, some after. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CS: What are your design influences?

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

Tennessee Tourist Site

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(Photo: Scott Beale / Laughing Squid)

PNG Transparency for Internet Explorer (IE6 and Beyond)

By admin

Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.

What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:

PNG with transparent layers

PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support. 

This view on PNGs is a bit of a misconception.

While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.

While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.

Microsoft has a plethora of proprietary visual filters and transitions that are available to IE4+. These filters are designed to apply various multimedia affects (transition wipes, light effects and so on) to images in a web page that are viewed with IE. One of these image filters — AlphaImageLoader — lets you display a PNG with alpha-transparency in IE6.

You can employ this filter within the HTML of your page by creating a div element and embedding into it a bit of CSS:


<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='images/image.png',sizingMethod='scale');”></div>

The key property here is the filter property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn’t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-). 

By combining this method, developers can build rich image-based designs with alpha transparency like they would for modern browsers like Safari, Firefox, and Internet Explorer 7 that all supports PNG alpha alpha transparency natively. 

How to Include PNG Transparency in IE6

One available method for doing this is employing Angus Turnbull’s .htc script:

  1. First, download the .htc script at TwinHelix Designs. HTC is a
    scripting language
    only usable by Internet Explorer (because it was created by Microsoft) and this specific script contains applies the AlphaImageLoader filter to all images within a web page. 
  2. After downloadign the script, upload the script to your Web server.
  3. Then, create (or download from TwinHelix) a blank gif file. This image file is 1×1 pixel with the color set as transparent. (Back in the 90s, these were called these gems “single pixel GIFs”). Within the .htc script, change the line that references the blank.gif file so that it points to the gif’s location on the server.
  4. Create a separate CSS file (we’ll name it ie.css), and include within in the following single line, referencing the location of the .htc file: 
    
img { 
 behavior: url(iepngfix.htc); 
}

    The behavior property let’s you attach a script to some selector (in this case, all img elements). So, this CSS file attaches the .htc file to all of your images, thus applying the desired filter effect to every image within a web page. 

  5. But, we only want to load this CSS file when the page is viewed in IE6-. To do this, just add the following conditional comment to your page’s header: 
    
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" 
href="ie.css" />    
<![endif]-->

    Conditional comments like these are understood by IE. What the comment says is, “if the browser is IE6 or below, then read the lines within the comment tags. Otherwise, ignore them.” Conditional comments provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css stylesheet loads only if the page is displayed in IE6‑, letting you apply the non-compliant CSS only when it’s absolutely necessary. 

While a rather convoluted way to get transparent PNGs working in your web pages (although less convulted than my previous method), it does provide a method that is as standards-compliant as possible, giving you the freedom to include the beauty of semi-transparent layers in your designs.

CSS Floats to Display Columns in Any Order

By admin

With my publisher’s permission, I’m sharing the following excerpt from my latest book, CSS Cookbook, Second Edition, which discusses a neat trick for designing multi-column layouts in any order.

Problem

You want to develop a system to display content in columns in any order.

Solution

Given the following markup:


<div id="container-outer">
<div id="container">
 <div id="content" class="column">
  <div class="wrap">
   [...]
  </div>
 </div><!-- /END #content -->

 <div id="navigation" class="column">
  <div class="wrap">
   [...]
  </div>
 </div><!-- /END #navigation -->

 <div id="related-info" class="column">
  <div class="wrap">
   [...]
  </div>
 </div><!-- /END #related-info -->
</div><!-- /END #container -->
</div><!-- /END #container-outer -->

Apply the following CSS rules:


.column {
 float: left;
}

#content {
 margin-left: 20%;
 width: 60%;
}

#navigation {
 margin-left: -80%;
 width: 20%;
}

#related-info {
 width: 19%;
}

/* IEx patches */
* html .column {
 display: inline;
}

* html #navigation li {
 height: 1%;
}
/**/

This will yield the basic page layout that you see in Figure 9–18, with two narrow, flexible-width sidebars bounding an equally flexible center column (see Figure 9–18).

From this rather bland foundation, you can layer additional CSS on top of it. Adding the following code to your CSS will yield a design like Figure 9–19:


body {
 font: normal 62.5%/1.7 Verdana, Geneva, Helvetica, Arial, sans-serif;
 margin: 0;
 padding: 0;
}
#container:after {
 clear: both;
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
}
#container {
 display: inline-block;
}
/* Hide from MacIE5 */
#container {
 display: block;
}
/**/
#container-outer {
 background: url("bg-left.gif") repeat-y 20% 0;
}
#container {
 background: url("bg-right.gif") repeat-y 80% 0;
}
.column .wrap {
 padding: 20px;
}
#content .wrap {
 padding: 20px 30px;
}
#content p {
 margin-top: 0;
}
#content p:first-child {
 font: normal 1.4em/1.6 Georgia, Times, "Times New Roman", serif;
}
#content p:first-child:first-line {
 text-transform: uppercase;
}
#navigation ul, #navigation ul li {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigation ul li {
 margin-bottom: .4em;
}
#navigation li a {
 background: #36C;
 color: #FFF;
 border-left: 7px solid #09F;
 display: block;
 padding: .4em .4em .4em 20px;
 text-decoration: none;
}
#navigation li a:hover {
 border-left: none;
 border-right: 7px solid #09F;
 padding-left: 27px;
}
#related-info {
 color: #555;
 font-style: italic;
}
#copyright {
 border: 1px solid #B2B2B2;
 border-width: 1px 0;
 clear: both;
 padding: 10px 20px;
 text-align: center;
}
#copyright p {
 margin: 0;
}

Discussion

The float model has a storied history. The authors of the CSS specification never intended floats to be used for page-level layout control: rather, they were a means to control the flow of content around an object, much as align="left" or align="right" would cause text to wrap around an img element. But despite the specification’s original spirit, floats do offer us a powerful and flexible alternative to traditional, table-based layout techniques.

Alex Robinson, a designer, published an influential article on creating the “Any Order Columns” in CSS. Robinson’s technique allows developers to create multicolumn layouts easily by using floats to display each column in any order, regardless of the order in which those blocks appear in the markup.

The Markup

To work with this technique, first you need to establish columns in your markup, like so:


<div id="container">
 <div id="content" class="column">
  [...]
 </div><!-- /END #content -->

 <div id="navigation" class="column">
  [...]
 </div><!-- /END #navigation -->

 <div id="related-info" class="column">
  [...]
 </div><!-- /END #related-info -->
</div><!-- /END #container -->

<div id="copyright">
 <p>Copyright notice goes here.</p>
</div>

Inside each div, place any markup you would like. Figure 9–20 shows what the unstyled document looks like, with a few paragraphs and an unordered list thrown in for good measure.

From this demonstration so far, a div element is set up for each of your three columns, and each is assigned an id that describes the kind of content that will be placed inside. In this solution, the values for id are content, navigation, and related-info. It would have been just as easy to use center, left, and right, but that wouldn’t have been especially forward-thinking: what happens when you change your site’s CSS file, and the new design requires the “left” div to appear on the righthand side of the page?

Defining the Columns

With this simple markup structure in place, you can apply a generic float rule to all three column divs:

    
.column {
 float: left;
}

As you see in Figure 9–21, the layout does not look drastically different. The copyright text is a bit out of alignment, but the bulk of your page appears as it did before with each column div stacking horizontally. Once dimensions are assigned to these blocks, however, things rapidly change.

First, start with the content block. To set the block to be 60% of the window width, and the width of the lefthand sidebar to be 20% of the screen, create the following rule:


#content {
 margin-left: 20%;
 width: 60%;
}

Figure 9–22 shows that the layout is looking a bit odd, but starting to take shape.

By setting a lefthand margin equal to the width of your lefthand sidebar, you’ve essentially “reserved” some space for it. The next step is to use negative margins to “pull” the navigation div across the content div to the lefthand side of the page:


#navigation {
 margin-left: -80%;
 width: 20%;
}

The margin-left value applied is a sum of the width of the center column (60%) and its lefthand margin (20%). This pulls the navigation column over to its proper place (see Figure 9–23).

Now, simply by setting a width on the related-info block, the three-column layout is complete, as shown in Figure 9–24:


#related-info {
 width: 20%;
}

Looks excellent, although the copyright div is still a bit off. But with the clear property, that’s easily fixed (see Figure 9–25):


#copyright {
 clear: both;
}

Although the layout may look as though your columns are nearly complete, Figure 9–26 shows you that Internet Explorer on Windows needs a little extra attention.

Thankfully, this is a documented IE bug known as the “Doubled Float-Margin Bug”: essentially, when a margin is applied to a floated box in the same direction as the float, that margin is doubled in size.

Since a lefthand margin is applied to a left-floated element, IE on Windows takes that 20% margin and doubles it to 40%.

Thankfully, the fix is a simple one. By applying display:inline to the problematic element, Internet Explorer behaves again. To do this, add the following lines to your CSS:


/* IEx patches */
* html .column {
 display: inline;
}
/**/

The oddly formatted comments and * html prefix ensure that this code is seen by IE on Windows, and IE on Windows alone. And as Figure 9–27 shows, IE is behaving properly.

So you’ve arrived at last: a flexible, three-column layout template. But where else can you take this?

Creating Whitespace

The space between the columns is called a gutter. To customize this layout by increasing the size of the gutters, an approach would be to apply some margins around the columns. There are a number of ways to achieve this effect, but first start by adding an additional div to each of your columns, like so:


<div id="container">
 <div id="content" class="column">
  <div class="wrap">
   [...]
  </div>
 </div><!-- /end #content -->

 <div id="navigation" class="column">
  <div class="wrap">
   [...]
  </div>
 </div><!-- /end #navigation -->

 <div id="related-info" class="column">
  <div class="wrap">
   [...]
  </div>
 </div><!-- /end #related-info -->
</div><!-- /end #container -->

With your “wrap” divs in place, apply padding to them with CSS to create more breathing room (see Figure 9–28):


.column .wrap {
 padding: 20px;
}

#content .wrap {
 padding: 20px 30px;
}

Adjusting the Order of Columns

As you may have noticed by now, the “Any Order Columns” method is grounded in the intelligent use of margins: positive margins are used to reserve space, while negative margins are used to “pull” columns out of their natural position.

Now simplify the CSS for a moment, and remove all the column margins:


#content {
 width: 60%;
}
#navigation {
 width: 20%;
}
#related-info {
 width: 19%;
}

As a result, your layout now looks like Figure 9–29, with each column appearing in its natural position in the float order.

By adding a lefthand margin to your navigation div, and then by using a negative lefthand margin to move your related-info div, you can essentially reverse the order of the second two columns. With the following CSS, you’re left with a layout like Figure 9–30:

#content {
 width: 60%;
}
#navigation {
 margin-left: 20%;
 width: 20%;
}
#related-info {
 margin-left: -39%;
 width: 19%;
}

And to complete the demonstration, place the content column on the righthand side of the page, as shown in Figure 9–31.

To do so, apply the following code:


#content {
 margin-left: 40%;
 width: 60%;
}
#navigation {
 margin-left: -100%;
 width: 20%;
}
#related-info {
 margin-left: -80%;
 width: 19%;
}

As with the first layout, you’ve applied a margin to the content column in order to “reserve” some whitespace on the lefthand side of our page. Then, you’ve used negative lefthand margins to pull the navigation and “related information” divs into the proper location.

Page Layout Algorithm

A simple way to calculate rearranging columns is to follow a somewhat simple algorithm used to calculate the negative margins for a column:

  1. For the column you want to determine its negative margin, first calculate the rightmost point for all columns that precedes it in the source code.
  2. Then specify the leftmost point for the column.
  3. Finally, subtract the rightmost value from the leftmost to give the left margin for the element.

If this technique doesn’t work, there’s always good ol’ trial and error.

Faking Columns

Now return to your first layout (see Figure 9–32), and see how you can make your columns feel, well, a bit more polished. The first step? Background images.

“Faux columns” is a technique developed by web designer Dan Cederholm that utilizes a horizontally repeating background image.

By using one tiled image, Cederholm’s method works incredibly well in a fixed-width design: however, the technique’s versatility means that it needs only slight modification to work in our fully flexible layout.

First, you need two images, one for each side of the content column. Figure 9–33 shows the lefthand graphic, while Figure 9–34 shows the right.

Next, you’ll need to wrap your container block in an extra div, like so:


<div id="container-outer">
 <div id="container">
  [Rest of template goes here]
 </div>
</div>

And finally, you’ll need to add the following rules to your style sheet:


#container:after {
 clear: both;
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
}
#container {
 display: inline-block;
}
/**/
#container {
 display: block;
}
/**/
/**//*/
#container {
 display: inline-block;
}
/**/
#container-outer {
 background: url("bg-left.gif") repeat-y 20% 0;
}
#container {
 background: url("bg-right.gif") repeat-y 80% 0;
}

With this code in place, the columns appear as full-length columns, like the ones in Figure 9–35.

From here, feel free to add any typographic styles you’d like; the ones supplied in the Solution section of this recipe will do nicely, and will yield the finished design shown in Figure 9–36.

An Alternative Solution

The float model for laying out pages is powerful, but floats can have a rather steep learning curve. As a result, many designers find absolute positioning to be an attractive alternative, enabling them to precisely position the different components of their design with x- and y-coordinates.

Unfortunately, positioned elements are taken “out of the document flow,” which effectively collapses their containing element. As a result, “positioned” designs lack the powerful float concept of clearing, which enables the different parts of your designs to be “context-aware”: that is, a footer div (such as the copyright block in the solution, earlier) can be cleared of the floated blocks above it, but not of any positioned elements on the page.

Shaun Inman, a talented web designer/developer, has written a lean JavaScript function to fix this problem. When inserted into your web pages, Inman’s script will automatically “clear” elements of any other positioned elements on the page (see Figure 9–37).

The only potential drawback to this method is that it does rely on JavaScript being active in the user’s browser. But if your content is accessible if you disable JavaScript in your target browsers during testing, then all should be well.

Suspicious Death Scene Under Investigation

By admin

A new design blog, A Brief Message, launched today. Keeping guest editorials to under 200 words, the blog is aimed at featuring deep thoughts about design-related issues from people of all walks of life.

The site design itself is a lovely piece of work by Khoi Vinh and, under the editorial direction of Liz Danzico, can only grow to be a success. I will be checking regularly.

However, I laugh at the opening editorial which touches on the point that print is dead by way of David Carson’s book, The End of Print. As my friend, Katrina, said the concept of print being dead is “very bourgeois”.

Print is not dying. It’s simply becoming more special than it has been in generations. In the age of instant swapping of MP3s and movies, the entertainment industry is looking for value-added products.

For example, U2 released a collector’s edition of their latest albium that included a small, limited edition book to get die-hard fans to buy one or more versions of the album.

If print is dead or dying, the site’s design is proof enough that print design will live on in other media. The site, while looking very sharp, has roots in print design.

Take a gander at the design elements: grid layouts, short column widths, text wrapping, typefaces other than Georgia or Times, and so on. It oozes non-interactive style.

Brief Message animation

Also, if you resize the fonts of the browser, you will notice that the design of the site shows doesn’t shore up the design integrity when the browser’s default text is resize. As the text enlarges, it overlaps the images and making the editorial itself hard to read, but it gives the design a more dynamic flare.

If David Carson amusingly killed print, then I believe he might also enjoy this version of the site, too.

Free Copy of Releasing CSS

By admin

Releasing CSS: How I Learned to Stop Worrying and Love IE7 covers designing with CSS for Microsoft’s latest and greatest: Internet Explorer 7. 

Releasing CSS

The fine publisher, O’Reilly, wants to distribute a few free copies to those who would post a review on your blog. So, if you would like a free copy and wouldn’t mind writing a Summer book report, comment on this post making sure to include your blog’s Web address. 

Many may enter, a few will get ’em. So, post a comment and good luck!